チャットアプリ開発① グループ機能 〜 paramsで配列を使う【week 4】

こんにちは、Manamiです！



スクールで勉強し始めて、ちょうど1か月になりました。（早い…！） 今週は、個人でのチャットアプリ開発と、チームでの写真投稿アプリ開発の2つの課題を同時進行で進めており、なかなか盛りだくさんの1週間でした。 


チャットアプリ

このような形で完成しました！
2つのウィンドウで別々のユーザーがお互いにメッセージを送っている様子です。



https://i.gyazo.com/7c374fa62bfe8d87213a9a98d200efbf.gif

テキストだけでなく、写真も送れます！



https://i.gyazo.com/f98c1e28b7254f122d90ffaa1688ee16.gif


開発期間は約2週間でした。 メインのフレームワークはRuby on Rails (5.0.7) フロントのコーディングはHamlとSassで行いました。 また非同期通信を実装するためにJavaScript（jQuery）を使いました。

おもな機能

  • ユーザー機能
  • グループ機能
  • メッセージ投稿機能（非同期通信）
  • 自動更新機能

全体を振り返るとかなり長くなりそうなので、今回はグループ機能の実装について書いていきたいと思います！



グループ機能

ユーザーはまずチャットグループの作成・編集をすることができます。チャットメンバーを選択する際は、インクリメンタルサーチでユーザーを検索し、追加ボタンからグループに追加することができます。

https://i.gyazo.com/7573f129729bd3ec28209558685f9c72.gif

グループ作成機能での実装のポイントは、「paramsで複数のユーザーIDを配列として渡す」というところです。グループには複数のユーザーが所属するため、そのメンバー全員の情報が必要だからですね。 

 頑張って説明してみたいと思います…！

モデル


まず、groupモデルはこのような形になっています。userモデルとgroupsモデルは多対多のアソシエーションになっています。（userは複数のgroupを持つ、groupは複数のuserを持つ）
そのため、group_usersテーブルを中間テーブルとして設けています。
また、name（グループの名前）は必須項目になっています。 


class Group < ApplicationRecord
  has_many :group_users
  has_many :users, through: :group_users
  has_many :messages
  validates :name, presence: true
end

ビュー


ごくごく簡単に書くと、グループ作成のフォーム部分の基礎はこのような形になっています。


<form action=“/groups” method=“post”>
　 <input name=“group[name]“ type=“text“>
    <input name=“group[user_ids][]“ type=“hidden“ value=“1“>
　<p>たろう</p>
    <input name=“group[user_ids][]“ type=“hidden“ value=“2“>
　<p>じろう</p>
    <input name=“group[user_ids][]“ type=“hidden“ value=“3“>
　<p>さぶろう</p>
   <input type=“submit” value=“登録する”>
</fom>

ユーザー情報用のinputタグに name=“group[user_ids]“ のようにname属性を定義し、valueにそれぞれのユーザーIDを持たせます。 name属性に空のを含めることで、valueを配列として受け取ることができます。 さらに、type属性を type=“hidden“ として非表示にします。


実際に送られるparamsの中身はこのような形になります。

(#<GroupsController>)> params
=> <ActionController::Parameters {"utf8"=>"✓", 
"authenticity_token"=>"TDVv76FLtpPSp+3pTJ8hsP+TkQ/0xR6tyltE5GNJJBsnvizl6bwAGEvTYT9HIuoIv6VWkV1mgQktYEHhiRVhlg==",
"group"=><ActionController::Parameters {“name” => “グループ名”, user_ids"=>[“1”, “2”, “3”]} permitted: false>,
"commit"=>"登録する", "controller"=>"groups", "action"=>"create"} permitted: false>

groupに関するデータは “group”=> {“name” => “グループ名”, user_ids"=>[“1”, “2”, “3”]} という形でハッシュとして渡され、そのなかでユーザーIDを配列として受け取ることができました。

コントローラ


groupsコントローラではストロングパラメータを定義しています。requireメソッドを使ってgroupsのハッシュを取得します。さらに、配列データを許可する場合は user_ids: [] のように書きます。


class GroupsController < ApplicationController
   
private
  def group_params
    params.require(:group).permit(:name, user_ids: [])
  end
end

このようにして「paramsで複数のユーザーIDを配列として渡す」ことができました！

実際はこれをベースにしてJavaScriptで追加ボタンを実装しているのですが、 それはまた次回にしたいと思います…！