Rails7からJavascriptバンドラーとしてNode.jsが非依存のimportmapが標準機能に採用されました。
早速、importmapを使ってReactを使用した開発を試みてみましたが、結論としてはimportmapは使用しないことになりました。
Reactの場合はimportmapをオススメできない
Reactを使用する場合、importmapはオススメできません。理由はJSXが使用できないためです。
JSXを使用するにはJSXで書かれたコードを素のJavascriptにトランスパイルする必要があります。しかしimportmapを使用しているとトランスパイルができません。
JSXが使用できない代わりに、htmというトランスパイルの必要がないHTMLマークアップライブラリがありますが、以下の理由によりJSXの代わりとするには厳しいと判断しました。
- Typescriptに対応していない
- eslintに対応していない
htmはトランスパイルがどうしても使用できない環境制約がある場合や、eslintなどを使用しなくても問題のない小規模な開発の場合に適していると感じました。
また、今回の開発ではmuiというReact専用のスタイルコンポーネントを使用したいと考えています。muiもJSXで実装されていますので、使用するためにはトランスパイルが必要になりますので、importmapの使用は見送りました。
esbuildを使用するのがオススメ？
importmapを使用しない場合、他にはwebpack、rollup、esbuildという選択肢があります。
今回はビルド時間がwebpackの100倍速いと言われているesbuildを使用することにしました。 esbuildはホットリロード(HRM)の機能が備わっていないという点が少しネックですが、ひとまずHRMは使用せずに開発を進めてみようかと思います。
開発する上で不都合などあるかもしれませんが、使用感などのレポートはまた別の記事にまとめようと思います。
それでは。
