Ruby on Rails: チャットグループ一覧ページの作成...chapter13-4
今回やりたいこと
・グループの新規作成機能の実装
・チャットグループ一覧からチャット新規作成ページへ遷移できるようにする
・チャットグループ一覧へ所属するグループ名と参加人数を表示。
①chat_groups_controller.rbの編集
$rails routes
https://gyazo.com/4065f05257221c26bb9a47d043aac3ee
↓
app/controllers/chat_groups_controller.rb
ChatGroupモデルを使用し、newでインスタンスを生成。
②新規作成ページを作成(仮) + チャットグループ一覧ページから新規作成ページへリンク
app/views/chat_groups/new.html.erbを作成
↓
↓
app/views/chat_groups/index.html.erb
↓
リロード🔁
http://localhost:3000/chat_groups
グループ新規作成クリック
↓
これで新規作成ページに遷移できるようになりました。
③新規作成ページを作成
app/views/chat_groups/new.html.erb
form_withを使用しcreateアクションのパスへ飛ばしたいので、パスはchat_groups_path。
さらにmodelを使用し、どこのテーブルに情報を送りたいのかを示します。
↓
リロード🔁
フォームは出来ました。
次にこのフォームで入力した情報を保存できるようにcreateアクションを作成し、保存できるようにします。
④コントローラーにcreateアクションを追加
createアクションの処理内容
ChatGroup.newでインスタンス生成をして、変数chat_group_newに代入。
その際に、いらない情報も保存されないようにストロングパラメーターを設定。
もしchat_group_newがセーブできたら、簡易メッセージで'チャットグループを作成しました'と表示し、リダイレクト(遷移先)にindexアクションを設定。
情報をセーブできない場合はアラートとして'チャットグループ作成に失敗しました'と表示。
⑤情報を保存できるか確認
$rails s
↓
新規作成してみると。。。
↓
新規作成ボタンをクリックした瞬間にindexページへ遷移する。
アドレスバーにチャットグループを作成しましたと簡易メッセージが表示される。
Sequel Proでもみてみる。
保存できている。
しかしチャットグループを作成した場合、”チャットグループリスト表示”されないとおかしいです。
理由としてはこのチャットグループ一覧ページで設定したif @chat_group_joining == にあります。
これはindexアクションでの処理内容ですが、@chat_group_joining = ChatGroupToUser.where(user_id: current_user.id)でChatGroupUserToUserモデルを使用し、chat_group_usersテーブル(中間テーブル)からuser_idカラムからログインしているユーザーを探してきてと命令しています。
なのでchat_group_usersテーブルにログインしているユーザーがないと”チャットグループリスト表示”は表示されません。
chat_group_usersテーブルをみてみます。
やはり、保存されていません。
なので保存されるように設定していきたいと思います。
⑥保存できるように修正
app/views/chat_groups/new.html.erb
text_field_tag 'chat_group[user_ids][], "#{current_user.id}", type: hidden'
text_field_tagはフォームを作成し、送りたい情報を送れるようにするメソッドです。
構成は以下のようになっています。
text_field_tag (テキストボックス名, 初期文字列, {オプション1, オプション2,,,})
テキストボックス名
テキストフィールドのidとnameに割り当てられる。
フォームからの値を取得するキーになる。
初期文字列
テキストフィールドのデフォルト値。
指定された文字列が入力された状態で表示される。
オプション
今回はtype: hiddenを設定。
これで情報は送れるが、フォームはなくなります。
type: hidden設定なし
type: hidden設定あり
これで送られている情報は↓のようになっている。
<input type="hidden" name="chat_group[user_ids][]" id="chat_group_user_ids_" value="5" />
↓
これで一旦グループを作成してみる。
↓
保存はできているが、「参加していません」になっている。
理由は
https://gyazo.com/1c55a541b0afaa610748aa26bcad6f59
ストロングパラメーターにuser_idsを受け取れるようにしていない。
とりあえず、ストロングパラメーターにuser_idsを設定してみる。
↓
:user_idsとしたのは
Parameters: {"authenticity_token"=>"daUxVjXs0ZCF6gsdjnb1ZLDTOUJExuUKKpOtOEPB973R+V5o54jNR8P0Rkb+rfkXqhO24w+2Vt1WmvzmBY9Jvw==", "chat_group"=>{"user_ids"=>["5"], "chat_group_name"=>"グループ2", "chat_group_description"=>"グループ2"}, "commit"=>"新規作成"}
Unpermitted parameter: :user_ids
user_idsを受け取るときに配列となっている。なので、配列で受け取れるようにを設定。
これでリロードし、作成してみる。
↓
リロード🔁
新規作成してみる。
↓
遷移できてない。
https://gyazo.com/afeee14471c243f133441bd768bd7f42
今度はエラー内容をみてみると、
ArgumentError (wrong number of arguments (given 0, expected 1..2)):
ArgumentError(引数の数が間違っている(0の場合、1..2が必要)):
と書いてある。
また、
app/controllers/chat_groups_controller.rb:26:in `'
app/controllers/chat_groups_controller.rb:26:in `chat_group_params'
app/controllers/chat_groups_controller.rb:15:in `create'
これはこの書いてあるところが怪しいと言っています。
↓
:user_ids→user_ids:へ変更。
↓
リロード🔁
新規作成してみる。
↓
https://gyazo.com/800f1e7c3dd376377105ef8c94d4aaa6
ActiveModel::UnknownAttributeError (unknown attribute 'user_ids' for ChatGroup.):
このエラーを解決していきます。
↓
$rails c
pry> show-models
ChatGroupの
has_many :chat_group (through :chat_group_to_users)
ここが間違ってました。ここは中間テーブルのchat_group_to_usersを経由してusersテーブルと紐付けると示す場所なのにchat_groupテーブル(しかもhas_manyなのに複数形にもしてない...)に紐づけてしまっています。
なので、has_many :users (through :chat_group_to_users)と変更。
これでトライしてみます。
↓
$rails s
↓
↓
チャットグループリスト表示になりました!
Sequel Proも開いて確認。
中間テーブルにも保存されています!
それでは次はチャットグループ一覧ページに所属するチャットグループと所属人数が
⑦グループ一覧ページに所属するチャットグループ名と所属人数を表示する。
https://gyazo.com/bac3874bccce832c6de2605713c982bf
<% else %>~<% end %>を変更。
@chat_group_list.each do |list| ~ end
ここで、chat_groupsテーブルに入っている情報(今回はグループ1〜3まで)を繰り返し、一つ一つ取り出してます。
if list.user_ids.include?(current_user.id) ~ end
そのDBに保存されているuser_id達の中にcurrent_user(ログインしている)ユーザーは含まれているかを聞いてます。
link_to "/chat_groups/#{list.id}" do ~ end
まだグループの詳細ページは作成していませんが、詳細ページへ飛べるように式展開を使用しリンクを貼りました。
list.chat_group_name
ここで、所属しているチャットグループ名を表示。
list.user_ids.count
所属しているuser_id達をカウント(countメソッド)してくださいと命令。
これでリロードしてみてみます。
↓
リロード🔁
できてます。
さらにグループ4も登録してみてみます。
問題なさそうです。
今回はチャットグループを作成し、一覧ページに表示できるようにしました。
エラーがたくさん出て苦労しましたが、エラー構文の勉強になるので良かったかも(?)
次回はチャットグループ詳細ページ、編集、削除を実装していきたいと思います。
以上です。