Action Cableを使ったRailsアプリケーションの作成

Ruby on Railsは、ウェブアプリケーションを迅速に開発するための強力なフレームワークです。その中でも、Action Cableはリアルタイム機能を簡単に実装できる素晴らしいツールです。本記事では、Action Cableを使ってRailsアプリケーションを作成する方法について、詳しく解説します。

Action Cableとは？

Action Cableは、Railsに組み込まれたWebSocketフレームワークです。これにより、サーバーとクライアント間で双方向通信が可能になり、リアルタイム機能を持つアプリケーションを簡単に構築できます。例えば、チャットアプリや通知システムなど、ユーザーが即座に情報を受け取る必要がある場面で非常に役立ちます。

Action Cableの特徴

双方向通信: サーバーとクライアント間でリアルタイムにデータを送受信できます。
簡単なセットアップ: Railsに組み込まれているため、特別な設定なしで使用できます。
スケーラビリティ: 複数のクライアントが同時に接続できるため、大規模なアプリケーションにも対応可能です。

Action Cableの基本的な使い方

それでは、Action Cableを使った基本的なアプリケーションの作成手順を見ていきましょう。ここでは、シンプルなチャットアプリを例にします。

1. Railsアプリケーションの作成

まずは新しいRailsアプリケーションを作成します。以下のコマンドを実行してください。

$ rails new chat_app --skip-javascript
$ cd chat_app

2. Action Cableのセットアップ

次に、Action Cableを使用するための設定を行います。まず、チャット用のチャネルを作成します。

$ rails generate channel Chat

これにより、`app/channels/chat_channel.rb`というファイルが生成されます。このファイルを開いて、以下のように編集します。

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    ActionCable.server.broadcast "chat_channel", message: data['message']
  end
end

3. ビューの作成

次に、チャットのインターフェースを作成します。`app/views/layouts/application.html.erb`に以下のコードを追加します。




  ChatApp
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>

4. JavaScriptの設定

次に、JavaScriptを使ってAction Cableに接続します。`app/javascript/channels/chat_channel.js`を作成し、以下のコードを追加します。

import consumer from "./consumer"

const chatChannel = consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    const messages = document.getElementById('messages')
    messages.innerHTML += `${data.message}`
  },

  speak(message) {
    this.perform('speak', { message: message })
  }
})

document.getElementById('send_message').addEventListener('click', () => {
  const input = document.getElementById('message_input')
  chatChannel.speak(input.value)
  input.value = ''
})

5. サーバーの起動

すべての設定が完了したら、サーバーを起動します。以下のコマンドを実行してください。

$ rails server

ブラウザで`http://localhost:3000`にアクセスすると、チャットアプリが表示されます。複数のタブで開いてメッセージを送信すると、リアルタイムでメッセージが表示されることを確認できます。

Action Cableのセキュリティ

Action Cableを使用する際には、セキュリティにも注意が必要です。以下のポイントを考慮してください。

認証: ユーザーがチャネルに接続する前に、適切な認証を行うことが重要です。
権限管理: ユーザーがアクセスできるチャネルを制限することで、情報漏洩を防ぎます。
データの検証: 受信したデータを適切に検証し、不正なデータが送信されないようにします。

まとめ

Action Cableを使うことで、Railsアプリケーションにリアルタイム機能を簡単に追加できます。今回の例では、シンプルなチャットアプリを作成しましたが、他にも様々な用途に応用可能です。Action Cableを活用して、よりインタラクティブなアプリケーションを作成してみてください。

このガイドが、Action Cableを使ったRailsアプリケーションの開発に役立つことを願っています。質問やフィードバックがあれば、ぜひコメントしてください！