React関連パッケージのバージョンによって起こる問題

npmのパッケージは気が向いたときにアップデートしているのですが、まれにアップデートをしたせいでこれまでどおりに動かなくなることがあります。現在、React関係のパッケージで起こっている問題を参考までに載せておきます。もしかするとWindows環境だけで起こる問題で、MacやLinux上では起こらないかもしれませんのであしからず。

eslint-plugin-jsx-a11yのバージョンが5.1.1より上の場合エラーが出る。コードをルールに沿って正しく記述するためのチェック用パッケージなのですが、6.0.2にアップデートすると以下のエラーが出るようになってしまいました。

definition for rule 'jsx-a11y/href-no-hash' was not found

5.1.1に戻すとエラーが出なくなります。

npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev

※ 2017/11/23 追記:eslint 4.11.0, eslint-config-airbnb 16.1.0, eslint-plugin-jsx-a11y 6.0.2 の環境ではエラーが出なくなっています。もう最新版にしても問題ありません。

 

webpackをインストールする際にfsevents絡みでエラーが出てしまう。ルートの権限でインストールしてくださいと出るのですが、その際、毎回 fsevents 絡みのエラーが出ます。

npm ERR! Please try running this command again as root/Administrator.

npmのバージョンを5.0.4に戻すとエラーが起きません。

npm install -g npm@5.0.4

※ 2018/1/10 追記:npm@5.6.0 で改善したようです。もしエラーメッセージが出る場合は、クリーンインストールしてくださいとのことです。

 

webpackでbuildする際にファイルを圧縮することができない。久しぶりにファイルを圧縮してみようと思い、プロダクション版でファイルを出力しようとしたところ、uglifyが正常にできなくなっていました。

Uglify SyntaxError: Unexpected token: punc ())

上記のエラーが表示されます。調べてみたところ、ES6絡み?で圧縮ができなくなっているようです。webpackに備え付けられているuglifyだと動かないようなので、パッケージ uglify-js(バージョン2)& uglifyjs-webpack-plugin(最新のβバージョン)をインストールして利用してみたところ圧縮が可能になりました。

npm install uglify-js@2 --save-dev
npm install uglifyjs-webpack-plugin@1.0.0-beta.2 --save-dev

同じエラーで悩んでいる方がおられましたら参考にしてください。

※ 2018/1/10 追記:現在は webpack 付属の UglifyJsPlugin で正常に動作しています。uglify-js と uglifyjs-webpack-plugin は必要ありません。

開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

React.jsの開発環境をできるだけ簡単に作る!

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

こちらの記事は、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 initpackage.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 をベースに書かれています。他サイトの昔の記事を参考にする場合は、書き方が変わっている部分がありますので注意してください。

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

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バージョンのブラウザまで対応しながらトランスパイルするといったターゲットの指定ができるパッケージです。

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

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

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

 

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 でエラーが出た場合、エラーの詳細が表示されるオプションです。

リンク


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

開発環境の作り方について

Game Usersの開発に参加するには、Reactが動かせる環境を作らなければならないのですが、これが本当にめんどくさい!!なにがめんどくさいかと言えば日本語の情報が少ない上に、いろんなものをインストール&設定しないとまともに動かせない。具体的に挙げると以下のものが必要になります。

  • Webサーバーソフト:例)Apache
  • パッケージインストール:Node.js (npm)
  • コードチェック:例)ESLint / airbnb
  • Javascript (ES2015)変換:例)webpack / babel

ややこしいのはESLintとwebpackは独自のコンフィグファイルを作成しないといけないところ。React自体の学習コストが高いのに、ES2015、ESLint、webpackについても同時に学ばなければならないのは非常に大変です。

Game Usersの開発に気軽に参加してもらいたいけど、ひとつひとつ検索して情報を仕入れながら導入してもらうというのは、ちょっとハードルが高すぎると思うので、できるだけ簡単に環境を整えてもらえるような、読みながら設定ができる情報を揃えたい。

自分はHello Worldを表示させるレベルから2、3歩進んだ程度のレベルなので、あまり高度な話はできませんが、Reactに興味を持っている人のために、多少はお役に立てるような情報を提供できれば幸いです。