[メモ]Rails + React + TypeScript の導入メモ

Rails + React + TypeScript 導入メモ

この記事は、Rails、React、TypeScriptを組み合わせたプロジェクトの初期セットアップについてのメモです。将来ポートフォリオを作成する際に参考にできるよう作成しました。

参考記事

• Rails7 + React + TypeScript環境構築
• Rails7でTailwind CSSを使う方法

1. アプリケーションの作成

まず、以下のコマンドでRailsアプリケーションを作成します：

rails new [アプリ名] -d postgresql --javascript=esbuild

注意：初期の参考記事では--css=tailwindオプションが含まれていましたが、このセットアップでは省略しています。Tailwind CSSは後から導入します。

2. Tailwind CSSの導入

Tailwind CSSを後から導入するには、以下の手順に従います：

1. Gemfileに以下を追加し、bundle installを実行：

Gemfile

gem "cssbundling-rails"

以下のコマンドを実行

bin/rails css:install:tailwind

package.jsonに以下が自動で追加されることを確認：

package.json

jsonCopy"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"

3. Reactの導入

Reactを導入するために、以下のコマンドを実行します：

yarn add react react-dom

rails javascript:install:esbuild

4. TypeScriptの設定

TypeScriptを使用するために、必要なファイルを作成します。
まず、app/javascript/application.jsを以下のように編集：

app/javascript/application.js

import React from "react";
import { createRoot } from "react-dom/client";
import Hey from "./components/Hey";

function App() {
  return (
    <h1 className="text-4xl font-bold text-blue-500">
      <Hey name="Tanaka Tarou" />
    </h1>
  );
}

const root = document.getElementById("root");
if (!root) {
  throw new Error("No root element");
}

createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

次に、app/javascript/components/Hey.tsxを作成し、以下のコードを追加：

Hey.tsx

import React from "react";

interface HeyProps {
  name: string;
}

export default function Hey({ name }: HeyProps): JSX.Element {
  return <div>My name, {name}!</div>;
}

5. アプリケーションの起動

セットアップが完了したら、以下のコマンドでアプリケーションを起動します：

./bin/dev

正しくセットアップできていれば、ブラウザで以下のように表示されます：

補足説明

• このセットアップでは、Railsをバックエンド、Reactをフロントエンドとして使用します。
• TypeScriptを使用することで、型安全性が向上し、開発時のエラー検出が容易になります。
• Tailwind CSSを使用することで、迅速かつ効率的なスタイリングが可能になります。
• ./bin/devコマンドは、Railsサーバーと共にWebpackerを起動し、JavaScriptファイルの変更を監視します。