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