Hotwireかんたん入門

2022年7月12日 11:54

こんにちは。万葉でエンジニアをしている金山です。

前回の記事「万葉は Hotwire を推していきます！」では、Rails7 の標準となった Hotwire（HTML OVER THE WIRE）を万葉も推進していきたい、ということをCEO & CTOが書きました。続く本記事では、 Hotwire についてはまだ詳しく知らないという方に向けて、概要をわかりやすく説明してみたいと思います。

Hotwireとは？

近年、モダンなWebアプリケーションは、React や Vue.js などを用いたSPA(Single Page Application) として開発されることが多くなっています。このアプローチでは、アプリケーションをクライアントサイドとサーバサイドの２つに分け、サーバサイドはクライアントから利用できる API を用意し、レスポンスとして JSON を返します。クライアントサイドは、JavaScript で構築されます。

これに対して、Hotwire は、サーバサイドのアプリケーションのみで、SPA風のアプリケーションを開発することができる仕組みです。SPAのようにサーバから JSON を返したり、JavaScript を駆使してクライアントアプリケーションを構築しなくとも、サーバからブラウザに HTML を返すだけで、Hotwire がうまくSPA風にしてくれます。

Hotwire の構成要素

Hotwire は Turbo、Stimulus、Strada という3つの技術によって構成されます。ただし、Strada はまだ詳細な情報は公開されていないネイティブアプリ向けのコンポーネントなので、ここでは Turbo、Stimulus の2つの技術について説明します。

Turbo

Turbo は、クライアントサイドで画面のロードや DOM の変更を賢く行ってくれます。そのおかげで、サーバサイドではシンプルに HTML を返すだけで、SPA風のアプリケーションを実現できます。Rails では turbo-rails gem を通じて、より手軽に Turbo を利用できます。

Turbo は以下の4つの技術から構成されています。（これらの詳しい使い方や、使い分けについては、今後の記事にてご紹介していければと思っています。）

Turbo Drive
リンクのクリックやフォームの送信を監視し、ページ全体をリロードすることなく画面を更新できるようにします。Turbolinks というライブラリが元となっています。
Turbo Frames
画面内で指定した特定のエリアの部分更新・遅延読み込みを行うことができます。
Turbo Streams
サーバサイドから DOM 更新の指示を含んだ HTML を送出することで、画面の変更を実現できます。要素の追加、置換、更新、削除など7つのアクションを指定することができます。
Turbo Native（iOS、Android）
Turbo 対応のWebアプリケーションをラップしたネイティブアプリを開発するためのツールを提供します。

Stimulus

Stimulus は、JavaScript を HTML と適切に切り離し、整理して書くことのできる枠組みです。

Railsでは、stimulus-rails gemを通じて Stimulus を手軽に利用できます。たとえば、Stimulus ではまとまった機能のかたまりを controller として作っていきますが、その際に、Railsエンジニアにはお馴染みの rails generate コマンドでひな形を作成することができます。

$ bin/rails generate stimulus controllerName

使ってみた所感

Hotwire を使ってみて、率直に「便利！」と感じました。特に開発体験において以下のようなメリットから、Hotwire を使った開発は、個人的におすすめできると感じています。

シンプルな統一されたやり方で、Railsのおすすめに沿って、モダンなアプリケーションを構築することができる
Railsに慣れた開発者がサーバサイドに集中できる
JavaScript が書きやすく、管理しやすい
React や Vue.js などのフロントエンドライブラリ/フレームワークを導入するのに比べて学習コストが低い
クライアントサイドとサーバーサイドで分業する必要がなくトータルの開発コストが低い

おすすめの学習方法

最後に、もっと詳しく知りたい・実際に動かしてみたい方向けに、学習方法や参考情報を紹介します。

デモからチュートリアルへ

デモでイメージを掴み、チュートリアルで手を動かしてみるのがおすすめです。筆者の場合は大まかに以下の流れで Hotwire について学びました。

Hotwire: The Demo を視聴して Hotwire でできることのイメージをつかむ
チュートリアル Hotrails - Learn modern Ruby on Rails with Hotwire で手を動かす
2 と並行して Rails7 × Hotwire で自作アプリを開発する

チュートリアル Hotrails - Learn modern Ruby on Rails with Hotwire は、Hotwire について Turbo、Stimulus、リアルタイム配信などのポイントをしっかりおさえており、各機能の解説も丁寧です。Hotwire でできることを一通り体験するのにとても便利でした。