Syntax Error.

[Sy] bowerを使ってReactの開発環境を構築する方法

2016/07/05

React は npm にも bower にもありますが、今回は bower でインストールして環境構築をしてみます。前提として、Node.js(npm) が使える環境で行ってください。

nodeの環境

今回試す Node.js の環境は以下のとおりです。OS は Mac OS X 10.11.5（El Capitan）です。

$ sw_vers -productVersion
10.11.5

$ node -v
v6.2.2

$ npm -v
3.9.5

Mac への Node.js 環境構築は、以下の記事のやり方が簡単なのでおすすめです。

Node.js の環境がない（作りたくない）場合で、すぐに React を試したい場合は以下の記事を参照してください。

npm が使える状態になったら、以下の手順で進めていきます。

bowerをインストール（グローバル）

まずは npm を使って、 bower をインストールします。すでに bower がインストールされていれば読み飛ばしてください。

ここは好みですが、bower のようにすべてのプロジェクトで共通で使えるパッケージは-gオプションをつけてグローバルにインストールしておきましょう。

$ npm install -g bower      <- グローバルへ bower をインストール
/Users/utano320/.nodebrew/node/v6.2.2/bin/bower -> /Users/utano320/.nodebrew/node/v6.2.2/lib/node_modules/bower/bin/bower
/Users/utano320/.nodebrew/node/v6.2.2/lib
└── bower@1.7.9

$ npm list -g | grep bower  <- 一応確認
├── bower@1.7.9
-gオプションはつけたほうが良いのか？

今回は -g オプションをつけました。ほとんどの場合はこのオプションをつけませんが、その場合はコマンドを実行したディレクトリの直下に node_modules というディレクトリが作られて、その中にインストールされます。要するに、各プロジェクト（サイト、アプリ）ごとに別々にインストールしたい場合は -g オプションなし、どのプロジェクトでも共通で使うものは -g オプションあり、という使い分けですね。ちなみに最初からインストールされている npm 本体は、グローバルにインストールされています。

bowerを初期化

bower をインストールしたら、プロジェクト（アプリ）のルートへ移動して、bower initを実行して初期化（bower.jsonを作成）します。npm initでpackage.jsonを作るのと同じノリです。

いくつか質問されますが、とりあえずパッケージとして公開するわけではないので、name は MyApp、main file はメインになるJavaScriptファイル名を入れて、あとはデフォルトまま Enter でいいかと。

$ cd [プロジェクトのドキュメントルート]
$ bower init
? name MyApp             <- ここから質問に対して答えていく
? description [概要]
? main file jsx/app.js
? keywords
? authors [開発者名] <[メールアドレス]>
? license [ライセンス]
? homepage [ホームページURL]
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

すると、以下のような内容でbower.jsonが作成されます。

{
  "name": MyApp,
  "authors": [
    "'[開発者名] <[メールアドレス]>"'
  ],
  "description": "'[概要]"',
  "main": "'jsx/app.js"',
  "license": "'[ライセンス]"',
  "homepage": "'[ホームページURL]"',
  "ignore": [
    "'**/.*"',
    "'node_modules"',
    "'bower_components"',
    "'test"',
    "'tests"'
  ]
}

reactをインストール

bower の準備が整ったので、本題の React のインストールを行います。--saveオプションをつけて、bower.jsonに追記するように指定します。

$ bower install --save react
bower react#*                   cached https://github.com/facebook/react-bower.git#15.2.0
bower react#*                 validate 15.2.0 against https://github.com/facebook/react-bower.git#*
bower react#^15.2.0            install react#15.2.0

react#15.2.0 bower_components/react

インストールできました。--saveオプションをつけたので、以下のようにbower.jsonに追記されているはずです。

{
  "name": MyApp,
  "authors": [
    "'[開発者名] <[メールアドレス]>"'
  ],
  "description": "'[概要]"',
  "main": "'jsx/app.js"',
  "license": "'[ライセンス]"',
  "homepage": "'[ホームページURL]"',
  "ignore": [
    "'**/.*"',
    "'node_modules"',
    "'bower_components"',
    "'test"',
    "'tests"'
  ],
  "dependencies": {             <--
    "react": "^15.2.0"          <-- 追記
  }                             <--
}

これで他の開発者の人が環境を作る際に、bower installで react パッケージをインストールさせることができます。

バージョン指定の^15.2.0ですが、「メジャーバージョンは15で固定で、マイナーバージョン以下は最新のものが必要」という意味になります。

bowerでインストールしたReactを読み込む

では、前回の記事で作成したindex.htmlを例に、bower でインストールした React を読み込みます。

⇒ [Sy] npmを使わずにReactの開発環境を構築する方法（CDNで配信されているReactとbabel-coreを利用）

読み込みたいファイルは、開発環境なのでデバッグしやすいように、圧縮されてない（xxx.min.js みたいに min がついていない）react.jsとreact-dom.jsです。

この2つのファイルがどこにあるのか？ですが、bower でインストールしたパッケージは、bower_componentsディレクトリに配置されるので見てみると、以下の様な階層になっています。（Root はドキュメントルートになるディレクトリだと思ってください）

Root
+ - index.html
+ - bower.json        <-- さっき bower init で作られたやつ
+ - jsx
|   + - app.js
+ - bower_components
    + - react
        + - .bower.json
        + - bower.json
        + - LICENSE
        + - PATERNTS
        + - react-dom-server.js
        + - react-dom-server.min.js
        + - react-dom.js                 <-- これと
        + - react-dom.min.js
        + - react-with-addons.js
        + - react-with-addons.min.js
        + - react.js                     <-- これがほしい
        + - react.min.js

なので、index.htmlのreact.jsとreact-dom.jsの読み込みをこのようにすればOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="bower_components/react/react.js"></script>             <-- react.js の読み込み
  <script src="bower_components/react/react-dom.js"></script>         <-- react-dom.js の読み込み
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script src="jsx/app.js" type="text/babel"></script>
</body>
</html>
Good ! Bad ...
Syntax Error.