React.jsでES2015(ES6)のアロー関数(Arrow Function =>)を使えるようにする

Kuniyoshi Takemoto

8年前

This post is also available in: English-US (英語)

React.jsのサンプルコードなんかを見ていると、ES2015(ES6)の構文であるアロー関数(Arrow Function)が出てきたりします。
webpackでReact.jsを使っている際の導入メモです。

アロー関数(Arrow Function)は以下の例みたいな感じの構文です。

var a = (b) => b;
console.log(a("sample"));
// sample と表示される

先ず、React.jsでアロー関数(Arrow Function)を使うのには、babel-preset-stage-0 を npm でインストールします。

npm install --save-dev babel-preset-stage-0

すると、package.jsonが以下のような状態になると思います。

  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^1.13.2"
  }

次に、webpackを使っている場合には、webpack.config.jsのloaderのプリセットに以下のように加えます。

presets: ["es2015", "react","stage-0"],

webpack を使っていない場合にも、方法がいろいろとあるようです。詳しくは npmの公式サイトを参考にしてみてください。

Tags: React.js