Rails Action Cable入門｜チャネル・接続・サブスクライブの基本を図解でやさしく解説

1. Railsとリアルタイム通信の全体像

1. Railsとリアルタイム通信の全体像

Railsは、Webアプリケーションを作るためのフレームワークです。通常のWebページは、ボタンを押したり画面を更新したときにだけ、サーバーと通信します。一方で、チャットや通知のように、自動で情報が届く仕組みを実現するのがリアルタイム通信です。

Action Cableは、Railsに最初から用意されているリアルタイム通信の機能で、WebSocketという技術を使います。これは電話のように、つながったまま情報をやり取りできる通信方法だと考えると分かりやすいです。

2. WebSocketとは？HTTPとの違いをイメージで理解

2. WebSocketとは？HTTPとの違いをイメージで理解

普段のWeb通信はHTTPという仕組みで行われます。これは「質問して、答えをもらったら終わり」という一往復のやり取りです。

一方、WebSocketは「ずっと電話がつながっている状態」に近く、サーバーからも自由に話しかけることができます。そのため、メッセージの即時反映や通知表示が可能になります。

Action Cableは、このWebSocketをRails流に安全で簡単に扱えるようにまとめたものです。

3. Action Cableの構成｜接続・チャネル・サブスクライブ

3. Action Cableの構成｜接続・チャネル・サブスクライブ

Action Cableは、大きく分けて接続（Connection）、チャネル（Channel）、サブスクライブという3つの考え方で成り立っています。

接続は「誰がつながっているか」を管理し、チャネルは「どの話題の部屋か」を表します。サブスクライブは「その部屋を聞く」と宣言する行為です。ラジオ番組に例えると、チャンネルを合わせるイメージです。

4. 接続（Connection）の基本的な役割

4. 接続（Connection）の基本的な役割

接続は、ブラウザとサーバーがWebSocketでつながった瞬間に動きます。ここでは、ユーザーを識別したり、アクセスを許可するかどうかを判断します。

# app/channels/application_cable/connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = "ゲスト"
    end
  end
end

この例では、つながってきた人を「ゲスト」として扱っています。初心者のうちは、難しく考えず「最初の入口」と覚えると十分です。

5. チャネル（Channel）とは何か

5. チャネル（Channel）とは何か

チャネルは、リアルタイム通信の話題ごとの部屋です。チャットルームや通知専用の場所など、用途ごとに作ります。

# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_room"
  end
end

ここでは「chat_room」という名前の部屋に参加しています。同じ部屋に参加している人全員が、同じ情報を受け取ります。

6. サブスクライブの流れを図で考える

6. サブスクライブの流れを図で考える

サブスクライブとは「このチャネルの情報を受け取ります」と宣言することです。ブラウザが接続し、チャネルを指定し、サーバーが許可すると通信が始まります。

図で考えると、ブラウザ → 接続 → チャネル → 情報配信という一方向の流れになります。初心者は、この順番だけ覚えておくと混乱しません。

7. クライアント側JavaScriptの役割

7. クライアント側JavaScriptの役割

Action Cableは、ブラウザ側でも少しだけ設定が必要です。JavaScriptが、どのチャネルに接続するかを指定します。

import consumer from "./consumer"

consumer.subscriptions.create("ChatChannel", {
  received(data) {
    console.log(data)
  }
})

このコードは「ChatChannelを購読して、データを受け取ったら表示する」という意味です。細かい文法は、今は理解できなくても問題ありません。

8. サーバーからデータを送る基本例

8. サーバーからデータを送る基本例

最後に、サーバー側からメッセージを送る例を見てみましょう。これは通知やチャット送信の元になります。

ActionCable.server.broadcast(
  "chat_room",
  message: "こんにちは"
)

この一行で、「chat_room」を聞いている全員にメッセージが届きます。Action Cableの強力さが、ここに集約されています。