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

# はじめに

普段はサーバーサイドを主に書いているけど、フロントエンド周りもちょっと学びたい。
そこらへんの知識をまとめて身に付けたいなーと思っていた時に見つけたのが[JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch)。

- この記事は補足として使用していただけるといいかなと思います。
- 随時章を追加していきます。
- 間違っている部分があれば優しく教えてください。

# JavaScript Stack from Scratchとは
> Step-by-step tutorial to build a modern JavaScript stack

と書いてあるように、このチュートリアルを進めていけば、モダンなjsスタックが学べる。内容はざっとこんな感じ。

- [01 - Node, Yarn, package.json](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/01-node-yarn-package-json.md#readme)
- [02 - Babel, ES6, ESLint, Flow, Jest, Husky](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md#readme)
- [03 - Express, Nodemon, PM2](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/03-express-nodemon-pm2.md#readme)
- [04 - Webpack, React, HMR](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/04-webpack-react-hmr.md#readme)
- [05 - Redux, Immutable, Fetch](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/05-redux-immutable-fetch.md#readme)
- [06 - React Router, Server-Side Rendering, Helmet](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/06-react-router-ssr-helmet.md#readme)
- [07 - Socket.IO](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/07-socket-io.md#readme)
- [08 - Bootstrap, JSS](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/08-bootstrap-jss.md#readme)
- [09 - Travis, Coveralls, Heroku](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/09-travis-coveralls-heroku.md#readme)

個人的にはchapter2でESlintやflow,Jestとかの開発環境整備の部分を教えてくれるのが嬉しい。

#　章ごとのまとめ

## [chapter1](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/01-node-yarn-package-json.md#readme)

まずは導入

#### 1. node入れる
#### 2. yarn入れる
#### 3. package.jsonのscriptでyarnを起動できるようにする
#### 4. .gitignore編集


それだけ

## [chapter2](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md#readme)

#### 1. [babel](https://babeljs.io/)
babelはES6のコードをES5に変換してくれるコンパイラー。今回は[babel-cli](https://babeljs.io/docs/usage/cli/)を入れた。
babel-cliには[babel-node](https://babeljs.io/docs/usage/cli/#babel-node)と[babel](https://babeljs.io/docs/usage/cli/#babel)の二つの機能がある。

- bebel-node...ノードバイナリへの呼び出しを置き換えて、ES6ファイルを直接実行することができる。ターミナルから`babel-node`で起動できる。実行は重いからproductionには使えない。
- bebel...ES5のファイルをビルドできる。

さらに、[babel-preset-env](https://babeljs.io/docs/plugins/preset-env/#top)を入れて、

```javascript:.babelrc
{
  "presets": [
    "env"
  ]
}
```
とすることで、babelが新しいECMAScriptのフィーチャーもサポートしてくれるようになる。

#### 2. [ESlint](https://eslint.org/)

ESlintはjsのコーディングスタイルをレコメンドしてくれるリントツール。

```bash
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の設定が使えるようになる。

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

```bash
yarn　add --dev eslint
```

```javascript
...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge"
},
...
```
*hogeはindex.jsが入っているフォルダ名。適宜変えてください。* 


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

#### 3. セミコロンについて

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

```javascript:.eslintrc.json
{
  "extends": "airbnb",
  "rules": {
    "semi": [2, "never"],
    "no-unexpected-multiline": 2
  }
}
```
とすることで、基本セミコロンなしだけど、セミコロンが必要なイレギュラーなパターンも[no-unexpected-multiline](https://eslint.org/docs/rules/no-unexpected-multiline)で対応する。良い。

#### 4. [Compat](https://github.com/amilajack/eslint-plugin-compat)

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

```bash
yarn add --dev eslint-plugin-compat
```

```javascript:package.json
...
"browserslist": ["> 1%"],
...
```

```javascript:.eslintrc.json
{
  "plugins": "compat",
  "rules": {
    "compat/compat": 2
  }
}
```

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

#### 5. [Flow](https://flow.org/)

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

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

```javascript:.babelrc
{
  "presets": "flow"
}
```

```javascript:.eslintrc.json
{
  "extends": "plugin:flowtype/recommended",
  "plugins": "flowtype"
}
```

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

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

- tips

```javascript:.flowconfig
[options]
suppress_comment= \\(.\\|\n\\)*\\flow-disable-next-line
```

とすると、eslintのdisableコメントのように、ファイル内で
`// flow-disable-next-line`
と書くことで、次行の型チェックが行われなくなる。

#### 6. [Jest](https://facebook.github.io/jest/)

Jestはjavascriptのテストライブラリの一つ。facebook製。

```bash
yarn add --dev jest babel-jest
```

```javascript:.eslintrc
"env": {
  "jest": true
}
```
として、jestの関数をimportなしでも記述できるようにしておく。

testを書いた後、

```javascript:package.json
...
"scripts": {
  "start": "babel-node hoge",
  "test": "eslint hoge && flow && jest --coverage"
},
...
```
とすれば、`yarn test`でテストも実行されるようになる。

#### 7. [husky](https://github.com/typicode/husky)

```bash
yarn add --dev husky
```

```javascript: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はこちら](https://qiita.com/sakahiro/items/2cd1a67e026abd9905e4)