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>
  );
}