サーバーサイドプログラマーのためのReact.js 入門 1. 開発環境の構築

最近、バリバリと jQueryベースのフロントエンドを React.js に置き換えています。

私も主に Ruby on Rails等の サーバーサイドエンジニアで、最近のフロントエンド開発を本格的に開発するのは初めてです。いろいろとつまずきながら進んできました。

f:id:yuum3:20160204101138p:plain

まずは node.js をインストールし npm を知る

環境構築のためのツールは node.js の上で動きます、そこで node をインストールします。 ツールを動かすだけなので node のバージョンはあまり気にしなくて良いと思います。(2016-02-04日現在ではバージョン5.5.0が入ります)

$ brew install node

node をインストールすると npm コマンドもインストールされます。npmは node.js用ライブラリーと、その管理を行うコマンドです。 Rubyの gem に相当するものですが、さらに Ruby の bundle, rake 的な機能も持っていて node の世界を極めるには非常に重要なものです。

node の生態系は ruby と似ていますが、さらに改良されています。良く使うコマンドは

  • npm init カレントディレクトリーにnpm用設定ファイル package.json ファイルを作ります。このファイルにはプロジェクト(ライブラリー)の情報、依存ライブラリーなどの情報が入っています。コマンドを起動すると name: version: などを尋ねてきますが後で package.json ファイルを変更できるので全てreturnでも構いません。
  • npm install --save ライブラリー名 ライブラリーカレントディレクトリー下に(node_modulesディレクトリーを作り)インストールします。 --save を指定すると依存ライブラリーとしての情報が package.json に入ります。
  • npm install -g ライブラリー名 ライブラリーを共通な場所(brewでnodeをインストールした場合 /usr/local/lib/node_modules)にインストールします。コマンドを含むものは -g (--global) で入れるとコマンドもしかるべき場所に入り便利です。
  • npm --help npm にはたくさんの機能があります、知りたい場合はヘルプを

ビルドツールを選ぶ(知る)

フロントエンドの生態系は凄い速さで進化しています。フレームワークも少し前は AngularJS とか言われてましたが、一昨年あたりから React が主役っぽいし、Reactは表示ライブラリーなので、それを使うためのフレームワークは Flux だとか Redux だとか出来きてます・・・

ビルドツールのようなものには grunt, gulp, babel, bower, browserify, webpack ... とたくさんのもので賑わっていて、何を使えば良いのか迷います。近くにフロントエンドのエンジニアがいれば相談するのが良いと思いますが、やみくもにネットを調べても発散するばかりです ！

やりたいことを整理しましょう

まず開発環境の要件というか、やりたい事をまとめましょう。今回の私の要件は

  • React を使う
  • Redux を使うのかな？
  • 現在のJS(ES5)はだるいので、ES6 を使いたい
  • 完全なシングルページアプリ (Rails等のviewは使わない)
  • ブラウザーは最新でけサポートすれば良い
  • 環境構築ツールはシンプルなもにしたい、多少の不便があっても良い
  • HTML,CSSもプログラマーが書く(既に出来たHTML/CSSがある)
  • 過去の開発環境にはこだわらない
  • 過去の(デプロイされた)ディレクトリー構成にはこだわらない

一般論としての良いツールではなく自分のやりたい事に最適なツールを探しましょう

ネットで調べてみる

ビルドツール等に関しては qiita を始め多数の日本語の情報がネットから得られので概要を理解するのに役立ちます。しかし最新の正確な情報は本家(英語)のページを読みましょう。

JSX, ES6

ReactではJSXというJSの中に HTML を埋め込んだものを使ういます(使わない方法もあるようですが)。JSXはそのままでは実行できないので通常のJSに変換するツールが必要になります。

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

また、ES6(正確には ES2015, ECMAScript2015)は全ての主要ブラウザーでサポートされているわけではありません。そこでES6からES5に変換する Babel が良く使われています。

JSXやBabelで変換されたコードをブラウザーで動かすのは良いのですが、デバックはどうするのでしょうか？ 変換されたコードでデバックするのでしょうか？ 安心して下さい、そのために元のコードでデバックするための ソースマップ(.map) が主要ブラウザーではサポートされています。

ビルドツール

現時点では Browserify か Webpack が良いようです。

Browserify

Browserify はもともと node.js 用のモジュール構造をブラウザーのJSで使えるようにする技術ですが、それを行うための変換ツールでもあります。また、babelやJSXの変換ツールを統合できます。

Browserifyとnpmを使った最小限のビルドツールの作り方が Reactをnpmでビルドする方法 browserify (watchify) + babelify編 にまとめられています。

npm のスクリプト実行機能を使い以下のように browserify(watchify), babelify を使い ES6(babel-preset-es2015), JSX(babel-preset-react)の変換を行います。また、ソースマップ作成にexorcistを使っています。

watchify -t babelify ./app.js -o 'exorcist ./build.js.map > ./build.js' -d

Browserifyはいつかのツールを組み合わせボトムアップにビルド環境を作るツールです。各種ツールやgulpと組み合わせると、自分のやりたいことが実現できると思います。

Webpack

Webpack ホームページの絵からもわかるようにフロントエンドの統合開発ツールです。フレームワークのような作りになっていて、そこに種々のツールをプラグインで組み込み設定ファイルで管理します。

新たにトップダウンで作られたツールなのでわかり易いように思います。ただし、自分のやりたいことが完全に実現できないこともあるかもしれません。

試してみた

BrowserifyとWebpackのどちらが良いのか情報でけでは決めかねたので ReactのGetting Started を両方の環境で試してみました。

その結果、今回の要件にはWebpackが良さそうなので使うことにしました。

予告

次回はReactを使った簡単なアプリ作成を Webpack の環境作りから始めます・・・・