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

やったこと

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

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

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

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

つまずいたこと

• コマンドを Claude Code に打ってしまい、AIが代わりにプロジェクトを作っていた

• import に { } が付く・付かないの違い

• map で取り出した値を、さらに取り出そうとした

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

• 本文の <br/> が文字のまま出る

• PostCard を map で並べるところが一番難しかった

乗り越え方

一歩を小さくしました。いきなり PostCard を並べず、まず <p> でタイトルだけ並べて map の動きを確認。動いたらコミット。つまずいた書き方は、自分用マニュアルにまとめました。

Tailwind CSS

用意されていない値は bg-[#333333] のように角カッコで書けると知って、一気に楽になりました。サンプルの実際の値は、ブラウザの検証ツールで調べました。

感じたこと

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

これから

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