前提
対象は以下の開発者
- 流行っているらしい React を使って開発でもするか、という初期段階で
- 開発マシン は Mac で
- Javascript は経験したことあって
- Node.js は触ったこと有る
雛形の作成
ここでは HelloReact というアプリを作るとします。
0. 準備のための準備
Node.js の確認
$ node -v
v6.9.?
node.jsのversionを管理するためにnodebrewを利用する等を参考に、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
何やら処理が始まり、最後にブラウザが立ち上がって、以下の画面が見れたら成功です。
上記は開発用のスクリプトです。Ctrl + C で止まります。
ここから、実際に開発作業に入っていきます。
余談
開発が終わってリリースする際は、以下のコマンドを実行。
$ npm run build
build ディレクトリにリリースモジュール一式が生成されます。
(Appach などの Web サーバーで配信できる形式になります。)
開発環境
エディタ
プログラム開発には最低限、テキストエディタが必要です。
Atomがオススメ。
そもそも、Atom 自身 も React で書かれているらしい。
デバッガ
エディタとともに、最低限必要なのが、「デバッガ」です。
chrome のメニュー 「表示」 - 「開発/管理」 - 「デベロッパー ツール」 で起動です。
( または、option + command + i )
「ブレークポイント」を設定して「ステップ実行」とかできるようになる。使い方はすぐわかる。
chrome には React 開発用のプラグイン「React Developer Tools」があるので、追加しておく。
ESLint
初心者はコードの間違いを見つけるだけでも大変だし、ましてや、コーディングスタイルまで気にする余裕はないでしょう。
ESLint を使えば、間違い部分や、おかしなスタイルを指摘してくれる。言われる通りに修正すれば、あら不思議、一流プログラマーが書いたコードと遜色ない見栄えになります。
コーディングスタイルは沢山ありますが、その中でも一番人気は 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 と同じディレクトリ)
{
"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個をインストールします。
linter
linter-eslint
react
インストールが完了したら(Atomの再起動が必要かも)、適当にファイルを開いてみます。
App.js を開いてみると
さっそく、ワーニングが発生しています。正常に 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 にします。
ReactDOM.render(
<App />,
document.getElementById('root'),
);
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 にしておきます。)
{
"extends": "airbnb",
"env": {
"browser": true,
"jest": true
}
}
3. 末尾にカンマが足りない
へい、了解。
おわりに
- React で開発開始できるまでの手順をまとめました。
- 開発リーダの人は、こちらもどうぞ
「みんな大好き Airbnb JS スタイルを Jenkins + SonarQube で CI 運用に組み込む」