# 【第6週】パRails輪読会 \(2022\-08\-29\~ 2022\-09\-02\)

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

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

### タイムキーパー
garammasala29

### ドライバー
tomonari

### 読んだところ
3-5-2 Content Security Policy(CSP)への対応 から
4-1-1 Webpackerの概要 の最後まで
- 🙏

### 次回
4-1-2 Webpackerの基本的な動作 から

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

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

- @gammasala29
- nonceはナンス、インラインJSできる箇所を指定
- CSPよくわからない。Googleアナリティクスを設定しているコードを見に行けばいいのかな？
- RailsのAPIリファレンスマニュアル大事

- @fuwa
- webpackerはwebpackをRailsで扱いやすくするためのラッパー
- RailsのXSS対策にCSPというものがある。
- レスポンスを送ったサーバーと同一オリジンから送信されたJSのみ実行、みたいな感じで制御できる。
- `nonce` を使えばより細かく制御できる
- なんでbootcampでは使われていないんだろう？

- @maimu_x2x
- webpackとwebpackerが違うものということをわかっていなかった
- webpack:JSなどファイルをまとめるモジュールバンドラー
- webpacker：webpackをRailsから扱いやすくするためのラッパー
- ラッパー？

- @paru871
- CSPのところは業務で必要になったら戻ってこよう！
- WebpackerとはwebpackをRailsから扱いやすくするためのラッパー
- webpackとは、JSなどさまざまな形式のファイルをまとめるモジュールバンドラー
- Rails6.0からは新規でRailsプロジェクトを作成するとデフォルトでWebpackerを利用する環境になる

- @tomonari
- セキュリティ対策でCSPは必要なんだろうけど、動きが今一つイメージできません。

- @haruguchi
- 前半XSSの話だったのか、また読み返しておく

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

- @maimu_x2x
- パRails難しい・・・一度で理解は難しいので定期的に読み返さねば・・・
- 3~4回読んでますが、まだ全然わからないです、特に後半は、、、、:cry:

- @fuwa
- 今日は焼き肉の日らしいので牛角でひとり焼肉してきました
- :iina--:🥩
- `webpacker` って言いにくい！

- @paru871
- CSPのところ、全く知識がなかったのでちょっと悔しい気持ちです。もっと勉強しよう！

- @haruguchi
- 自作サービスのwebpackerそろそろ滅ぼさなければ、、、
- 今思ったけど、今更webpackerを学習する必要はあるのか？

- @tomonari
- ドライバーだったけど、あまり出来なかったです。nonceとかもう少し理解できていれば実際に動かせたのかな？

- @garammasala29(輪読会終了後に書いてます)
- CSPが全然分からなくてそちらにばっか気を取られてしまっていました。
- Sakiさんのこれまでの気配りのありがたさを見にしみて感じました。

------

## 2022\-08\-30(火)

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

### タイムキーパー

### ドライバー

### 読んだところ
- P.173 [4-1-2 Webpackerの基本的な動作]〜

### 次回
- P.181[4-1-3途中 CSSや画像をWebpackerで管理する方法]

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

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

- @maimu_x2x
- Webpacker環境でJSを使った開発をする際は明示的にコンパイルをする必要はない。
- 今はよく分からないけど覚えておく。
- dev server が起動していればファイルの変更が検知されてリアルタイムにコンパイルされ、していなければリクエストが飛んできたタイミングで必要に応じてコンパイルされます
- Webpackerにまつわる設定ファイルは構成を変えたい場合は調整が可能
- どう調整するかが自分じゃ判断難しそうなため、当面触ることはなさそう

- @garammasala29
- `javascript_pack_tag`メソッドの第一引数がエントリーポイントとなるファイル名
- モジュール、エントリーポイント、ビルド、バンドル、コンパイルなどこのあたりの言葉を整理したい
- Webpackerは初期設定から何も変更せずに動かしていたので、設定変更の機会があればここに戻りたい

-

- @tomonari
Webpacker、結構設定細かいですね。

- @haruguhci
- そういや、ブートキャンプアプリってwebpackerとsprokets両方使ってたような。
- CSS のコンパイル (sass-loader かな？) が遅いからだそうです
- なるほど、良いとこどりのイメージですか
- アセットパイプラインは現場Railsが詳しい
- コンパイル→アセットの連結→アセットの最小化(minify)→ダイジェストの付与
- 昔読んだ時、bin/webpack-dev-serverする意味をここで理解した気がする
- Rails7はファイルを1つにしないんだっけ？（import-mapsでは）勉強しないと
- しないですよ。CDN 経由で読み込むので

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

- @tomonari
- 読み手haruguchiさん飛ばしてしまった…ごめんなさい！

- @maimu_x2x
- ???な日が続いています・・・！
- Railsの他の本も読んでみようと思う

- @garammasala29
- 本日もなんだか不完全燃焼といった感じ

- @paru871
- Sakiさん、昨日のHackMD、私の方で復元できましたー。
https://hackmd.io/6z4yyvgESn-alxb_xFImvA?edit
- ありがとうございます〜!!🙏✨
- 後ほどやり方お伝えしますね！！

- @haruguchi
- JavaScriptのモジュールシステムの歴史みたいなのを勉強すると親近感が湧くような
- お菓子食べない宣言したので味噌汁を飲んで耐えてます！
- 塩分過多に気をつけてください！
- お菓子食べちゃいましょう！
- :scream:
- 水にします！

-

------

## 2022\-08\-31(水)

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

### タイムキーパー
- tomonariさん
### ドライバー
- ガラムマサラさん

### 読んだところ

### 次回

- P.186[4-1-6 Webpackerの提供する設定を拡張する]〜
### 自由に使う共有スペース

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

- @paru871
- webpack-dev-serverの凄さと便利さを再認識した。
- `bin/webpack-dev-server`コマンドで起動
- webpack管理下のファイルの更新を検知し、すぐにビルドを実行する
- `rails s`と同時に起動させておくとよい

- hikaru
- webpack-dev-serverを裏で起動しておくといい感じにビルドしておいてくれて速いらしい
- WebpackerでCSSや画像を管理する時はそれ用のメソッドを使わなきゃいけないらしい

- @garammasala29
- 自作サービスでここのあたりでよくハマっていたので読んでから実行していけばよかった
- production環境ではstyle_pack_tagを用いてCSSファイルを読み込む
- `--webpack=react`などのオプションを使うことで`rails new`で一緒に実行できる
- ドライバーがバタバタして申し訳なかったです。ただ、Reactのファイル表示を初めて見た気がして嬉しかった

- @fuwa
- `webpak-dev-server` を起動しつつ`rails s` ができるらしい
- チーム開発で使える機能なのかな？
- 昨日いなかったので全体的にさっぱりです〜

- @Saki
- Rails7からはWebpackerは使っていないので、どういう仕組みで動いているのか気になった。webpackerは`rails s`する時に何か起動しているものというレベルの認識だったので、何ができるかわかってきて面白い
- 梅本さんに`webpacker-dev-server`すると早いのを教えていただいたのを思い出した
- webpackerのREADMEを読んでみようと思ったら「リタイアしました」となっていた..
- [rails/webpacker: Use Webpack to manage app\-like JavaScript modules in Rails](https://github.com/rails/webpacker)

- @maimu_x2x
- webpacker-dev-serverを--利用したビルドはチーム開発で使うため覚えておく
- Reactのコマンドも覚えておく
--------

- @tomonari
- この間話題になっていたdev-serverここで出てくるんですね〜。
　　　自作アプリではrails7使いたいので、dev-serverすることないと 思うけど覚えておきたいです。

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

- @paru871
- ゆーいちさんが来てくださって教えていただけて、とてもありがたかったです！ありがとうございました。エラーが出ても落ち着いて対処できるのがさすがだなぁと思いました。
- ガラムマサラさん、難しいところのドライバーありがとうございました！勉強になりましたー！

- @fuwa
- 最近太り気味なので今日のお夕飯はささみと春雨をスープカレーに入れたものだけです。お腹が空いたので冒頭の北海道が飯テロでした。
- 今日初めてチーム開発でデモをしたので緊張しました〜
- :tea::cake:

- hikaru
- ガラムマサラさんドライバーありがとうございました〜大変そうだった...
- Rails本当にわからん...無限に機能がある...しかも忘れていく...独習Railsでも読み直すかな

- @garammasala29
- ゆーいちさん来てくれて助かりました。ありがとうございます！
- 今日も不完全燃焼な気が…

- @Saki
- `rails new`を見逃してました...申し訳ないです🙏とくにガラムマサラさん焦らせてしまってすみません💦
- 田中さん来てくださってありがとうございます! 最近色んな方々が遊びに来てくださって嬉しいです😁

- @u1tnk
- 喜んでもらえたようで良かった！
- みなさん楽しそう。
- また来ますー :smile:

------

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

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

### タイムキーパー

### ドライバー
- @fuwa

### 読んだところ
- P.186 [4-1-6 Webpackerの提供する設定を拡張する]〜

### 次回
- P.191 [4-2-1途中 スタイルを追加してみよう]

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

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

- @maimu_x2x
- 直接関係ないけれどgrepコマンドは便利だなと思いました。 :wakaru:
- SCSSは入れ子でかけるというぼんやり理解なので、明日以降の内容が楽しみです。

- @garammasala29
- プラグインやローダーを追加するためにはいろいろ設定ファイルに追加する必要がある
- 自作サービスでvue-lorderとpug-lorderを使ってた。今日読んだところと同じように設定していたので安心
- Sprocketsはアセット管理。haruguchiさんがおすすめしてくれた独習Railsはまだ読み途中
- 現場Railsかな？ 😇
- 間違えました。そうです！！！ｗ

- @fuwa
- pluginを利用するとrequireとかしないでどこでもライブラリを参照できる
- SprocketsはCSSのコンパイルに使われる
- SassでSCSS形式とSass形式をコンパイルしてCSSに変換する
- 全体的に、設定大変そう。。。

- @Saki
- loaderとpluginを追加したい時に戻ってこよう
- loaderとは：webpackerが持つツールの一つ。リソースをモジュール化するためのツール。画像やスタイルシートなどのリソースは、このローダーを通してモジュール化することでまとめられる。
- pluginとは：拡張機能。
- RubyにGemがあるのと同じで、webpackerにも必要に応じて便利に使えるライブラリがあるというイメージ。
- [ProvidePlugin \| webpack](https://webpack.js.org/plugins/provide-plugin/)
- 画像を扱う時は色々設定が必要らしい...?自作サービスで画像扱ったらもっと分かっていたのかな🤔

- @haruguchi
- 自作サービスでSASS使ったけど、みんなSCSSだった

- @tomonari
- 設定ファイルを見ると、なんだこれ！？と未だになるが、そういうものだと割り切って淡々と書いていけばいいのかな。

- @paru871
- loaderやpluginを使いたい際はwebpacker独自の方法で設定し、それをwebpackに知らせている
- Rails6.0からJavaScriptはWebpackerで管理するが、CSSは引き続きSprocketを利用している

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

- @maimu_x2x
- 当面頭にインデックスを貼る戦法でついていきます！
- プログラミングのことばかり考えているので、路線を変えてKemioの本を買ってみました。

- @fuwa
- 痩せるらしいので最近オートミールが気になっています
- オートミールは味がしないのでミューズリー？食べてます👀
- ミューズリー初めて聞きました！

- @Saki
- ここからもっと難易度が上がっていくと思うと、ちょっと不安ですね
- ハンズオンは楽しいですよ:smile:
- 手元で色々触ってみると楽しそうですね🙌
- どなたか私にGitHub Actionsを教えてください😇👼

- @tomonari
- jqueryは便利そうだけど、webpackerと同じで今はあまり使わないほうがいいのかな？

- @haruguchi
- 今日健康診断に行ったら少しばかり身長が伸びていた :urayama:
- 1ヶ月の修行期間が終わった(仕事)
- :+1: :100: :yatta!:
- お疲れ様です🙌

- @paru871
- choices.jsはbootcampアプリでは`app/assets/stylesheets/_common-imports.sass`でまとめてimportされているようでした。bootcampではProvideプラグインは使ってないんですね。

-----

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

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

### タイムキーパー
@garammasala29

### ドライバー
@fuwa

### 読んだところ
- P.191 [4-2-1途中 HTML内のlinkタグの制御]

### 次回
- P. [4-3 Railsに組み込まれているJavaScriptの機能]

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

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

- @maimu_x2x
- productionではpublic配下のファイルは読み込まれない
- 設定を環境変数で変えられるのは初めて知った
- スペースや改行も通信量に影響するという点も勉強になった

- hikaru
- 1日休んだらだいぶ迷子になった...
- あらかじめビルドしておく`bin/rails assets:precompile`というコマンドがあるらしい
- プロダクション環境だとよりコンパクトになったファイルができあがるらしい
- `stylesheet_link_tag`で動的にCSSファイル名が変わっても大丈夫らしい

- @fuwa
- `stylesheet_link_tag` というヘルパーメソッドはSprocketsでCSSをビルドした結果を反映する
- 本番環境であらかじめビルド済みのCSSファイルを配信することをプリコンパイルという
- `assets:precompile` を実行するとできます
- 本番環境と開発環境で違うのちょっと怖いな〜と思った

- @tomonari
- production環境は触ったことがなくてわからないことばかりなので勉強しないとと思いました。

- @haruguchi
- Alt JS のところから聴き始めただけですが、こうやって何か書くことで参加してる感を演出しています。

- @garammasala29
- minifyは縮小化のこと。表示を高速化する目的でJSやCSSファイルのサイズを小さくすること
- Sprocketsがアセット管理してくれてる、ありがたい

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

- @maimu_x2x
- SQL書き方ドリルがテーブル結合の章に入った瞬間難しくなって、今日は全問間違えました・・・
- RailsチュートリアルでWebpackerのエラーが出ましたが輪読会のおかげで突破できました！
- :+1: :100: :tada:

- @fuwa
- 今日はヒトカラ4時間していました
- minifyがミッフィーみたいだと思ってしまいました
- 同じくですw
- (・×・)

- hikaru
- Spotify（すぽてぃふぃー）
- (・×・)

- @tomonari
- 台風が近いようですが、みなさん大丈夫ですか？静岡とか大変みたいですけど、埼玉はまだそれほどでもないです。
- 長野にいますが雨が...
- 横浜は無事です。今のところは
- 滋賀も大丈夫ですね、晴れてました

-

- @haruguchi
- はなきんだー
- 誰か、メタプログラミングRuby読もう！
- RubyKaigiに向けて、玄関から外へ出る修行が必要そう

- @garammasala29
- 鼻水が出続けていて全然集中できませんでした

- @paru871
- 明日はパン屋さんの工場の直売所に行きます。30個くらい買ってきまーす！！

-----