No_ideaのわからん日和

✏️...プログラミングが全然出来ない奴がわからんわからん言いながら様々な構文(記述方法やエラー構文など)と奮闘しながら成長していく成長記録です🐢

Ruby on Rails: チャットグループ一覧ページの作成...chapter13-4

今回やりたいこと

・グループの新規作成機能の実装

・チャットグループ一覧からチャット新規作成ページへ遷移できるようにする

・チャットグループ一覧へ所属するグループ名と参加人数を表示。

 

①chat_groups_controller.rbの編集

$rails routes

https://gyazo.com/4065f05257221c26bb9a47d043aac3ee

app/controllers/chat_groups_controller.rb

def new
 @chat_group_new = ChatGroup.new
end

ChatGroupモデルを使用し、newでインスタンスを生成。

 

 

 

 

 

 

②新規作成ページを作成(仮) + チャットグループ一覧ページから新規作成ページへリンク

app/views/chat_groups/new.html.erbを作成

app/views/chat_groups/index.html.erb

(修正前)
<div class="chat-group__new">
<%= link_to 'グループ新規作成', chat_groups_path %>
</div>
(修正後)
<div class="chat-group__new">
 <%= link_to 'グループ新規作成', new_chat_group_path %>
</div>

リロード🔁

http://localhost:3000/chat_groups

グループ新規作成クリック

これで新規作成ページに遷移できるようになりました。

 

 

 

 

 

 

 

③新規作成ページを作成

app/views/chat_groups/new.html.erb

form_withを使用しcreateアクションのパスへ飛ばしたいので、パスはchat_groups_path。

さらにmodelを使用し、どこのテーブルに情報を送りたいのかを示します。

リロード🔁

フォームは出来ました。

次にこのフォームで入力した情報を保存できるようにcreateアクションを作成し、保存できるようにします。

 

 

 

 

 

④コントローラーにcreateアクションを追加

def create
 chat_group_new = ChatGroup.new(chat_group_params)
 if chat_group_new.save
  redirect_to action: 'index', notice: 'チャットグループを作成しました'
 else
  render :new, alert: 'チャットグループ作成に失敗しました'
 end
end

private
def chat_group_params
 params.require(:chat_group).permit(:chat_group_name, :chat_group_description)
end

createアクションの処理内容

ChatGroup.newでインスタンス生成をして、変数chat_group_newに代入。

その際に、いらない情報も保存されないようにストロングパラメーターを設定。

もしchat_group_newがセーブできたら、簡易メッセージで'チャットグループを作成しました'と表示し、リダイレクト(遷移先)にindexアクションを設定。

情報をセーブできない場合はアラートとして'チャットグループ作成に失敗しました'と表示。

 

 

 

 

⑤情報を保存できるか確認

$rails s

新規作成してみると。。。

新規作成ボタンをクリックした瞬間にindexページへ遷移する。

アドレスバーにチャットグループを作成しましたと簡易メッセージが表示される。

Sequel Proでもみてみる。

保存できている。

 

しかしチャットグループを作成した場合、”チャットグループリスト表示”されないとおかしいです。

def index
 @chat_group_lists = ChatGroup.all
 @chat_group_joining = ChatGroupToUser.where(user_id: current_user.id)
 @chat_group_lists_none = "チャットグループに参加していません"
end

理由としてはこのチャットグループ一覧ページで設定した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

<h1>チャット新規作成</h1>
 
<%= form_with url: chat_groups_path, model: @chat_group_new do |f| %>
<%= text_field_tag 'chat_group[user_ids]', "#{current_user.id}", type: 'hidden' %>
<div class="chat-group-new__forms">
<div class="chat-group-new__forms__name">
<%= f.label :chat_group_name, 'グループ名', class: "chat-group-new__forms__name--label" %>
<%= f.text_field :chat_group_name, class: "chat-group-new__forms__name--field" %>
</div>
        ・
        ・ (省略)
        ・

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も登録してみてみます。

問題なさそうです。

 

 

 

今回はチャットグループを作成し、一覧ページに表示できるようにしました。

エラーがたくさん出て苦労しましたが、エラー構文の勉強になるので良かったかも(?)

次回はチャットグループ詳細ページ、編集、削除を実装していきたいと思います。

 

 

 

 

 

 

 

 

 

以上です。