# 【第9週】パRails輪読会 \(2022\-09\-19\~ 2022\-09\-23\)

###### tags: `パRails(2回目)`

- [開催概要](https://hackmd.io/rOcLR0riRqmOgEF0_Ssm0A?both)
- [パRails輪読会 ノートまとめ](https://hackmd.io/5emISRvRRXapmakSiHnFJg?both)

## パRailsのサンプルコード・正誤表
- [サポートページ：パーフェクトRuby on Rails【増補改訂版】：｜技術評論社](https://gihyo.jp/book/2020/978-4-297-11462-6/support)
- [パRails 環境構築の手順](https://hackmd.io/y7qb2BRMT2Wd4tAtKYObcQ)

## 目次

[TOC]

------

## 2022\-09\-19(月) 敬老の日なのでお休み

------

## 2022\-09\-20(火)

### 連絡事項や確認・相談

### タイムキーパー
- tomonariさん
### ドライバー
- @Saki
### 読んだところ
- P.252 [5-4-5途中 メールの詳細画面で表示されている~]〜

### 次回
- P.252 [5-5-3 Action Textの中身と利用時の注意点]〜

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと

- @maimu_x2x
- ActionTextを使うとサイトに簡単にエディタを挿入できて便利！

- @fuwa
- 前半全然聞いてなかった！
- 簡単にリッチテキストとかできてActionText便利だと思いました
- WYSIWYG(うぃじうぃぐ): What You See Is What You Get→見たままを得られる
- 文字の大きさや色とかを入力しながら確認できるらしい

- hikaru
- `assert_difference`はブロック内の処理の前後で引数？を比べて数値の違いがあることを確かめているみたい
- Action Textを使うとリッチテキスト機能が簡単に実装できる
- `bin/rails g scaffold message content:rich_text`で簡単に生成できる
- `has_rich_text :属性名`をモデルに設定しているみたい

- @tomonari
- WYSIWYG(ウィジウィグ)って読むんですね。見たままを得られるってなんか実感が湧かない。

- @Saki
- メール受信のテスト
- [Action Mailbox の基礎 \- Railsガイド](http://railman.net/railsguides/6.1/action_mailbox_basics.html#%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B)
- メールの本文(body)が、対応するBoardのコメントとして正しく追加されることをテストしている
- リッチテキスト
- モデルに`has_rich_text :content`を定義することで簡単にcontentをリッチなテキストにできる!
- 一気にブログのエディタのようになった。すごい!
- 実際の設定は`rails g scaffod message content:rich_text`で、本でやったmodel,controller,viewを全部やってくれる

-

### 本日の振り返り(よかった点・次回に向けての改善点・今の気分などなんでもOK)

- @cafedomancer
- `config/master.key` の共有はうまくできました？
- 今日は私がドライバーをやったので試してないのですが、次回からはpushしないでmaster.keyをドライバーの方にお伝えして対応しようと思っています〜
- 外が 13℃ しかありません... :snowman: :tea:

- @fuwa
- 久しぶりに筋トレで追い込みすぎて生まれたての子鹿みたいになりました
- discordのフォーラム機能ってなんなんだろう？なんかスプラトゥーンのチャンネルできてた。。

- @maimu_x2x
- 台風の暴風で夜中に目が覚めてしまって寝不足です・・・
- 珍しく朝に勉強したら夜より集中できました

- hikaru
- 頑張ってちょっと早起きしてみたら眠すぎて何も手につきませんでした...今日も早めに寝て明日また早く起きます
- 流麗 JS 輪読会に参加しましょ
- 行けたら行きます
- (こないやつだ)

- @Saki
- 自作サービスのデザインが沼すぎます...テストは楽しい!

------

## 2022\-09\-21(水)

### 連絡事項や確認・相談

### タイムキーパー

### ドライバー

### 読んだところ

- P.252 [5-5-3 Action Textの中身と利用時の注意点]〜
### 次回
- P.266[5-6-1途中 クライアントサイドのコードを実装する]〜

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと

- @cafedomancer
- `with_rich_text_#{name}` で eager load できる
- 今のところ分かっていることを図にするとこんな感じ？ (ActionCable について全然知らないので間違っているかも)

(接続時)

sequenceDiagram
    クライアント ->> サーバー: (接続)
    サーバー ->> サーバー: subscribed()
    サーバー ->> サーバー: stream_from("room_channel")
    サーバー -->> クライアント: (なにか返る)
    クライアント ->> クライアント: connected()

(speak時)

sequenceDiagram
    クライアント ->> クライアント: speak()
    クライアント ->> クライアント: this.perform('speak')
    クライアント ->> サーバー: speak
    サーバー ->> サーバー: speak(data)
    サーバー ->> サーバー: ActionCable.server.broadcast("room_channel", { message: data["message"] })
    サーバー -->> クライアント: { message: data["message"] }
    クライアント ->> クライアント: received(data)

(切断時)

sequenceDiagram
    クライアント ->> サーバー: (切断)
    サーバー ->> サーバー: unsubscribed()
    サーバー -->> クライアント: (なにか返る)
    クライアント ->> クライアント: disconnected()

- @maimu_x2x
- N + 1問題は実はちゃんとわかっていなかったため、梅本さんの解説がわかりやすかったです！
- userテーブルとtweetテーブル間でアソシエーションが組まれている際にツイートを全権取得+ユーザー名も取得したいみたいなときに発生する
- 意図せずN+1問題を放置しないように発生原因をちゃんと覚えておく
- https://pikawaka.com/rails/n1
- ActionCableはあまりピンときていない・・・

- hikaru
- 別テーブルで管理されているものにアクセスしようとしているのでN+1問題が発生する
- ドライバーさんへ
- `command + k`でログをクリアできる。
- `bin/rails g`したとき表示されるパスを`command + クリック`するとファイルを開くことができる
- `bin/webpack-dev-server`しておくとJSファイル変更時のコンパイルを自動でやってくれるのでスムーズ

- @tomonari
- ActionCableはWebSocketでクライアントとサーバーの双方向通信のリアルタイム通信を効率的にできる。
- チャット機能が簡単に実装できる(?)

- @Saki
- Action Text
- `Message.all`だと、N＋1問題(Messageの件数+1回のクエリが発行される)が発生してしまう。
- Action Textがこの問題回避のために用意してくれている`Message.with_rich_text_content`を使う。
- `with_rich_content_and_embed`は、今の仕様だと個別にクエリが走ってしまうのでクエリが減らない
- commandクリックしながらファイルをオープンできる
- command＋L or K でログをクリアできる

### 本日の振り返り(よかった点・次回に向けての改善点・今の気分などなんでもOK)

- @maimu_x2x
- チャットアプリの裏側がどうなっているのか例が見れて面白い。
- 解説内容はよくわかっていないため明日の続きも含めて理解して行けたらいいな〜
- mermaid使ってみたいので調べます👀

- hikaru
- ステージング環境に~~アクセス~~ログインできない...？
- ほんとだ、ログインできない

- @Saki
- チャットアプリすごく難しそうだけど、作れたら面白そう!

-

-

-

------

## 2022\-09\-22(木)

### 連絡事項や確認・相談
- ドリンクアップがあるので時間厳守!
### タイムキーパー

### ドライバー

### 読んだところ

### 次回

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと

- @maimu_x2x
- デバッグの一連の流れが追えてとても勉強になった！
- デバッガーはいくつか種類があるけど、どれがいいのか気になった。
- debugger/byebug/binding.pry/binding.break

- @Saki
- デバッグメモ
- debuggerをspeakの直下にいれる
- devツールのnetworkタブでcable検索
- `App.speak(‘Hi’)`をコンソールで実行
- 
をクリックすると、コード1行ずつ実行される
- networkタブで確認すると、投げられてることが確認できた
- broadcast の様子も Network タブで見られると良かったですね！
- でもアラートでメッセージは出ない=receiveメソッドは呼ばれてない状態
- なので、speakメソッドでメッセージの送信はできているけど、受信はできていなさそう
- receivedメソッドでdebuggerを使うとエラー
- debuggerを使って`data`と入力するとエラーが
- 結論：`speak`メソッドに引数`(name)`を渡していなかった。

- @fuwa
- 昨日いなかったのでなんじゃこりゃって感じでした
- デバッグの流れ勉強になりました〜今まであんまりデバッグしてこなかったのでこれからは積極的にしていこうと思います

- @tomonari
- デバッグ勉強になりました！debuggerとbyebug両方使うんですね。

- @sadanora
- デバッグの流れとても勉強になりました！
- HackMDってシーケンス図書けるんですね、すごいーー

- @cafedomancer

sequenceDiagram
    ブラウザ ->> JavaScript: App.speak('Hi!')
    JavaScript ->> JavaScript: this.perform('speak', {message: message});
    JavaScript ->> ActionCable: {"action": 'speak', "data": {"message": "Hi!"}}
    ActionCable ->> ActionCable: speak(data)
    ActionCable ->> ActionCable: ActionCable.server.broadcast("room_channel", { message: data["message"] })
    ActionCable -->> JavaScript: {"message": "Hi!"}
    JavaScript ->> JavaScript: received(data)
    JavaScript ->> JavaScript: alert(data['message'])
    JavaScript -->> ブラウザ: (アラートが表示される)

### 本日の振り返り(よかった点・次回に向けての改善点・今の気分などなんでもOK)

- @fuwa
- 梅本さん昨日はありがとうございました〜！
- :+1:
- チーム開発でメール通知をチェックしようとしているのですが、`letter_opener` がちゃんと動作していない？感じでちょっと困ってます
- clear できない件について issue 立てましょう

- @maimu_x2x
- 最近おやつが止まりません・・・仕事中にチョコを食べ過ぎてしまいます・・・
- :wakaru
- :wakaru: * 100!
- :wakaru of the year:

- @tomonari
- せっかくなので月曜もドライバーやりたいな
- ぜひぜひお願いしたいです！！🙏

-----

## 2022\-09\-23(金) 秋分の日なのでお休み