今からReact始める人はESLint使おう

※Reactハンズオン用の資料です

---

## Lintとは

---

## Lint

Lint = 静的解析ツール
コードを読み込んで、自動的に評価してくれる

* バグがありそうな所が見つかる
* より良い書き方を教えてくれる
* 複数ファイルで表記の統一ができる

---

## ESLint

JavaScriptには、歴史的経緯もありLintツールが数多く存在する。
(JSLint、JSHint、ESLint）

ここではJS.nextにもしっかりと対応した「**ESLint**」を使う（他のツールはよく知らない）。

---

## 何ができるのか

---

## コマンドでチェック

```
$ eslint js/**
```

![lint.png](https://qiita-image-store.s3.amazonaws.com/0/52054/55a0a0c6-1a0b-16db-f8b1-3b035559b73e.png)

「〇〇 problems」に絶望

---

## エディタでチェック

最近のエディタなら、対応のプラグインがある。

![vscode.png](https://qiita-image-store.s3.amazonaws.com/0/52054/51f87756-abb4-bac9-bf92-d5b233eccc54.png)

---

## ruleとconfig

---

## rule

rule = 「この記法に対してアラート出します」

rule：**no-console**
`console.xx`を使っちゃダメ

rule：**default-case**
`switch`には`default`をつけよう

他にも大量に...

---

## config

いくつかのruleの設定をまとめたもの。偉い人の知見。

一番有名なのが[eslint-config-aribnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)

とりあえずこれ使っとこう

---

## 何がわかるのか

---
## 不要なコードを教えてくれる

![vscode.png](https://qiita-image-store.s3.amazonaws.com/0/52054/51f87756-abb4-bac9-bf92-d5b233eccc54.png)

_'connect' is defined but never used._

使っていないから消していいよ。

---

## バグを見つけてくれる

![err.png](https://qiita-image-store.s3.amazonaws.com/0/52054/c538ec7d-6ae7-33f0-9e09-affc45e4f62d.png)

_'err' is not defined_

宣言されていない変数があるよ（errorとerrのよくある間違い）

---
## Web的な正しさを教えてくれる

![img.png](https://qiita-image-store.s3.amazonaws.com/0/52054/df48b6c1-51d3-b99c-57e1-f397423a2222.png)

_img elements must have an alt prop or use role="presentation"._

imgタグにはaltか`role="presentation"`を付けましょう

参考：[role="presentation"の役割は凄い。【WAI-ARIA】](http://blog.e-riverstyle.com/2011/03/rolepresentationwaiaria.html)

---
## React的な正しさを教えてくれる
![purefunction.png](https://qiita-image-store.s3.amazonaws.com/0/52054/632d73c7-227b-1ee9-2752-faf87b2b15ac.png)

_Component should be written as a pure function_

renderだけのComponentはFunctionにしよう
参考：[Reactの最新動向とベストプラクティス](https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu)

---
## セキュリティリスクを教えてくれる

![target.png](https://qiita-image-store.s3.amazonaws.com/0/52054/eddc0ea5-4023-1919-3e8b-15430d0ef377.png)

_Using target="_blank" without rel="noopener noreferer" is a security risk_

`_blank`には`noopener noreferer`を付けないと、セキュリティ的にマズイよ

参考：[リンクのへの rel=noopener 付与による Tabnabbing 対策](https://blog.jxck.io/entries/2016-06-12/noopener.html)

---

## 始めかた

---

## 始めかた

* とりあえず[eslint-config-aribnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)使おう。
* 使いたくない人は「自分がAirbnbの人よりJSを書けるのか」もう一度よく考えてみよう。
* airbnbベースに、どうしてもプロジェクトに合わないruleだけ個別にdisableにする。

---

## 始めかた


```
$ npm i eslint eslint-config-airbnb -D
```

`.eslintrc`をプロジェクトルートに置く。

```json:.eslintrc
{
  "extends": "airbnb",
  "env": {
    "browser": true
  }
}
```

---

## 使う

`package.json`にスクリプト書いておくと便利。

```json:package.json
  "scripts": {
    "lint": "eslint src/**.js"
  }
```

実行。

```
$ npm run lint
```

---

## ruleのカスタマイズ

* **0**：無効
* **1**：warning
* **2**：error

```json:.eslintrc
{
  "extends": "airbnb",
  "rules": {
    "no-alert": 0,
    "consistent-return": 1,
    "react/jsx-filename-extension": 0
  }
}
```

---

## まとめ

* Airbnbのconfigは、単純な表記ルールだけじゃなく、「Reactとしてこう書くべき」「Webとしてこうした方が良い」というルールが満載
* 1000 Problems直すの面倒だから、先に入れておこう