はじめに
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
フロントエンド開発関連のrails newコマンドのオプション
最初に、Rails 7のrails newコマンドで指定可能な、フロントエンド開発関連のオプションをまとめておきます。オプションをあらかじめ確認しておくことで、どのようにライブラリの選択ができるかを把握できます。また、オプションを適切に指定することで、アプリケーション作成のタイミングで構成を決定できます。
Railsアプリケーションを構成するライブラリは多岐にわたり、複雑に連携していますから、あとから構成を変更するのはかなり面倒です。できれば、アプリケーション作成時にライブラリを選択しておいた方がよいでしょう。以下の表は、フロントエンド開発関連のオプションのみをまとめたものです。
| オプション | 概要 | デフォルト |
|---|---|---|
| -A、--skip-asset-pipeline | アセットパイプラインを使用しない | 使用する |
| -a、--asset-pipeline=ASSET_PIPELINE | アセットパイプラインの指定（sprockets、propshaft） | sprockets |
| -J、--skip-javascript | JavaScriptファイルを組み込まない | 組み込む |
| --skip-hotwire | Hotwireを組み込まない | 組み込む |
| -j、--javascript=JAVASCRIPT | JavaScriptアプローチの選択（importmap、webpack、esbuild、rollup） | importmap |
| -c、--css=CSS | CSSプロセッサの選択（tailwind、bootstrap、bulma、postcss、sass） | なし |
一部のオプションは、--no-skip-asset-pipelineのように「no-」をプレフィクスとして付加することでオプションを無効にできますが、単独で使用することはないので表では省略しています。
［NOTE］Hotwire
Hotwireは、SPA（Single Page Application）ライクなアプリケーション開発をサポートするフレームワークです。turbo-railsとstimulus-railsという2つのライブラリで構成されます。JavaScriptのコードをほとんど記述することなく、Ajaxによるフォーム処理などが可能です。HotwireによるAjax処理ひいてはSPAライクな動作については後続の回で紹介する予定です。
