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

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

関連記事

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

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

fabricのsshのネットワーク設定でパスワードか公開鍵を使って認証する

概要 皆さん今日はcandleです。今回はsshを使ったfabricの設定をしましょう。 一般にsshにはパスワード認証と公開鍵認証があるので、そのどちらも試してみましょう。 もちろんセキュリティ面で …

basscss v8以降にv7以前のスタイルを追加する(自分用メモ)

概要 みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。 v7以降からbasscssのスタイルはかなり分割され …

ruby on railsのckeditorでcarrierwaveを使って画像をアップロードする

概要 みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。 ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあや …

cakephp2.5.6をfabric+cuisineを使用してインストールする

概要 みなさんこんにちはcandleです。今回はcakephp2.5.6の環境構築をfabricを使用して、インストールしてみましょう。cakephpはrailsと比べると100倍くらい簡単に環境構築 …

プロフィール


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

スポンサードリンク

アーカイブ