【第14週】パRails輪読会🚂 (2023-11-20~ 2023-11-24)

tags: パRails🚂

目次

2023-11-20(月)

ファシリ

@hiromisugie

ドライバー

@ayu-0505

読んだところ

5-5-2 257p　から
5-5-4 260p 「Action Textのカスタマイズ」まで。
PR:https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch5/pull/12

次回

5-6 「Action Cableによるリアルタイム通信」から。🚂

学んだこと・感想

  • @sharoa

    • Action Textのエディターで作成されたリッチテキストはActionText ;：RichTextという名前のモデルで管理されている。
    • リッチテキストは紐付けられたモデルとは別のテーブルで管理されているため、そこを意識しないとN＋1問題に遭遇してしまう。
    • Action Textはこの問題を回避ひる専用のeager load用メソッドを用意している。
    • with_rich_text_#{name}とwith_rich_text_#{name}_and_embeds
    • embedsは埋め込むという意味で、 erbはrubyをembedsということらしい。（へ〜ボタンを押したい！！）
    • eager イーガーと読む。（私もイエガーって呼んでて。進撃の巨人みたいって思ってましたw）
    • Action TextはバックエンドにTrixを利用している。

  • @sadanora

    • ActionTextのエディタで作成されたリッチテキストはActionText::RichTextというモデルで管理されている。
      • リッチテキストを扱うモデル（今回はMessage）とActionText::RichTextがポリモーフィック関連で紐付けられる
      • ので、意識して使わないとN+1を生んでしまうでの注意。
      • Action Textにはeager load用のメソッドが用意されているので、それを使うとN+1を回避できる。
        • with_rich_text_#{name}とwith_rich_text_#{name}_and_embeds
    • erbは厳密にはembedded Rubyらしいです

  • @shodan

    • Action Textのリッチエディターで作成されたテキストは、自分で定義したモデル（今回だとMessage）とは違うモデルで管理されている。
    • ゆえにMessageモデルからリッチテキストを扱う属性名として使用したカラム名（今回だとcontent)を直接参照すると、内部的には別の紐付けられたテーブルへアクセスするため、N+1問題がおきる可能性がある。
    • Action Text専用のeager_load用のメソッドが用意されているので、そちらを使用する。

  • @motohiro-mm

    • bin/rails g scaffold モデル名 属性名:rich_textとすると、コントローラ、モデル、ビューをActionText用になおしてくれる
    • リッチテキストは紐づけられたモデルとは別のテーブルに管理されているので、N+1問題が発生する
      • ActionTextがN＋１問題を回避するために、eager load用のメソッドを用意している
        • with_rich_text_属性名：添付ファイルなしで本文をプリロードする
        • with_rich_text_属性名_and_embeds：本文と添付ファイルを両方プリロードする
      • 自分のN+1問題への理解が薄いので、プラクティス＆課題を再度見直そうと思います

  • @moegi29

    • 実際に試して頂いたことでwith_rich_text_#{name}とwith_rich_text_#{name}_end_embedsの違いでembedの場合は埋め込んでいるかリプレゼンテーション？の読み込みがなくて短かった
    • ActionTextで今まで手動入力してきたことはg scaffold message scontent:rech_textで生成できてしまう！
    • N+1問題の部分はプラクティスで指摘されたことを思い出しました。

  • @ayu-0505

    • binディレクトリがgit管理から外れている現象があったので、次回までに解決できるように確認しておきます🙏
    • scaffoldで作成時にもrich_textを属性に加えると自動的に反映される。
    • N+1問題回避用のメソッドwith_rich_text_#{name}とwith_rich_text_#{name}_and_embedsがある。
    • Active Storageのwith_attached_attachment_nameが似たようなメソッドだと思った。

  • @hiromisugie

    • Action Textを使ったリッチテキストの入力・表示方法について具体的に流れを確認できた。
      • scaffoldで作成したmessageのモデルにhas_rich_text :contentを設定
      • フォームに:contentを設定
      • コントローラでストロングパラメータを設定
      • ビューにcontentを表示するように追加
    • 以上のことはscafflod時点でcontent:rich_textをつけると自動的に設定できる。（できるんかい！と思った）
    • リッチテキストはポリモーフィック関連を使っており、N+1問題が発生するので、回避用のメソッドを設定する必要がある

2023-11-21(火)

ファシリ

@moegi

ドライバー

@shodan

読んだところ

5-6 「Action Cableによるリアルタイム通信」から
5-6-1 265pの途中まで。
PR:https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch5/pull/13

次回

5-6-1 265p サーバサイドのコードを実装する　から。🚂

学んだこと・感想

  • @sharoa

    • Action CacleはWebsocketを使ったリアルタイム処理を提供するライブラリのこと。
      　　- Websocketはクライアント/サーバ間のコネクションを維持し、双方向でデータをやり取りするための通信規格のこと。
    • 今日の時点ではまだAction Cableについて詳しく知るための簡単なチャットアプリを作成し始めたところなので、まだよくわかっていない。
    • 難しいな〜というのが率直な感想。
      -　今後のアプリ完成を待ってみたいと思います。

  • @moegi29

    • ジェネレーターでActionCable用のファイルを作るところが難しかった。rbはサーバーサイド(コントローラ、view)で呼ばれて、jsはクライアントサイド(ブラウザ)で呼ばれている。それぞれ処理を実行する場所が違う。

  • @ayu-0505

    • Action CableはWebSocket（HTTPとは違う通信規格）を使用し、リアルタイム通信処理を提供するライブラリ。
    • bin/rails g channel チャネル名？ メソッド名?でAction Cable用のファイル類を作成できる。
    • サーバーサイド側のrbファイルがapp/channels/チャネル名_channel.rbで作成され、クライアント側のjsファイルがapp/javascript/channels/チャネル名_channel.jsで作成される。
    • 購読はクライアントとチャネルを関連付けすること？？　jsファイルは購読用の処理、rbは購読の際の処理っぽい？？

  • @shodan

    • Action CableはWebSocketを使ったリアルタイム通信を提供するライブラリ。
    • WebSocketはクライアント/サーバ間のコネクションを維持し、双方向でデータをやりとりするための通信企画。
    • rails g channelでサーバサイド（rubyファイル）とクライアントサイド（JSファイル）の２つのファイルが生成できる。
    • クライアントサイドで接続時・切断時・データ受信時に呼び出すコールバックメソッドを用意しておける。
    • チャネルが担当することのイメージ（購読って？）が現時点でちょっとイメージできてないのですが、次から動きを見て把握していきたいです。
    • 相変わらずモタモタですみません〜。

  • @sadanora

    • WebSocket
      • 双方向でデータをやりとりするための通信規格
      • リアルタイム通信を必要とするアプリなどで利用される
    • サーバーサイドのコードと、クライアントサイドのコード、という表現がサラッと出てきたけど「何がどこで実行されるのか」を知っていないと何の話をしているのかわからなくなりそうだと思いました。
    • クライアントサイド = 処理を実行するのはブラウザ、サーバーサイド = 処理を実行するのはサーバー、という感じが自分の今のところの理解です。

  • @hiromisugie

    • Action CableはWebSocketを使ったリアルタイム処理を提供するライブラリ。WebSocketとは双方向でデータをやり取りするための通信規格…？
    • roomモデルを作らずにroomコントローラとビューでmessageモデルを入れていく、という構造？がフムフムという感じでした。（もし、ユーザーが自由に複数のチャットルームを立ち上げられる…みたいな構造の場合はroomモデルも必要になるのかな、とか）
    • generate channelのところから難しかった…
    • サーバサイド用にRubyファイル、クライアントサイド用でJSファイルをそれぞれ使う。それぞれの役割と細かい動きは明日以降具体的に試していける、のかな…！
    • 独習Railsを読んでいる早朝輪読会仲間のkarlleyさんが来てくれて嬉しかった！😄

  • @karlley

    • bundle lock はBundlerのバージョンが上がって自身のplatformが追加されるように仕様が変わった際にbundle install できないエラーに対応できる
    • Railsはjsが絡むとより一層難しくなるという事が良く分かった…
    • パRailsの書籍も無く雰囲気だけの参加でしたが楽しかったです！ 次は書籍を用意して参加します😅

  • @motohiro-mm

    • ActionCable：WebSocketを使ったリアルタイム処理を提供するライブラリ
      • WebSocket：クライアント/サーバ側のコネクションを維持し、双方向でデータをやり取りするための通信規格
    • Webブラウザ↔️JS（クライアント側）↔️WebSocket↔️channel.rb（サーバ側）っていう動き…？
    • 具体的な動きが今後実装してみられるようになるともっと理解できるのかなと期待しています
    • 環境構築の--skip-gitのところはkarlleyさんのブログを参考にさせていただいてます！ありがとうございます！
Select a repo