From 6573f65ead636531f99086381e552088273ea292 Mon Sep 17 00:00:00 2001 From: Naofumi Kagami Date: Fri, 6 Dec 2024 22:37:06 +0900 Subject: [PATCH] additional comments --- app/content/pages/other_libraries/after_webpacker.html.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/content/pages/other_libraries/after_webpacker.html.md b/app/content/pages/other_libraries/after_webpacker.html.md index 9710bbf..6f9434b 100644 --- a/app/content/pages/other_libraries/after_webpacker.html.md +++ b/app/content/pages/other_libraries/after_webpacker.html.md @@ -33,18 +33,18 @@ $('#logo').attr({ 2021年のRails 7以降は、Webpackerではない新しいJavaScriptのビルド方法が採用されました。大きく[３種類用意されています](https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b)。 1. **Import mapsを使用したノービルド JavaScript:** JavaScriptを一切ビルドしないアプローチです。Sprocketsの誕生以前は効率が悪かった伝統的なアプローチが、HTTP2, ES6, import mapsが登場したおかげで再び現実的になったのです。それを最大限に活かしたのが[Import maps](https://github.com/rails/importmap-rails)を使用したノービルド JavaScriptです -2. **JavaScriptのエコシステムを活用したビルドツール:** React SPAのようにどうしてもビルドが必要な場合のために、無理にRailsベースのWebpackerを使うのではなく、JavaScriptのエコシステムのツールを活用した方法として[jsbundling-gem](https://github.com/rails/jsbundling-rails)が用意されています。これはBun, esbuild, rollup.js, Webpackのうちの好きなものを使ってJavaScriptをビルドするものです。特に強い希望がなければ推奨はesbuildです。Basecamp 3はWebpackerからjsbundling-gem + esbuildに移行されたようです。また**本サイトはReactを使用していますので、jsbundling-gem + esbuildでJavaScriptをビルドしています** +2. **JavaScriptのエコシステムを活用したビルドツール:** React SPAのようにどうしてもビルドが必要な場合のために、無理にRailsベースのWebpackerを使うのではなく、JavaScriptのエコシステムのツールを活用した方法として[jsbundling-gem](https://github.com/rails/jsbundling-rails)が用意されています。公式のgemです。これはBun, esbuild, rollup.js, Webpackのうちの好きなものを使ってJavaScriptをビルドするものです。特に強い希望がなければ推奨はesbuildです。Basecamp 3はWebpackerからjsbundling-gem + esbuildに移行されたようです。また**本サイトはReactを使用していますので、jsbundling-gem + esbuildでJavaScriptをビルドしています** 3. **RailsをAPIモードで使用する:** フロントエンドとバックエンドのリポジトリを完全に分離しているのならRailsをAPIモードで使用して、Rails側では一切JavaScriptに関与しないというアプローチもあります ## Rails 7以降のCSS --- css-after-rails-7 CSSについてはSASS等を使わずに生のCSSを使う方法がデフォルトとして用意されています。最新のCSSはネスト化された定義やCSS変数など、従来はSASSがなければ実現できなかった機能が最初から用意されています。以前に比べて、大きいプロジェクトであっても生のCSSが現実的に使えるようになっています。 -Tailwind CSSやSASSを使うのであれば、CSSをビルドするツールが必要になります。Tailwind CSSについては別個の[tailwindcss-rails gem](https://github.com/rails/tailwindcss-rails)が用意されていますし、SASSを使いたいのであれば[dartsass-rails gem](https://github.com/rails/dartsass-rails/)が用意されています。またJavaScriptビルド時にどっちみちNode.jsを使っていたのであれば、それを使う[cssbundling-rails gem](https://github.com/rails/cssbundling-rails)が用意されています。 +Tailwind CSSやSASSを使うのであれば、CSSをビルドするツールが必要になります。Tailwind CSSについては別個の[tailwindcss-rails gem](https://github.com/rails/tailwindcss-rails)が用意されていますし、SASSを使いたいのであれば[dartsass-rails gem](https://github.com/rails/dartsass-rails/)が用意されています。またJavaScriptビルド時にどっちみちNode.jsを使っていたのであれば、それを使う[cssbundling-rails gem](https://github.com/rails/cssbundling-rails)が用意されています。すべて公式のgemです。 tailwindcss-rails gemおよびdartsass-rails gemはNode無しで使えるのに対して、cssbundling-rails gemはNodeを必要とするぐらいの違いです。（ビルド用のDockerコンテナにnodeをインストールするところだけが面倒ですが、そこもさまざまにオプションを変えながら`rails new`で生成されるDockerfileを参考をみて、それをコピペすれば対応できます） -**本サイトでは、Reactを使う関係でどうしてもNodeを使用しますので、ついでにTailwind CSSもcssbundling-rails gemでビルドさせています**。Reactを使わずに、またJavaScriptはimport mapsにするのであれば、tailwindcss-rails gemを使用したかもしれません。 +**本サイトでは、Reactを使う関係でどうしてもNodeを使用しますので、ついでにTailwind CSSもcssbundling-rails gemでビルドさせています**。Reactを使わずに、またJavaScriptはimport mapsにするのであれば、私もtailwindcss-rails gemを使用したかもしれません。 ## Rails 8以降の画像等のアセットの処理 --- image-assets-after-rails-8 @@ -56,6 +56,6 @@ tailwindcss-rails gemおよびdartsass-rails gemはNode無しで使えるのに このようにRails 7, 8でRailsのアセット管理は大きく見直されました。**ノービルドでやる場合であっても、あるいはReact/JSXを使ってJavaScriptをビルドする場合であっても、アセット管理は大幅に簡略化されています**。 -特に**フロントエンドエンジニアに嫌われていたのは、Webpackerによる独自のRailsとの統合**だったのではないかと思います。これが原因でReact/VueフロントエンドとRailsバックエンドのリポジトリを完全に分けていたプロジェクトも多いかと思います。しかし**今のRailsはフロントエンドのエコシステムとより親和性のある方法を採用しています**。 +特に**フロントエンドエンジニアに嫌われていたのは、Webpackerによる独自のRailsとの統合**だったのではないかと思います。これを嫌ってReact/VueフロントエンドとRailsバックエンドのリポジトリを完全に分けていたプロジェクトも多いかと思います。しかし**今のRailsはフロントエンドのエコシステムとより親和性のある方法を採用しています**。 SprocketsやWebpackerがどうしても必要だった時代はもう過ぎ去りました。新しいツールと簡素な管理で、今まで以上に充実したアセット管理ができるようになったと言えるでしょう。