[memo]Next.jsでタスク管理ツールを作成していく

実装中のため随時更新

🔧 チャレンジしたい技術スタック

項目	技術
UI	React, Tailwind CSS（or shadcn/ui）
ルーティング	Next.js
型定義	TypeScript
テスト	Playwright（E2Eテスト）
状態管理	useState / useReducer
API	Next.js API Routes

Next.jsプロジェクト作成

npx create-next-app@latest taskmate --typescript


√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... No(webpack爆速だけどより爆速だけど不安定らしい)
√ Would you like to customize the import alias (`@/*` by default)? ... No(デフォルトで使いやすいから)

実装へ

page.tsxが初期ページ

状態管理したい変数を宣言

定義付けと初期値も一緒に設定

const [task, setTask] = useState<string>("")
const [taskList, setTaskList] = useState<string[]>([])

入力値を宣言したsetTaskに格納

<input
  type="text"
  value={task}
  onChange={(e) => setTask(e.target.value)}
  placeholder="タスクを入力"
  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>

Tailwind CSSで指定した要素

• shadow：要素に影を追加します
• appearance-none：ネイティブのフォーム要素（ボタンや入力欄など）のデフォルトのスタイルを削除します
• border：要素にボーダー（枠線）を追加します
• rounded：ボーダーの角を丸くします（デフォルトの値）
• w-full：要素の幅を親要素いっぱいに広げます
• py-2：要素の上下のパディングを 0.5rem（8px）に設定します
• px-3：要素の左右のパディングを 0.75rem（12px）に設定します
• text-gray-700：テキストの色をグレー (#4a5568) に設定します
• leading-tight：行の高さを 1.25 に設定し、テキストを密集させます
• focus:outline-none：要素がフォーカスされたときのアウトラインを削除します
• focus:shadow-outline：フォーカス時に影を追加し、視覚的なフォーカス状態を強調します

<button
  onClick={handleAddTask}
  className="bg-gray-700 text-gray-300 font-bold py-2 px-4 hover:bg-blue-700 rounded"
>add</button>

const handleAddTask = () => {
    if (task.trim() === "") return
    setTaskList([...taskList, task])
    setTask("")
}

trim() 関数は、文字列の先頭と末尾にある空白（スペース、タブ、改行）を取り除く
-> 空白だけの入力を防いでいる

setTaskList([...taskList, task])　でやっていること

• taskList を スプレッド構文 (...) で コピー する
• 新しい task をコピーした配列の最後に追加する
• setTaskList に渡し、新しい配列を 状態（state） に更新する

<ul>
  {taskList.map((t, i) => (
    <li key={i}>{t}</li>
  ))}
</ul>

map()のコールバックではmap(配列の要素, index)