babelとwebpackを使ってES6でreactを動かすまでのチュートリアル

  • 60
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

ES6(ES2015)でReactのコードを書こうと思い、現時点で最も良さそうな環境を構築してみました。

  • モジュールの依存関係解決には多機能かつ設定が簡単なwebpackを使用しています。
  • ES6->ES5のトランスパイラはbabelです。
  • npmが使えることが前提です。

作業場所の確保と下準備

作業ディレクトリを作成して移動します。

mkdir react-es6 && cd $_

gitでソースコードを管理する場合は git init しておきましょう。

git init

package.jsonを生成します。初期設定をスキップするため -y オプションを付けています。

npm init -y

以下のpackage.jsonが生成されます。

package.json
{
  "name": "react-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ソースコードを配置するディレクトリとコンパイルしたコードを生成するディレクトリを作成します。

mkdir src dist

ここまでが下準備。

babelとwebpackのインストール

babelの必要なパッケージをインストールします。
-D--save-devと同義でpackage.jsondevDependenciesに自動的に記録するためのオプションです。

$ npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react

babelの設定ファイルを作成します。

touch .babelrc

.babelrcにはES6を利用するため以下のように記述します。

{
  "presets": [
    "es2015", "react"
  ]
}

次にwebpackをインストールします。

$ npm i -D webpack

webpackのコンフィグファイルを作成します。
ここでは、親ファイルをwebpack.config.jsとし、詳細はdevelopment.jsを読ませることにします。

touch webpack.config.js development.js

設定ファイルには以下のように記述します。

webpack.config.js
require('babel-core/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');
development.js
import path from 'path'

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

export default {
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },

  resolve: {
    extensions: ['', '.js']
  },

  plugins: []
}

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

Reactのパッケージをインストールします。
-Sをつけておくとpackage.jsonのdependenciesに反映してくれます。

npm i -S react react-dom

さていよいよReactのコードを書いていきます。
とりあえずシンプルに、ブラウザ上に"Hello React!"と表示させてみましょう。

touch src/index.jsx
index.jsx
import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

なおここまででWebpackを使って上記のコードをビルドすることが可能です。
成功すれば、dist/bundle.jsが生成されますので確認の意味で実行してみましょう。(やらなくてもいいです)

./node_modules/.bin/webpack

webpack-dev-serverのインストール

webpackにはwebpack-dev-serverというモジュールが用意されていて、これを使うとwebサーバーを通して動作確認しながら開発することができます。
またwatchifyなどと同様にソースコードの変更を検知して自動的にビルドしてくれるので便利です。

$ npm i -D webpack-dev-server html-webpack-plugin

development.jsに必要な設定を追記します。

development.js
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin' //この行を追記
// 中略
export default {
  // 中略
  plugins: [
    //以下追記
    new HtmlWebpackPlugin({
      template: src + '/index.html',
      filename: 'index.html'
    })
  ]

}

index.htmlを用意しておきます。

touch src/index.html
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

webpack-dev-serverを起動してみましょう。

$ ./node_modules/.bin/webpack-dev-server

以下のようなビルド結果が出力され、ブラウザからlocalhost:8080にアクセスして、以下のように表示されれば成功です!

$ ./node_modules/.bin/webpack-dev-server
http://localhost:8080/webpack-dev-server/

// 中略

Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 510 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 548 bytes {0} [built]
        [1] ./~/html-webpack-plugin/~/lodash/lodash.js 509 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]
webpack: bundle is now VALID.

次回からnpm startコマンドでwebサーバーを起動できるようにpackage.jsonに登録しておきましょう。

package.json
"scripts": {
  "start": "webpack-dev-server" // 追記する
}

さて、ただ"Hello React!"と表示しただけではつまらないので、
少しインタラクティブなアプリケーションにしてみましょう。

まずはwebサーバーを起動しておきます。

$ npm start

index.jsxを以下のように変更してください。

index.jsx
import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  constructor(props) { 
    super(props)
    this.state = { message: 'something' }
  }

  onChange(e) {
     this.setState( {message: e.target.value} )
  }

  render() {
    return (
      <div>
        <input type="text" onChange = { this.onChange.bind(this) } />
        <p>{ this.state.message }</p>
      </div>
    )
  }
}

render(<App/>, document.getElementById('app'))

変更して保存すると自動的にビルドされます。
ブラウザをリロードすると以下のようにテキストエリアに入力した文字列をリアルタイム表示するアプリケーションが動作します。

react-es6.gif

以上です。あとはガシガシReactのコードを書いていくのみ!!

(追記)
最終的なコードはこちらに置きました。
https://github.com/akirakudo/react-es6-tutorial

  • この記事は以下の記事からリンクされています
  • ES6でreact.js使うからリンク