React Remixを使ってTODOアプリを作ってみる(1): セットアップ

2025年1月7日

React Remixを使ったTODOアプリを作成するための初期設定を解説します。この記事では、環境構築からプロジェクトの準備までの手順をわかりやすく説明します。

1. 必要なツールのインストール

React Remixを始めるには、以下のツールが必要です。

Node.js: 最新版をNode.js公式サイトからインストールします。
Remix CLI: Remixプロジェクトを簡単に作成するためのツール。

以下のコマンドを実行してインストールします。

npm install -g create-remix

2. プロジェクトの作成

次に、Remixプロジェクトを作成します。以下のコマンドを実行してください。

npx create-remix@latest

コマンド実行後にいくつか質問が表示されます。

Where should we create your project?: プロジェクトのフォルダ名を入力します (例: todo-app)。
What type of app do you want to create?: アプリの種類を選択します。ここでは Remix App Server を選びます。
Where do you want to deploy?: デプロイ先を選択します (例: Vercel)。
TypeScript or JavaScript?: 使用する言語を選択します。ここでは TypeScript を推奨します。

3. 必要なパッケージのインストール

プロジェクトを作成したディレクトリに移動し、以下のコマンドを実行して依存関係をインストールします。

cd todo-app
npm install

4. プロジェクト構造の確認

プロジェクトを作成すると、以下のようなディレクトリ構造が生成されます。

📁 todo-app
├── 📁 app
│   ├── 📁 routes
│   ├── 📁 styles
│   ├── root.tsx
│   └── entry.client.tsx
├── 📁 public
├── remix.config.js
├── package.json
└── tsconfig.json

app/routes: ルート（URLパス）を定義するファイルを配置します。
remix.config.js: Remixアプリの設定ファイル。
public: 静的ファイル（画像やCSSなど）を配置するフォルダ。