りんりん
【10章】NextJSでのバックエンド開発演習(前半)の振り返りと、できない自分と向き合いながら進むために
2026年02月05日
見出しはありません
要約を生成中...
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 を触ったときも同じでした。 会社情報の検索・更新画面を実装したとき、指導社員にヒントをもらいながら 3か月かけて必死に作ったのを覚えています。
でも、2回目以降の画面実装では、 「あ、前にやったあれと同じやん」と要領を得て、一人でできるようになりました。
今回の10章でも同じことを感じました。 最初はできなくても、必ず次につながる。 やったことは絶対に無駄にならない。
そのことを思い出せたのは、自分にとって大きな収穫でした。
手や思考が止まった時に、ぶべさんのストーリーズや、皆さんのブログを読みながら進めました。
特に心に残った言葉:
習得には個人差があります。 時間がかかる人も、続けていれば必ずできるようになるので、焦らずに取り組みましょう。(ぶべさんのストーリーズ)
すごい方が言っているからこそ説得力があって、 「諦めずに頑張らなあかん」と思えました。
約60時間。 目標時間を決めていなかったのが反省点。今日はここまでやるとか決めないといけないと反省しています。
CSS モジュールが多すぎて、 「どこに何があるんや…」となりがち。
Tailwind を使えば、 ファイル数も減ってもっと見やすくなるはず!
アプリ開発時には使えるようになりたいと思います。
10章では本当に詰まりまくって、途中で何度も心が折れそうになりました。 「みんなはどうやって乗り越えたんやろ…?」と思って検索してみたものの、 意外と10章の体験談って多くなくて(検索方法が悪かったらすみません…)。
普段はブログの下書きに学びをメモしているのですが、 今回は余裕がなくてメモすらほとんど残せませんでした。
だからこそ、 自分の振り返りとしても、誰かの参考になる記事としても、ブログを書くことの大切さを改めて感じました。
10章は特に情報量が多く、「どこでつまずいたか」「どう解決したか」を言語化しておくことが、 後から振り返ったときに大きな財産になるのかなと思います。
※このテーマは別記事で「ブログを書く大切さ」としてまとめて投稿したいと思っています。
最近、あかねさんのブログに「自走力がないと厳しい」という言葉がありました。 その言葉が、10章を終えた今の自分にすごく刺さりました。
そして先月、退職した同期と話したときに聞いた 「企業は即戦力がほしい」 という言葉も思い出しました。
正直、今の自分はまだ自走力も足りないし、即戦力にも程遠い。 10章を通して、自分の実力を正しく知る機会になったと思います。
でも同時に、 「一つ一つ丁寧に課題をこなし、アプリ開発を積み重ねていけば、必ず成長できる」 という確信も持てました。
焦っても仕方ない。 でも、立ち止まってもいられない。
だからこそ、 はやく一人前になれるように、これからも努力を続けないとあかん。そう強く思わされた章でした。11章も頑張ります🔥
ローカルに my-next フォルダがある
現在 main ブランチ
GitHubに新しく chapter-10 リポジトリを作成する
作業は feature/chapter_10_local ブランチで進める
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.gitgit push -u origin maingit checkout -b feature/chapter_10_local要約
コメント
まだコメントはありません。