【第8週】パRails輪読会🚂 (2023-10-10~ 2023-10-13)

tags: パRails🚂

目次

2023-10-10(火)

ファシリ

ドライバー

読んだところ

4-1-3 「Webpackerの設定ファイル」から
4-1-4(183p)の終わりまで。
PR:

次回

4-1-5 「ライブラリの統合」から。🚂

学んだこと・感想

  • @sharoa

    • Webpackerは初期設定から何も変更しなくともある程度うまく動作するように設定されているらしい。（優秀）
    • webpackを単体で利用するときはwebpack.config.jsという設定ファイルを利用するが、Webpacker環境ではそれを直接扱わず、config/webpacker.ymlで、defaultというキーで共通の設定をおこない、環境ごとに共通設定を利用・上書きするような形式で出力先などを定義する。
    • staging環境を追加したい場合は、stagingをトップレベルのキーとして追加する。
    • 他にもいろいろとあったのですが、ちょっと難しすぎて、、、また読み直す！！本当に。とはおもったけど、このwebpackerってもう使われないんだっけな。。。？

  • @moegi29

    • webpacker.ymlに`*default'というキーを書くことで環境ごとに共通設定を利用できる。
    • staging環境は本番環境と同じ状態でシステムの動作や不具合のチェックをする環境のこと。
    • 同じディレクトリ内にcssとjsがある場合、js内にrequire("stylesheets/application")と書くことでCSSが使える。webpackerでも管理できる。

  • @sadanora

    • webpack単体で扱う場合はwebpack.config.jsに設定を書くが、Webpacker環境ではconfig/webpacker.ymlで環境ごとの設定を書くことができる
      • webpack.config.jsを直接編集することはない
    • ビルド対象が多い場合はwebpack-dev-serverを使うと便利
      • 監視対象のファイルの変更を検知して自動でビルドしてくれる
    • 急にJSの話が増えて？難しい
      • babelとかモジュールのrequireとかでてきたけど、特に説明がないので前提知識として知っていないと理解が難しいと思う

  • motohiro-mm

    • webpackerの設定ファイルはconfig/webpacker.ymlとconfig/webpack/*.js
    • webpack環境で書いたJSは編集ごとにビルドが必要
      • 手動ビルド：bin/webpack
      • サーバーを利用：bin/webpack-dev-server
        • ビルド対象が多くページの表示に時間がかかる場合
    • そもそもJSもあまりよく分かっていないので、ふわふわした認識になっていますが、なんとかついていきたいです

  • @hiromisugie

    • 引き続きWebpacker。難しい、、、
    • ymlの書き方。<<: *defaultは、defaultの設定をそのまま持ってくる、という感じ。
    • CSSや画像を、SprocketsではなくWebpackerで管理することもできることを知った。どのような時にそれが有効なのかはわからなかったけど、なるほど〜と思った。
    • マイグレーションファイルがちょっとおかしい場合の簡易的な対処を教えてもらい助かりました🙏（実際にDBに色々入ってる場合など、こんなサクッとやってはいけないシーンも多々あると思いますが）
      • rails db:dropして今のDBを一旦削除し、rails db:createで新規作成し、rails db:migrateで改めてマイグレートする

2023-10-11(水)

ファシリ

@sharoa

ドライバー

@hiromisugie

読んだところ

4-1-5 「ライブラリの統合」から
4-2-1 189p 途中まで。
PR: https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch4/pull/5

次回

4-2-1 189p 「stylesheetsディレクトリ内に～」から。🚂

学んだこと・感想

  • @sharoa

    • WebpackerはReactやVue.jsなどいくつかのライブラリをすぐに導入するためのコマンドを提供している。
    • Reactを導入したい場合にはrails newでオプションでつけるのと、既存のRailsアプリケーションに導入できるのと２つある。
    • prependってなに？って思いましたが、jsのコマンドだそうで、、jsの予習もしないと大変そう。
    • Sprocketsは従来のRailsで利用されてきたフロントエンドで利用するパッケージングシステムのこと。このSprocketsを利用してCSSのソースコードのコンパイルや縮小、圧縮を行う。

  • @moegi

    • reactオプションをつけることでrails newするときにreactをインストール、webpacker:install:reactで既存のrailsアプリにreactを導入できる。実際に試してもらったことでreactが使えるようになったかがよくわかりました。
    • SprocketsはSCSSをCSSへコンパイルする機能や1つのファイルへ統合する処理とかフロントエンド開発によく利用される機能を提供している

  • @sadanora

    • $ webpacker:installで色々なライブラリを追加することができる。
      • ReactやVueなどもこのコマンドで導入できる
    • Webpackerの設定の拡張
      • pluginsやloaderなどを追加して設定を拡張できる。
      • 素のWebpackではwebpack.config.jsを編集するが、Webpackerの場合webpack.config.jsはないので、webpacker:installやyarn installなどでライブラリのインストール後に config/webpack/配下に設定ファイルを置くなどして設定する。

  • @hiromisugie

    • ここへきてwebpackとWebpackerという表記の違いを認識したので調べた。と思いきや、この章冒頭のP172でちゃんと説明してあった…。調べたURLは一応貼っておきます
    • ReactやVueを入れたりloader・pluginを入れる方法を読んだが、全然理解できていないので必要な際にここに戻ってきて復習できるようにしておきたい、と思った。
    • Reactなどは、rails newするときにも入れられるし後から追加で入れられる、ということはわかった。
    • とにかくJavaScriptについても知らねばならぬことを痛感しています。

2023-10-12(木)

ファシリ

@moegi

ドライバー

@motohiro-mm

読んだところ

4-2-1 189p 「stylesheetsディレクトリ内に～」から
192p 4-2-1の終わりまで。
PR:https://github.com/motohiro-mm/Perfect_Ruby_on_Rails_Ch4/pull/6

次回

4-2-2 192p 「本番環境向けのビルド」から。🚂

学んだこと・感想

  • @sharoa

    • 例としてのっていたCSSファイルで、一見コメントアウトされたようなファイルに見えるけど、*=で始まる行はSprocketsが解釈するための特別なディレクティブ。
    • ディレクティブってなんやねん、という感じでしたのでしらべてみた。
    • https://www.javadrive.jp/servlet/jsp_directive/index1.html
    • 読んだところですぐ理解できるものでもなかったです。
    • SCSSとCSSは基本的な構文に大きな違いがない。そのため、CSSにかなり近い記述方法をしているが、SCSSで記述しているため、タグの親子関係を入れ子として記述している。

  • @sadanora

    • sprockets
      • scssなどのcss拡張言語をcssにコンパイルしたり、複数のcssファイルをひとつにまとめたりしてくれる。ビルドの設定などを気にしなくてもよしなにCSSへの変換をしてくれる。
      • app/assets/stylesheets/application.cssでrequireの順番を変えると、ファイルの読み込み順の制御ができる

  • @moegi

    • http://localhost:3000/assets/application.dubug-xxx.css などのURLで追加されているxxx部分はフィンガープリントという値。実際にブラウザから見れたことでどこの値のことなのかがわかった。
    • Sprocketsを使うことでビルド用の特別な設定をせずSCSSの記述からCSSへ変換されて1つのファイルに結合できる。

  • @motohiro-mm

    • 「.debug付きのファイルは各種ファイルを結合しつつSource Mapの情報を付与したファイルです」以降の説明が今だによくわかりません…
    • スタイルの追加方法とそれを開発者ツールで確認する方法が分かったので、それは良かったです！
Select a repo