zaki-yama

zaki-yama's reading list

2021-09-21

TOC

💬 ひとこと

1 ヶ月以上あいてしまった。 Next.js, swr, react-hook-form, Chakra UI あたりを素振りしてこんなものを作ってた。 Pixela API をブラウザ上で試せる Playground を Next.js で作った - dackdive's blog

✅ 読んだ

📝 : 下の方に内容メモあり

☁︎ Salesforce

🌐 Web, Frontend

🦀 Rust, WebAssembly

その他

✨ 読みたい

✏️ 書いた

🗑Stale

📝 読んだ記事のメモ

The Firebase Blog: Deep dive into the new Firebase JS SDK design

Firebase SDK v8 -> v9 にかけてインターフェースを大きく変えるような変更を行ったそう。 元々は firebase.auth().onAuthStateChanged(user => {...}) のように巨大な firebase オブジェクトの下に様々なモジュールが生えている状態だったのが、これを廃止し、独立したモジュールとして import するようになった。

before

import firebase from "firebase/app";
import "firebase/auth";

firebase.initializeApp({
  /* config */
});
const auth = firebase.auth();
auth.onAuthStateChanged((user) => {
  // Check for user status
});

after

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";

const firebaseApp = initializeApp({
  /* config */
});
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, (user) => {
  // Check for user status
});

このような変更を行った理由として挙げているのが、webpack などのモジュールバンドラーに備わっている tree shaking。

before では export なしの firebase/auth モジュールを import することで firebase オブジェクトに auth という名前空間を作成し、その下の各種メソッドが利用可能になるが、これだとユーザーが使っていないメソッド群もバンドルコードに含まれることになる。 そのため、after のように各名前空間からは getXXX および各種関数を export し、getXXX に firebase 本体（initializeApp()で生成するインスタンス）を渡す形式に変更された。 これにより、ユーザー側でバンドルする際には使用している関数のみが含まれるようになる。

また、段階的に移行できるよう新しいバージョンでも以前と同じインターフェースの API を提供している。

← Back to home