Firebase version9以降でCloud Storageを使う[登録編] #JavaScript

タイトル通りです。

2021/8/25にリリースされたFirebase JavaScript SDK (v9.0.0)の使い方、特にCloud Storageについて、まだ日本語のドキュメント等があまり整備されていないので一応書き残しておきます。

公式

8系と何が違うの？

関数をnamed importをして必要なものだけ使う。みたいな方針になったらしいです。
わかりやすく説明されてます↓

Cloud Storageの扱い方について

早速結論ですが、Cloud Storageの使い方です。v8以前と比較します。

importと参照の作成

import firebase from "firebase/app";
import "firebase/storage";

const firebaseConfig = { ... } //略

firebase.initializeApp(firebaseConfig);
export const storage = firebase.storage();
export const storageRef = storage.ref();

今まではこんな感じにstorage()サービスからファイルなどへの参照を作成していました。
これが↓のようになります

import { initializeApp } from 'firebase/app';
import { getStorage, ref } from "firebase/storage";

const firebaseConfig = { ... } //略
initializeApp(firebaseConfig);

export const storage = getStorage();

export const storageRef = ref(storage);

明示的に必要となるメソッドをimportする必要があります。
ちなみにv8->v9以降の一時的な回避策として、import時のpathにcompatを加えるとv8の時と同じように使えます。

emulatorで動作確認した場合は今まではuseEmulatorのhooksを使いportを指定していましたが、v9の場合は接続したいエミュレーターの関数を呼び出してportを渡してあげます。

//v8
import firebase from "firebase/app";
import "firebase/storage";

const storage = firebase.storage();
storage.useEmulator("localhost", 9199);

//v9
import { getStorage, connectStorageEmulator } from 'firebase/storage'

export const storage = getStorage();
connectStorageEmulator(storage, 'localhost', 9199);

ところで、ファイル内の階層を変えて参照を作成したい場合があると思います。
v8の場合childやparentメソッドを使って実現できます。

//v8
const spaceRef = storageRef.child('images/space.jpg');

これをv9の場合に書き直すと,refを用いて第二引数にpathを渡すことで実現できます。

import { ref } from "firebase/storage";
//v9
const spaceRef = ref(storage, 'images/space.jpg');

parentやrootの場合は今までと同じように使用することができます。

//一つ階層が上がる images/space.jpg -> images
const imagesRef = spaceRef.parent;

//ルートへ
const rootRef = spaceRef.root;

ファイルのアップロード

v8の場合適切な参照を作成したらputメソッドを呼び出せます。

const file = ... // use the Blob or File API

const uploadTask = storageRef.child('images/rivers.jpg').put(file);

v9の場合はuploadBytesResumableなどのメソッドを用いてputの代用をします。

import { uploadBytesResumable } from "firebase/storage";

const uploadTask = uploadBytesResumable(storageRef, file);

DownLoadURLが欲しい場合

クライアント側で画像登録を行い、Cloud Storageにある画像URLを自身のアプリのDBに持っておきたい場合があると思います。
その場合はDownLoadURLを使い保存先を取得します。

前述のCloud Storageの参照に対してgetDownloadURLメソッドを使うことでダウンロード先のURLを取得できます。

...
  () => {
    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
      console.log('ダウンロードしたURL', downloadURL);
    });
  }

v9 こちらもimportしたgetDownloadURL関数に参照を渡すだけです。

import { ref, getDownloadURL } from 'firebase/storage';

...
 () => {
     getDownloadURL(uploadTask.snapshot.ref).then((downloadURL: string) => {
              console.log('ダウンロードしたURL' + downloadURL);
     });
 }

エラー処理などを加えたものは公式に例が提供されています