VueでFirebaseストレージに保存したファイルの一覧を表示する

• ホーム
• ブログ
• Firebase情報

Vue を使ってFirebaseのストレージにファイルを保存する

2022年4月19日

Vue で Firebase ストレージに保存したファイルの一覧を表示する

前回は Vue を使って Firebase のストレージにファイルを保存する方法を紹介しました。これは「管理者」としての機能です。今回は、Firebase のストレージに保存されたファイルを閲覧する前段階として、Firebase のストレージに保存されたファイルの一覧を表示するやり方を紹介します。

今回実現する機能は？

最初に、今回実現する機能を整理しておきます。 今回、実装するのは Firebase のストレージのフォルダに保存されたファイルの一覧を Vue で表示するというのが目的 d す。この記事では触れませんが次のステップとしては、表示したファイルの一覧の中から選択されたファイルを表示できる様にするために必要な機能という位置づけです。

Firebase ストレージに保存されたファイルを取得する

Firebase ストレージに保存したファイルの情報になるので、Firebase から必要な情報を取得することになります。 Firebase でサポートしている機能なので、基本的な関数（API）を呼び出すだけで簡単に取得できます。

必要な関数は：

• getStorage()
• listAll()
• ref()

の三つです。

「ref()」でファイルの一覧を取得したい、Firebase ストレージのフォルダへのリファレンス（簡単に言うと場所）を取得します。 ファイルの一覧を取得する方法は大きく二つのやり方がありますが、この記事では指定したフォルダに保存されている全部のファイルのリストを取得する方法を紹介します。もう一つの方法は、一度に取得するファイルの数を指定して取得する方法です。保存されているファイルの数が増えてくると、一度にまとめて取得するよりは、１ページに表示する（表示できる）ファイルの数を限定して取得した方が効率的で、素早いページの表示が可能になります。

今回は、初心者でもわかりやすく、処理もシンプルなフォルダ内の全てのファイルを取得する方法を紹介しています。

import {
  getStorage,
  listAll,
  ref,
} from "firebase/storage";

....

export const storage = getStorage();

....


export function getFileList(path) {
  return new Promise((resolve) => {
    const listRef = ref(storage, path);
    listAll(listRef)
      .then((res) => {
        const folders = [];
        const files = [];
        for (let i = 0; i < res.prefixes.length; i++) {
          const folderRef = res.prefixes[i];
          folders.push(folderRef);
        }
        for (let i = 0; i < res.items.length; i++) {
          const itemRef = res.items[i];
          files.push(itemRef);
        }
        resolve({
          folders: folders,
          files: files,
        });
      })
      .catch((error) => {
        // Error
        resolve(undefined);
      });
  });
}

「listAll()」でファイルが保存されているフォルダのリファレンス（フォルダの場所）を指定して、そこにあるファイルを取得します。 Firebase のデータ型の「listResult」と言う形で取得できます。このデータには、フォルダ内のファイルの一覧の情報や、フォルダ内のサブフォルダの一覧の情報が含まれています。

• ファイルの一覧: ListResult.items
• サブフォルダの一覧: ListResult.prefixes です。

Firebase のストレージからのファイル一覧の処理は非同期で行われます。したがって、全てのデータが揃うのを待って処理結果を呼び出し元に帰すようにしています。 これには、プロミス（Promise）を利用します。また、今回取得した一覧には、ファイルとフォルダの一覧が含まれているので、この両方の情報を帰す様になっています。

これらの記述を、前回作成した、Firebase の初期設定を行なっているファイル「src/lib/firebase.js」に追加すれば Vue の部品から呼び出して利用できるようになります。

###　一覧の表示

一覧の表示は、今回は「src/views/HomeView.vue」で行うようにしています。

この「部品」が表示できる様になった段階（マウントされた段階）で、ファイルの一覧を取得します。 一覧の表示には、Vue 公式チュートリアルで学習した「v-for」を使います。

今回は、取得した情報のうちファイルの一覧だけを表示する様になっています。 （フォルダの一覧の情報は利用していません）

<script>
import { getFileList } from "../lib/firebase";
export default {
  data() {
    return {
      files: [],
    };
  },
  mounted() {
    getFileList("sample").then((filelist) => {
      if (filelist) {
        this.files = filelist.files;
      }
    });
  },
};
</script>
<template>
  <div>
    <h1>ファイル一覧</h1>
    <div>
      <ul v-for="file in files" :key="file.name">
        <li v-bind:id="file.name">{{ file.name }}</li>
      </ul>
    </div>
  </div>
</template>

データの型の理解が大切

今回扱うデータは Firebase で決められたデータがあります。

• ListResult
• StorageReference

です。どちらも Firebase のドキュメントで詳しく書かれています。プログラミング言語の多くは、言語で予め決められているデータの形（型）以外にも、作成するプログラムによって新たなデータの形（型）を作って利用できる様になっているのが普通です。

今回は、その中の一部のデータ、「ファイルの一覧（ListResult.items）」、「フォルダの一覧(ListResult.prefixes)」と、ファイルの名前（StorageReference.name）を利用しています。

今回の実装では想定していませんが、フォルダ内にサブフォルダがある場合、フォルダの階層を降りて行ったり、登っていくような機能が必要になる場合があります。具体的には、フォルダのアイコンをクリックしたら、そのフォルダのファイルの一覧とサブフォルダの一覧を表示したり、上位のフォルダをクリックしたら上位のフォルダのファイルの一覧とサブフォルダの一覧を表示できる様にする機能です。

こうした機能を実装すると、Firebase のストレージに保存されている全てのファイルにアクセスすることが可能になります。

今回は、実装をシンプルにするため、フォルダ内にはサブフォルダは置かないと言う前提にして、ファイルの一覧だけを表示できる様にして、フォルダの移動の機能は省略する様にしています。

目的に応じて、どのデータをどの様に利用して処理を実現するかを考えることが大切になります。そのためには、カスタムで作られたデータを扱う場合には特に、どのようなデータがあって何が使えるかなど詳しく理解しておくことが大切になります。

まとめ

前回は、管理者中心の機能として、指定したファイルを Firebase のストレージに保存する機能を紹介しましたが、この記事では、利用者が情報を閲覧するための前段階の処理の例として、Firebase のストレージのあるホルダに保存されているファイルの一覧を表示する方法を紹介しました。

最近のアプリケーションプログラムの開発では、公開されている既存のモジュール（パッケージ）を組み込んで利用する方法が多くなっています。こうしたモジュールでは、プログラミング言語が予め決めているデータの形以外のデータを作って利用するケースがたくさんあります。

Firebase も独自のデータの形を決めて利用しています。利用に際しては、こうしたカスタムのデータの形を理解しておくことがとても大切になります。

次回は、一覧で表示されたデータを選択してそのファイルの中身を表示する方法を紹介します。

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.