【13章】ブログサイトを作る　課題3

1、課題3用のブランチを用意し作業開始

2、教材に用意されている例を写しながら意味を確かめる
（野球で例えたが野球が好きというわけではない）
const [posts, setPosts] = useState([])
//useState([])は空のまま、postsは読む用、setPostsは入れる用
-useStateはボールケース、最初は空
-postsはボールケースの中身を映すモニター
useEffect(() => {
//useEffectが動いてAPIに記事を取りにいく
審判、いつ始めるかを決める、画面が表示されたら試合開始
const fetcher = async () => {
const res = await fetch("…/dev/posts")
//URLにデータをもらいにいく
-fechはピッチャー、記事1件分のデータ（ボールを）捕球しにいく
const data = await res.json()
//届いたデータをJavaScriptで使えるようjsonに変換
setPosts(data.posts)
//届いたデータをsetPostsに入れる
-setPostsはキャッチャー、data.posts（ボール）を受け取る
-data.postsは記事1件分のボール
}
fetcher()
//審判が出す開始の合図、これがないと上記のコードは動き出さない
}, [])
//依存配列、審判への指示[ ]なら1回だけ[ id ]ならidが変わった時

3、読み込み中の表示と記事が存在しない場合の処理を書く
const [isLoading, setIsLoading] = useState(true);
まずはこれをuseEffectの外で記述
setIsLoading(false);
これをuseEffectの中に記述し、その後if文を記述

if (isLoading) {
return (
<p>読み込み中...</p>
);
}

if (!post)
//
return (
<p >
記事が見つかりませんでした
</p>
);
isLoading が
true のときは、まだ記事を取りに行っている途中なので、「読み込み中...」と表示する。trueは画面が最初に表示される時点の値なのでuseEffectの外に書く。
false は「取りに行く動作が終わった」という意味で、記事があったかどうかは表示しない。
記事（ボール）が届いた後にしか言えないのでfectherの中に書く。
記事がなかったときは、false になったあとの !post の判定で、「記事が見つかりませんでした」と表示する。