ファイルを置く
整える：一覧・削除・メタデータ
増えたファイルを扱えるようにする
ファイルは増えます。増えたら、探せないと意味がありません。この章では並べる・消す・情報を持たせるの3つを覚えます。地味ですが、ここができた瞬間に、作ったものが急に「使えるもの」になります。
この章でできるようになること
- R2に入っているファイルを一覧して、画面に並べる
- いらないファイルを消す（そして消す怖さを知る）
- ファイルに「撮影日」などの情報を一緒に持たせる
並べる：一覧を取る
倉庫にある荷物の札を、順番に読み上げてもらう操作です。全部を読み上げさせることもできますが、先頭が一致するものだけに絞れます。第9章でキーを images/ で始めたのは、これのためです。
const listed = await env.BUCKET.list({ prefix: "images/" });
listed.objects.map((o) => o.key); // キーの一覧prefix（プレフィックス）
「この文字で始まるものだけ」という絞り込みです。フォルダが無いR2では、これがフォルダの代わりになります。images/2026/ と指定すれば、2026年のぶんだけ取り出せます。キーの付け方を最初に決めておくと、あとからこう効いてきます。
もう1つ知っておくべきことがあります。一覧は、一度に全部は返ってきません。数が多いと途中で区切られて、「続きがあります」という印と一緒に返ります。数百枚くらいまでは意識せずに済みますが、増えたら続きを取る作りが必要になります。
R2に入っている画像の一覧を返す仕組みを作ってください。 ・images/ で始まるキーだけを対象にする ・キーと、ファイルの大きさと、アップロードされた日時を返す ・新しいものが先に来るように並べる ・件数が多いときに続きが取れる形にしておく（いまは実装だけで、使わなくてよい） 作ったら、確認用のURLを教えてください。
消す：戻せないつもりで扱う
消す操作はあっけないほど簡単です。だからこそ、先に心構えを書いておきます。消したものは戻ってこないつもりで扱ってください。ゴミ箱に入るわけではありません。
実用的な対策は2つです。
- 消す前に、対象を必ず表示させる… 「これから消すキーを先に見せてください」と頼む習慣をつけます
- 本当に消さず、消したことにする… 実際には消さず、非表示の印を付けるだけにする方法です。あとから戻せます
画像を削除する仕組みを作ってください。ただし、事故を防ぐ作りにしてください。 ・削除する前に、対象のキーを画面に表示して、確認してから消す形にする ・一度に複数を消せる作りにはしないでください ・存在しないキーを消そうとしたときの動きも、日本語で説明してください 実装したら、どこが事故防止になっているのかを説明してください。
情報を持たせる：メタデータ
写真そのものとは別に、「いつ撮ったか」「誰が上げたか」を一緒に覚えさせられます。これをメタデータと呼びます。R2では2種類あります。
| 種類 | 何を入れるか | 役割 |
|---|---|---|
| httpMetadata | Content-Type など決まった項目 | ブラウザに渡すための情報第10章・第11章で使ったもの |
| customMetadata | 撮影日・投稿者・タイトルなど自分で決めた項目 | あなたのアプリのための情報短い文字列を数個まで |
便利ですが、万能ではありません。メタデータで検索することはできません。「撮影日が10月のものを出して」はR2だけでは無理です。それをやりたくなったら、第8章で出てきたD1（表）の出番です。写真はR2、探すための情報はD1。倉庫と台帳です。
メタデータ
「データについてのデータ」です。写真そのものが中身で、撮影日や撮影者はメタデータです。荷物と、荷札に書かれた情報の関係だと思ってください。
一覧を画面に並べる
アップロード済みの画像を、トップページにサムネイル一覧として並べてください。 ・第11章で作った /file/ のURLを使って表示する ・新しいものが左上に来るようにする ・スマホでは2列、パソコンでは4列に並ぶようにする ・1枚もないときは「まだ画像がありません」と日本語で表示する 見た目はシンプルで構いません。作ったら確認用のURLを教えてください。
ここまでで、アップロードして、保存して、一覧して、表示する、という一周がつながりました。これはもう小さなアプリです。
うまくいったか確認する
- トップページに、上げた画像がサムネイルで並ぶ
- 新しく上げた画像が、一覧の先頭に出てくる
- 1枚消すと、一覧からも消える
- スマホで開くと2列で並ぶ
よくあるつまずき
- 一覧に出るのに、画像が壊れたマークになる
- 一覧のキーと、表示に使っているURLがずれています。キーに
/が含まれるため、URLの組み立て方で崩れがちです。「一覧のキーと表示URLが一致していません」と伝えてください。 - 消したはずの画像が、まだ表示される
- ブラウザが前の画像を覚えています。強制的に再読み込みするか、シークレットウィンドウで確認してください。
- 古い画像が先に並んでしまう
- 一覧はキーの順で返ってきます。日付順にしたいなら、並べ替えを別に指定する必要があります。「アップロード日時の新しい順に並べ替えてください」と頼んでください。
- 画像が増えたら、一覧の表示が遅くなった
- 全部を一度に読み込んでいます。第13章で、軽くして速く見せる方法をやります。
この章のまとめ
並べる・消す・情報を持たせる。この3つで、倉庫が「整理された倉庫」になりました。prefixで絞る、消す前に見せる、検索したくなったらD1と組む。この3点を覚えておけば、あとから応用が効きます。
次の章は、見せ方の仕上げです。画像を軽くして、速く届けます。
章末チェックリスト
整理できました。次の第13章で、画像を軽く・速くします。