はむはむエンジニアぶろぐ

365日エンジニアリング

Reactに入門してみた

Reactに入門しました。
まずは、Hello WorldしてからBabel, Browserifyなどの各技術要素の解説を加えていく。

構築手順

以下のスクリプトを流す。

$ mkdir react_nyumon
$ cd react_nyumon
$ npm init
$ npm install --save react react-dom
$ npm install --save-dev babel-cli babel-preset-react babel-preset-es2015
$ npm install --save-dev browserify babelify

.babelrcというファイルを作り、以下を設定する。

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

これだけで、Reactを使う下準備が整った。

まずはHello Worldする

  • index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('title')
);
  • index.html
<html>
  <body>
    <div id="title"></div>
    <script src="compiled_index.js"></script>
  </body>
</html>

compiled_index.jsを作成する。

$ ./node_modules/.bin/browserify -t babelify index.js -o compiled_index.js

index.htmlをブラウザで確認すると、Hello Worldが表示されるはず。

各技術要素

Reactを動かすためにこれらのツールを使用した。

  • Babel
  • Browserify

Babel

Babelはトランスパイラである。
JavaScriptは実行環境が、クライアントのブラウザである。
その為、クライアントで動作するコードでなければならない。
ES2015などの最新の言語仕様で書かれたコードでは、クライアントのブラウザが解釈できない。

では、新しい言語仕様でJavaScriptを書くことができないかといえば、そうではない。
Babelを使用することで、ES2015で書いたコードをブラウザが解釈できる形(ECMAScript5)に翻訳できる。

https://babeljs.io/

Browserify

Browserifyは依存解決ツールである。
Browserifyのようなツールを使わない場合、依存関係を考慮した順序でJavaScriptを列挙する必要がある。

<script src="func1.js"></script>
<script src="func2.js"></script>
<script src="main.js"></script>

これらのモジュール管理を手動で行うとメンテナンスが大変である。

Node.jsでは、require構文を使用することで解決している。

var f1 = require('func1');

これは、Node.jsがモジュールを見つけてきてくれるから成立している。
しかし、ブラウザでJavaScriptを実行する場合はJavaScript内で行う必要がある。

これを行ってくれるのが、Browserifyである。

http://browserify.org/

ビルドする

Babelは変換ツール
Browserifyは依存関係解決ツール

ES2015で書かれた、JavaScriptをブラウザで実行するためには以下の手順を踏む必要がある。

  1. ES2015で書かれたJavaScriptをBabelでブラウザ対応したJavaScriptに変換する
  2. 変換済みJavaScriptをBrowserifyで依存関係の解決を行う
$ ./node_modules/.bin/babel index.js -o compiled_index.js
$ ./node_modules/.bin/browserify compiled_index.js -o compiled_index.js

こうして、ブラウザで実行できるようになるわけである。
毎回、上記のビルド手順を手動で行うのは大変である。

そこで、これらを1コマンドで実行してくれるプラグインを使用する。
Browserifyのプラグインで、babelifyという。


babelifyを使用することでビルドが1コマンドで済む。

./node_modules/.bin/browserify -t babelify index.js -o compiled_index.js

参考書籍