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

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

関連記事

Mysqlテーブルの照合順序を変更する

概要 みなさんこんにちはcandleです。今回はテーブルの照合順序を変更する方法を行います。 この方法はやっても、mysqlクエリー1行ですみます。早速やりましょう。 テーブルの照合順序を変更する 次 …

railsのsimple-captcha gemを使用してform_forを使ったフォームを画像認証する

概要 みなさんこんにちはcandleです。公に開かれたフォームはスパムや総当り攻撃を受けやすいです。 そこで、画像認証を導入して、悪意のあるフォームを拒否してみましょう。 simple-captcha …

railsのcarrierwaveとremotipartで画像のアップロードを非同期にしjsonを受け取る

概要 みなさんこんにちはcandleです。今回はremotipartとcarrierwaveを使って画像のアップロードをajax化したいと思います。 railsのフォームはremote設定をするだけで …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …

pythonのpipでfabricをインストールする

概要 みなさんこんにちはcandleです。今回はpipでデプロイメントツールのfabricをインストールしたいと思います。 前提 pipがインストールされている


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