関連記事
- Reactのスタート
- Reactのプロジェクト
- Reactで挨拶
- ReactでTrelloみたいなToDoリスト＜1＞ props
- ReactでTrelloみたいなToDoリスト＜2＞ state
- ReactでTrelloみたいなToDoリスト＜3＞ prop-types
- ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper
Reactアプリの生成
create-react-appでreact-studyというプロジェクトを生成してみよう。
% create-react-app react-study
babelやbrowserifyと組んだコマンドを実行したり、webpackの設定ファイルを書く必要もない。
create-react-appが全部やってくれる。
もちろん隠されているがwebpackを使っているので、カスタマイズするためにはwebpackの知識が必要になる。
Reactアプリの起動
生成されたプロジェクトをブラウザーで確認してみよう。
% cd react-study
% yarn start
自動でデフォルトブラウザーが開き、「Welcome to React」と言う挨拶が見える。
Reactアプリの構造
.
├── README.md
├── node_modules # Installed by Create React App
├── package.json # The only app config file
├── public
│ ├── favicon.ico
│ ├── index.html # Default page template
│ └── manifest.json
├── src # App source lives here
│ ├── App.css # Component specific CSS
│ ├── App.js # Custom component definition
│ ├── App.test.js
│ ├── index.css
│ ├── index.js # Root component definition
│ ├── logo.svg # Import image
│ └── registerServiceWorker.js
└── yarn.lock
Airbnb JavaScript Style Guide
スタイルガイドとは
コーディングのルールで大体こんな感じでコーディングしたら、読みやすい綺麗なコードになるという規約の集まりだ。
Airbnbはreactで開発している大手会社で自分たちが使っているスタイルガイドを公開している。
和駅されたものもqiitaにあったので、紹介する。
必ず読んでみよう。
eslint-config-airbnb
Airbnbは、スタイルガイドの通りにしたのかチェックするライブラリも提供している。
eslint-config-airbnbと言う。これを使うためには下記のようなものが必要だ。
- ECMAScript 6+(ES6以上)
- React
- eslint
- eslint-plugin-import
- eslint-plugin-react
- eslint-plugin-jsx-a11y
使い方や設置方法はeslint-config-airbnbのreadmeに詳細に書いている。
eslint-config-airbnbを使うためには依存関係にあるパッケージも一緒に設置しなければならない。
次は、eslint-config-airbnbのreadmeからそのまま持ってきた。
% npm info "eslint-config-airbnb@latest" peerDependencies
{ eslint: '^3.19.0',
'eslint-plugin-jsx-a11y': '^5.0.1',
'eslint-plugin-import': '^2.2.0',
'eslint-plugin-react': '^7.0.1' }
eslintの実行速度を上げるためのeslint_dというパッケージもある。
eslintとeslint_dはvimなどのEDITORでも使えるので、グローバルで設置しよう。
eslintはv3.19.0で設置することを忘れずに！
% yarn global add eslint@3.19.0
% yarn global add eslint_d
Linux又はmacOSでは下記のコマンドを使えばいいだろう。
依存関係にあるパッケージすべてが設置される。
開発に関わるパッケージなので、npmなら--save-dev、yarnなら--devオプションを付ける。
プロジェクト直下にローカルで設置する場合、vimなどのEDITORでは問題ないが、eslintコマンドで実行する場合エラーが出る。
eslintがグローバルで設置された場合は、依存性パッケージもグローバルで設置しなければならない。
- npmで設置する場合
% cd react-study
% export PKG=eslint-config-airbnb;
% npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm -g install "$PKG@latest"
- yarnで設置する場合
% cd react-study
% export PKG=eslint-config-airbnb;
% npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn global add "$PKG@latest"
ウィンドウの場合、eslint-config-airbnbのreadmeを参考。
- eslintコマンドで確認する場合はbabel-eslintも必要だ。
% yarn global add babel-eslint
% cd react-study
% eslint "src/**"
/Users/devsoul/Apps/study/react-study/src/App.css
1:1 error Parsing error: Unexpected token
> 1 | .App {
| ^
2 | text-align: center;
3 | }
4 |
/Users/devsoul/Apps/study/react-study/src/App.js.bak
8:7 warning JSX not allowed in files with extension '.bak' react/jsx-filename-extension
/Users/devsoul/Apps/study/react-study/src/App.test.js
5:1 error 'it' is not defined no-undef
/Users/devsoul/Apps/study/react-study/src/components/CheckList.js
24:11 error JSX props should not use .bind() react/jsx-no-bind
25:13 error JSX props should not use .bind() react/jsx-no-bind
32:11 error JSX props should not use .bind() react/jsx-no-bind
33:13 error JSX props should not use .bind() react/jsx-no-bind
/Users/devsoul/Apps/study/react-study/src/index.css
1:1 error Parsing error: Unexpected token
> 1 | *{
| ^
2 | box-sizing: border-box;
3 | }
4 |
/Users/devsoul/Apps/study/react-study/src/logo.svg
1:1 error Expected an assignment or function call and instead saw an expression no-unused-expressions
1:1 warning JSX not allowed in files with extension '.svg' react/jsx-filename-extension
1:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
2:5 error 'React' must be in scope when using JSX react/react-in-jsx-scope
2:5 error Expected indentation of 2 space characters but found 4 react/jsx-indent
3:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
3:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
3:2481 error A space is required before closing bracket react/jsx-tag-spacing
4:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
4:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
4:47 error A space is required before closing bracket react/jsx-tag-spacing
5:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
5:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
5:31 error A space is required before closing bracket react/jsx-tag-spacing
7:7 error Missing semicolon semi
/Users/devsoul/Apps/study/react-study/src/registerServiceWorker.js
17:15 error Expected parentheses around arrow function argument having a body with curly braces arrow-parens
18:11 error Assignment to property of function parameter 'registration' no-param-reassign
27:19 error Unexpected console statement no-console
32:19 error Unexpected console statement no-console
38:16 error Expected parentheses around arrow function argument having a body with curly braces arrow-parens
47:40 error Expected parentheses around arrow function argument having a body with curly braces arrow-parens
✖ 29 problems (27 errors, 2 warnings)
~/.eslintrcファイルを用意して次を追加する。
"extends": "airbnb"
VIMの設定
vimには文法チェックのためsyntasticという優れたpluginが存在する。（ここでは割愛する。）
Airbnbのスタイルガイドを適用するためには下記のように設定する。
Plug 'scrooloose/syntastic'
... snip ...
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_javascript_eslint_exec = 'eslint_d'
vimでApp.jsを開くと、２ヶ所で❌が表示されている。
エラーメッセージはこうなる。
src/App.js|5 col 1 error| Component should be written as a pure function (react/prefer-stateless-function)
src/App.js|8 col 7 error| JSX not allowed in files with extension '.js' (react/jsx-filename-extension)
これらはeslint-plugin-reactから表示されるものだ。
各ruleとその内容を確認したい場合は下記のリンクを参考にしよう。