Rails 7ではReactアプリ作成が簡単に！ importmap-railsとPropshaftを活用したチュートリアルで体感しよう

Railsによるクライアントサイド開発入門 第2回

　本連載では、2021年12月にリリースされたRuby on Rails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら紹介していきます。連載第2回となる今回は、Rails 7で導入された新機能から、importmap-railsとPropshaftを使ってReactアプリを開発する過程を通じ、これらのライブラリの目的と機能について理解します。

はじめに

　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アプリケーションを構成するライブラリは多岐にわたり、複雑に連携していますから、あとから構成を変更するのはかなり面倒です。できれば、アプリケーション作成時にライブラリを選択しておいた方がよいでしょう。以下の表は、フロントエンド開発関連のオプションのみをまとめたものです。

表　rails newコマンドのフロントエンド開発関連のオプション

オプション	概要	デフォルト
-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ライクな動作については後続の回で紹介する予定です。