りんりん
【11章】NextJSでのバックエンド開発演習（後半）の振り返りと、11章までやってきて感じたこと
2026年02月13日
学習振り返り
見出しはありません
要約を生成中...
先週のShiftBの大阪オフ会が楽しすぎて、楽しい記憶はしっかり残っているのですが、最後の方は正直ちょっと記憶が断片的です（笑）。 あれからもう1週間はやいなぁ、楽しかったなぁとか余韻に浸りながら、なんやかんやで11章を完走しました！
この章では、アプリケーションの管理機能を本格的に構築するための準備として、Supabaseで 認証機能の実装やデータ管理、UI制御、画像保存、フォーム管理、データ取得の最適化など、盛りだくさんの内容に取り組みました。
目安時間は20時間と書かれていましたが、実際には40〜50時間ほどかかりました。 オフ会で初めてお話させていただいたきょうさんに「11章は見本のコードや手順があるので10章よりは多分簡単ですよ」と言ってしまったのですが…すみません、訂正させてください。めちゃめちゃ難しかったです！ やることが多すぎて、途中で頭がごちゃごちゃに…どのファイルがどこで使われてるのか分からなくなったり、何度も手が止まったりしました。
提出後には、react-hook-form と SWR を使った書き換えの提案をいただき、昨日から今日にかけて15時間くらいぶっ通しで修正。 そして今朝、ようやく提出し、LGTMをいただきました！ 大変でしたが、「こんなこともできるんや！」という発見がたくさんあって、めちゃめちゃ楽しかったです！
仕事では SQL Server を使っていたのですが、Supabase でクラウド上にデータベースを持てると知ったときは、すごく感動しました。しかも無料で使える。
まずは Supabase のプロジェクトを作成し、テーブルの定義、APIキーやURLの取得など、Next.js から安全にアクセスするための環境構築を行いました。
Supabase は、認証・データベース・ストレージが一体化していて、開発者にとってすごくいいサービスだなと思いました。
Supabase のセッション情報を使って、ログインしているかどうかでヘッダーの表示内容を切り替えることができるようになりました。 ログイン中は「マイページ」や「ログアウト」リンクを表示し、未ログイン時は「ログイン」や「問い合わせ」ボタンを表示するなど対応しました。
★Supabase セッション情報の取得ポイント
Supabase のセッションは supabase.auth.getSession() で取得できる。
このセッションオブジェクトから tokenを取り出して、APIの認証ヘッダーに使用する。
管理者ページなどの保護されたルートでは、トークンがない場合にページを表示しないように制御しました。 ログインしていない状態で /admin/posts にアクセスすると、ログインページにリダイレクトされるようになっています。
★セッショントークンの扱いのポイント
Supabase では、ログイン中のユーザーに対してアクセストークン（JWT）が発行される。 このトークンを使って、認証が必要なAPIにアクセスすることができる。
APIリクエスト時には、以下のように Authorization ヘッダーにトークンを付与する：
fetch("/api/admin/posts", {
headers: {
"Content-Type": "application/json",
Authorization: token,
},
});さらに、API側でも supabase.auth.getUser(token) を使ってトークンを検証し、ログイン済みのユーザーだけがAPIを叩けるように制限。 これで、画面とAPIの両方でしっかりとアクセス制限がかけられるようになる。
Supabase のストレージ機能を使って、画像のアップロードと保存を実施しました。
input type="file" で画像を選択
supabase.storage.from('post_thumbnail').upload() でアップロード
getPublicUrl() で画像URLを取得し、表示
★ 保存するのはURLではなくキー！
Supabaseの仕様上、画像URLは定期的に変わるため、データベースには thumbnailImageKey を保存し、 表示時に getPublicUrl() で最新のURLを取得するようにする。
フォームの状態管理には react-hook-form を導入しました。 バリデーションや初期値の設定、エラーメッセージの表示などが簡単にでき、複雑なフォームでもシンプルに記述できるようになりました。
実は6章の課題で初めてこのライブラリを知って、当時は「すごく便利そう！」と思ったのですが、 「本当にこれでいいのか？」と自問自答して、昨年のもくもく会でたまねぎさん・まえたくさん・たむさんに相談。 「まずは基礎をしっかり身につけよう」と思い直して、useState に書き直したのを思い出しました。
★react-hook-form とは？
React のフォーム管理ライブラリで、useForm() を使ってフォームの状態を一括で管理
register, handleSubmit, setValue などの関数を使い、最小限のコードで柔軟なフォームを構築
最後に、データ取得の効率化のために SWR を導入しました。 さらに、useFetch や useAdminFetch といったカスタムフックを作成することで、認証の有無に応じたデータ取得を共通化・簡略化できました。
★ SWR とは？
SWR（Stale-While-Revalidate）は、Next.js 公式のデータフェッチ用ライブラリ
キャッシュ・再検証・ローディング状態の管理を自動で行ってくれる便利なツール
11章までやってきて感じたことは、今の自分の力量ではまだ一人じゃできないということ。 自分の過去に書いたコードや見本を見たり、参考書を読んだり、AIに聞いたりすればできるけど、 自分の脳みそだけで完結するのはまだ無理です。
でも、「あの章でこれやったな」とか、「オリアプ開発で、この機能はあのときのやつを応用すればいいな」とか、 なんとなくイメージができるようになってきたのも事実です。
ブログでアウトプットしながら、ちゃんと思考して進んできたからこそ、 記憶に残って、スキルとして積み重なってきたのかもしれません。
しょうもない話なんですが、小学生のときに「バイオハザード２」をやり込んでいました。 ２時間半以内にクリアするとロケットランチャーが使えるので、それを目指して何度も挑戦。 当時はネットに情報はあまりなかったので、攻略本を見ながら、何度も何度も繰り返しました。
最初は４〜５時間かかっていたのですが、だんだんと「ここのゾンビは無視」「ここでアイテム回収」などの知識と操作スキルが積み重なって、最終的には２時間半以内にクリアできるようになりました。
Web開発とゲームは全然違うのですが、「繰り返して、覚えて、上達する」という点ではすごく似ているなと、ふと思いました。 今はまだ時間がかかるけど、繰り返すたびに理解が深まり、少しずつスピードや精度も上がっていく。 そして、あるときふと「あれ？これ前より分かるようになった」って気づく瞬間がくるんじゃないかなと、思っています。
時間がかかってもあきらめずにやりさえすれば、きっと自分の力になっていくんだと思います。
11章では、アプリケーションの「裏側」を支える重要な仕組みをたくさん学びました。 認証、データ取得、UI制御、画像保存など、実用的な機能を一つずつ積み上げることで、管理機能の土台がしっかりと整ったと感じています。
そして、いよいよ次は12章。オリジナルアプリ開発に突入です！
これまでの学びを総動員して、自分だけのアプリを形にしていくフェーズ。
完成目標は…３月末！
ロッキーさんとたむさんに便乗して決めました！
目安時間は153時間。明日の２月14日から３月31日までの46日間で割ると、 １日あたりの作業時間は…約3時間ちょっと。
もし仮に、２月末までに終わらせようとすると… 残り16日間で153時間。つまり、１日あたり約10時間のペースに…！（どうしよう…笑）
とりあえず焦らず、でも着実に。開発を楽しみながら、最後までやり切ります！
要約
コメント
まだコメントはありません。
