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

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

関連記事

wordpressのbogoプラグインのショートコードをカスタマイズする

English 日本語 概要 みなさんこんにちはcandleです。 今回はwordpress bogoのショートコードをカスタマイズしてみたいと思います。 紹介する項目は以下の2つです。 国旗の表示、 …

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

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

wordpressのget_categoriesでサブカテゴリーを含まないカテゴリー一覧を取得する

概要 みなさんこんにちはcandleです。今回はカテゴリー一覧にサブカテゴリーを含まない取得の仕方を紹介します。 サブカテゴリーを使用しているサイトの場合、場合によってはサブカテゴリーとトップの階層の …

phpでcompassを使った開発の仕方

概要 みなさんこにちはcandleです。今回はphpでcompassを使いたいと思います。 compassは別名scssともいいます。 compassはphpのライブラリが既にあります。 しかし、その …

ruby on railsに最強のwysiwygエディタ、Squireを導入する

概要 みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタ …


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