はじめに
WebアプリケーションフレームワークのRuby on Railsは、2021年12月にバージョン7となりました。これに伴い、クライアントサイド開発のサポートについても大きな変化を遂げ、多様な選択肢が提供されるようになりました。本連載では、このRails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら、紹介していきます。
対象読者
- Ruby on Railsを長らく使ってきた方
- 他のWebアプリケーション開発フレームワークを使ってきた方
- Railsにおけるフロントエンド開発に関心のある方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
macOS Monterey
- Ruby 3.1.0p0
- Ruby on Rails 7.0.4.2
- Google Chrome 112
Action Cableとは？
Action Cableは、Rails 5から実装された、リアルタイム通信のためのフレームワークです。Action Cableにより、チャット、SNSのようなリアルタイム性が重要なアプリケーションをRailsで作成できます。Action Cableはフルスタックのフレームワークであり、サーバ側のコンポーネントとクライアント側のコンポーネントの双方が提供されます。つまり、Railsだけで完結したリアルタイムWebアプリケーションを開発できます。
Action Cableの動作モデル
Action Cableの動作モデルはやや複雑で、かつ独特の用語が登場してくるので、それが理解を難しくしているところもあります。まずは、Action Cableの動作モデルを図1に示し、そこに登場する要素と用語について概要をまとめておくことにします。
チャネル
Action Cableでは、Railsアプリケーションで使われるコントローラやビューといったコンポーネントとは別に、チャネルというコンポーネントが中心的な役割を果たします。チャネルとは、リアルタイム通信におけるサーバのようなもので、テレビのチャンネルのようにメッセージを配信する役割を持ちます。テレビに複数のチャンネルがあるのと同様に、一つのアプリケーションに複数のチャネルを持たせることができます。
コンシューマとサブスクリプション
チャネルからメッセージの配信を受ける側はコンシューマと呼ばれます。コンシューマはチャネルのクライアントであり、チャネルにサブスクライブ（購読）することでメッセージの配信を受けられるようになります。このため、コンシューマはサブスクライバと呼ばれることもあります。また、購読そのものはサブスクリプションと呼ばれます。一つのコンシューマは複数のサブスクリプションを持つことができ、それはすなわち異なるチャネルから配信を受けられることを意味します。Action Cableにおけるコンシューマの機能は、JavaScriptライブラリによって提供されます。
コネクション
コンシューマとチャネルの間の接続は、文字通りコネクションと呼ばれます。特筆すべきなのは、コネクションはデバイス単位ではなくWebブラウザのタブ単位で作成されるという点です。つまり、同一のユーザがいくつものブラウザタブを開いて同じチャネルにアクセスしたとしても、それらは異なるコネクションとして認識され、サブスクリプションも別のものになるということです。
ストリームとブロードキャスト
最後は、ストリームです。サブスクリプションへの配信はブロードキャストと呼ばれ、ストリームにコンテンツを送り込むことで実行されます。チャネルでは、サブスクリプションとストリームのひも付けを管理していて、あるストリームに紐付いているサブスクリプションにのみ配信を実行します。
［NOTE］WebSocket
Action Cableでは、Websocketを使った通信を行います。WebSocketとは、サーバ・クライアント間における非同期通信のための、HTTPを拡張したプロトコルです。最初こそHTTPによる通信を行いますが、WebSocketの接続確立後は独自の通信プロトコルに移行し、フレームと呼ばれるテキストまたはバイナリ形式のフォーマットでデータをやり取りします。上記のコンシューマやコネクションという用語は、このWebSocketに基づいたものです。
WebSocketを使うには、サーバとクライアントの双方が対応している必要がありますが、最新のWebサーバとモダンブラウザでは、問題なく利用できます。Railsの開発用WebサーバであるPumaも、WebSocketに対応しています。
［NOTE］Pub/Subモデル
Action Cableにおけるメッセージ送受信モデルは、Pub/Subモデル（Publisher/Subscriberモデル、発信者/購読者モデル）と呼ばれます。Pub/Subモデルには、主にメッセージを発信するパブリッシャとメッセージを受け取るサブスクライバの二つが存在します。パブリッシャとサブスクライバの間にはチャネルが介在し、そこでメッセージのやり取りが行われます。パブリッシャはチャネルにメッセージを送信し、サブスクライバはチャネルからメッセージを受信するというに、パブリッシャとサブスクライバが直接やり取りしないのが特徴となっています。
ここまで、Action Cableのモデルや用語を紹介しましたが、以降は「コンシューマ＝クライアント」として、サーバ／クライアントという表現で解説します。
