Firebaseストレージの使い方の実践編です！
記事IT・テクノロジー
Firebaseストレージの使い方の実践編です！
Firebase のストレージの利用の仕方の概念を紹介しましたので、この記事ではさらに具体的に Firebase のストレージの実践的な使い方を紹介します。 前回の記事では、Firebase のデータベースとの併用も紹介していますが、今回はまず、Firebase のストレージ機能の基本から紹介していきます。
バケット（bucket）とは？
まずは、言葉の説明を簡単にしてみます。Firebase のストレージのドキュメントを見ると「バケット（bucket）」が出てきます。余り聞きなれない言葉ですが、意味は「バケツ」という感じの意味です。要は、データ（ファイル）を入れる「入れ物」のイメージで使われています。
プログラムでは、このバケット（bucket）を基準にデータ（ファイル）の出し入れをしたり、情報を取得します。Firebase のプロジェクトを作成して、ストレージの機能を有効にすると、この「バケット（bucket）」が作られます。Firebase の初期化でもこのバケット(bucket)の場所を指定する必要があります。
バケット（backet）の場所は以下のような形で指定しています。以下のコードは Firebase を利用する際の初期化のプログラムの例です。npm などで、Firebase のモジュールをインストールして利用する場合には以下のような形で初期化をします。 （CDN で初期化もできます）
import firebase from "firebase";
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "project-name.firebaseapp.com",
databaseURL: "ｈｔｔｐｓ://project-name.firebaseio.com",
projectId: "project-name",
storageBucket: "project-name.appspot.com",
messagingSenderId: "xxxxxxxxxxxx",
appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase;
Firebase のストレージを作る場合、作られた「バケット（bucket）」の下にサブフォルダを作るようなイメージでデータ（ファイル）をおいて利用するようになります。管理の方法は、PC でフォルダを作ってファイルを保存するやり方とほぼ同じです。
Firebase ストレージを利用するのに必要な基本機能
Firebase のストレージ機能を利用する際に必要な基本機能は：
＊ バケット（サブフォルダ）のデータ（ファイル）のリストを取得
＊ ファイルの読み出し
＊ ファイルの保存
Firebase のストレージ機能では他にも便利な機能を用意していますが、基本はこの３つです。
この記事では、データのリストを取得する方法を中心に紹介します。
バケットの中身を見るには？
データをアップロードして保存する機能も大切ですが、まずは基本のバケット（bucket）やサブフォルダの中身を見ることから紹介します。
「中身」つまり、保存されている情報を見るために必要なのは、「どこ」の中身を見るかが必要です。この「どこ」を示しているのが「リファレンス（reference）」と呼ばれるものです。
このリファレンスは一番上位のバケット（bucket）を基準に場所を指定する方法を使っています。イメージとしては、PC のファイルの場所を示すやり方とほぼ同じです。 一番上位のバケットは
const top = firebase.storage().ref();
で取得できます。
このトップレベルの入れ物に何があるかを見る場合は以下のようなプログラムを書きます。
const top = firebase.storage().ref();
top
.listAll()
.then((res: firebase.storage.ListResult) => {
res.prefixes.forEach((folderRef: firebase.storage.Reference) => {
console.log(folderRef.name);
});
res.items.forEach((itemRef: firebase.storage.Reference) => {
console.log(itemRef.name);
});
})
.catch((error: any) => {
console.log(error);
});
「listAll()」が返す値で、上の例では「res」がこの場所の中身になります。基本的に中身の種類はサブフォルダかファイルということになります。ただし、Firebase のストレージが使っているのは
＊ prefixes: サブフォルダ
＊ items: ファイル
になっています。どちらむ、フォルダやファイルの場所を示すリファレンスの配列になっています。
サブフォルダの中身は？
サブフォルダの中身を見る方法も殆ど同じです。例えば、トップレベルのバケット（backet）の下に「files」というサブフォルダがある場合の例は
const ref = firebase.storage().ref();
const sub = ref.child("files");
sub
.listAll()
.then((res: firebase.storage.ListResult) => {
res.prefixes.forEach((floderRef: firebase.storage.Reference) => {
console.log(floderRef.name);
});
res.items.forEach((itemRef: firebase.storage.Reference) => {
console.log(itemRef.name);
});
})
.catch((error: any) => {
console.log(error);
});
の様になります。 トップレベルのバケット（bucket）の後に、「child("folder_name")」をつけると場所が指定できる仕組みです。あとは同じ要領です。
Firebase のファイルやフォルダ（バケット）の情報をえるには、トップレベルから情報を得たいファイルやフォルダ（バケット）の場所を示すパス（path）がわかればプログラムで場所を指定できます。場所を指定して、「listAll()」を呼び出せばその中のファイルやフォルダの情報が取得できます。
ここで紹介した方法は、そのフォルダ（バケット）の全てのフォルダ（バケット）やファイルの情報を取得する方法です。しかし、中身の情報が多い場合一度に取得すると処理に時間がかかりますし、余分なメモリが必要になります。実際の表示は全ての情報を表示するような設計にしない場合が多いので、必要な数だけ情報を取得する方法があります。
その場合は、「listAll()」の代わりに、「list({maxResults: 100})」を使います。maxResults で取得したいデータの数を指定します。
詳細は、Firebase のドキュメントで詳しく書かれていますが、以下の様なコードになります
// フォルダの場所を指定します
const listRef = storageRef.child("files/Feb2021");
// データは１０個づつ取得します
const currentPage = await listRef.list({ maxResults: 10 });
// 続きのデータを取得する例、
// 最初に取得したデータに次のデータの場所を示す情報が含まれています
if (currentPage.nextPageToken) {
const nextPage = await listRef.list({
maxResults: 10,
pageToken: currentPage.nextPageToken,
});
}
こうすることで、必要最小限のデータを取得して、必要に応じて次のデータを取得する様にすると、処理時間や使用するメモリを有効に使うことができます。次のデータの情報は、取得したデータに含まれているので、「次」のボタンが押された場合に取得するなどの処理が可能になります。
まとめ
Firebase のストレージの具体的な利用のやり方をまとめてみました。 この記事では、Firebase のストレージの場所（フォルダ）を指定してその中のデータ（フォルダやファイル）を取得するコードの具体的な例を紹介してみました。
実際のアプリやサービスで使用する場合、フォルダ内のファイルが多い場合は一度に取得せずに必要な数だけを取得するようにすることで、処理時間や必要なメモリを効率的に利用することが可能になります。
