joppot

コピペで絶対動く。説明を妥協しない

プログラミング

ReactでFaker.jsを利用してダミーデータを生成する

投稿日:


概要

みなさんこんにちはcandleです。今回はFaker.jsをReactで使ってみようと思います。

Faker.jsの使用目的は様々あると思います。多くの場合はテストで使うと思うのですが、今回は簡単にReactのデモ用のステートをFaker.jsを利用して生成してみたいと思います。

前提

  1. Reactの最低限の知識
  2. create-react-appがインストールされている

Reactプロジェクトの立ち上げ

まずは適当にreactのプロジェクトを作成します。任意のディレクトリで以下を実行して、reactプロジェクトを立ち上げましょう。

create-react-app faker-demo
cd faker-demo

fakerのインストール

以下のコマンドで、fakerをインストールします。
本番で使わない事を前提でインストールします。

yarn add --dev faker

インストールは以上です。

fakerでダミーデータを生成する

src/App.jsを開いて以下の様にします。

import React, { Component } from 'react'
import Faker from 'faker'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
    }
  }

  componentWillMount() {
    for (let i = 0; i < 5; i++) {
      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <img src={user.avatar} alt={user.name} width="50" height="50" />
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

  render() {
    return <div>{this.state.users.map(user => this.renderUsers(user))}</div>
  }
}

export default App

Fakerでダーミデータを作成している部分はcomponentWillMount()の箇所です。
5人分のusersデータを作りました。

実際にFakerでダミーのデータを生成しているところはFaker.internet.userName()とかFaker.internet.email()の部分です。

  componentWillMount() {
    for (let i = 0; i < 5; i++) {
      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

サーバを起動してちゃんとデータが作成できているか確認します。

yarn run start

表示されています。

Fakerに用意されているデータ

Fakerの用意されているデータは以下のURLの「NameSpaces」に書かれています。

http://marak.github.io/faker.js/index.html

確認して必要なダミーデータを探してみてください。

まとめ

Fakerを使った活用の仕方として、APIサーバがなくてもとりあえず、このダミーデータで側だけを作
るなどの活用の仕方があるかなと思いました。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

scikit-learnの4つの関数で機械学習などのデータを前処理する

概要 皆んさんこんにちはcandleです。今回はpythonの機械学習ライブラリ『scikit-learn』を使い、データの前処理をしてみます。 scikit-learnでは変換器と呼ばれるものを使い …

fabricでmysqlコマンドを実行する関数を自作する

概要 皆さんこんにちはcandleです。今回はfabricからリモート先のサーバのmysqlを実行するための環境変数と関数を作成したいと思います。 mysqlは一般にmysqlコマンドをログインしてか …

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

railsのrakeで作成したカラムの型とdefault値を変更する方法

概要 みなさんこんにちはcandleです。今回はrakeコマンドのややこしいところを扱います。 rakeコマンドはわりと便利で、データベースのカラムの追加や型の変更をマイグレーションファイルから読み込 …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー