🛐
[メモ]Rails + React + TypeScript の導入メモ
Rails + React + TypeScript 導入メモ
この記事は、Rails、React、TypeScriptを組み合わせたプロジェクトの初期セットアップについてのメモです。将来ポートフォリオを作成する際に参考にできるよう作成しました。
参考記事
1. アプリケーションの作成
まず、以下のコマンドでRailsアプリケーションを作成します:
rails new [アプリ名] -d postgresql --javascript=esbuild
注意:初期の参考記事では--css=tailwind
オプションが含まれていましたが、このセットアップでは省略しています。Tailwind CSSは後から導入します。
2. Tailwind CSSの導入
Tailwind CSSを後から導入するには、以下の手順に従います:
- 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ファイルの変更を監視します。
Discussion