はじめに
普段はサーバーサイドを主に書いているけど、フロントエンド周りもちょっと学びたい。
そこらへんの知識をまとめて身に付けたいなーと思っていた時に見つけたのがJavaScript Stack from Scratch。
- この記事は補足として使用していただけるといいかなと思います。
- 随時章を追加していきます。
- 間違っている部分があれば優しく教えてください。
JavaScript Stack from Scratchとは
Step-by-step tutorial to build a modern JavaScript stack
と書いてあるように、このチュートリアルを進めていけば、モダンなjsスタックが学べる。内容はざっとこんな感じ。
- 01 - Node, Yarn, package.json
- 02 - Babel, ES6, ESLint, Flow, Jest, Husky
- 03 - Express, Nodemon, PM2
- 04 - Webpack, React, HMR
- 05 - Redux, Immutable, Fetch
- 06 - React Router, Server-Side Rendering, Helmet
- 07 - Socket.IO
- 08 - Bootstrap, JSS
- 09 - Travis, Coveralls, Heroku
個人的にはchapter2でESlintやflow,Jestとかの開発環境整備の部分を教えてくれるのが嬉しい。
章ごとのまとめ
chapter1
まずは導入
1. node入れる
2. yarn入れる
3. package.jsonのscriptでyarnを起動できるようにする
4. .gitignore編集
それだけ
chapter2
1. babel
babelはES6のコードをES5に変換してくれるコンパイラー。今回はbabel-cliを入れた。
babel-cliにはbabel-nodeとbabelの二つの機能がある。
- bebel-node...ノードバイナリへの呼び出しを置き換えて、ES6ファイルを直接実行することができる。ターミナルから
babel-nodeで起動できる。実行は重いからproductionには使えない。 - bebel...ES5のファイルをビルドできる。
さらに、babel-preset-envを入れて、
{
"presets": [
"env"
]
}
とすることで、babelが新しいECMAScriptのフィーチャーもサポートしてくれるようになる。
2. ESlint
ESlintはjsのコーディングスタイルをレコメンドしてくれるリントツール。
npm info eslint-config-airbnb@latest peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev eslint-config-airbnb@latest
このワンライナーでairbnbが使ってるeslintの設定が取得できる。
具体的には、eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react が入る。
で、
{
"extends": "airbnb"
}
とすれば、airbnbのeslintの設定が使えるようになる。
あとは、コマンドライン上から実行できるように、
yarn add --dev eslint
...
"scripts": {
"start": "babel-node hoge",
"test": "eslint hoge"
},
...
hogeはindex.jsが入っているフォルダ名。適宜変えてください。
とすれば、yarn start、yarn test でそれぞれのスクリプトを実行できる。
3. セミコロンについて
論争が尽きないセミコロンのありなし問題。ただ今回は
{
"extends": "airbnb",
"rules": {
"semi": [2, "never"],
"no-unexpected-multiline": 2
}
}
とすることで、基本セミコロンなしだけど、セミコロンが必要なイレギュラーなパターンもno-unexpected-multilineで対応する。良い。
4. Compat
Compatは指定したブラウザに対応していないjavascriptを記述してしまった場合に警告してくれるプラグイン。
yarn add --dev eslint-plugin-compat
...
"browserslist": ["> 1%"],
...
{
"plugins": "compat",
"rules": {
"compat/compat": 2
}
}
とすれば、eslintを実行した時にブラウザ対応も自動でチェックしてくれるようになる。
5. Flow
facebook製の型チェックしてくれるプラグイン。
yarn add --dev flow-bin babel-preset-flow babel-eslint eslint-plugin-flowtype`
{
"presets": "flow"
}
{
"extends": "plugin:flowtype/recommended",
"plugins": "flowtype"
}
...
"scripts": {
"start": "babel-node hoge",
"test": "eslint hoge && flow"
},
...
とし、ファイルの中で、// @flow と記述すると、yarn testを実行した際、そのファイルの型チェックもやってくれるようになる。
- tips
[options]
suppress_comment= \\(.\\|\n\\)*\\flow-disable-next-line
とすると、eslintのdisableコメントのように、ファイル内で
// flow-disable-next-line
と書くことで、次行の型チェックが行われなくなる。
6. Jest
Jestはjavascriptのテストライブラリの一つ。facebook製。
yarn add --dev jest babel-jest
"env": {
"jest": true
}
として、jestの関数をimportなしでも記述できるようにしておく。
testを書いた後、
...
"scripts": {
"start": "babel-node hoge",
"test": "eslint hoge && flow && jest --coverage"
},
...
とすれば、yarn testでテストも実行されるようになる。
7. husky
yarn add --dev husky
...
"scripts": {
"start": "babel-node hoge",
"test": "eslint hoge && flow && jest --coverage",
"precommit": "yarn test",
"prepush": "yarn test"
},
...
とすれば、commit時とpush時に自動的にyarn testが実行されることになる。