もう迷わない! 今どきのJavaScriptで使われているインデント規約まとめ
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブにする、スペース2個にする、スペース4個にする等いくつかの選択肢があるかと思います。個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。本記事はそんなインデント論争の一つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。
なぜインデント論争が起こるのか？
そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうからです。ここではインデントの種類毎のメリット・デメリットをご紹介します。
タブ
- メリット
- 開発者が自分好みにインデント幅が変えられる
- デメリット
- コードの位置揃えとして使用すると環境によって崩れる
スペース
- メリット
- 環境に左右されず同じ見た目でソースが表示される
- デメリット
- 同じスペース派内でもスペースの数で派閥が生まれる
スペース派内の派閥
スペースのデメリットに挙げたように同じスペース派の中でもスペースをいくつ使うかで派閥が生じます。主に2個派、4個派、8個派のいずれかです。スペースが少ない場合は冗長にならずコードの折り返しが起こりにくく、スペースが多い場合は入れ子構造が把握しやすく可読性が高いといったそれぞれの長所があります。これらの派閥を調査している中でいくつか参考になった記事がありましたので紹介しておきます。
- インデントにタブを使うことのデメリット(10364)｜teratail
- ３スペース・インデントのススメ 〜空白３つコーディングの哲学〜 | MaryCore
- デー – ソースコードのインデントはタブかスペースか
JSコーディング規約のインデントルールを調べてみた
それでは世の中でどういった形のインデントが使用されているのか見ていくことにしましょう。
企業や組織のJSコーディング規約内のインデントルール
まずはブラウザベンダーを中心に、公開されているコーディング規約からインデントルールを抜粋し次の表にまとめました。
| 組織名 | インデントルール | コーディング規約ページ |
|---|---|---|
| Mozilla | スペース2個 | JavaScript style guide – Mozilla Developer Network |
| スペース2個 | Google JavaScript Style Guide 和訳 | |
| WebKit | スペース4個 | WebKit Coding Style Guidelines |
JSライブラリ/JSフレームワークのインデントルール
続いてJavaScriptのライブラリやフレームワークで採用されているインデントルールを次の表にまとめました。尚、インデントルールはJSHintやESLintなどの構文チェックツールの設定ファイルから抜粋しています。
| プロダクト名 | インデントルール | 設定ファイル |
|---|---|---|
| Node.js | スペース2個 | .eslintrc |
| React | スペース2個 | .eslintrc |
| Vue.js | スペース2個 | .eslintrc |
| Riot.js | スペース2個 | .eslintrc |
| Underscore.js | スペース2個 | .eslintrc |
| AngularJS | スペース2個 | .jshintrc-base |
| Ember.js | スペース2個 | .jscsrc |
| lodash | スペース2個 | .jscsrc |
| gulp | スペース2個 | .editorconfig |
| Pixi.js | スペース4個 | .jshintrc |
| Moment.js | スペース4個 | .editorconfig |
| Mithril.js | タブ | .eslintrc |
| jQuery | タブ | .editorconfig |
※ .jshintrc, .eslintrc, .jscsrcは構文チェックの設定ファイルです。
※ .editorconfigはEditorConfigという開発者間でエディターの設定を共有できるツールの設定ファイルです。
JavaScript界隈ではスペース2個のインデントが多く使われていた
調査によるとインデントはスペース2個と定めている場合が多いようですね。集計結果としてはスペース2個派が多かったわけですが、必ずしもそれが正解とは限りません。みなさんの環境に合ったインデントで開発するのが一番かと思います。本記事はJavaScript界隈のインデントルールをほんの一部まとめたものに過ぎませんが、みなさんのプロジェクトの規約作成の際に参考にしていただけたら幸いです。