転職用のポートフォリオとして、個人でWebアプリ「Hubpin」を作っています。
制作の経緯は「Hubpin 開発記録」に時系列でまとめています。
設計と判断は自分で行い、実装も原則自分で書いています。AIには手順書・レビュー・調査を任せています。
Next.js を学び始めたとき、教材の中身より先に「何で学ぶか」で詰まりました。
React の教材は無数にあるのに、Next.js は学習手段を選ぶ段階で止まる。
その理由を自分なりに4つに分けたら、学び方の結論まで一直線につながったので書いておきます。
React では起きなかったこと
1作目のポートフォリオは React（Vite）で作りました。
教材は一本道でした。公式のチュートリアルを進めれば、そのまま作るものにつながる。
選ぶ段階で迷った記憶がありません。
迷いようがなかった。
2作目で Next.js に入ったとき、同じ感覚で教材を探したら、選べませんでした。
候補はたくさんあるのに、どれも「自分の場合」に合わない。
選べない。
理由を4つに分けた
学び始めて数日たった夜に、自分の言葉で整理したのがこの4点です。
1. バージョンによって仕組みが違う。 検索すると Pages Router 時代の記事が上位に混ざる。
いま使う App Router とは書き方が別物なので、記事の日付を見ないと読めない
2. フロントエンドもバックエンドも範疇に入る。 守備範囲が広く、教材ごとに切り取る面が違う
3. 作るものによって、必要なものと不要なものが真逆になる。 DB・認証・キャッシュ・ISR。
選択肢が多いので、教材の前提と自分の前提が一致しにくい
4. その結果、体系的に学ぼうとすると終わらず、最低限だけ学ぼうとすると穴が空く
4つ目が本体です。網羅型は終わらない。最小型は穴が空く。
どちらを選んでも、教材だけで足りる形にならない。
詰みです。
実際に数えたら、必要なのは15章中2章だった
公式のチュートリアルは全15章あります。
自分が作ろうとしているものに照らして数えたら、当面の学習ゴールは Ch.4 と Ch.5 の2章でした。
Ch.6（DBのセットアップ）・Ch.7（データ取得）・Ch.15（認証）は、
Vercel Postgres・直接 SQL・NextAuth が前提です。
自分が使うのは Supabase なので、コードは1行も流用できません。
「教材を全部やる」が正解にならない具体例が、章の一覧の中にそのまま入っていました。
一方で、最小限だけ拾おうとすると、
RLS（行単位のアクセス制御）のような「必ず詰まるのに教材に載っていない」領域が残ります。
だから事前に用意したのは知識ではなく、「詰まったときにどこを見るか」のリストでした。
章ごと、技術ごとに一次情報の場所だけ書いておいて、必要になったら開く。
それだけ。
「作りながら補完する」に着地した
結論は「実際に作りながら、分からないところを補完する」でした。
正直に書くと、これは学習を始める前に方針として決めていたことと同じ場所です。
違いは、今回は理由を自分で説明できるようになっていたことです。
方針として聞いて決めたのと、教材を探して詰まってから同じ場所に着くのとでは、
着いたあとの迷いのなさが違いました。
Next.js の教材が悪いわけではありません。
フレームワークの守備範囲が広いという性質が、そのまま学習設計の難しさになっている。
だから、作るものを先に決めて、そこから逆算して必要な章だけ拾う形にしました。
追記: 予想した穴で、実際に一番つまずいた
制作に入って2週間ほどたちました。
「教材に載っていないので必ず詰まる」と予想していた RLS で、実際に一番つまずきました。
ポリシーを7本書いてもデータが1行も読めない、から始まって、記事が5本分になっています。
予想が当たったのは嬉しくありません。
ただ、詰まる場所を先に見当づけて「どこを見るか」だけ用意した形は、機能していました。
その場で公式ドキュメントと自分の実測に戻れたので、教材の穴を教材で埋めに行かずに済んでいます。
