Rails 7 + React + TypeScriptによるフロントエンド開発備忘録

はじめに

今回、新しいプロジェクトで、Ruby on Rails 7、React.jsによるフロントエンド開発に着手することになったので、開発手順の備忘録記載。

Railsは1年半ぶりくらいに触ることになり、いつの間にかVersion7になっていたことにビックリ。忘れている部分も多い。また、Reactは初めてなので、TypeScriptとともに0から学びながら開発していく。

jsbundling-railsを使ったTypeScriptのセットアップ方法、Reactコンポーネントの作成と組み込み方法、そしてRailsのERBファイルでのコンポーネントの呼び出し方法について記載。

全体構成

RailsとReactの組み合わせによるアプリケーションの全体構成は、以下

• View (Actionごと): Reactコンポーネントを使用して、各画面ごとに独立したtsxファイルを作成し、RailsのViewがそれを呼び出す。

• Controller (Ruby): 各Actionに対応するRailsのコントローラーがあり、必要なデータを処理し、Reactコンポーネントに渡すためのデータを準備する。

• Model: データベースとやり取りを行い、ビジネスロジックを実行。

環境構築

JSアセットパイプライン：jsbundling-rails + esbuild の導入

Rails 7では、JavaScript (JS) と Cascading Style Sheets (CSS) のバンドル方法が変更された。従来のWebpackerに代わって、jsbundling-railsとcssbundling-railsが導入され、バンドル方法がよりシンプルかつ直感的になった。

jsbundling-railsは、JavaScriptのバンドルに関する新しいアプローチで、esbuildやrollup.js、webpackなど、複数のバンドラーをサポートしている。

esbuildは極めて高速なJavaScriptバンドラーおよびミニファイヤーで、大規模なJavaScriptコードベースでも素早くバンドルすることができる。

Railsプロジェクトにjsbundling-railsとesbuildを導入するには、以下の手順を実行。

jsbundling-railsをGemfileに追加してインストール:

# Gemfile
gem 'jsbundling-rails'

その後、bundle installを実行。

esbuildをセットアップ:

bin/rails javascript:install:esbuild

これにより、esbuildがセットアップされ、app/javascriptディレクトリ内で利用可能になる。

TypeScriptのセットアップ

RailsプロジェクトにTypeScriptを導入するためには、まず以下のコマンドを実行して必要なパッケージをインストールする。

yarn add typescript @types/react @types/react-dom @babel/preset-typescript

このコマンドにより、ypeScriptとそのReact用の型定義、そしてBabelのTypeScriptプリセットがプロジェクトに追加される。

RailsでのPathとアクションの接敵

まず、Railsで画面を描画するためのPathを作成する

Dockerコマンドを利用したコントローラーとアクションの自動生成

下記コマンドで…

続きは、こちらで記載しています。

Rails 7 + React + TypeScriptによるフロントエンド開発備忘録