Lecture 13技術理解 — 第 3

Lecture 13ストレージとは?

画像、PDF、動画などのファイルを保存するストレージを理解します。

読了の目安 約 6 分図解 準備中難易度

前回のデータベースは 整った表の保管場所 でした。 では、画像やPDFのような ファイル はどこに置くのでしょうか? その答えが ストレージ です。 家で例えるなら、書類棚(DB)物置(ストレージ) のように役割を分けています。

このレクチャーでは、ストレージとは何か、データベースとどう使い分けるか、 そして「プロフィール画像のアップロード」を例に、保存先の組み合わせ方を学びます。

1ストレージはファイル本体の置き場

ストレージは、画像、PDF、動画、音声ファイルなどを そのままの形で保管する場所 です。 1ファイルにつき1つの「物」を置いておくイメージで、表の行のように整然と並ぶわけではありません。

身近な例だと、SNSに投稿された写真、ECサイトの商品画像、領収書のPDF。 これらの ファイル本体 は基本的にストレージに置かれています。

2データベースとストレージの違い

DBとストレージは、似ているようで 得意分野が違います。 無理に同じ場所で扱おうとすると、検索が遅くなったり、料金が高くなったりします。

  • データベース:表で整理できる情報(名前、メール、価格、日付など)。検索や並べ替えが得意。
  • ストレージ:ファイルそのもの(画像、PDF、動画)。大きな塊を安く保管するのが得意。

覚え方はシンプルです。表に書ける? と問いかけて、書けるならDB、書けないファイルならストレージ。

3プロフィール画像で考えてみる

実際のWeb Appでは、DBとストレージを 組み合わせて 使います。 プロフィール画像のアップロードを例にすると、こんな分担になります。

  1. ユーザーが画面で画像を選んでアップロードする。
  2. 画像本体はストレージに保存される(例:users/u_001.png)。
  3. ストレージは「保存しました。これがその画像のURLです」と返す。
  4. そのURLとユーザーIDがデータベースに記録される(users 表の imageUrl 列)。
  5. 画面に表示するときは、DBからURLを引いてきて、ブラウザがそのURLの画像を読み込む。
Figure 13.1画像はストレージへ、URLはデータベースへ
図解 準備中(生成プロンプトは下記)
生成後は public/lectures/lecture-13-storage/upload-flow.png に差し替え予定
image · 1400 × 900 (14:9)

4AIへの依頼の仕方

ファイルを扱う機能をAIに頼むときは、保存先を最初から指定する と精度が上がります。 指定がないと、画像をDBに直接押し込もうとして遅くなる、といった事故が起きやすいです。

Tip

URLだけDBに置く、が基本パターン

「画像本体はストレージ、画像URLはデータベース」という分担は、 写真投稿、領収書アップロード、商品カタログなど、ほぼすべてのアプリで使い回せます。 一度覚えたら そのまま応用が利く ので、最初に手に馴染ませましょう。

  • 「ユーザーがプロフィール画像をアップロードできるようにしたい。画像本体はストレージ、URLはDBの users.imageUrl に保存してください」
  • 「アップロードはサーバー側で処理し、ブラウザに鍵を置かないでください」
  • 「画像のサイズと形式の上限も初心者向けに提案してください」
やってみよう · Exercise

自分のアプリで扱うファイルを書き出す

ファイルがある=ストレージが必要、というだけのシンプルな整理です。 書き出してみると、意外とDBとストレージの両方が必要だと気付けます。

  1. 自分のアプリで扱いそうなファイル(画像、PDF、音声、動画)を3つ書き出す。
  2. 各ファイルについて「本体はストレージ」「DBに持つのはURLと何の情報か」を1行で書く。
  3. Codexに「これらのファイルを扱うとき、ストレージとDBの役割を分けた保存設計を提案してください」と依頼する。
進捗にチェックをつける

5理解確認チェックリスト

  • ストレージはファイル本体の保管場所だと説明できる。
  • DBには「URLや関連情報」、ストレージには「ファイルそのもの」を置くと理解している。
  • AIに依頼するとき、保存先を明示するクセがついている。
End of Lecture 13