はじめに

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

コード

解説

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

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

page.tsxでは、フォームの部分と、タイトルで今回は分けています。

Formコンポーネント内では、テキストを入力するフォーム部分と、登録したテキストを表示する部分でコンポーネント化しています。

○propsについて

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

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

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

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

このコードでは、form要素とinput要素にそれぞれ作成したメソッドを割り当てています。
それぞれのメソッドについて説明します。関係する箇所を抜粋しながら説明します。

このコードは、登録ボタンを押した時に、フォームの内容を登録する処理に関係する処理です。
interfaceでフォームを送信する時に使用する変数に型を指定し、handleSubmit()内で、送られてきた内容を各変数に登録し。useState内で指定した、setTextList()を呼び出して、保存します。
最後のsetTodoText('')でボタンを押した後に、フォームの中身を空にする処理を行います。

上のコードは、propsで渡す側と受け取る側のコンポーネントファイルで、受け取るデータの型を定義します。

上のコードは、input要素に入力がされるたびに、画面が再レンダリングして、setTodoTextを動かして、useStateで定義した変数(todoText)に入力内容を格納するコードです。

○表示部分

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

interfaceで型を定義

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

Form.tsxから受け取ったpropsの値に対しての型付けをしています。

次は表示部分です。

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

削除機能

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

受け取ったメソッドを受け取り、interfaceで型を定義しています。
メソッドをボタンに割り当てて、ボタンが押されたときに実行されるように定義しています。

最後に

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