はじめに
WebアプリケーションフレームワークのRuby on Railsは、2021年12月にバージョン7となりました。これに伴い、クライアントサイド開発のサポートについても大きな変化を遂げ、多様な選択肢が提供されるようになりました。本連載では、このRails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら、紹介していきます。
対象読者
- Ruby on Railsを長らく使ってきた方
- 他のWebアプリケーション開発フレームワークを使ってきた方
- Railsにおけるフロントエンド開発に関心のある方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
macOS Monterey
- Ruby 3.1.0p0
- Ruby on Rails 7.0.2.3
- Google Chrome 100
バンドラーによるReactアプリ作成の準備
本記事では、前回同様にRailsアプリにReactを組み込む中で、フロントエンド開発の基本的な流れをおさえていきます。前回は、Rails 7で標準となったimportmap-railsによってReactモジュールを直接インポートする例を紹介しました。この方法は、今後は標準的なものになっていくと思われますが、importmap-railsが使えないブラウザ環境や、Shimライブラリによる代替的な手法が好ましくないと考えるケースもあるとして、今回は従来から用いられてきたバンドラーによるReactアプリの作成を紹介します。
作成するReactアプリは前回同様にシンプルなものです。コントローラとアクションを1個作成し、そのビューのコンテンツをReactによって生成します。コンテンツも最低限（メッセージと背景画像が表示されるのみ）にとどめています。
バンドラーを選択する
Rails 7でバンドラーを使う場合、jsbundling-railsというライブラリを使います。このライブラリを使うと、バンドラーとしてesbuild、rollup、そしてwebpackのいずれかを選択できます。バンドラーを選択するにあたり、これら3つのバンドラーを主な項目について比較してみたのが以下の表です。
| esbuild | rollup | webpack | |
|---|---|---|---|
| ビルド速度 | 高速 | 低速 | 低速 |
| CommonJSモジュール対応 | ○ | △（要プラグイン） | ○ |
| ES6対応 | ○ | ○ | △（要Babel） |
| TypeScriptのトランスパイル | ○ | △（要プラグイン） | △（要プラグイン） |
| JSX構文のトランスパイル | ○ | △（要プラグイン） | △（要Babel） |
| Tree-shaking | ○ | ○ | × |
この表から、esbuildとrollupはES6（ECMAScript 2015）にネイティブ対応し、TypeScriptとJSX（JavaScriptコードにHTMLを直接記述する、主にReactで用いられる拡張構文）のトランスパイルが可能など（rollupではプラグインで対応）、基本機能に大きく変わるところはないように見えます。Tree-shakingという、ES6モジュールで使用されない部分をビルド時に削除する機能も有しています。これらに比べると、webpackは基本的な部分で見劣りすると言えます。
esbuildが優れているのが、ビルドの速度です。rollup、webpackと比較すると、100倍以上の速度差が出たという報告もあります。rollup、webpackがJavaScriptで記述されているのに対して、esbuildはGo言語で記述されており、ネイティブコードにコンパイルされることで高速に動作するのです。また、並列処理が得意とされるGo言語の特性を生かして、esbuild自体も並列化を意識した設計になっているようです。
これらを勘案して、今回はesbuildを選択することにします。開発用サーバの起動に全くストレスがないのを実感できるでしょう。
アプリケーション環境を整える
まずは、バンドラーに必要なアプリケーション環境を整えておきます。今回使用するバンドラーであるesbuild自体は、Railsアプリケーションの作成時にインストールされますが、このためにNode.jsとyarnパッケージマネージャが必要となっています。また、Reactのインストールにもyarnパッケージマネージャを使用します。そこで、Node.jsとyarnパッケージマネージャが入っていなければインストールしておきます。手順は省略しますが、macOSではHomebrewを使うのがもっとも簡単です。
なお、Railsアプリケーションの作成時に下記のようなメッセージが混じる場合には、yarnパッケージマネージャが最新版ではありませんので、念のため最新版にアップデートしておきます。
warning Your current version of Yarn is out of date. The latest version is "1.22.18", while you're on "1.22.17".
