JavaScript Standard Styleのススメ

みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？
インデントに使用する文字はスペース？それともタブ？
[JavaScript Standard Style](https://standardjs.com/)は、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。[^1]

## JavaScript Standard Styleのルール
JavaScript Standard Styleには、次のようなルールがあります。

* インデントはスペース2個
* 文字列はシングルクォートで囲む
* 未使用の変数は禁止
* 文末のセミコロンは禁止
* キーワードの後にスペースを入れる
* 関数名の後にスペースを入れる
* 値の比較に`==`ではなく`===`を使用
  * ただし`obj == null`は`null || undefined`をチェックするために許容される
* 常にNode.jsの`err`引数をハンドル
* ファイルの先頭に`/* global */`コメントでブラウザのグローバルオブジェクトを宣言

これらは、100以上あるルールのほんの一部に過ぎません。
すべてのルールを知りたい方は、[公式ドキュメント](https://standardjs.com/rules.html)を参照してください。

### ルールは変更不可
JavaScript Standard Styleのルールは、基本的には変更できません。
あなたがタブインデント派だからといって、インデントに使用する文字をスペースからタブに変更した場合、それはもはやJavaScript Standard Styleとは呼べなくなります。
これには、「インデントにタブとスペースのどちらを使用すべきか」といった自転車置き場の議論を避ける意図があります。

### セミコロン禁止について
JavaScript Standard Styleの最大の特徴はなんと言っても、文末のセミコロンが禁止なことです。
これは、セミコロンが必須な言語の経験者からすると奇妙に見えるかもしれません。
しかしながら、JavaScriptではセミコロンは必須ではないので、次のようなコードも正しく動作します。

```js
const message = 'Hello World'
console.log(message)
```

なお、セミコロン禁止のルールだけは受け入れられないという人のために、セミコロンありの[JavaScript Semi-Standard Style](https://github.com/Flet/semistandard)というスタイルガイドも存在します^^;

## 誰がJavaScript Standard Styleを使っているのか
JavaScript Standard Styleは、[npm](https://www.npmjs.com/)、[GitHub](https://github.com/)、[Elastic](https://www.elastic.co/)、[Express](http://expressjs.com/)、[Electron](http://electron.atom.io/)など、名だたる企業やプロジェクトで用いられています。

実際の例として、[Electron](https://github.com/electron/electron)のソースコードを見てみましょう。

```js:index.js
var fs = require('fs')
var path = require('path')

var pathFile = path.join(__dirname, 'path.txt')

function getElectronPath () {
  if (fs.existsSync(pathFile)) {
    var executablePath = fs.readFileSync(pathFile, 'utf-8')
    if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
      return path.join(process.env.ELECTRON_OVERRIDE_DIST_PATH, executablePath)
    }
    return path.join(__dirname, 'dist', executablePath)
  } else {
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
  }
}

module.exports = getElectronPath()
```

出典：[electron/index.js at master · electron/electron](https://github.com/electron/electron/blob/master/npm/index.js)

* インデントはスペース2個
* 文字列はシングルクォートで囲む
* 未使用の変数がない
* 文末にセミコロンがない
* キーワードの後にスペースがある
* 関数名の後にスペースがある

など、JavaScript Standard Styleのルールに沿っていることが分かります。

## JavaScript Standard Styleを使う方法
JavaScript Standard Styleを使うには、いくつかの方法があります。

### 公式サイトのデモページを使う
JavaScript Standard Styleをちょっと試してみたい場合、公式サイトの[デモページ](https://standardjs.com/demo.html)が便利です。

![82f46f4c-ee3a-9ed0-b297-f966ad6edb8e.gif](https://qiita-image-store.s3.amazonaws.com/0/132608/82f46f4c-ee3a-9ed0-b297-f966ad6edb8e.gif)

JavaScriptのコードを入力すると、JavaScript Standard Styleのルールに反している箇所をリアルタイムに指摘してくれます。
また、「Correct erros using --fix」というボタンを押すと、fixableなエラーが自動的に修正されます。
すべてのエラーを修正し結果がグリーンになれば、そのコードはJavaScript Standard Styleとしての仕様を満たしています:tada:

### ESLintで使う
JavaScript Standard Styleは、JavaScriptのリントツールである[ESLint](https://eslint.org/)のルールとして使用することができます。

#### package.jsonファイルを作成
ESLintはNode.js上で動作するため、`package.json`ファイルが必要です。
この時点では、中身は`name`ぐらいでいいでしょう。

```json:package.json
{
  "name": "javascript-standard-style-example"
}
```

#### パッケージをインストール
ESLint本体をインストールします。

```sh
$ npm i -D eslint
```

ESLintでJavaScript Standard Styleを使用するためのパッケージ群をインストールします。[^2]

```sh
$ npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
```

この時点で、`package.json`ファイルは次のようになっているはずです。

```json:package.json
{
  "name": "javascript-standard-style-example",
  "devDependencies": {
    "eslint": "^5.9.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0"
  }
}
```

#### ESLintの設定ファイルを作成
`.eslintrc.json`ファイルを作成します。

```json:.eslintrc.json
{
  "extends": "standard"
}
```

これで、ESLintでJavaScript Standard Styleのルールが適用されるようになりました。

#### リントを実行
ESLintはコマンドライン上で実行するか、[Atom](https://atom.io/)や[Visual Studio Code](https://code.visualstudio.com/)などのエディタ上で動かすことができます。

##### コマンドライン上で実行
`package.json`ファイルに、ESLintによるリントを実行するためのコマンドを追加します。
コマンド名はなんでもいいですが、ここではわかりやすく`lint`とします。

```json:package.json
{
  "name": "javascript-standard-style-example",
  "scripts": {
    "lint": "eslint --ext .js --ignore-path .gitignore ."
  },
  "devDependencies": {
    "eslint": "^5.9.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0"
  }
}
```

次のコマンドを実行すると、ESLintによるリントが実行されます。

```sh
$ npm run lint
```

![8b9af653-f597-7d72-86ac-59d0932eb4ef.png](https://qiita-image-store.s3.amazonaws.com/0/132608/8b9af653-f597-7d72-86ac-59d0932eb4ef.png)

###### fixableなルールを自動修正
一部のfixable（修正可能）なルールは、`--fix`オプションで自動修正することが可能です。
`package.json`ファイルに、ESLintによる修正を実行するためのコマンドを追加します。
コマンド名はなんでもいいですが、ここではわかりやすく`fix`とします。

```json:package.json
{
  "name": "javascript-standard-style-example",
  "scripts": {
    "lint": "eslint --ext .js --ignore-path .gitignore .",
    "fix": "eslint --fix --ext .js --ignore-path .gitignore ."
  },
  "devDependencies": {
    "eslint": "^5.9.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0"
  }
}
```

次のコマンドを実行すると、ESLintによる修正が実行されます。

```sh
$ npm run fix
```

![3a0b230d-dfd6-4047-5c50-4537f85b81a4.gif](https://qiita-image-store.s3.amazonaws.com/0/132608/3a0b230d-dfd6-4047-5c50-4537f85b81a4.gif)

##### Atomで動かす
[linter-eslint](https://atom.io/packages/linter-eslint)をインストールします。

```sh
$ apm install linter-eslint
```

これだけで動きます。
うまく動かない場合は、ファイルを開き直したり、エディタを再起動したりしましょう。

![f8b89aa6-5e63-f8eb-f30d-3831d7a5a023.png](https://qiita-image-store.s3.amazonaws.com/0/132608/f8b89aa6-5e63-f8eb-f30d-3831d7a5a023.png)

##### Visual Studio Codeで動かす
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)をインストールします。
コマンドパレットを開いて次のコマンドを入力してください。

```
ext install eslint
```

これだけで動きます。
うまく動かない場合は、ファイルを開き直したり、エディタを再起動したりしましょう。

![a11772ec-8f61-f3a7-bda7-681b8e771760.png](https://qiita-image-store.s3.amazonaws.com/0/132608/a11772ec-8f61-f3a7-bda7-681b8e771760.png)

## 例
* [munierujp/javascript-standard-style-example](https://github.com/munierujp/javascript-standard-style-example)

## おわりに
僕はなるべくJavaScript Standard Styleを使用するようにしていますが、実に快適なものです。
あなたもぜひ、セミコロンのない世界を体感してみてください！

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

[^1]: 有名なスタイルガイドには、他に[Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)や[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)などがあります。
[^2]: [eslint-config-standard - npm](https://www.npmjs.com/package/eslint-config-standard)