5.ToDoアプリの解説1
では、早速解説の方をしていきたいと思います。
code:first-post.js(JavaScript)
import React, { useState } from 'react';
import Link from 'next/link'
こちらはimport文です。プログラミングしてたら割と当たり前に出てくると思うので、飛ばしますね。
code:first-post.js(JavaScript)
export default function FirstPost() {...}
exportやdefaultあたりは解説しておきます。
exportは外部のファイルに公開しますよ的なものです。これを書いておくと他のファイルからimportできるようになります。
defaultは、JavaScript上でimport xxx from 'ファイルのパス'みたいな書き方をした際に、自動でimportされるものを指定する書き方です。ちなみにimport先では、xxxと言う名前で使うことができます。
code:first-post.js(JavaScript)
constは定数(つまり、固定値)であることを示すものですね。
そして、useStateはReact Hooksの使い方になります。このuseStateは状態を保持するための値です。つまり、4.Reactを使って簡単なToDoリストを作ってみようで作成したToDoリストではToDoリストの中身を保持したり、入力箇所の文字列を保持したりしています。使い方は、useStateの引数として初期値となる値を渡すと、状態を保持している変数(プログラム上のtodoContext、todoList)と状態を変更する関数(setTodoContext、setTodoList)を返り値として返してくれます。 しかし、constなのに変更していいの・・・?と言うところですが、この変数は参照先を保存していると考えておくと良さそうです。
と言うことで長くなりすぎると良くないから一旦ここまでです。