JavaScript
AdventCalendar
コーディング規約
スタイルガイド
adventcalendar2018

JavaScript Style Guide

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

JavaScript Standard Styleのルール

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

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

これらは、100以上あるルールのうちのほんの一部に過ぎません。
すべてのルールを知りたい方は、公式ドキュメントを参照してください(まだ本家にマージされていませんが、僕が作成した日本語版のドキュメントもあります)。

ルールは変更不可

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

セミコロン禁止について

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

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

なお、セミコロン禁止のルールだけは受け入れられないという人のために、セミコロンありのJavaScript Semi-Standard Styleというスタイルガイドも存在します^^;

誰がJavaScript Standard Styleを使っているのか

JavaScript Standard Styleは、npmGitHubElasticExpressElectronなど、名だたる企業やプロジェクトで用いられています。

実際の例として、Electronのソースコードを見てみましょう。

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

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

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

JavaScript Standard Styleを使う方法

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

公式サイトのデモページを使う

JavaScript Standard Styleをちょっと試してみたい場合、公式サイトのデモページが便利です。

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のルールとして使用することができます。

package.jsonファイルを作成

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

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

以下のコマンドを実行することで、対話形式で作成することもできます。

$ npm init

パッケージをインストール

ESLint本体をインストールします。

$ npm i -D eslint

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

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

この時点で、package.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ファイルを作成します。

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

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

ESLintによるリントを実行

ESLintはコマンドライン上で動かすこともできますが、AtomVisual Studio Codeなどのエディタ上で動かすこともできます。

Atomで動かす場合

linter-eslintをインストールします。

$ apm install linter-eslint

これだけで動きます。

f8b89aa6-5e63-f8eb-f30d-3831d7a5a023.png

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

Visual Studio Codeで動かす場合

ESLintをインストールします。
コマンドパレットを開いて以下のコマンドを入力してください。

ext install eslint

これだけで動きます。

a11772ec-8f61-f3a7-bda7-681b8e771760.png

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

コマンドライン上で動かす場合

package.jsonファイルに、ESLintによるリントを実行するためのコマンドを記載します。
コマンド名はなんでもいいですが、ここではlintとしています。

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が拡張子が.jsのファイルを対象にリントします。

$ npm run lint

8b9af653-f597-7d72-86ac-59d0932eb4ef.png

自動修正する場合

一部のfixableなルールは、eslint --fixコマンドで自動修正することが可能です。
package.jsonファイルに、ESLintによる修正を実行するためのコマンドを記載します。
コマンド名はなんでもいいですが、ここではfixとしています。

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が拡張子が.jsのファイルを対象にリントし、自動修正します。

$ npm run fix

3a0b230d-dfd6-4047-5c50-4537f85b81a4.gif

おわりに

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

使用例


  1. 有名なスタイルガイドには、他にGoogle JavaScript Style GuideAirbnb JavaScript Style Guideなどがあります。 

  2. eslint-config-standard - npm