Next.jsとTypeScriptで、ToDoアプリを写経してみたけど、想像以上にややっこしい！！
参考URL
https://zenn.dev/jun0723/articles/58284910324fdf
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
"use client" // サーバ側orクライアント側の実装という宣言が必須になった。 // reactの状態管理Hookを使う import { useState } from "react"; // ホーム画面の処理 export default function Home() { // useStateの基本的な使い方。 // textが変数名で、setTextがtextに値をセットするためのSetter関数 // constで、通常のイコールで代入できないようにしている(カブセル化) // 最後の<string>('')は、text = ''と同じで、空文字で初期化している。 const[text, setText] = useState<string>('') // 変数todosがToDoリストで、文字列型配列で初期化している const [todos, setTodos] = useState<string[]>([]); // テキストボックスに何か入力されたら、入力内容を変数textに格納する const changeText = (e: React.ChangeEvent<HTMLInputElement>) => { setText(e.target.value); console.log(text) }; // 追加ボタンを押されたら、ToDoリストに追加 const addTodos = () => { // Reactは、状態の変更を検知してコンポーネントを再レンダリングするので、値を直接上書きできない // スプレッド構文(shallowコピー)した変数を使って、新しい値を作り、Setter関数で上書きすると再レンダリングされる const newTodos = [...todos]; // Todoリストに新しいToDoを追加 newTodos.push(text); // セット関数で新しいToDoリストを上書きすると、再レンダリングされる setTodos(newTodos); setText(""); // 入力欄を空にする。 useStateで指定したセット関数(setText) }; //個別のToDOが終わったら、削除(非表示)する const deleteTodo = (index: number) => { const newTodos = [...todos]; newTodos.splice(index, 1); setTodos(newTodos); // useStateで指定したセット関数(setTodos) }; // ここがHTML部分 (JSX) return ( <> <main> <div> <ul> {/* ToDoリストのループ。配列の中身とインデックスを取り出す */} {todos.map((todo, index) => ( <li key={index}>{/* reactがアクセスするためのkey項目が必要 */} <p>{todo}</p> {/* 個別のToDOが終わったら、index指定で削除(非表示)する */} <button onClick={() => deleteTodo(index)}>完了</button> </li> ))} </ul> {/* useStateで指定した変数textが、JSXでいきなり使える。コンポーネント指向って感じ */} <input type="text" value={text} onChange={changeText} /> <button onClick={addTodos}>追加</button> </div> </main> </> ); } |