発展:みんなで使えるよう保存する

この章でわかること: 基本のハンズオンでは、TODOを**ブラウザ内 (localStorage)**に保存していました。これは「その端末のそのブラウザだけ」に残る 保存です。ここでは一歩進めて、サーバーのデータベースに保存し、別の端末や 他の人とも同じデータを見られるようにします。

ここからは少し本格的

共有できる保存は、見た目の調整より一段ハードルが上がります(保存場所の準備や 設定が増える)。一人で使うだけなら localStorage のままで十分。「複数端末で同じ リストを見たい」「チームで使いたい」と思ったときに検討する、くらいの位置づけです。

localStorageは「その端末のそのブラウザだけ」——消えることもある

基本ハンズオンの localStorage 保存は、保存した端末の、そのブラウザの中だけに データを持ちます。次の場合はあっさり消えます / 見えません。

• 別の端末・別のブラウザで開いた(データはそちらには無い)
• シークレット(プライベート)ウィンドウで使った(閉じると消える)
• ブラウザのキャッシュ/履歴を削除した

商談で見せるだけなら、事前にデータを入れた同じ端末で見せれば十分です。 ただし複数人・複数端末で使ってもらうなら、下記のとおりDB保存へ進みます。

「共有できる保存」を足すと増えること

localStorage はその人のブラウザの中だけ。別の端末からは見えません。みんなで 共有するには、データベースという共通の保存場所と、そこへ 安全に読み書きする**裏側の処理(バックエンド)**が必要です。Next.js はこの裏側も 作れます(フレームワークとNext.js)。

• データベース: TODOを貯めておく共通の場所(多くは外部のDBサービスを使う)
• 接続情報(秘密): DBにつなぐための鍵。フロントに出さず、環境変数で管理 (APIキーの危険性)

進め方

1. 共有保存にしたいと伝える

   Claude Code に、今のプロジェクトを土台に頼みます。

   今 localStorage に保存しているTODOを、サーバーのデータベースに保存して、 別の端末からも同じリストが見られるようにしたい。非エンジニアでも用意しやすい データベースの選択肢を提案して、手順を一つずつ教えて。接続情報は環境変数で 管理して、絶対にフロントに出さないで。

2. データベースを用意する

   Claude Code がおすすめのDBサービスと手順を案内してくれます。多くは Web で登録し、 **接続情報(秘密の文字列)**を受け取る流れです。これを環境変数に設定します (コードに直書きしない)。

3. 手元で保存を確認する

   プレビューでタスクを追加し、別のブラウザ(またはスマホ)で開いても同じタスクが 見えるか確認します。出ないときはエラーをそのまま貼って相談(困ったときは)。

4. 公開にも反映する

   公開URL(Vercel)でも動かすには、同じ接続情報を Vercel の環境変数にも登録して 再デプロイします。「Vercelで動かすための環境変数の設定手順を教えて」と頼めば 案内されます。

他人のデータを扱うなら別の検討が必要

これは「共有できる保存」を体験するための発展課題です。実際に他の人のデータを 預かる本番運用には、安全な保管・バックアップ・プライバシー対応などが別途必要です (個人情報・著作権の注意、商談では持ち帰りに)。

なぜ大事か

「ブラウザ内の保存」と「みんなで共有する保存」の違いを体で理解すると、商談で 「どこまでがその場でできて、どこからが本番の検討か」を見極める力に直結します。