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

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

関連記事

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

概要 みなさんこんにちはcandleです。今回はruby on railsのckeditorという素晴らしいgemを使って見たいと思います。 ckeditorとはweb版の高機能なwordとかテキスト …

railsのmodelで各データが何個あるかカウントする

概要 皆さんこんにちはcandleです。 今回は、railsでレコードのデータそれぞれ何個あるのか数える方法を紹介します。 mysqlだと簡単なのですが、railsだとよくわからなかったので、いろいろ …

Rails pluginを使ったgemの作り方[1](基本設定編)

概要 みなさんこんにちはcandleです。今回からできればシリーズ物として、railsのgemを作っていこうと考えています。なぜかgemの作り方の詳しい解説サイトが日本語で少ないので未だgemを満足に …

railsのform_forとstrong parametersを使用して画像をアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリに画像をアップロードしてみましょう。 form_forは基本的にデ …

memcachedサーバとruby on railsのdalliを使用してセッションを管理する

概要 みなさんこんにちはcandleです。今回はmemcachedサーバを利用してrailsのセッションを管理してみたいと思います。 一般にrailsでセッション管理をしていると、ブラウザのcooki …


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