この記事は以下の記事を参考にして作成しました。
問題
TODOリストアプリを作成する
目的
React の基本を理解する: カウンターアプリは、ステート管理やイベントハンドリングなど、React の基本的な機能を学ぶのに適しています。初心者にとっては、これらの概念の理解を深める良いスタートポイントとなります。
達成条件
- 入力フィールド: ユーザーがタスクを入力するためのテキストフィールドが存在する。タスク名が1文字以上でない場合はバリデーションする
- 追加ボタン: 入力されたタスクをTODOリストに追加するためのボタン。
- タスクリスト表示: 追加されたタスクがリストとして表示される。
- 削除ボタン: 各タスクの隣には削除ボタンがあり、それをクリックすることで該当のタスクをリストから削除する
実際に解いてみた
利用技術
- React
- TypeScript
- shudcn/ui
- TailwindCSS
- Next.js
結果
ディレクトリ構成
コード
page.tsx
'use client';
import Add from '@/components/add';
import List from '@/components/list';
import { useState } from 'react';
export type Task = {
//typeScriptでは自分で型に名前を付けられる
name: string;
isDone: boolean;
};
export default function Home() {
const [todoList, setTodoList] = useState<Task[]>([
//const [state, setState] = useState<型>(初期値);
//①
//todoListという名前のTask型の配列（今回はconstと前につけてるので定数）を宣言
{
name: '筋トレ',
isDone: false,
},
{
name: '買い物',
isDone: true,
},
]);
function addTodo(task: Task) {
setTodoList([...todoList, task]);
}
// タスクの完了状態を切り替える関数を追加
function toggleTaskStatus(index: number) {
const newTodoList = todoList.map((task, i) => {
if (i === index) {
return { ...task, isDone: !task.isDone };
}
return task;
});
setTodoList(newTodoList);
}
// タスクを削除する関数を追加
function deleteTask(index: number) {
const newTodoList = todoList.filter((_, i) => i !== index);
setTodoList(newTodoList);
}
return (
<div>
<List todoList={todoList} onToggleStatus={toggleTaskStatus} onDelete={deleteTask} />
<Add onSubmit={addTodo} />
</div>
);
}
components/add/index.tsx
'use client';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
import { Input } from '../ui/input';
type Task = {
name: string;
isDone: boolean;
};
type AddProps = {
onSubmit: (task: Task) => void; //void:関数が呼ばれた後に返り値はないということ
};
const formSchema = z.object({
username: z.string().min(2, {
message: 'タスク名を入力してください',
}),
});
export function ProfileForm({ onSubmit }: AddProps) {
const form = useForm<z.infer<typeof formSchema>>({
//useformはReact Hook Form のメイン関数で、フォームの状態と操作を管理
//typeof:実際の値やオブジェクトからその型を取得。
//infer:条件付き型の中で部分的に型を推論。
//つまり、formという変数をformSchemaから推測した型で定義する
resolver: zodResolver(formSchema),
defaultValues: {
username: '',
},
});
function onSubmitForm(values: z.infer<typeof formSchema>) {
// タスクを作成して親コンポーネントに渡す
onSubmit({
name: values.username,
isDone: false,
});
form.reset(); // フォームをリセット
}
return (
<Form {...form}>
{/*useForm によって生成されたフォーム関連の情報（例: form.control, form.handleSubmit）をFormに渡しています。 */}
<form onSubmit={form.handleSubmit(onSubmitForm)} className="space-y-8">
{/*formはhtmlのformタグである。onSubmit属性はHTMLのformタグに使われ、フォームが送信される際に実行する関数（イベントハンドラー）を指定
form.handleSubmit(onSubmitForm)
→formはuseForm フックの戻り値（オブジェクト）であり、その中のhandleSubmitを今回使う。
handleSubmit=onSubmit の前にバリデーションを加えるために使う。フォームの送信時に呼び出される関数をラップし、バリデーションが成功した場合のみその関数を実行
に指定されたJavaScript関数を実行する。(今回はonSubmitForm関数を実行)*/}
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder="タスクを追加" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
<Button type="submit">保存</Button>
</DialogFooter>
</form>
</Form>
);
}
export default function Add({ onSubmit }: AddProps) {
return (
<div>
<Dialog>
<DialogTrigger asChild>
<Button className="fixed bottom-8 right-8 size-14 rounded-full" size="icon">
<Plus />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>新規登録</DialogTitle>
<ProfileForm onSubmit={onSubmit} />
</DialogHeader>
</DialogContent>
</Dialog>
</div>
);
}
components/list/index.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '../ui/button';
import { Trash } from 'lucide-react';
import { Task } from '@/app/page';
type Props = {
//Home（）からTask型の配列を受け取りたいので、引数（propsという）の型を定義する
todoList: Task[]; //todoListという名前でTask型の配列を受け取る
onToggleStatus: (index: number) => void;
onDelete: (index: number) => void; // 削除用の関数を追加
};
export default function List({ todoList, onToggleStatus, onDelete }: Props) {
//ListというコンポーネントでProps型の{ todoList }というpropsを受け取る
return (
<div className="flex h-svh w-screen items-center justify-center">
<Card className="w-10/12 max-w-md overflow-hidden">
<CardHeader className="bg-muted-foreground text-muted">
<CardTitle>TODO List</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 py-12">
{todoList.map((task, index) => (
//.map() を使って、todoList の各タスク (task) をレンダリング
//index は現在のタスクの配列内の位置
<div className="flex items-center justify-between space-x-2" key={index.toString()}>
<div className="space-x-2">
<Checkbox
id={`task-${index}`} // 各タスクに一意のIDを付与
checked={task.isDone}
onCheckedChange={() => onToggleStatus(index)}
/>
<label
htmlFor={`task-${index}`}
className="text-xl font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{task.name}
</label>
</div>
<Button
variant="outline"
size="icon"
className="rounded-full hover:text-destructive"
onClick={() => onDelete(index)}
>
<Trash />
</Button>
</div>
))}
</CardContent>
</Card>
</div>
);
}
感想
typescriptの知識があまりないまま作成した、UseStateやmap関数についてあやふやだったため作成がとても大変だった。ボタンを押してリストをtodoに追加する機能はAIに聞いて作ってもらったため理解のあいまいな部分が多い。そのため自力で作れるようになるまでまた何回か挑戦する。