はじめに

先週のShiftBの大阪オフ会が楽しすぎて、楽しい記憶はしっかり残っているのですが、最後の方は正直ちょっと記憶が断片的です（笑）。あれからもう1週間はやいなぁ、楽しかったなぁとか余韻に浸りながら、なんやかんやで11章を完走しました！

この章では、アプリケーションの管理機能を本格的に構築するための準備として、Supabaseで 認証機能の実装やデータ管理、UI制御、画像保存、フォーム管理、データ取得の最適化など、盛りだくさんの内容に取り組みました。

目安時間は20時間と書かれていましたが、実際には40〜50時間ほどかかりました。オフ会で初めてお話させていただいたきょうさんに「11章は見本のコードや手順があるので10章よりは多分簡単ですよ」と言ってしまったのですが…すみません、訂正させてください。めちゃめちゃ難しかったです！ やることが多すぎて、途中で頭がごちゃごちゃに…どのファイルがどこで使われてるのか分からなくなったり、何度も手が止まったりしました。

提出後には、react-hook-form と SWR を使った書き換えの提案をいただき、昨日から今日にかけて15時間くらいぶっ通しで修正。そして今朝、ようやく提出し、LGTMをいただきました！大変でしたが、「こんなこともできるんや！」という発見がたくさんあって、めちゃめちゃ楽しかったです！

実施内容

①Supabase の設定

仕事では SQL Server を使っていたのですが、Supabase でクラウド上にデータベースを持てると知ったときは、すごく感動しました。しかも無料で使える。

まずは Supabase のプロジェクトを作成し、テーブルの定義、APIキーやURLの取得など、Next.js から安全にアクセスするための環境構築を行いました。

Supabase は、認証・データベース・ストレージが一体化していて、開発者にとってすごくいいサービスだなと思いました。

②ログイン状態によるヘッダーの切り替え

Supabase のセッション情報を使って、ログインしているかどうかでヘッダーの表示内容を切り替えることができるようになりました。ログイン中は「マイページ」や「ログアウト」リンクを表示し、未ログイン時は「ログイン」や「問い合わせ」ボタンを表示するなど対応しました。

★Supabase セッション情報の取得ポイント

Supabase のセッションは supabase.auth.getSession() で取得できる。
このセッションオブジェクトから tokenを取り出して、APIの認証ヘッダーに使用する。

③token の有無によるページ表示制御

管理者ページなどの保護されたルートでは、トークンがない場合にページを表示しないように制御しました。ログインしていない状態で /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 の導入

フォームの状態管理には react-hook-form を導入しました。バリデーションや初期値の設定、エラーメッセージの表示などが簡単にでき、複雑なフォームでもシンプルに記述できるようになりました。

実は6章の課題で初めてこのライブラリを知って、当時は「すごく便利そう！」と思ったのですが、「本当にこれでいいのか？」と自問自答して、昨年のもくもく会でたまねぎさん・まえたくさん・たむさんに相談。「まずは基礎をしっかり身につけよう」と思い直して、useState に書き直したのを思い出しました。

★react-hook-form とは？

React のフォーム管理ライブラリで、useForm() を使ってフォームの状態を一括で管理
register, handleSubmit, setValue などの関数を使い、最小限のコードで柔軟なフォームを構築

⑥SWR を使ったデータ取得の最適化

最後に、データ取得の効率化のために SWR を導入しました。さらに、useFetch や useAdminFetch といったカスタムフックを作成することで、認証の有無に応じたデータ取得を共通化・簡略化できました。

★ SWR とは？

SWR（Stale-While-Revalidate）は、Next.js 公式のデータフェッチ用ライブラリ
キャッシュ・再検証・ローディング状態の管理を自動で行ってくれる便利なツール

11章までやってきて感じたこと

11章までやってきて感じたことは、今の自分の力量ではまだ一人じゃできないということ。自分の過去に書いたコードや見本を見たり、参考書を読んだり、AIに聞いたりすればできるけど、自分の脳みそだけで完結するのはまだ無理です。

でも、「あの章でこれやったな」とか、「オリアプ開発で、この機能はあのときのやつを応用すればいいな」とか、 なんとなくイメージができるようになってきたのも事実です。

ブログでアウトプットしながら、ちゃんと思考して進んできたからこそ、記憶に残って、スキルとして積み重なってきたのかもしれません。

🎮 子どもの頃の話

しょうもない話なんですが、小学生のときに「バイオハザード２」をやり込んでいました。２時間半以内にクリアするとロケットランチャーが使えるので、それを目指して何度も挑戦。当時はネットに情報はあまりなかったので、攻略本を見ながら、何度も何度も繰り返しました。

最初は４〜５時間かかっていたのですが、だんだんと「ここのゾンビは無視」「ここでアイテム回収」などの知識と操作スキルが積み重なって、最終的には２時間半以内にクリアできるようになりました。

Web開発とゲームは全然違うのですが、「繰り返して、覚えて、上達する」という点ではすごく似ているなと、ふと思いました。今はまだ時間がかかるけど、繰り返すたびに理解が深まり、少しずつスピードや精度も上がっていく。そして、あるときふと「あれ？これ前より分かるようになった」って気づく瞬間がくるんじゃないかなと、思っています。

時間がかかってもあきらめずにやりさえすれば、きっと自分の力になっていくんだと思います。

おわりに

11章では、アプリケーションの「裏側」を支える重要な仕組みをたくさん学びました。認証、データ取得、UI制御、画像保存など、実用的な機能を一つずつ積み上げることで、管理機能の土台がしっかりと整ったと感じています。

そして、いよいよ次は12章。オリジナルアプリ開発に突入です！
これまでの学びを総動員して、自分だけのアプリを形にしていくフェーズ。

完成目標は…３月末！
ロッキーさんとたむさんに便乗して決めました！

目安時間は153時間。明日の２月14日から３月31日までの46日間で割ると、１日あたりの作業時間は…約3時間ちょっと。

もし仮に、２月末までに終わらせようとすると… 残り16日間で153時間。つまり、１日あたり約10時間のペースに…！（どうしよう…笑）

とりあえず焦らず、でも着実に。開発を楽しみながら、最後までやり切ります！