【ISSUE】Next.js×TypeScriptでTODOアプリを作成する

0

2024年12月23日 8:40

はじめに

Next.js×TypeScriptでTODOリストを作成したので、コードを解説していきます。

TODOアプリgif.gif

コード

img

img

img

img

解説

コードの解説をしていきます

○コンポーネント化について

page.tsxでは、フォームの部分と、タイトルで今回は分けています。
img
Formコンポーネント内では、テキストを入力するフォーム部分と、登録したテキストを表示する部分でコンポーネント化しています。
img

○propsについて

textList={textList}は、CompleteListコンポーネントで作成したテキストを渡して、onDelete={handleDelete}は削除する処理を渡しています。
interfaceで定義しているコードは、propsで値を受け取る側と、渡す側の型を定義しています。
img

受け取る側では、以下のように記述します。今回はTypeScriptを使用しているので、以下のような受け取り方になっています。
img

メソッドの処理内容について

次は、メソッドの処理内容についてです。
まずはフォーム部分から説明していきます。

img
このコードでは、form要素とinput要素にそれぞれ作成したメソッドを割り当てています。
それぞれのメソッドについて説明します。関係する箇所を抜粋しながら説明します。
img
このコードは、登録ボタンを押した時に、フォームの内容を登録する処理に関係する処理です。
interfaceでフォームを送信する時に使用する変数に型を指定し、handleSubmit()内で、送られてきた内容を各変数に登録し。useState内で指定した、setTextList()を呼び出して、保存します。
最後のsetTodoText('')でボタンを押した後に、フォームの中身を空にする処理を行います。

img
上のコードは、propsで渡す側と受け取る側のコンポーネントファイルで、受け取るデータの型を定義します。
img
上のコードは、input要素に入力がされるたびに、画面が再レンダリングして、setTodoTextを動かして、useStateで定義した変数(todoText)に入力内容を格納するコードです。

○表示部分

次は登録したタスクを表示する部分のコードになります。
以下がコードです。
img

interfaceで型を定義

表示するテキストの型を定義して、

img
Form.tsxから受け取ったpropsの値に対しての型付けをしています。
img
次は表示部分です。
img
propsで受け取った変数textListをmap関数を用いて、一覧で表示しています。
textList.map((todo: Todo, index: number) => ...) は、textList 配列の各要素に対して関数を適用し、新しい配列を生成します。各要素は todo という名前の変数に割り当てられます。また、index は現在の要素のインデックスです。
つまり、受け取ったデータの塊を「todo」に格納して、その塊ごとに「index」という変数でインデックスを割り当てて、1つずつ表示できるようにしています。

削除機能

最後に削除機能を実装しているコードです。
削除に関係しているコードを抜粋して解説していきます。
まずは以下のコードです。
メソッドを作成して、propsで渡しています。
ボタンを押したときに、その要素のindexを受け取り、そのindexに一致する要素を排除した配列をreturnする処理を書いています。
img
受け取ったメソッドを受け取り、interfaceで型を定義しています。
メソッドをボタンに割り当てて、ボタンが押されたときに実行されるように定義しています。
img

最後に

説明がわかりにくくなってしまった箇所が多くなってしまいすみません。
他にも記事書いているので、よければ見てみてください。
基本設計について
【Node.js】Node.jsでAPIを作ってデータを操作する。
Vue.jsとNode.jsでチャットアプリを作った
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。