Hotwire を使用してインタラクティブな Rails アプリをすばやく構築する:初心者ガイド

Hotwire は現在、すべての Rails 開発者にとってホットなトピックです。Rails を使用している場合は、すでに Hotwire についてよく聞いたことがあるでしょう。

Hotwire は、わずかなコード行でアプリにインタラクティブ性を追加するまったく新しい方法で、HTML を有線で送信することで非常に高速に動作します。つまり、ほとんどのシングル ページ アプリケーション (SPA) フレームワークから手を汚さずに済みます。また、ページの読み込み時間の短縮と対話性を維持しながら、レンダリング ロジックをサーバー上で集中管理することもできます。

この記事では、Hotwire の主なコンポーネントと、Rails アプリでの Hotwire の使用方法について説明します。まず最初に、Hotwire とは何ですか? なぜそれを使用する必要があるのでしょうか?

ホットワイヤーとは何ですか?

Hotwire は単一のライブラリではなく、HTML を回線経由で送信することで Web およびモバイル アプリケーションを構築するための新しいアプローチです。これには、Turbo、Stimulus、Strada (今年後半に登場) が含まれています。これらについては、次のセクションで詳しく説明します。

補足 :Hotwire は Rails と高度にリンクされていますが、完全に言語に依存しないため、他のアプリケーションでも同様に動作します。私は、いくつかの非 Rails アプリといくつかの静的 Web サイトの実稼働環境で Stimulus を使用してきました。 Rails なしで Turbo を使用することもできます。

しかし、ここでは Rails の世界に戻りましょう。

Rails アプリで Hotwire を使用する理由

では、どのような場合に Hotwire を使用する必要があるのでしょうか?答えは、アプリケーションに対話性を追加したい場所であればどこにでもあります。たとえば、次のようにしたい場合:

• ユーザーの操作に基づいて条件付きで表示 / 非表示になる一部のコンテンツ（例:選択した国に基づいて州のリストが自動的に変更される住所フォーム）
• 一部のコンテンツをリアルタイムで更新するため（例:新しいツイートが自動的にページに追加される Twitter のようなフィード）
• ページの一部を遅延読み込みするには（たとえば、アコーディオン内で、タイトルを読み込み、詳細を遅延読み込みするようにマークして、読み込み時間を短縮できます）

ホットワイヤーコンポーネント

前に述べたように、Hotwire は Web アプリを構築するための新しい (および古い) テクニックを集めたものです。

次のいくつかのセクションで、これらについてそれぞれ説明しましょう。

ターボ

HTML は、その中核で Turbo を駆動します。Turbo は、ネットワーク経由で受信する HTML データを処理し、ページ全体のリロードを実行せずにアプリケーションに表示するためのいくつかの技術を提供します。これは次のもので構成されます。

• ターボドライブ

  これまでに Turbolinks を使用したことがある場合は、Turbo Drive が使いやすいと感じるでしょう。その中核となる部分では、一部の JS コードがアプリケーション上の JavaScript イベントをインターセプトし、HTML を非同期でロードし、HTML マークアップの一部を置き換えます。

• ターボ フレーム

  ターボ フレームは、マークアップの一部を個別にロードできる異なるセクションに分離します。

  たとえば、ブログ アプリケーションをお持ちの場合、投稿のコンテンツとコメントは、ページの 2 つの関連はありますが独立した部分です。これらを分離して、ナビゲーションが独立して動作するようにしたり、ターボ フレームを使用して非同期で読み込んだりすることもできます。

• ターボストリーム

  Turbo Streams は、アプリケーションにリアルタイム データを簡単に取り込むためのユーティリティを提供します。たとえば、Twitter のようなニュース フィードを構築しているとします。新しいツイートが投稿されるとすぐに、ページを再読み込みせずにユーザーのフィードに新しいツイートを取り込みたいと考えています。Turbo Streams を使用すると、JS を 1 行も記述することなくこれを行うことができます。

• ターボネイティブ

  Turbo Native を使用すると、Web アプリケーションの周りにネイティブ ラッパーを構築できます。すべての画面をネイティブにやり直す必要がなく、ナビゲーションとインタラクションがネイティブに感じられます。

  アプリケーションの残りの部分は引き続き Web 経由で配信します。こうすることで、アプリケーションの実際にインタラクティブな部分に焦点を当て、それらを正しく行うことができます。

刺激

Stimulus は、HTML と対話するコントローラを作成するための JavaScript フレームワークです。

data-controller のような JavaScript 属性を追加する必要があるとします。 、data-action 、および data-target ページ上の要素に。これらの属性に基づいてイベントを受け取る要素にアクセスできるスティミュラス コントローラーを作成します。例を次に示します。

関連する Stimulus コントローラーを読まなくても、これが何をするのかを理解するのは非常に簡単です。

以下は HTML に対応するコントローラです。

それが Stimulus の核心であり、物事をシンプルかつ再利用可能に保つことです。

これで、別のページでクリップボードにコピー ボタンが必要になった場合は、そのコントローラを再利用するだけで済みます。 data-* を追加します すべてが機能するようにマークアップの属性を変更します。

ストラーダ

残念ながら、Strada についてはまだよくわかっていません。しかし、これにより、Web アプリケーションが HTML ブリッジ属性を使用してネイティブ アプリケーションと通信 (場合によってはアクションを実行) できるようになります。

Ruby on Rails アプリケーションで Hotwire を使用する方法

Hotwire のインストールや基本的な使用例について議論するのにあまり時間をかけたくありません。Hotwire チームはすでに Hotwire スクリーンキャストで素晴らしい仕事をしています。完全な手順については、turbo-rails を参照してください。 インストールと Stimulus インストール。

早速、一般的な Hotwire の使用例をいくつか紹介しましょう。

エンドレススクロール

ターボ フレームを使用すると、ユーザーがスクロールすると自動的にページネーションされるページを簡単に作成できます。このためには、次の 2 つのことを行う必要があります。

<オル>

フレーム ID にページ番号を追加して、独自のフレーム内に各「ページ」をレンダリングします (例:turbo_frame_tag "posts_#{@posts.current_page}") ).

lazy を使用します 次のページのフレームを設定し、表示されない限り自動的に読み込まれないようにします。

この例では Kaminari のメソッドを使用していますが、他のページネーション メソッドにも適用できることに注意してください。

コントローラーには特別なものは何も必要ありません。標準の index メソッドは機能します:

ここでのコツは、ネストされたフレームを使用し、次のページのフレームが前のページのフレーム内にネストされていることです。こうすることで、最初のページが読み込まれると、次のページのフレームが最後に配置されます。ユーザーがそのフレームにスクロールすると、フレームは 2 番目のページのコンテンツに置き換えられます。3 番目のページの遅延フレームは最後にレンダリングされます。

動的フォーム

フロントエンドでフィールドを切り替えるためのカスタム ロジックを使用せずに、Hotwire を使用して動的フォームを簡単に実装できます。これには、ターボ ストリームとスティミュラスの両方の使用が含まれるため、エンドレス スクロールのユースケースよりも少し複雑になります。

まずはフォームから始めましょう。

フォームは非常に単純です。kind が表示されます。 News で選択します と Blog 選択された種類に基づいて、利用可能なカテゴリの値を変更したいとします (categories_for_kind(@post.kind) と仮定します) 指定された種類のカテゴリのリストを返します)。

よく見ると、フォームにいくつかのデータ属性が追加されていることがわかります。data-target フォーム要素を RefreshFormController にリンクします。 スティミュラス コントローラーの form ターゲット。そして data-action change->refresh-form#refreshForm の値 refreshForm を呼び出します kind が実行されるたびに、リンクされたスティミュラス コントローラーのメソッド 選択が変更されました。

刺激コントローラーを見てみましょう:

すべての refreshForm で 呼び出しの場合は、新しい PUT を作成するだけです。 コントローラの URL へのリクエスト (data-refresh-form-url を使用して設定) data-controller="refresh-form" を使用して同じ要素に ).ここで重要な部分は、responseKind であるということです。 turbo-stream に設定されています .@rails/request ライブラリはこの応答を理解し、応答ストリームに基づいて命令を実行します。

あとは refresh_form から正しいストリームを返すだけです。 Turbo にフォームを理解して更新してもらいます。

投稿の属性を更新し、turbo_stream で返信することをマークするだけです。 形式 (refresh_form.turbo_stream.erb を検索するため) ).

このステップでは、form を再利用します。 部分的、turbo_stream 内にラップ replace を使用 アクション。

動的フォームを機能させるために必要なのはこれだけです。これは少し高度なことのように見えますが、refresh スティミュラス コントローラーは共有パーツであり、正しい data-* を追加することですべての動的フォームに使用できるようになりました。 つまり、基本的に、他のフォーム用に新しい JS を作成しなくても、サーバー側で動的フォームを更新できるようになります。非常に素晴らしいですよね?

再読み込みせずにコンテンツをページに追加する

Hotwire で簡単にできる次の使用例は、WebSocket 接続を介して HTML をストリーミングし、新しいコンテンツが入ってくるとページを更新することです。この良い例は、GitHub のコメント セクションです。これは、Turbo Streams を使用して非常に簡単に実装できます。

これには 2 つの部分があります。

まず、サーバーへの WebSocket 接続を開いてイベントをリッスンするターボ ストリーム リスナーをリスト ページに埋め込みます。

次に、モデルを更新して、新しいコメントをストリームにブロードキャストします。

他には何も必要ありません。 Turbo は app/views/comments/_comment.html.erb を自動的にレンダリングします。 新しいコメントごとに部分的に変更し、WebSocket 接続経由で送信します。これは Turbo の JS によって取得され、ID comments がターゲットの先頭に付加されます。 .

一歩進んで、小さな Stimulus コントローラーを使用して、新しく追加されたすべてのコメントに指示を追加してみましょう。

まず、ブロードキャストと comment を変更します。 条件付きでコントローラを含めるには部分的です。

この小さな Stimulus コントローラは、接続時に特別なハイライト クラスを 3 秒間追加し、その後削除します。

メモ :そのクラスの存在に基づいて CSS ハイライトを更新する必要もあります。

このコントローラが完成したら、ハイライト クラスを必要とするあらゆるものに再利用できます。柔軟性が必要な場合は、データ属性から期間とクラス名を取得するようにコントローラを変更することもできます。

それが Hotwire の素晴らしいところです。長い道のりを必要とするのに、JS に手を浸す必要はありません。JS を記述する必要がある場合、Stimulus は再利用できる小さな汎用コントローラーを構築するツールを提供します。

まとめと続きの読み物

Rails コミュニティは Hotwire の導入に非常に興奮していますが、それは当然のことです。

この投稿では、Hotwire の主要コンポーネントと、Rails アプリで Hotwire を使用する方法について説明しました。 Turbo と Stimulus を使用してアプリケーションを実現する方法について触れました。

公式 Hotwire スクリーンキャストの紹介と Turbo ドキュメントは、Hotwire と Turbo がどのような機能を提供できるかを知るのに最適な場所です。

高度な使用方法については、turbo-rails GitHub リポジトリにアクセスすることをお勧めします。残念ながら、ドキュメントは少し少ないですが、手を汚すことを恐れない場合は、次のコードとインライン コメントを読んでください。

<オル>

Turbo::FramesHelper ターボ フレーム用 .

Turbo::Broadcastable ターボ ストリームへのブロードキャスト用 コードから。

Turbo::Streams::TagBuilder ターボ ストリームへのブロードキャスト用 インライン コントローラ アクションの一部として。

コーディングを楽しんでください!

追記Ruby Magic の投稿を報道後すぐに読みたい場合は、Ruby Magic ニュースレターを購読して、投稿を 1 つも見逃さないようにしてください。

サパン ディワカール

ゲスト著者の Sapan Diwakar はフルスタック開発者です。彼は自分の興味のあることについてブログに書いており、生活でもコードでも物事をシンプルにすることが大好きです。テクノロジーに取り組んでいないときは、庭で時間を過ごしたり、森の周りをハイキングしたり、アウトドア スポーツをしたりするのが大好きです。

サパン・ディワカール

によるすべての記事