Remixを学びたい(Step1: 基本的なセットアップとルーティング)

はじめに

Remixを学びたいのStep1です。Todoアプリを最終的に完成させようと思います！！

シリーズもの

• Step 1: 基本的なセットアップとTailwindCSS導入
  Remixプロジェクトの作成、TailwindCSSのセットアップ、静的なTODOリストの表示

• Step 2: バックエンドとの疎通
  Remixのloader関数を使ったデータフェッチ、型定義の作成、ローディング状態の実装

• Step 3: アクションの実装
  TODOの追加・更新・削除機能の実装、コンポーネントの分割とリファクタリング

• Step 4: データベース連携
  PrismaとSQLiteを使用したデータの永続化、マイグレーションの実行、CRUD操作の実装

成果物

今回はTODOアプリのページのみを作成します。静的なページを作成するため、ボタンのアクションは有効化していません。
今回作成したものは下記githubにあります

Hands-onスタート

プロジェクトを作成

~/develop/remix_sample  (HEAD)$ npx create-remix@latest .

tailwindのセットアップ

~/develop/remix_sample  (main)$ npm install -D tailwindcss postcss autopref
ixer

up to date, audited 855 packages in 2s

268 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
~/develop/remix_sample  (main)$ npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
postcss.config.js already exists.

app/routes/_index.tsx

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction = () => {
	return [
		{ title: "New Remix App" },
		{ name: "description", content: "Welcome to Remix!" },
	];
};

export default function Index() {
	const todos = [
		{ id: 1, title: "Remixを学ぶ", completed: false },
		{ id: 2, title: "TODOアプリを作る", completed: true },
		{ id: 3, title: "コードを理解する", completed: false },
	];

	return (
		<div className="max-w-2xl mx-auto p-4">
			<h1 className="text-2xl font-bold mb-4">TODO App</h1>

			{/* TODO追加フォーム */}
			<div className="mb-4">
				<input
					type="text"
					placeholder="新しいTODOを入力"
					className="w-full p-2 border rounded"
				/>
			</div>

			{/* TODOリスト */}
			<ul className="space-y-2">
				{todos.map((todo) => (
					<li
						key={todo.id}
						className="flex items-center justify-between p-3 bg-white border rounded shadow-sm"
					>
						<div className="flex items-center gap-2">
							<input
								type="checkbox"
								checked={todo.completed}
								className="h-4 w-4"
							/>
							<span
								className={todo.completed ? "line-through text-gray-500" : ""}
							>
								{todo.title}
							</span>
						</div>
						<button className="text-red-500 hover:text-red-700">削除</button>
					</li>
				))}
			</ul>
		</div>
	);
}

→indexページを作成しました。
静的なページのため、ただレンダリングを実施しているだけです

さいごに

今回は静的なページを表示するだけでした。次はサーバとの疎通をやってみたいと思います！