【第7週】パRails輪読会🚂 (2023-10-02~ 2023-10-06)

tags: パRails🚂

目次

2023-10-02(月)

ファシリ

@shodan

ドライバー

@sadanora

読んだところ

3-5 「HTTPとRailsアプリケーション」から

PR:

次回

p164の冒頭から？

学んだこと・感想

  • @sharoa

    • HTTPリクエストのおさらいで、ブラウザからWebアプリケーションへリクエストを送った時の手順とブラウザの視点からみた流れの確認ができてよかったです。
    • Early Hintsがなんだか難しかった。ざっくり感想となりすみません。

  • @shodan

    • 通常のHTTPリクエストの流れの場合、JSやCSSなどのアセットのリクエストは、レスポンス受信後のHTMLのパースが始まったタイミング。
    • ここでアセットのダウンロード待ちなどが発生すると全体の表示完了が遅れてしまう。
    • なので、本来のレスポンス(200 OK)が来る前に、読み込むアセットのヒントをレスポンスと（103 Early Hints）して受け取るという仕組みがある。
    • 日本人が提案した仕様ってすごい！
    • タスクアプリのCRUDを作って動いた！（それでも初心者には大変ですが……）みたいな難しさじゃないパRails……😇

  • @moegi29

    • 従来のHTTPの仕様ではステータスコードが決まるまでレスポンスを返せなかったけど奥一穂さんという方が作ったEarlyHintsという仕様によって解決された。EarlyHintsに対応したリバースプロキシサーバとしてH2Oというものがある。
    • 実際に試しながらやって頂けたので流れがみれて良かったけど難しい。sadanoraさんドライバーありがとうございます。

  • @sadanora

    • Early Hints
      • 日本人が提案した仕様。すごい！
      • これまでのHTTPの仕様だとステータスコードが決まるまでレスポンスを返せなかったが、Early Hintsによってステータスコード103で本来のレスポンスを送る前にリソースのヒントを送ることができる。
      • 書籍の執筆時点ではまだ主要なブラウザが対応していないので、リバースプロキシを介してEarly Hintsを使うことが現実的だった
    • 久しぶりにドライバーをやったら全然Railsっぽくないことで苦戦してつらかった笑

  • @ayu-0505

    • EarlyHintsという名前通り、事前にヒントとして「CSSやJSを利用する」とブラウザにお知らせする「１０３レスポンス返信」機能がHTTPにあることが分かった。
    • Railsは上記の機能に対応しているが、ブラウザによっては未対応の場合があり、H２Oというプロキシサーバーを通して利用する。
    • これを利用することでアセットのロード開始を早めることができる。

  • @hiromisugie

    • 通常のHTTPリクエストだとHTMLとアセットのリクエストするタイミングが異なること（アセットは後回しになること）を改めて確認できた。
    • HTTPのpreloadという仕組みを使うと、ブラウザがHTMLを受け取った直後にアセットのロード開始タイミングを早められる。
    • もっと早める方法として、Early Hintsという仕様がある。ステータスコード103として本来のレスポンスを送る前にリソースのヒント（ヒントって何？）を送り、通常レスポンスの200OKの前に103Early Hintsが返ってくる。
    • この仕様はまだ未対応ブラウザもあるらしい。
    • 実際の画面で確認ができず、難しかった…（sadanoraさんありがとうございます🙏）

2023-10-03(火)

ファシリ

@motohiro-mm

ドライバー

@sadanora

読んだところ

164pから、170ｐ　3章最後まで。
PR:

次回

Part 2 Railsの周辺知識　第4章　「フロントエンドの開発手法」から。🚂

学んだこと・感想

  • @sharoa

    • 昨日苦戦していたearly hintsが確認できてよかったです。
    • CSPはコンテンツセキュリティポリシーのことで、主にXSSの影響を軽減することを目的とした仕組みのこと。
    • CSPを使うと、悪意のある投稿にたいして無効にすることができる。（インラインのJavaScriptなどを無効にすることができる。）
    • Rails５．２からはCSP用のヘッダーを簡単に設定するための仕組みが用意されている。
    • nonceを活用してより細かい指定をする。なんだかむずかしい。。。

  • @sadanora

    • CSP
      • XSSの影響を軽減することを目的とした仕組み
      • CSPを有効にするにはレスポンスヘッダーにContent-Security-Policyヘッダーを追加する必要がある
      • CSPによって外部ドメインのJavaScriptファイルが実行できなくなり、インラインのJSも実行されない
      • GAのようにサードパーティのJSを利用したい場合許可するドメインの設定をする必要がある
      • report-onlyモード
        • ポリシーの適用をせず違反内容を指定したURLにJSONを送って報告させることができる
        • このレポートを確認して、許可したいドメインのJSが弾かれてないかとか確認するってこと…？
      • nonce
        • nonceによって、指定したインラインのJSの実行だけを許可できる
    • 話がどんどん細かくなって、むずかしい…

  • @moegi29

    • https://localhost:9090/todosでh2oからEarlyHintsで出力？されているページが見れた！ありがとうございます。
    • コンテンツセキュリティポリシーは主にクロスサイトスクリプティングの影響を軽減することを目的とした仕組み。
    • XSSの影響を軽減するにはインラインでのJavaScript実行を禁止することが重要。
    • nonceでヘッダーで指定した文字列を値としたnonce属性があるscriptタグのみを実行できる。

  • @motohiro-mm

    • CSP：XSSの影響を軽減する仕組み
    • config/initializers/content_security_policy.rb　に設定を書くと使える
      • コントローラごとに設定することも可能
    • nonceを使うとさらに細かい設定ができる
      • nonce属性のあるものを有効にできたりする
    • 難しい…

  • @hiromisugie

    • CSPはXSSの影響を軽減するための仕組み。悪意あるユーザーがJavaScriptを仕込んできたりするのを防ぐ効果がある。
    • JavaScriptを一斉に無効化し、ホワイトリストで読み込んで良いものだけ指定できるという感じ
    • RailsでCSPを利用する場合は（ということはRailsじゃないフレームワークとかでもCSPという用語・考え方があるってことですね）、config/initializers/content_security_polucy.rbで設定できる
    • CSPの中の仕組みの１つとしてnonceというのがあり、nonce属性があるscriptタグのみ実行できるようになるらしい。
    • 唐突に「簡単ですね」と出てきて、簡単じゃない、と思った笑。パRailsは、ちょいちょい文体に「これくらいは行けるよね？」という圧を感じることがある😅
    • Railsを学ぶためのいろいろなリンクを確認。かの有名なRailsチュートリアル、自分はやったことがないのでどこかのタイミングでやりたいとは思っている…（やった方いらっしゃいますか、どうでしたか？）

2023-10-04(水)

※あたらしいリポジトリを作成したりなどで読めていないです。

ファシリ

ドライバー

読んだところ

PR:

次回

学んだこと・感想

2023-10-05(木)

ファシリ

@sharoa

ドライバー

@moegi29

読んだところ

4章　「フロントエンドの開発手法」から
4-1-2 「Webpackerの基本的な動作」の途中まで。
PR:

次回

4-1-2 174pの途中（ビルドが完了すると～）から。🚂

学んだこと・感想

途中のwebpacker:compileができなくて
みんなで原因を考えていた。

2023-10-06(金)

ファシリ

@hiromisugie

ドライバー

@motohiro-mm

読んだところ

4-1-2 174pの途中（ビルドが完了すると～）から
177p の4-1-3の前まで。
PR:

次回

4-1-3 「Webpackerの設定ファイル」から。🚂

学んだこと・感想

  • @sharoa

    • webpackerって曲者？？というイメージしかいまのところ無いですｗ
    • そして、まだRailsがよくわかっていないのに、JavaScriptまで登場してきて、ちょっとほんと難しいですね。
    • なので、また読み返したいと思います。
    • 感想のみになってすみません。

  • @hiromisugie

    • Webpackerの設定の沼が深くてまだ理解できていないけど、ひとまず先に進めそうで良かったなという気持ち…！
    • そもそも、Webpackerのエントリーポイントというものが何なのか、どういう役割なのかがわかっていない…。「エントリーポイント」というくらいだから、何かしらの動作が始まる場所、というようなことなのかな、JavaScriptのこともわかってないので今は「ふむふむ…」で進もうかなと思います。
    • RailsでjQueryを使う際にエントリーポイントからjQueryを読み込む、ということは朧げながらわかった。それ以外に、自作したjsのプログラムを盛り込む場合にもエントリーポイントで設定するらしい。ふむふむ…

  • @ayu-0505

    • まだ自分の学習としてはRailsの基本を理解している段階なので、この章はJS（フロントエンド）も関係してきて難しいなと感じました。
    • 調べたところwebpackerはRails7で廃止？しているようなので、「使いこなせるようになる」というよりは、仕組みを理解するに重点を置く方が良いのか？

  • @moegi29

    • 'webpacker:compile'でjsに対応したビルド結果のファイルが生成されている様子をみれてよかった
    • 'webpacker'はほんとに曲者。。。

  • @sadanora

    • エントリーポイントの読み込み
      • sprocketsはjavascript_include_tag
      • webpackerはjavascript_pack_tag
    • webpackerがコンパイルしたファイルを確認できてよかったです。

  • @motohiro-mm

    • app/javascript/packsにあるファイルがエントリーポイントになる
      • app/javascript/packs/application.jsをビルドした結果が、app/public/packs/application-xxx.jsになっている
    • エントリーポイントを読み込むには<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>と書く
    • エントリーポイントからファイルを読み込むにはapp/javascript下にファイルを置いてそれに書き込む
      • app/javascript/packs/application.jsがデフォルト
    • 勝手にマージしてしまいすみませんでした🙇
Select a repo