次章：ローカル状態からデータベース連携へ | おすすめスポット共有アプリを作りながら学ぶ画面遷移設計・状態管理・ユーザー入力処理 | Next.jsによるWebアプリケーション開発概論

はじめに

この節では、ここまで作ってきたアプリのデータが、今どこに保存されているのか を整理します。

これまでのアプリでは、スポットの追加・編集・削除・お気に入り登録ができるようになりました。

かなりアプリらしくなりました。

ただし、今の保存方法には限界があります。

今は、主に次のような場所に保存しています。

ブラウザの中

つまり、今のアプリは 自分のパソコンやブラウザの中だけで動く保存方法 です。

次章では、これを データベース につなげて、もっと本格的なアプリにしていきます。

この節のゴール

この節が終わると、次のことがわかります。

今のデータがどこに保存されているか
ページを閉じたり、別の端末で開いたりすると困る理由
localStorage とデータベースの違い
次章でデータベースにつなぐ意味今日の合言葉はこれです。

今は自分のブラウザだけ。次はみんなで使える保存場所へ。

1. 今のデータはどこに保存されているのか

ここまでの教材では、主に localStorage を使ってデータを保存してきました。

localStorage は、ブラウザの中にデータを保存する仕組みです。

たとえば、次のようなデータを保存していました。

投稿したスポット
お気に入りにしたスポットID

保存のイメージはこうです。

ユーザーが投稿する
↓
ブラウザの localStorage に保存する
↓
一覧ページで読み込む
↓
画面に表示する

つまり、今の保存場所はインターネット上のサーバーではありません。

あなたが使っているブラウザの中 です。

2. localStorage とは

localStorage は、ブラウザに小さなデータを保存できる機能です。

たとえば、次のような使い方ができます。

localStorage.setItem('name', '静かな図書館');

これは、ブラウザの中に name という名前で 静かな図書館 を保存する、という意味です。

読み込むときは、こうします。

const savedName = localStorage.getItem('name');

このように、ページを再読み込みしてもデータを残せます。

3. localStorage の良いところ

localStorage には、学習用として良いところがあります。

すぐ使える
データベースを用意しなくてよい
小さなアプリなら動きを試しやすい
投稿・編集・削除の流れを練習しやすいだから、この章では localStorage を使いました。

最初からデータベースまで入れると、覚えることが多くなりすぎます。

まずは、アプリの動きに集中するために、ブラウザ内保存を使いました。

4. localStorage の弱点

ただし、localStorage には弱点もあります。

特に大事なのは、この4つです。

別の端末では見られない
別のブラウザでは見られない
ブラウザのデータを消すと消える
他の人と共有できない

たとえば、自分のMacのChromeで投稿したスポットは、

スマホのSafariでは基本的に見られません。

なぜなら、保存場所が違うからです。

Mac の Chrome の localStorage
スマホの Safari の localStorage

これは別々の箱です。

5. ページを閉じると消える理由

正確には、localStorage は普通にページを閉じただけでは消えません。

ただし、次のような場合は消えることがあります。

別のブラウザで開いた
別の端末で開いた
ブラウザの保存データを削除した
シークレットモードで使っていた
アプリ側で localStorage を削除したつまり、今の保存方法は そのブラウザに依存している ということです。

ここがとても大事です。

6. 状態管理と localStorage の違い

ここまでで、useState と localStorage の両方が出てきました。

この2つは、似ているようで役割が違います。

仕組み	役割	消えやすさ
`useState`	今の画面だけで値を持つ	ページを更新すると消える
`localStorage`	ブラウザの中に保存する	ブラウザのデータを消すと消える
データベース	サーバー側に保存する	消えにくく、共有しやすい

ざっくり言うと、こうです。

useState
→ 画面の中の一時メモ

localStorage
→ ブラウザの中の保存箱

データベース
→ インターネット上の大きな保存庫

7. なぜデータベースが必要なのか

本格的なアプリでは、データベースが必要になります。

理由は、主に次の3つです。

1. どの端末からでも使えるようにするため

データベースに保存すると、スマホでもパソコンでも同じデータを見られます。

パソコンで投稿
↓
データベースに保存
↓
スマホでも見られる

2. 他のユーザーと共有するため

おすすめスポット共有アプリなら、他の人の投稿も見られるようにしたいです。

localStorage では、自分のブラウザにしか保存されません。

でも、データベースなら、みんなで同じデータを使えます。

Aさんが投稿
↓
データベースに保存
↓
Bさんも見られる

3. データを消えにくくするため

データベースは、サーバー側に保存します。

そのため、ブラウザのキャッシュを消しても、基本的にはデータが残ります。

学習用のアプリから、本格的なサービスに近づけるには、データベースが必要です。

8. localStorage とデータベースの違い

違いを表にすると、こうです。

比較	localStorage	データベース
保存場所	ブラウザの中	サーバー側
他の端末で使えるか	使いにくい	使いやすい
他の人と共有できるか	できない	できる
データの安全性	低め	高めに設計できる
学習しやすさ	とても簡単	少し準備が必要
本格アプリ向きか	小規模・練習向き	本格アプリ向き

今の章では、アプリの動きを理解するために localStorage を使いました。

次章では、これをデータベースに置き換えていきます。

9. 次章でデータベースとつなぐ意味

次章でやることは、かんたんに言うとこれです。

今までブラウザに保存していたデータを、
データベースに保存するように変える

つまり、保存場所が変わります。

今まで
localStorage に保存

次章
データベースに保存

アプリの見た目は大きく変わらないかもしれません。

でも、中身はかなり本格的になります。

10. データベースにつなぐと何ができるか

データベースにつなぐと、次のようなことができるようになります。

投稿をみんなで共有できる
スマホでもパソコンでも同じデータを見られる
ログインした人だけ投稿できる
自分の投稿だけ編集できる
人気順で並べる
検索をもっと本格的にする
データを安全に管理する

ここまでできると、練習アプリから 本格的なWebアプリ に近づきます。

11. 今のコードは無駄にならない

ここで大事なのは、今まで作ったコードが無駄にならないことです。

フォーム画面、一覧画面、詳細画面、編集画面の考え方は、データベースにつないでも使います。

変わるのは、主にここです。

データの保存場所
データの読み込み方

たとえば、今はこうでした。

const spots = getAllSpots();

次章では、データベースから取得する形に変わります。

const spots = await getSpotsFromDatabase();

画面の作り方そのものは、ここまで学んだ内容が土台になります。

12. 次章に進む前に知っておく言葉

次章では、いくつか新しい言葉が出ます。

今は、ざっくり意味だけ見ておけば十分です。

言葉	ざっくり意味
データベース	データを保存する場所
テーブル	データを入れる表
レコード	表の中の1行
カラム	表の中の項目
API	アプリとデータベースをつなぐ窓口
認証	誰が使っているか確認する仕組み

今は暗記しなくて大丈夫です。

次章で実際に手を動かしながら、少しずつ覚えます。

13. 次章の完成イメージ

次章では、次のような流れを目指します。

スポットを投稿する
↓
データベースに保存される
↓
一覧ページでデータベースから読み込む
↓
他の端末でも同じデータが見られる

今のアプリから、次のように進化します。

自分のブラウザだけで動くアプリ
↓
みんなで使えるアプリ

ここが、次章で一番大きな変化です。

14. 今回のまとめ

この節では、今のデータ保存の仕組みと、次章でデータベースにつなぐ意味を整理しました。

今回覚えることは、次の3つです。

今のデータは localStorage に保存している
localStorage はブラウザの中だけの保存場所
データベースにつなぐと、他の端末や他の人とも共有できる

とても大事なので、最後にもう一度だけ。

localStorage は練習に便利。データベースは本格アプリに必要。

練習問題

問題1

今のアプリでは、投稿したスポットを主にどこに保存していますか。

問題2

useState のデータは、ページを更新するとどうなりますか。

問題3

データベースにつなぐと、何ができるようになりますか。2つ書いてください。

問題4

localStorage とデータベースの大きな違いは何ですか。

回答

問題1の回答

localStorage

ブラウザの中に保存しています。

問題2の回答

ページを更新すると消えます。

useState は、今の画面で一時的に値を持つための仕組みです。

問題3の回答

例です。

他の端末でも同じデータを見られる
他のユーザーと投稿を共有できる
データを消えにくくできる
ログイン機能と組み合わせられる

問題4の回答

localStorage はブラウザの中に保存します。

データベースはサーバー側に保存します。

次章へ進む前のチェック

次へ進む前に、次の4つを確認してください。

今のデータが localStorage に保存されているとわかる
useState は一時的な保存だとわかる
localStorage はブラウザごとの保存だとわかる
データベースにつなぐと本格的なアプリに近づくとわかる

ここまで理解できれば、第5章は完了です。

次章では、データベースとつないで、投稿データをもっと本格的に扱えるようにしていきます。