Help us understand the problem. What is going on with this article?

JavaScript Standard Styleのススメ

みなさんは、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"
}

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

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はコマンドライン上で実行するか、AtomVisual Studio Codeなどのエディタ上で動かすことができます。

コマンドライン上で実行

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によるリントが実行されます。

$ npm run lint

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

fixableなルールを自動修正

一部のfixable(修正可能)なルールは、--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による修正が実行されます。

$ npm run fix

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

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

おわりに

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

JavaScript Style Guide


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

  2. eslint-config-standard - npm 

munieru_jp
江戸川区在住のアプリケーションエンジニア
https://munieru.jp/
cloud-partner
「クラウドの活用でビジネスを加速させていく」をテーマにAWSの活用を提案するチーム
https://cloud-partner.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした