13章　ブログサイトを作る　課題1を終えて

やったこと

13章の課題1で、Reactのブログ記事一覧ページを作りました。この章は「AIにコードを書かせない」がルール。ヒントはもらいつつ、コードは全部自分で書きました。

• Header と PostCard の2つの部品を作成

• 記事データを map で3件並べて表示

• Tailwind CSS で見た目をサンプルに寄せる

つまずいたこと

• コマンドを Claude Code に打ってしまい、AIが代わりにプロジェクトを作っていた
  改めてCLIでコマンドを打ちプロジェクトを作成する

• import に { } が付く・付かないの違い
  export constで出したものには{}がつく　import {} from ‘‘
  export defaulteで出されたものにはつかない import Header from ‘‘

• map で取り出した値を、さらに取り出そうとした
  ❌　post.categories.map((category) => (<span>{category[0]}</span>))
  ⭕️　post.categories.map((category) => (<span>{category}</span>))
  mapが取り出してくれるのだから[0]は必要なかった

• getMonth() で9月が「8」になる（0から数えるので +1）

• 本文の <br/> が文字のまま出る
  どうするべきか検索することを促されdangerouslySetInnerHTML という属性を知った
  演習であるため今回はこの属性を使用した。

• PostCard を map で並べるところが一番難しかった
  書き終えた今でもなんでこういう書き方をするのか腑には落ちていないので
  AIに疑問を投げ壁打ちをしながら理解を深めていきたいと思いました。

乗り越え方

一歩を小さくしました。いきなり PostCard を並べず、まず <p> でタイトルだけ並べて map の動きを確認。動いたらコミット。

Tailwind CSS

用意されていない値は bg-[#333333] のように角カッコで書けると知って、一気に楽になりました。サンプルの実際の値は、ブラウザの検証ツールで調べました。
cssの方が慣れている分正直書きやすいけど色んな記述に慣れていかないといけませんね。

感じたこと

正直、初心者が0から書くにはハードルが高い課題でした。それでも書き切れたのは、AIを「答えを出す係」ではなく「家庭教師」として使ったから。

これから

課題1はレビュー待ち。次は詳細ページ、API、フォームの課題2〜4です。同じ「小さく進める」やり方で続けます。