Sassyブログ

好きなことで暮らしを豊かにするブログ

JavaScriptでのダミーデータ作成にはfalsoが便利!

Jser.infoというJavaScriptの最新情報を紹介するブログにてfalsoというダミーデータを生成してくれるライブラリが紹介されていたので手元で簡単に使ってみました。

falsoについてはこちら

github.com

githubのサンプルコードを使ってどんなデータが作れるのかみてみました!

まずはどのようなデータを作成したかというと、

・ユーザー情報に必要なアドレスや名前のダミーデータ ・アドレスの一覧データ ・シードを使った不変なダミーデータ

です。

以下サンプルコードです

codesandboxを使って書いてます

import “./styles.css”;
import { randEmail, randFullName, rand, seed } from@ngneat/falso”;
import { Flex, Text, Box } from “rebass”;

export default function App() {
  // ダミーユーザーの生成
  const user = { email: randEmail(), name: randFullName() };
  // ダミーアドレスの生成
  const emails = randEmail({ length: 10 });

  seed(“some-constant-seed”);
  // 固定のダミーユーザーの生成
  const constantUser = { email: randEmail(), name: randFullName() };
  // 固定のダミーアドレスの生成
  const constantEmails = randEmail({ length: 10 });
  seed();

  return (
    <div className=“App”>
      <h1>サンプルデータ</h1>
      <Flex flexDirection=“column”>
        <Flex flexDirection=“column”>
          <Text>【ダミーユーザーの生成結果】</Text>
          <Box>{JSON.stringify(user)}</Box>
        </Flex>
        <br />
        <Flex flexDirection=“column”>
          <Text>【ダミーアドレスの生成結果】</Text>
          {emails.map((email, i) => {
            return <Text key={i}>{email}</Text>;
          })}
        </Flex>
        <br />
        <Flex flexDirection=“column”>
          <Text>【固定ダミーユーザーの生成結果】</Text>
          <Box>{JSON.stringify(constantUser)}</Box>
        </Flex>
        <br />
        <Flex flexDirection=“column”>
          <Text>【固定ダミーアドレスの生成結果】</Text>
          {constantEmails.map((email, i) => {
            return <Text key={i}>{email}</Text>;
          })}
        </Flex>
      </Flex>
    </div>
  );
}

名前やアドレスのダミーデータ生成にはrandEmail, randFullNameといった関数が用意されているでこちらを使います。

またrandEmail, randFullNameの引数にオプションとしてlengthを渡してあげるとランダムな配列データを作ることができます。

これは実行毎に変化してしまいます。

これだとまずいケースとして考えられるのはビジュアルリグレッションテストを導入している場合ですかね。

差分が毎回出てしまうので、そんなときはseedを使って常に同じデータを返すようにすることができます。

seed関数に適当な文字列を渡します。

そのあとにrandEmail, randFullNameを使うと複数回実行しても同じデータが返るようになります。

解除するときは引数に何も渡さずseed関数を呼べば再度実行毎にランダムの値が返るようになります。

変わらないことを確認するためにも2回実行してみました!

どんなデータが生成できるのかも合わせてごらん頂ければと思います。

【1回目実行】

f:id:y_saiki:20220210165547j:plain

【2回目実行】

f:id:y_saiki:20220210170006j:plain

1回目と2回目の画像を見比べてみてください。

「ダミーユーザーの生成結果」「ダミーアドレスの生成結果」は1回目と2回目で異なっていますが、seedを使用した「固定ダミーユーザーの生成結果」「固定ダミーアドレスの生成結果」は1回目と2回目では変わっていません。

なので実行毎に変わってしまうと都合が悪い場合はseedを使ってあげるのが良いです。

他にどんなダミーデータが作れるかは以下を眺めてみると良いと思います。

https://github.com/ngneat/falso/tree/main/packages/falso/src/lib

地味に便利なライブラリでした!

配列データ用意するときとかは重宝しそうです。