Next.jsで作るかんたんTodoアプリ

初めまして！情報理工学部情報理工学科SSDコース一回生の大浦　唯翔です。watnowには秋から参加させていただいています。今回は最近作ったtodoアプロについて話していけばいいなと思います。

作ったもの

Next.js を使って、次のことができる Todo アプリを作りました。

Todo を追加できる
Todo を削除できる
Todo を編集して更新できる

使った技術

Next.js
React
TypeScript
Tailwind CSS

フロント（画面）について

画面は 1 ページだけのシンプルな構成です。

画面中央に Todo アプリを表示
入力欄と追加ボタン
Todo の一覧表示
編集・削除ボタン

レイアウトやデザインは Tailwind CSS を使って整えました。

Todo を追加する

入力欄に文字を入れて「Add」ボタンを押すと、Todo が一覧に追加されます。

const handleAdd = () => {
  if (!input.trim()) return;
  setTodos([...todos, input]);
  setInput("");
};

空文字は追加しないようにしています。

Todo を削除する

「削除」ボタンを押すと、その Todo を消せます。

const handleDelete = (index: number) => {
  const newTodos = [...todos];
  newTodos.splice(index, 1);
  setTodos(newTodos);
};

Todo を編集する

「編集」ボタンを押すと、文字を変更できるようになります。

更新ボタンを押すと、内容が保存されます。

const handleUpdate = () => {
  if (editIndex === null || !editText.trim()) return;
  const newTodos = [...todos];
  newTodos[editIndex] = editText;
  setTodos(newTodos);
};

工夫したところ

編集中かどうかで表示を切り替えた
配列はコピーしてから更新した
見た目を Tailwind CSS で少し整えた

作ってみて思ったこと

自分で動くものを作ると理解しやすい
フロントエンドの部分は勉強していたこともあって理解がしやすかったけど、バックエンドの部分はところどころ何言ってるかわかんなかった

まとめ

今回は、とてもシンプルな Todo アプリを作りました。

HTMLとCSSでしか何かを作ったことがなく、今回別の物を作れて楽しかったです。

将来について

いま僕は将来について悩んでいます。楽しいことやこれで飯を食っていきたいなどの目標がありません。「楽しいことをずっとやってたらええねん」ってよく言われますがまず楽しいことがありません。何かに熱中したらそれに止まらないタイプです。ですがその何かを見つけることができません。なので将来なりたいこともありません。この記事を読んでもし助けたいという気持ちになったのなら、だれか僕の相談所になってください。

　　　　　　　　　　　　　　　💗💗💗待ってます💗💗💗