フロントエンド始めるならJavaScript Stack from Scratchのチュートリアル

はじめに

普段はサーバーサイドを主に書いているけど、フロントエンド周りもちょっと学びたい。
そこらへんの知識をまとめて身に付けたいなーと思っていた時に見つけたのが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を入れて、

.babelrc

{
  "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　が入る。

で、

.eslintrc.json

{
  "extends": "airbnb"
}

とすれば、airbnbのeslintの設定が使えるようになる。

あとは、コマンドライン上から実行できるように、

yarn　add --dev eslint

...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge"
},
...

hogeはindex.jsが入っているフォルダ名。適宜変えてください。

とすれば、yarn start、yarn test でそれぞれのスクリプトを実行できる。

3. セミコロンについて

論争が尽きないセミコロンのありなし問題。ただ今回は

.eslintrc.json

{
  "extends": "airbnb",
  "rules": {
    "semi": [2, "never"],
    "no-unexpected-multiline": 2
  }
}

とすることで、基本セミコロンなしだけど、セミコロンが必要なイレギュラーなパターンもno-unexpected-multilineで対応する。良い。

4. Compat

Compatは指定したブラウザに対応していないjavascriptを記述してしまった場合に警告してくれるプラグイン。

yarn add --dev eslint-plugin-compat

package.json

...
"browserslist": ["> 1%"],
...

.eslintrc.json

{
  "plugins": "compat",
  "rules": {
    "compat/compat": 2
  }
}

とすれば、eslintを実行した時にブラウザ対応も自動でチェックしてくれるようになる。

5. Flow

facebook製の型チェックしてくれるプラグイン。

yarn add --dev flow-bin babel-preset-flow babel-eslint eslint-plugin-flowtype`

.babelrc

{
  "presets": "flow"
}

.eslintrc.json

{
  "extends": "plugin:flowtype/recommended",
  "plugins": "flowtype"
}

package.json

...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge && flow"
},
...

とし、ファイルの中で、// @flow　と記述すると、yarn testを実行した際、そのファイルの型チェックもやってくれるようになる。

• tips

.flowconfig

[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

.eslintrc

"env": {
  "jest": true
}

として、jestの関数をimportなしでも記述できるようにしておく。

testを書いた後、

package.json

...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge && flow && jest --coverage"
},
...

とすれば、yarn testでテストも実行されるようになる。

7. husky

yarn add --dev husky

package.json

...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge && flow && jest --coverage",
  "precommit": "yarn test",
  "prepush": "yarn test"
},
...

とすれば、commit時とpush時に自動的にyarn testが実行されることになる。

続き

chapter3、4はこちら