React 社内勉強会 コンテンツ (1) 環境準備

## 前提

対象は以下の開発者

 - 流行っているらしい React を使って開発でもするか、という初期段階で
 - 開発マシン は Mac で
 - Javascript は経験したことあって
 - Node.js は触ったこと有る

## 雛形の作成

ここでは HelloReact というアプリを作るとします。

### 0. 準備のための準備

#### Node.js の確認
```確認.
$ node -v
v6.9.?
```
[node.jsのversionを管理するためにnodebrewを利用する](http://qiita.com/sinmetal/items/154e81823f386279b33c)等を参考に、6系の最新版をインストールして下さい。

```確認.
$ nodebrew ls-remote
...
v6.9.0    v6.9.1    v6.9.2    v6.9.3    v6.9.4    v6.9.5    
```
```実行.
$ nodebrew install-binary v6.9.5
$ nodebrew use v6.9.5
$ nodebrew alias default v6.9.5
```

#### create-react-app インストール
create-react-app は React の開発(スタートアップ)を劇的に簡単にしてくれるツール。
これを使わない手はない。

create-react-app
https://github.com/facebookincubator/create-react-app

```実行.
$ npm install -g create-react-app
```


### 1. 雛形の作成

```実行.
$ create-react-app HelloReact
$ cd HelloReact
```

```確認.
$ ls -l
-rw-r--r--    1 dreamarts  staff  57790  2  5 15:59 README.md
drwxr-xr-x  748 dreamarts  staff  25432  2  5 15:59 node_modules
-rw-r--r--    1 dreamarts  staff    374  2  5 15:59 package.json
drwxr-xr-x    4 dreamarts  staff    136  2  5 15:59 public
drwxr-xr-x    8 dreamarts  staff    272  2  5 15:59 src
```

Git は使えますか？
もし使えるのであれば、以下で初期状態をコミットしておきましょう。
(また、この先、節目節目で、コミットして下さい)

```実行.
$ git init
$ git add .
```
```確認.
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   .gitignore
	new file:   README.md
	new file:   package.json
	new file:   public/favicon.ico
	new file:   public/index.html
	new file:   src/App.css
	new file:   src/App.js
	new file:   src/App.test.js
	new file:   src/index.css
	new file:   src/index.js
	new file:   src/logo.svg
```
11個のファイルが雛形として生成されたようです。
コミットして保存しておきます。(コミットメッセージは適当に。)

```実行.
$ git commit -m "First commit."
```
```確認.
$ git log 
commit 56a218014d86c14883071b9c3c4ae8e1a28499e5
Author: exabugs <exabugs@gmail.com>
Date:   Sun Feb 5 16:10:33 2017 +0900

    First commit.
```



### 2. 初回起動まで

ここでいったん、package.json を確認しておきます。
(package.json とは、アプリの概要を記してあるファイルです。)

```確認.
$ cat package.json 
{
  "name": "HelloReact",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

先ずは、依存モジュール (dependencies / devDependencies) のインストールが必要です。
以下のコマンドを実行。

```実行.
$ npm install
```

ディレクトリ node_modules に大量のモジュールが配置されます。
全て "react-scripts" の依存モジュールです。
"react-scripts" がいい感じに必要なモジュールを準備してくれるので、今のところは深く知らなくても大丈夫。

では、さっそく、起動してみます。
package.json の scripts 部分にある start を実行すればいいです。

```実行.
$ npm run start
```

何やら処理が始まり、最後にブラウザが立ち上がって、以下の画面が見れたら成功です。

![screencapture-localhost-3001-1486279601178.png](https://qiita-image-store.s3.amazonaws.com/0/69410/f2bb3134-2d7b-c6f8-e417-5566d93cd41f.png)

上記は開発用のスクリプトです。Ctrl + C で止まります。

ここから、実際に開発作業に入っていきます。

#### 余談
開発が終わってリリースする際は、以下のコマンドを実行。

```リリースモジュールを生成する際に実行.
$ npm run build
```
build ディレクトリにリリースモジュール一式が生成されます。
(Appach などの Web サーバーで配信できる形式になります。)


## 開発環境
### エディタ
プログラム開発には最低限、テキストエディタが必要です。
[Atom](https://atom.io/)がオススメ。
そもそも、Atom 自身 も React で書かれているらしい。


### デバッガ

エディタとともに、最低限必要なのが、「デバッガ」です。

chrome のメニュー 「表示」 - 「開発/管理」 - 「デベロッパー ツール」 で起動です。
( または、option + command + i )

「ブレークポイント」を設定して「ステップ実行」とかできるようになる。使い方はすぐわかる。

![スクリーンショット_2017-02-05_17_12_00.png](https://qiita-image-store.s3.amazonaws.com/0/69410/f88b4c7c-07a6-c5d1-e047-d1097ead317a.png)

chrome には React 開発用のプラグイン「[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)」があるので、追加しておく。
![スクリーンショット_2017-02-05_17_23_02.png](https://qiita-image-store.s3.amazonaws.com/0/69410/787ffa25-9e15-9c8e-dc84-0bc314ac77cf.png)


### ESLint

初心者はコードの間違いを見つけるだけでも大変だし、ましてや、コーディングスタイルまで気にする余裕はないでしょう。

ESLint を使えば、間違い部分や、おかしなスタイルを指摘してくれる。言われる通りに修正すれば、あら不思議、一流プログラマーが書いたコードと遜色ない見栄えになります。

コーディングスタイルは沢山ありますが、その中でも一番人気は [Airbnbスタイル](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) です。これをマスタしておけば間違いない。


以下の4行をまとめてコマンドラインにコピペすれば、ESLint に必要なモジュールを package.json に記載して、インストールまでしてくれる。

```
(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
```

package.json の 依存モジュール (devDependencies) に、eslint の 5 モジュールが追加されていればOK。

```確認.
$ git diff
diff --git a/package.json b/package.json
index 2b816a5..e79f6c9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
     "react-scripts": "0.8.5"
   },
   "dependencies": {
```

最後に、ESlint 設定ファイルを配置する。
(package.json と同じディレクトリ)

```json:.eslintrc.json
{
  "extends": "airbnb"
}
```

一応、ここまでをコミットしておきます。

```確認.
$ git log -p
commit 2599c925eeee7371ce88d4c154443acf1f00d103
Author: exabugs <exabugs@gmail.com>
Date:   Sun Feb 5 18:14:44 2017 +0900

    Add ESLint (Airbnb).

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..b0c0c8b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb"
+}
diff --git a/package.json b/package.json
index 2b816a5..e79f6c9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
     "react-scripts": "0.8.5"
   },
   "dependencies": {
```

さて、Atom を起動してみます。

```
$ atom .
```

ESLint プラグインをインストール。
Atom メニュー - Preferences で install を選択して、以下の Package 3個をインストールします。
![スクリーンショット 2017-02-05 21.37.17.png](https://qiita-image-store.s3.amazonaws.com/0/69410/de351f65-59cb-bb72-5758-0fa175052f82.png)

```
linter
linter-eslint
react
```

![スクリーンショット 2017-02-06 10.17.57.png](https://qiita-image-store.s3.amazonaws.com/0/69410/ca0faa90-fcd6-c391-dda0-4e7b0326712d.png)

インストールが完了したら(Atomの再起動が必要かも)、適当にファイルを開いてみます。
App.js を開いてみると

![スクリーンショット 2017-02-05 18.21.24.png](https://qiita-image-store.s3.amazonaws.com/0/69410/19018e76-5d77-f87a-090c-722a654a27a6.png)

さっそく、ワーニングが発生しています。正常に ESLint が動作していることがわかります。

```
[Error] JSX not allowd in files with extension '.js'
[Error] 'document' is not defined.
[Error] Missing trailing comma.
```

#### 1. JSX を使うなら、拡張子は .jsx にしろ
JSX とは、React の特徴の一つである、タグ を使って Javascript を記述する表記のことです。
しかしここで問題が。
create-react-app を使って生成したアプリは、react-scripts を使ってコードを処理しますが、Javascript のエントリポイントは src/index.js である必要があります。
どうしたらいいか。。

→ index.js のみ、JSX を使わない記法にします。
また、index.js 以外は、拡張子を .jsx にします。

```BEFORE.
ReactDOM.render(
  <App />,
  document.getElementById('root'),
);
```

```AFTER.
ReactDOM.render(
  React.createElement(App),
  document.getElementById('root'),
);
```

#### 2. 'document' が定義されていない。
document はグローバル変数だから、宣言はないです。どうしたらいいか。。

→ .eslintrc.json で "browser": true を指定すればよい
http://eslint.org/docs/user-guide/configuring.html#specifying-environments
(併せて、テストモジュール "jest" も true にしておきます。)

```json:.eslintrc.json
{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "jest": true
  }
}
```

#### 3. 末尾にカンマが足りない
へい、了解。

## おわりに
 - React で開発開始できるまでの手順をまとめました。
 - 開発リーダの人は、こちらもどうぞ  
「[みんな大好き Airbnb JS スタイルを Jenkins + SonarQube で CI 運用に組み込む](http://qiita.com/exabugs/items/2ebed96e327f150eb00a)」