カテゴリー: 開発環境の作り方

React.js の開発環境をできるだけ簡単に作るための情報を提供しています。参考になるファイルもダウンロードできるようにしていますので、よかったら利用してみてください。

こちらの記事は、Node.js がインストールされており、npm の基本的な使い方も理解していることを前提に書かれています。当ブログでは Node.js と npm についても解説していますので、インストール方法や使い方を学びたい方はまずこちらを参考にしてください。

• Node.jsをインストールしよう！
• npmの基本的な使い方

このページで解説しているのは、React.js を導入し、webpack + babel を用いて ECMAScript (ES2015～) とJSX で書かれた JavaScript を ES5 に変換。ESLint + airbnb スタイルガイドで構文チェックを行う方法です。

サンプルプロジェクトのダウンロード

React が動作するサンプルプロジェクトを用意しています。まずこのファイルをダウンロードして解凍してください。中身を見てもらえば、React がどういう構成になっているのかわかりやすいと思います。

index.html を開くと、React で Hello World!! と表示されます。

サンプルプロジェクト
https://gameusers.org/dev/sample/react-sample.zip

パッケージをインストールする

まず開発プロジェクトのフォルダ（ディレクトリ）を作成して、 cd コマンドで移動してください。そして npm init で package.json を作成してください。それが終わったら以下のコマンドで React.js をインストールしましょう。–save

npm install --save react react-dom

次に webpack、babel、ESLint、airbnb をインストールしましょう。以下のコマンドにすべてまとめられています。–save-dev

npm install --save-dev webpack babel-loader babel-core babel-preset-env babel-preset-react eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

webpack.config.jsを作成する

webpack を動作させるには、webpack.config.js という設定ファイルを用意しなければなりません。プロジェクトのルートに名前が webpack.config.js というファイルを作成して、以下の内容をコピーしてください。

※ サンプルプロジェクトをダウンロードした方は、中にある webpack.config.js をそのままコピーして使ってください。

entry: './entry.jsx',
output: {
  path: path.join(__dirname, '/dist'),
  filename: 'bundle.js',
},

この entry、output の部分はあなたが開発しているプロジェクトに沿った内容に変更する必要があります。

entry 部分にはビルドの起点になるファイルのパスを記述してください。import で他のファイルを読み込む基本となるファイルです。

output には webpack でまとめたファイルを出力する場所と、そのファイル名を指定します。

webpack.config.js についてもっと詳しく知りたい方は、以下のサイトを参考にしてください。当ブログの記事は webpack version 3 をベースに書かれています。他サイトの昔の記事を参考にする場合は、書き方が変わっている部分がありますので注意してください。

公式サイトを参考にすれば間違いはないです。

• webpack configuration （公式・英語）
• webpack.config.jsの読み方、書き方
• webpack最低限（JavaScript編）

Babelの設定を書く

ECMAScript (ES2015～) で書かれた JavaScript を Babel を利用して、ブラウザで表示できるように変換します。そのための設定を書かなければなりません。

通常は .babelrc というファイルを開発プロジェクトのルートディレクトリに用意して、そこに Babel の設定を書いていくのですが、package.json の中に書くことも可能です。設定ファイルが増えていくと管理が大変になりますので、できるだけひとところにまとめた方が楽です。そのため、こちらの解説では package.json に書く方法を採用しています。

"babel": {
  "presets": [
    "react",
    "env"
  ]
},

上記コードを見てください。これは babel-preset-react と babel-preset-env パッケージの設定を行っています。このコードをそのまま package.json に追記してください。

babel-preset-react は Babel で React をトランスパイルするためのパッケージで、babel-preset-env は説明が難しいのですが、以下のような機能を持っています。

A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.

ターゲットとするブラウザまたはランタイム環境に基づいて必要なバベルプラグインとポリフィルを自動的に決定することによりES2015 +をES5にコンパイルするバベルプリセットです。

例えば、過去2バージョンのブラウザまで対応しながらトランスパイルするといったターゲットの指定ができるパッケージです。

• babel-preset-react
• babel-preset-env

ESLintの設定を書く

ESLint を動作させるには、通常 .eslintrc.json という設定ファイルをルートディレクトリに用意しなければなりませんが、こちらの設定も Babel の設定と同じく package.json の中に書くことが可能です。以下のコードを package.json に追記してください。

"eslintConfig": {
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  },
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0,
    "function-paren-newline": 0
  }
},

rules と書かれた部分にルールについての記述を行っていきます。ちなみに comma-dangle という表記は、行末にコンマをつけなければならないというルールを無効にしています。実際に開発を進めていると、不要に感じたりするルールが出てきますので、そのたびに自分で追加していく形になります。

基本は “ルール名”: 0～2 という書き方をします。

• 0 または “off” – ルールを無効にする
• 1 または “warn” – 警告として扱う
• 2 または “error” – エラーとして扱う

詳しくは以下の公式サイトを確認してください。

Configuring ESLint（英語）

サンプルプロジェクトの package.json

package.json の設定が完了すると、このような内容になります。

追記：package.json の内部に書ける設定は他にもあります。さらに知りたい方は以下のページを参考にしてください。

package.jsonに設定を書けるって知ってました？

エディターでESLintを使う

ESLint を利用できる環境が整いましたので、お使いのエディターでも扱えるようにしましょう。この記事では Atom で ESLint を利用する方法を解説しています。他のエディターを利用している方は、お使いのエディターで ESLint を利用する方法を調べてください。

Atom パッケージのインストール

Atom を開き、上部メニューから環境設定を選んでください。次にインストールを選んで、画像の画面に移動してください。

パッケージのインストールフォームで、linter, linter-eslint, language-babel を検索してインストールしましょう。

これで Atom で ESLint が使えるようになります。

• linter
• linter-eslint
• language-babel

Atom の ESLint がエラーを表示しているところ

webpackでビルドする

webpack でビルド（ファイルの出力）をしてみましょう。

ビルドするファイルは自分で React を書くか、サンプルプロジェクトのファイルを利用してください。サンプルプロジェクトのファイルを利用する場合は、開発プロジェクトのルートに、サンプルプロジェクトから entry.jsx, hello.jsx, index.html をコピーしてください。

そして package.json を開いて、scripts を以下のように書き換えてみてください。

"scripts": {
  "build": "webpack --display-error-details",
  "watch": "webpack --watch"
},

これを追加することでコマンドプロンプトで、build ができるようになります。

npm run build

と入力してみてください。設定が間違っていなければ、webpack.config.js の output に記述した場所に、ファイルが出力されているはずです。

出力されたファイルは開発用で圧縮されていません。本番用のファイルを出力したい場合は、webpack.config.js の env 部分を以下のように書き換えてください。

const env = 'development';
↓
const env = 'production';

production に書き換えて npm run build すると、圧縮されたファイルが出力されます。

npm run watch

また上記のように入力すると、ファイルが編集されて保存されるたびに、webpack によって自動的にビルドされるようになります。毎回、build コマンドを入力するのは大変なので、開発するときは watch を使ってみてください。

最後に

後は React を解説しているサイトなどを参考にして、React の書き方を覚えていってください。Redux や Immutable.js など、React 関連のパッケージもたくさんあって学習コストは高めですが、一度使えるようになると便利なので頑張ってください。

ここで解説しているものをベースにして、必要なパッケージやプラグインを追加していく形で開発を進めていけると思います。

webpack や React は進化が激しいので、バージョンが変わると書き方が変わっていたりしますので、そういった場合はまず公式サイトをチェックするようにしてください。この記事も含め、ネットにある情報はすぐに古くなってしまうので、できるだけ新しい情報を参考にするようにしてください。

補足

以下で解説している部分は必須ではない項目です。不要だと思った場合は設定ファイルから削除することができます。

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: env
  }),
],

webpack.config.js のこの部分は、EnvironmentPlugin を利用し、JavaScript から process.env.NODE_ENV としてアクセスできる値を設定しています。

if (process.env.NODE_ENV === 'development') {
  console.log('development');
}

例えば上記のように使うことで、開発時のみ分岐させるといったことができます。この部分は必須ではありませんので、不要なら削除してください。

EnvironmentPlugin

devtool: 'source-map'

webpackage.config.js のこの部分は、ソースマップを出力するための設定です。サンプルプロジェクトでは dist フォルダ内に、bundle.js.map というファイルが出力されています。上記の表示を残したまま、npm run build をするとソースマップが同時に出力されます。

"scripts": {
  "build": "webpack --display-error-details",
},

package.json の –display-error-details と書かれている部分は webpack でエラーが出た場合、エラーの詳細が表示されるオプションです。

リンク

公式サイトのリンクです。さらに情報を集めたい場合はこちらを活用してください。

• React 公式
• React GitHub

• webpack 公式
• webpack GitHub

• Babel 公式
• Babel GitHub

• ESLint 公式
• ESLint GitHub