【第9週】パRails輪読会🚂 (2023-10-16~ 2023-10-20)

tags: パRails🚂

目次

2023-10-16(月)

ファシリ

@motohiro-mm

ドライバー

@hiromisugie

読んだところ

4-2-2 192p 「本番環境向けのビルド」から
4-3-1 199p 終わりまで。
PR:

次回

4-3-1 200p 「手軽にAjax通信を行う」から。🚂

学んだこと・感想

  • @sharoa

    • プリコンパイルの項目、難しかったので、後でまた読み返したいと思います。
    • railsには画面の制御を補助するJavascriptライブラリrails-ujsが組み込まれている。
    • submitボタンの押下時にダイアログを表示したり、入力フォームの内容を二重送信しないように制御できたりする、
    • 直接Javascriptを書かなくてもビューテンプレートに少し記述するだけで実現できる。
    • 二重送信を防ぐ機能と、ダイアログを表示させる機能を、画面で確認できたのは良かった！

  • @motohiro-mm

    • 本番環境ではあらかじめビルド済みのCSSファイルを配信するために、プリコンパイルをするbin/rails assets:precompile
      • RAILS_ENV=production bin/rails assets:precompileするとファイル内のプログラムが縮小化されより軽量なファイルが生成される
    • プリコンパイルしたファイルを読み取るにはRAILS_SERVE_STATIC_FILES=1 RAILS_ENV=production bin/rails s
    • CSSファイルに.debugがつかなくなる
    • rails-ujsの動きが見て分かりやすくて勉強になりました
    • Rails７からはrails-ujsは非推奨でデフォルトにturboが使われていた気がします

  • @moegi29

    • publicディレクトリ以下をRails自身で配信するかどうかはconfig/environments/production.rb内の設定にある環境変数の有無で切り替えられる。実際に環境変数を書いて実行したことでCSSが適用されたのが確認できた。
    • rails-ujsを使うとJSを書かなくてもビューテンプレートに追記することで実行できるのは便利。
    • sugieさんの環境はビルドもrails newも速くていいなぁと思いました。

  • @sadanora

    • Kindleが全然本開けなくて対処してるうちに輪読会おわってしまったw
    • 最終的にAmazonの公式からじゃなくてAppStoreからアプリをダウンロードしたらちゃんと動いているっぽい
    • ちょっと前の情報だと「mac OS版はAppStoreじゃなくてAmazonからダウンロードせい」みたいなのもみかけた気がするけど、いまはAmazonの方のが安定してないのかなあ…
    • 全然輪読会と関係ない話でした📕

  • @hiromisugie

    • 本番環境ではあらかじめビルド済みのCSSを配信することで待ち時間を発生させないようにする。これをプリコンパイルという？
    • ビルド済みのJSやCSSの静的ファイルはRailsが配信するのではなくnginxなどのサーバを通じて配信する、らしい。ふむふむ…？「本番環境でちゃんと表示するか確認する」みたいな場合にはまだまだ知らなければいけないことが沢山ありそう。
    • rails-ujsによる画面制御について、画面で確認しながら進められて良かった。仕組みの理解は足りてないと思うけど、「ここをこう変えるとこう動作する」と見えるのは良い…！
    • rails newの時に気をつけることを、毎回忘れる。。。
      • webpackerのバージョンアップ等
      • gitが二重にならないようにrails new アプリ名 --skip-gitというオプションをつける。（←これはこれで、master.keyなどの重要な情報がgitに上がるというマズイ状態を対処する必要あり。）skipを忘れた場合は、後で.gitのフォルダを消せば大丈夫そう。（master.keyとかはグレーになっていることを確認済み）

2023-10-17(火)

ファシリ

@sharoa

ドライバー

@motohiro-mm

読んだところ

4-3-1 200p 「手軽にAjax通信を行う」から
4-4-2 205p 「RailsプロジェクトにStimulusを追加する方法」まで。
PR:https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch4/pull/8

次回

4-4-3　205p 「Stimulusの機能概要」から。🚂

学んだこと・感想

  • @sharoa

    • 全体的な感想として、Javascriptめっちゃ出てくるやん！です。
    • JSのこと、ある程度知ってる上での内容が今後もたくさん出てくるんだろうな、と思うと少しゾッとしますが、頑張ってついていきたいです。
    • Ajaxによる通信を行うと、表示しているページの操作が可能なまま非同期でのサーバとデータのやり取りを行うことができて、必要な部分のみ画面遷移を行えて軽量な画面遷移を実現することができるとのこと。
    • ヘルパーメソッドのform_withはデフォルトでAjax通信を行う設定になっていて、local:trueと明示することで通常の画面遷移になる。
    • Scaffoldで生成したformは明示的にlocal:trueと指定されているため、Ajaxではなく通常の画面遷移を行うようにしている。

  • @moegi29

    • rails-ujsにはHTTPリクエストをAjax化するための機能もついている。実際にform_withの記述を変更してレスポンスデータを確認することでAjax化通信されていることがわかりました。
    • TurbolinksはAjaxリクエストで取得したHTMLデータのbodyタグ内を現在表示しているbodyタグへ反映させることで高速なページ遷移を実現するライブラリ。
    • window.fooはJSのコードで'window'オブジェクトはブラウザのグローバルオブジェクトでブラウザ全体で共有される変数や関数を格納するためのもの。

  • @shodan

    • form_withはデフォルトではAjax通信を行う設定になっており、local: trueと設定することで通常の画面遷移にできる。
    • そのAjax通信の仕組みをRailsで高速に実現しているのがTurbolinksというライブラリで、Rails7ではTurbo。
    • Turbolinksは通常のJSとは異なる独自のイベントを用意している。Turbolinks:loadイベントはTurbolinksもよって画面遷移が行われたときに発火する。
    • JS入門しましたがすでに苦手意識が。。なんとか乗り越えていきたい……。

  • @motohiro-mm

    • TurbolinksはAjax通信で高速なページ遷移を実現する
      • rails-ujsでもAjax通信での画面遷移ができる（local:falseにする）
    • イベントリスナーにイベントを追加すると、そのイベントごとにブラウザのコンソールにメッセージが表示される（発火というらしい）
      • 今回はTurbolinksによって画面が切り替わったときに発火したらしい
    • 速いTurbolinksを使うにあたり可読性が下がらないようにする規約としてStimulusというフレームワークがある
    • Stimulusの細かいことは明日学びたいです

  • @ayu-0505

    • Ajax通信という非同期でサーバーとやり取りを行うことにより、高速な通信を可能とする技術がある。それはform_withにおいてlocal: falseに明示的に変更すると利用できる。（普通はtrue）
    • Turbolinks(現Turbo)では、headの情報更新をせず、bodyタグ内をやり取りすることで高速通信を行う。
    • JSの知識が必要なので、このあたりはより学習が深まってからの復習が必要。
    • JSフレームワークにも種類があるが、Stimulusはサーバーサイド寄りの控えめなフレームワーク。Turbolinksにおける規約がないことによる可読性不足を補うためのもの。

  • @sadanora

    • TurbolinksはAjax通信によって高速なページ遷移を実現する
    • Hotwireで自作サービス作ってるくせに、Ajaxが何か説明しようと思うとできないので勉強したいと思いました。
    • Kindleが落ちなくなって快適！

2023-10-18(水)

ファシリ

@hiromisugie

ドライバー

@motohiro-mm

読んだところ

4-4-3　205p 「Stimulusの機能概要」から
4-4-4　211p 「Lifecycle Callback」まで。
PR:

次回

4-4-4　211p 「Data Maps」から。🚂

学んだこと・感想

  • @hiromisugie

    • Stimulusは、JavaScriptをさっと入れるときに使える控えめなフレームワーク、らしい。どこからJavaScriptになっているのかが、まずよくわかっていない。。。
      • まずコントローラを作成する。
      • 続いてアクション。アクションはDOM内のイベントとコントローラ内のメソッドを紐づける。
      • data-actionの書き方はイベント名->コントローラ名#メソッド名という規約。デフォルトイベントが存在するので、イベント名は省略できる
      • そしてターゲットは、コントローラ内のDOM要素とJavaScriptを関連づける。
        ここで完全に頭が付いていけなくなっています。。。JavaScriptの学習とどう平行して理解を進めていくのかよくわかっていませんが、とにかくJavaScriptも学ばねばと思いました。

  • @sharoa

    • クローンじゃなくて、ダウンロードしてきたものをそこに入れるという方法があるんだな、と思った。
    • Stimulusの体験として、公式ページに掲載されているサンプルが画面越しに確認できたのは良かった。
    • ただ、コードの中身を見るとやはりそこにはJavascriptの子達が。。。（sadanoraさん教えてくれてありがとうございます。）
    • そもそもDOMってなに？ってところから始まっていて、
      　　- 【JavaScriptの基本】DOMの仕組みと構造
      　　- このあたりを見てちょっと勉強したいと思います。
      　　-

  • @ayu-0505

    • Stimulusの機能ではdate-*属性を利用し、それがJavaScript側の各要素と規約で結びついている。
    • data-controller,data-action,data-targetを学習した。（が、まだ分からず）

  • @moegi29

    • HTMLのdata-controllerなどdata-*属性とJS側の各要素を紐づけできる。JSの処理を書いてブラウ動きをみるのは楽しい。

  • @motohiro-mm

    • Stimulusは控えめなJavaScriptのフレームワーク
    • data-*
    • data-controller：ここで定義されたもの（例：hello）と対応する名前のコントローラを読み込む（hello_controller.js）
    • data-action：監視するイベントと、イベントが発生した時の処理が書かれる
    • data-targetはtargetsで定義した文字列と紐づけられる

  • @sadanora

    • Stimulusはhtmlのカスタムデータ属性を使ってDOMと接続できる。
    • Stimulusは自作サービスで使ったので基本的な使い方は知っているつもりだけど、本だけ読んでいてもピンとこない感じが気持ち悪い。
    • フロントエンドの話はJSの話が前提になっている解説も多いので、必要になった時に戻っ読み直すくらいでいい気もする？
Select a repo