🎲

ReactNative(Expo)でUUIDやULIDを使いたい

2024/06/14に公開

と思って、おもむろに npm install uuid して const id = v4(); とすると、以下のようなエラーが出ます。

nodeCrypto.ramdomBytes is not a function

UUIDやULIDは内部的にNode.jsの cryptoライブラリを利用しているのですが、それがなくて怒られるんですね。考えてみれば当然のことで、ReactNativeは見た目こそReactですが、実際の実行環境はモバイルであってNode.jsではない、と。

結論

調べたらこちらのライブラリcrypto.ramdomBytesのポリフィルを提供してくれていました。

npm install react-native-get-random-values
npx pod-install

私はEASのDevelopment Buildを使っているので、再ビルド&インストールしました。

あとは import 'react-native-get-random-values'を適当なファイルに入れたら無事に動きました。

なぜUUIDをReactNativeで使いたいのか

フロントエンドでUUIDを使いたいケースはかなり限定的だと思いますが、私の理由は以下です。

  • Firestoreを利用しており、フロント側にロジックを持つ必要がある
  • FirestoreドキュメントにIDつきのオブジェクトを保持し、そのIDを使ってサブコレクションから参照したい

以下のようなイメージです(TypeScriptっぽい何か)。

Document User {
  id: string;
  name: string;
  categories: Category[];
  post: PostDocument {
    id: string;
    title: string;
    categoryId: string;
  }
}

Object Category {
  id: string;
  name: string;
}

FirestoreはドキュメントへのIDはランダムに生成してくれますが、フィールドに対してはIDの生成をしてくれません。なので、このIDはフロントエンドで生成して渡す必要があります。

もちろん素直にCategoryをコレクションにしてしまえばいいのですが、Read/Write回数の増加とクライアントサイドジョインの手間を考えると、フィールドに持っておきたい気がしています(今後様子をみて変えるかも)。

NoSQLはRDBと違って正解といえるDB設計がなく、UIやビジネスによって最適な設計が変わってくるので面白いですね。

Discussion