はじめに

10章の学習目安時間は「20時間」。開始前は「まぁなんとかなるやろ」と思っていましたが、実際は 60時間以上 かかりました。

昨年のオフ会で、たむさんが「10章で進捗が止まった」と話していた理由が、今回身に染みて分かりました。本当に難しい。そして、自分がいかに知らないことだらけで、いざという時に前に進む力が足りていないかを痛感しました。

10章で時間のかかった理由は、覚えること・やることが圧倒的に多かったからです。

実施の流れ

①SQLの勉強

まずは基礎固め。 SQLServer を仕事で触っていたとはいえ、改めて学び直し。

②DB設計（ER図の作成）＋テーブルの概念の理解

中間テーブルの概念を理解しながら ER 図を作成。「NULL が多い DB は危険」ということも理解。

③GitHub上に10章のリポジトリ作成→Prisma設定まで実施

ローカルと GitHub のリモート設定を切り替え、Prisma を導入。

（※手順は備忘録として記事の最後にまとめています）

④サイトマップでページ構成を理解し、API を実装

⑤Postman で API を叩いてデータ作成

API が正しく動くか確認しながらデータ投入。

⑥先に「実際の動作画面」を参考にしながら、画面実装

・microCMS から自前 API にデータ取得先を切り替え

・admin 画面の作成

・新規登録・更新・削除の動作確認

⑦提出前に npm run build

型エラーが出ないか最終チェック。

⑧課題提出

長かったけど、なんとか完走！！！

学び

①自前データベースの存在に感動

仕事では SQLServer を使っていたので、「ローカルに DB を持つってどういうこと？」と思っていました。

Prisma を使うと、1つのファイル（dev.db）に DB を持てる。しかも、

コード

npx prisma studio

でブラウザ上に GUI が開く。

「え、そんなんできるんですか？」と、吉本新喜劇の内場みたいに心の中でツッコんでしまいました。

②中間テーブルの考え方

仕事では誰も言っていなかった概念で、実際に画面実装していくと「めちゃくちゃ大事やん」と実感しました。NULL が多い社内の DB を見てきたけど、「あれはあかんかったんやな…」と反省。

今回のブログアプリでは、 記事（Post） と カテゴリー（Category） がありました。
そして、記事は複数のカテゴリーを持てるし、カテゴリーも複数の記事に紐づきます。これはデータベースの世界では 多対多と呼ばれる関係です。
多対多の関係は、 直接テーブル同士を結びつけることができないため、必ず「中間テーブル」が必要になります。
中間テーブル（PostCategory）は、「A と B の関係を管理するためのテーブル」 という役割を持っていて、記事にカテゴリーを複数つけられたり、カテゴリーに属する記事を一覧で取得できたり、データの整合性が保たれたり、NULL を乱発しなくて済むなどのメリットがあります。

③共通で使えるところは１つにまとめてしまう

記事一覧と記事新規作成画面が似ているなと思っていたら、見本では PostForm を共通コンポーネント化していました。

React の基本を思い出しました。

状態は親が持つ
子は props で受け取る

新規作成画面（/admin/posts/new）  ← 親
    │
    └── PostForm（子）

詳細・編集画面（/admin/posts/[id]） ← 親
    │
    └── PostForm（子）

「React ってこういうところがすごいんや」と再認識できました！

できない自分と向き合いながら進むために

①見本を参考にしつつ「自分で考える」

正直、ほとんど何も見ずにコードを書くなんて無理でした。

特にカテゴリーセレクトの実装は、ぶべさんの見本をほぼ丸写ししながら理解。

でも、ただ写すだけでは意味がないと思い、

見本を見ながら、動きや他のファイルとのつながりを理解する
自分で書けるところは自分で書いてみる
見本と比較して何が違うか考える

という流れで進めました。

「見本を使うけど、ちゃんと自分で考える」 これが大事だと実感しました。

思い返すと、仕事で初めて PHP を触ったときも同じでした。会社情報の検索・更新画面を実装したとき、指導社員にヒントをもらいながら ３か月かけて必死に作ったのを覚えています。

でも、2回目以降の画面実装では、「あ、前にやったあれと同じやん」と要領を得て、一人でできるようになりました。

今回の10章でも同じことを感じました。 最初はできなくても、必ず次につながる。 やったことは絶対に無駄にならない。

そのことを思い出せたのは、自分にとって大きな収穫でした。

②励まされた言葉

手や思考が止まった時に、ぶべさんのストーリーズや、皆さんのブログを読みながら進めました。

特に心に残った言葉：

習得には個人差があります。時間がかかる人も、続けていれば必ずできるようになるので、焦らずに取り組みましょう。（ぶべさんのストーリーズ）

すごい方が言っているからこそ説得力があって、「諦めずに頑張らなあかん」と思えました。

その他感じたことや反省点など

①課題完走までに時間がかかりすぎたこと

約60時間。目標時間を決めていなかったのが反省点。今日はここまでやるとか決めないといけないと反省しています。

②Tailwindowを早く使えるようになりたい

CSS モジュールが多すぎて、「どこに何があるんや…」となりがち。

Tailwind を使えば、ファイル数も減ってもっと見やすくなるはず！

アプリ開発時には使えるようになりたいと思います。

③振り返りの大切さ

10章では本当に詰まりまくって、途中で何度も心が折れそうになりました。「みんなはどうやって乗り越えたんやろ…？」と思って検索してみたものの、意外と10章の体験談って多くなくて（検索方法が悪かったらすみません…）。

普段はブログの下書きに学びをメモしているのですが、今回は余裕がなくてメモすらほとんど残せませんでした。

だからこそ、 自分の振り返りとしても、誰かの参考になる記事としても、ブログを書くことの大切さを改めて感じました。

10章は特に情報量が多く、「どこでつまずいたか」「どう解決したか」を言語化しておくことが、後から振り返ったときに大きな財産になるのかなと思います。

※このテーマは別記事で「ブログを書く大切さ」としてまとめて投稿したいと思っています。

おわりに

最近、あかねさんのブログに「自走力がないと厳しい」という言葉がありました。その言葉が、10章を終えた今の自分にすごく刺さりました。

そして先月、退職した同期と話したときに聞いた 「企業は即戦力がほしい」 という言葉も思い出しました。

正直、今の自分はまだ自走力も足りないし、即戦力にも程遠い。 10章を通して、自分の実力を正しく知る機会になったと思います。

でも同時に、「一つ一つ丁寧に課題をこなし、アプリ開発を積み重ねていけば、必ず成長できる」という確信も持てました。

焦っても仕方ない。でも、立ち止まってもいられない。

だからこそ、 はやく一人前になれるように、これからも努力を続けないとあかん。そう強く思わされた章でした。11章も頑張ります🔥

備忘録（chapter-10 作業の流れまとめ）

前提

ローカルに my-next フォルダがある
現在 main ブランチ
GitHubに新しく chapter-10 リポジトリを作成する
作業は feature/chapter_10_local ブランチで進める

ステップ①：GitHubで新しいリポジトリを作成

GitHubにログイン
「＋」→「New repository」
以下を入力して作成：

Repository name：chapter-10
Description：任意
Visibility：Public または Private
その他はデフォルトのまま

「Create repository」をクリック！

ステップ②：ローカルのリモート設定を切り替え

cd C:\data\my-next
git remote -v                     # 現在のリモート確認
git remote remove origin          # 古いリモート（例：chapter-9）を削除
git remote add origin https://github.com/Ryosuke-Hayashi2025/chapter-10.git

ステップ③：mainブランチをGitHubにプッシュ

git push -u origin main

ステップ④：作業用ブランチを作成＆切り替え

git checkout -b feature/chapter_10_local

ステップ⑤：Prismaの導入