コロナで無職になった私がエンジニアになるまで

コロナの影響で前職をクビになってから、エンジニアを目指してます。

オリジナルアプリ作成記 9 ~チャット画面の実装~

前回でチャットルームへのアクセス制限を行った。
その際には、チャットルームへのアクセス制限というよりは、
チャット画面への移動を制限することでアクセス制限をした。
=> チャット機能のコントローラーへ記述。

チャット画面

f:id:Kosei_Program:20210118231446p:plain

f:id:Kosei_Program:20210118231526p:plain

実際の画面はこんな感じ。
ビューファイルのコードは

f:id:Kosei_Program:20210118231657p:plain

form_withで実際にチャットのメッセージを投稿する際にmodelにroomとmessageに対して送信していることに注意する。
これはroomにmessageをネスト、ルーティングを入れ子しているためにこのように記述する必要がある。
=> roomに属するmessageというように親子関係である。
この@roomにはどのチャットルームか、@messageにはMessageモデルからのインスタンスを予めセットしておく必要がある。
=> コントローラー(indexアクション)でセットする。

f:id:Kosei_Program:20210117233844p:plain

投稿された全てのメッセージを表示するために@messagesとして、
@messages = @room.messages.includes(:user)
取得した特定の部屋@roomに紐づいている、messages(全てのメッセージ)を取得。
=> アソシエーションを組んでいるためにこのような記述が可能。
さらにこの取得したメッセージにはユーザーの情報も取得したいので、
N+1問題(必要なデータを取得するために何度もアクセスすること)を防ぐために
includesメソッドを使用して、取得する。
=>メッセージに紐づいたユーザー情報も一度に取得することが可能。

メッセージの投稿

実際にメッセージを投稿(保存)する際には、
投稿する目的の部屋(@room)を取得して、
それを利用して、投稿するメッセージ(@message)を
@room.messages.new(message_params)として保存。
message_paramsのストロングパラメーターには、
messageモデルへ、本文と画像(後に実装)と投稿するユーザーのidを一緒に保存する。
保存に成功すれば(条件分岐)、投稿したページ(チャット画面へ)
失敗すれば、その時点で投稿されていたメッセージを全て取得して表示。
=>renderでindexアクションへ持っていく。

これはindexのビューファイルに
<%= render partial: 'message', collection: @messages %>
と記述して、このcreateアクションのrenderをここに持っていくといったイメージ。

次回は画像投稿についてまとめる。