# 【第7週】パRails輪読会 \(2022\-09\-05\~ 2022\-09\-09\)

###### 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\-05(月)

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

### タイムキーパー
- fuwaさん
### ドライバー
- Saki
### 読んだところ
- P.197 [4-3 Railsに組み込まれているJavaScriptの機能]〜

### 次回
- P.204 [4-4 控えめなJavaScriptフレームワークStimulus]

### 自由に使う共有スペース
- `local: false`にしてもAjax通信にできなかった。typeがxhrにならず、documentのままだった。

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

- @maimu_x2x
- Turbolinksはheadを都度読み込まない為、画面遷移が早い
- SPAではない
- form_withのlocalをfalseにするとAjax通信に切り替えが可能

- @fuwa
- turbolinksはRailsサーバーからレスポンスを受け取る際にbodyタグのみを置き換えることで高速化できる
- headとかは差分を見るだけなので読み込みが速くなる？
- 入力フォームで`disable_with`を指定すると二重送信を防げる
- bootcampではなんで使われていないんだろう？ふしぎ
- ajaxは、あじゃっくす？えーじゃっくす？

- @Saki
- 疑問：`disable_with`で一度クリックすると送信が完了するまで二重クリックできないようになるのは知らなかった! bootcampアプリでは1つも無かった&フィヨルド内でも聞いたことがないが、バージョンアップして書かなくても防止してくれるようになったとか?
- `document.addEventListener`久々に見て思い出した!
- turbolinksは、高速なページ遷移をしてくれるJSのnpm
- bodyタグのみ切り替えるので、headタグ内と必要なリクエスト数を削減や、レンダリングのコストを下げられる
- = これがないと、無駄にrenndarinnguリクエストさせたり、読み込むことになってしまう、という理解。

- @tomonari
- turbolinksでも遷移の高速化ができるんですね。今だとVueとかReact使うのであまり使われないのかな？

-

-

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

- @maimu_x2x
- サイトの高速化のためにできることはいろんな方法があるんだと思った。

- @fuwa
- 最近親知らずが痛くてこまっています
- チーム開発でしょうもない勘違いをしていて2日ほど無駄にしてしまいました。。

~
-

- @tomonari
- xhrの表示ができなくて悔しい！

- @Saki
- Railsに入ってるJSの機能について初めて勉強するので、知らないうちによしなにやってくれたものがいっぱいで面白い〜

------

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

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

### タイムキーパー
- ガラムマサラさん
### ドライバー
- tomonariさん
### 読んだところ
- P.202 [4-4 控えめなJavaScriptフレームワークStimulus]〜

### 次回
- P.208[4-4-4途中 action]
(stimulusが動いてる仕組みが謎なので、最後まで読んだ後戻ってくるかも)

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

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

- @maimu_x2x
- stimulusはHotwireと関係あるんですかね？
- Hotwireが何かもよくわかってませんが・・・ふーがさんが勉強中と話されていた記憶🤔

- @garammasala29
- 司会ぐだぐだですみません。
- Stimulus、控えめなJS。Vueなどのフレームワークと違ってサーバーサイドっぽく使える。簡単な処理をするのによいのかな
- htmlの`data-`属性がjsファイルに結びつく
- data-controllerを増やしたとき、果たしてjsファイルも多量になるのかな

- @fuwa
- stimulusいまいちよくわからない。。明日以降詳しくやればわかるのかな
- Hotwire初めて聞いたような。stimulusと密接な関係があるのだろうか

- @haruguchi
- stimulusはHotwireでも使われているので勉強したいなー
- 控えめなJavaScriptが言うようにDHHの思想が透けてみて取れるな
- ここら辺の昨日は全部カスタムデータ属性使うんだな`(data-*)`

- @Maeda8
- 結局stimulusがよくわからないまま終わってしまった...
- Turbolinksと組み合わせると力を発揮すると書いてあった
- Turbolinksを知らない
- がんばれ！ XHRはわかる？　Ajax通信は？
- わかりません
- https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
- これ見ておきます！👀
- stimulusはJSフレームワークのひとつ
- サーバーサイド側の実装が多くなると書いてあった
- https://stimulus.hotwired.dev/handbook/introduction
- これがチュートリアルなのかな？

- @Saki
- stimulus
- ReactやVueは、サーバーが作ったAPI(Rails APIとか)からJSONを受け取って、フロントエンド側でHTMLを生成する(〜.jsファイルの部分)
- が、stimulusは、HTMLはサーバー側から返す。Railsでいうとslimで返すってことかな？
- これが"控えめ"な点らしい。
- 今やっているのはstimulusオンリーなので実際にサーバーサイド言語使ったら、どんな感じに使うか気になる
- 本には`@hotwire`が消されていたので、その通りに書いたのが原因だった。罠。書籍よりもREADMEを信じることにする。

- @tomonari
- stimulusは初めて触ったので、どう動くのかわからなかったが、Vueと似た感じなのかな？
### 本日の振り返り(よかった点・次回に向けての改善点・今の気分などなんでもOK)

- @maimu_x2x
- ついていけてない〜😇
- ガラムマサラさん、卒業おめでとうございます！！
- nappleさん、リリースおめでとうございます！
- わあい！！！

- @fuwa
- だいぶわけわかめでした（死語）
- 最近主食がオートミールになりました
- @hotwire消しちゃってすみません
- 本で消されてたのでfuwaさんのせいじゃないですよ-!

- @haruguchi
- ガラムマサラさん卒業おめでとう!:tada::hiza:
- はるなさんリリースおめでとう!:tada::injection:
- わあい

- @garammasala29
-

- @tomonari
- パRails誤字が結構あって、そのままコード書けないのがちょっと怖い。
- 今回の@hotwiredのとことか本と違うと困ってしまう

- @Maeda8
- はるなさんリリースおめでとうございます！！！:tada::tada::tada:
- まえださんのピヨちゃんbotは、、、、、？？？？
- ピヨちゃんbotは埋めました
- ぴぃ…🐥
- ぴえん...🐣
- 卒業式やってあげましょうか？ :yoi!:
- ピィ...
- 非公式、、、？
- ガラムマサラさん卒業おめでとうございます！！！:tada::tada::tada:

- @Saki
- 結局私の環境でも同じエラーが起こってしまって申し訳ないです💦
- はるなさんリリースめでたい👏👏👏 ガラムマサラさん卒業めでたい👏👏👏
- 嬉しい〜〜〜〜！！！！

------

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

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

### タイムキーパー
- Saki
### ドライバー
- @fuwa
### 読んだところ
- P.208[4-4-4途中 action]〜

### 次回
- P.211 [4-4-4途中 Data Maps]〜

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

<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-hello-target="output">
  </span>
</div>

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

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

- @garammasala29
- StimulusはHTMLの強化版？サーバー側で全てを返す
- 1つのターゲットにつき3つのプロパティが利用できる(`this.~~Target`、`this.~~Targets``this.~~NameTarget`)
- `data-action`の値はイベント->コントローラー#メソッド
- リファレンスを読んだ感じ、ルールが少ない？気がするので覚えたらCSSフレームワークを使うより簡単？
- そう思う！！

- hikaru
- 久しぶりに参加したら別世界でした...復習します...
- フロントと連携して上手く動くように色々な仕組みがある...
- `data-action="イベント->コントローラ#アクション"`属性で、イベントが起こった時にコントローラのアクションが実行できる
- `data-target="コントローラ#ターゲット"`属性で、コントローラの`static targets = ['ターゲット']`に宣言しておくと紐付けることができる

- @haruguchi
- controller
- data-controllerとjavascriptファイルを紐付ける
- これがないと始まらない
- action
- data-actionで指定したDOMに対してイベントハンドラを設定する
- イベントハンドラ自体はコントローラー内のメソッド（つまりクラス書いて中にメソッド書く）として定義する
- target
- DOMに対して何かしたかったらこいつを使う
- 書籍では`data-target=controller.target`となっていたけど、どうやら`data-{controller}-target=output`っぽい気がする　構文変わった？それとも複数の書き方があるのか
- 2.0での変更っぽい？ https://github.com/hotwired/stimulus/releases/tag/v2.0.0
- https://stimulus.hotwired.dev/
- 公式見てやっとわかった！

- @saki
- 実際にcontrollerを作ったり、既存のcontrollerに関数を追加したら、動きがわかってきた
- target
- HTMLの特定の要素に、JS側からアクセスできるようにするための仕組み。
- [Stimulusをはじめよう \- Qiita](https://qiita.com/nazomikan/items/4dabc63b883aa71ce83c)

- @fuwa
- また今日もなんもわからんかった
- ターゲットはコントローラー内のDOM要素とJSを紐づけるらしい。つまり？？

- @maimu_x2x
- Eventオブジェクトで押されたキーボードのキーコードが出力できるのは覚えておくと何かに便利に使えそう？と思ったり。

- @tomonari
- StimulusもVueとかReactに似ていて、javascriptフレームワークって感じですね。Vueとかの理解もあやふやなので、混乱してしまいそう。

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

- @maimu_x2x
- RubiKaigiで永和さんのランチ会出る方いらっしゃいますか？参加するか迷い中です。。。
- 僕は出ません！！！！！！！！
- 今日は気圧のせいか1日睡魔との戦いでした😴

- @Saki
- 今週haruguchiさんに頼り切りで申し訳ないです🙏
- fuwaさんドライバーありがとうございました! チェリー本やJSPrimerやってた時は、ドライバーの準備そんなにかからなかったので、すぐ読み始めてたんですが、アプリだと環境構築に時間がかかるので、もっと早めに!you all して決めて雑談の時間に環境設定していただいた方がいいかもですね。
- RubyKaigiうらやましい〜!!

- @fuwa
- ドライバーばたばたしちゃってすみません :+1:
- 今日はちょっと早起きして映画2本観に行っていました。これからがんばります〜
- チーム開発で他の方のissueのレビューをしているのですが、なぜか私の環境だけでユーザーアイコンが表示されない現象が発生しています。そういうことってありました？
- あったような気がするけど、どうやって解決したっけ？いつの間にか直ってたような、、、
- db:reset bin/rails setup を試す アタッチメント周りが原因かも？

- @garammasala29
- やはり不完全燃焼ですが、haruguchiさんのおかげで昨日よりだいぶ理解してきたような…
- RubyKaigiええなぁ… :koiyo!:

- @tomonari
- Rubykaigi楽しみ！事前準備何かやったほうがいいのかな？
- 怪我しないようにストレッチ！

- @haruguchi
- そもそもアプリケーションがJavaScriptを使って何を実現したいかを把握すると理解が進みそう！
- target完全に理解した
- Capybara何もわからん、、、

- hikaru
- お久しぶりです〜前回参加した時から１００ページくらい進んでてぶっ飛びました
- みんなわからんので大丈夫！！！
- やっとチーム開発に参加できそうです！ひよってます...
- :tada:
- :tada:
- :hayakunai?:
- 一緒にがんばりましょう〜

------

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

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

### タイムキーパー
- Hikaruさん

### ドライバー
- ガラムマサラさん

### 読んだところ
- P.211 [4-4-4途中 Data Maps]〜

### 次回
- P.217 [5-1-3 ジョブへ渡す引数の制限]

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

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

- @maimu_x2x
- Stimulusで状態を管理したいときにDataMapsを使う
- データとして扱える型は文字列形式のみ
- 非同期実行といえばSidekiqがよく使われてそう
- ジョブを実装ってなかなかやらなさそうなため、サンプルの動作が確認できてよかった

- hikaru
- Stimulusはシンプルにフロントの機能を作れるということがわかった
- Active Jobは操作を非同期にすることができるらしい
- アダプターってなんだろう？これから色々出てくるのかもしれない？

- @garammasala29
- 起承転結できてよかった！
- HTMLとJSのデータのやり取りにDataMapsを使う。
- `data-コントローラ-データ`でデータを定義して`get`や`set`で状態を変更させられる
- サーバで完結するのは嬉しい
- せっかくStimulusと仲良くなれたのにまた新たにActiveJobとは…

- @fuwa
- Stimulusではデータを`data-コントローラー名-データ名` という形で定義する
- ただし扱える型は文字列のみ
- なんとな〜くStimulusがわかってきたような。。Vueよりはとっつきやすいかもしれない？
- Reactは触ったことがないから比較できないけど、最近人気らしいので気になっています
- Active Jobは非同期実行ができる。そういえば今まさにチーム開発で通知周りをやっているので使ってるなぁ

- @Saki
- stimulusの、HTMLに書いてるcontroller、action、target、data maps各々の役割がわかってきた! Railsとは全然違う
- `parseInt`で、引数に渡された文字列を整数化しているのは、data mapsの値は文字列であるため。(たとえset時に数値を渡しても文字列に暗黙的に変換される)
- Active Job
- bootcampではdiscordへの通知に使われてるよう
- [bootcamp/app/jobs at main · fjordllc/bootcamp](https://github.com/fjordllc/bootcamp/tree/main/app/jobs)

-

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

- @Saki
- 実際に書いて動かすと理解深まっていいですね。Hikaruさん丁寧な解説ありがとうございました!
- 非同期処理コワイ

- @maimu_x2x
- 早くJSのプラクティスやりたくなりました〜！
- RubyKaigiでdebbug.gemの話があって使いこなせるようになりたいと思いました！

- hikaru
- rubykaigi楽しそうですね〜

- @fuwa
- JS忘れつつある
- そろそろ現実を見てチーム開発の続きにとりかかろうかしら。。。
- チーム開発でアイコンが表示されなかった問題、`bin/setup` とか`db:reset` で解決しました〜！ありがとうございました！
- :medetai:👏

- @garammasala29
- hikaruさんの読み下しのおかげでだいぶ理解できました！ありがたい！
- 自作サービスの機能追加をしてるんですが、オブジェクト指向が全然理解できていない、学び直しだ〜と思ってます。

-----

## 2022\-09\-09(金)

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

### タイムキーパー

### ドライバー
- @fuwa

### 読んだところ
- P.217 [5-1-3 ジョブへ渡す引数の制限]〜

### 次回
- P.221 [5-1-5途中 キューを追加すると、〜]

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

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

- hikaru
- ジョブを実行するための存在としてRailsとは別のアダプターを使うことがあるらしい（Sidekiqとか）
- Active Jobを使わずにバックエンドを直接使う方法もあるらしい
- 難しかった...

- @maimu_x2x
- sidekiq自体は馴染みがあるけど、どう動いているかは全然理解してなかった（本を読んでもわからなかった・・・）
- 現場Rails復習しようと思う。

- @fuwa
- sidekiqはキューのをいい感じにしてくれるもの？
- 普段ジョブとかキューとか意識することがないけど、今やっている内容はどのくらい重要なのだろうか
- 自作サービスではActive Jobで大丈夫そうなのかな。。

- @Saki
- シリアライズが直列化、デシリアライズがシリアライズの復元。
- sidekiqは非同期処理をさせたい時のアダプター(間に入って良い感じに捌いてくれるイメージ)。中間管理職的な間に入ってよしなにやってくれることをしてくれるgem多いな〜
- キューはタスクを登録するための入れ物。
- 突然docker出てきてびっくりしました。Active Job、結構難しいのに説明やコードはさらっとしてるので、そんなに重要じゃないからさらっとしてるのか、前提知識として知ってて当たり前だからそんなに設定やコードの説明がないのか、どっちなんだろう...
- お仕事で入ったら設定や非同期処理の仕組みはすでにできてるケースが多い。

-

-

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

- @maimu_x2x
- 拙い司会でしたが、ありがとうございました！
- ありがとうございました!要所要所で要約してくださって分かりやすかったです🙏

- @Saki
- 司会とドライバーありがとうございました！

- @fuwa
- 最近腰が痛いのが悩みです
- 気になっているギターが値下げされていたので誘惑に負けそうです

- hikaru
- 地震だ〜（住んでいるところがバレる）
- 司会とドライバーありがとうございました〜この本なかなか手強いですね

-

-

-----