今どきのJavaScriptで使われているインデント規約まとめ

177
176

みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか? タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。

個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。

本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました

この記事のポイント*

  • 海外のJS界隈ではスペース2個のインデントが多数派
  • ESLINTなどの設定ファイルからコーディングルールを調べられる

なぜインデント論争が起こるのか?

そもそもなぜインデント論争が起こってしまうのでしょうか? それはそれぞれ一長一短のため好みが分かれてしまうからです。ここではインデントの種類毎のメリット・デメリットをご紹介します。

タブ

メリット

  • 開発者が自分好みにインデント幅が変えられる
  • インデント移動時のキータイプが少ない
  • アクセシビリティー上の観点で望ましい

デメリット

  • 位置揃えとして使用すると環境によって崩れる

記事『インデントにタブを使うアクセシビリティ上の利点』で紹介されているように、「視覚に障害がある人たちにとって重要」とし、タブのインデントにはアクセシビリティー上のメリットがあると紹介されています。

スペース

メリット

  • 環境に左右されず同じ見た目でソースが表示される

デメリット

  • 同じスペース派内でもスペースの数で派閥が生まれる
  • インデント移動時のキータイプが多い

スペース派内の派閥

スペースのデメリットに挙げたように同じスペース派の中でもスペースをいくつ使うかで派閥が生じます。主に2個派、4個派、8個派のいずれかです。スペースが少ない場合は冗長にならずコードの折り返しが起こりにくく、スペースが多い場合は入れ子構造が把握しやすく可読性が高いといったそれぞれの長所があります。

JSコーディング規約のインデントルールを調べてみた

それでは世の中でどういった形のインデントが使用されているのか見ていくことにしましょう。

企業や組織のJSコーディング規約内のインデントルール

まずは大手のベンダーを中心に、公開されているコーディング規約からインデントルールを抜粋し次の表にまとめました。

組織名 インデントルール コーディング規約ページ
Google スペース2個 Google JavaScript Style Guide
WebKit スペース4個 WebKit Coding Style Guidelines
TypeScript スペース4個 .editorconfig

JSライブラリ/JSフレームワークのインデントルール

続いてJavaScriptのライブラリやフレームワークで採用されているインデントルールを次の表にまとめました。尚、インデントルールはESLintなどの構文チェックツールの設定ファイルから抜粋しています。

プロダクト名 インデントルール 設定ファイル
Node.js スペース2個 .eslintrc.js
React スペース2個 .editorconfig
Vue.js スペース2個 .editorconfig
Angular スペース2個 .editorconfig
SVELTE スペース2個 .editorconfig
lodash スペース2個 .editorconfig
gulp スペース2個 .editorconfig
Three.js タブ .editorconfig
Pixi.js スペース2個 .editorconfig
Moment.js スペース4個 .editorconfig
jQuery スペース2個 .editorconfig

.eslintrcは構文チェックの設定ファイルです。
.editorconfigEditorConfigという開発者間でエディターの設定を共有できるツールの設定ファイルです。
※執筆当時(2015年12月)はjQueryはタブ、Pixi.jsはスペース4個でしたが、現在(2023年3月現在)はスペース2個になっています

調査によるとインデントはスペース2個と定めている場合が多いようですね。

国内のインデント事情はタブが多数

インデント数について弊社池田がTwitterでアンケートを実施。JavaScriptだと、41%が「タブ」、47%が「スペース2つ」、11%が「スペース4つ」という結果になりました。

HTMLだと、46%が「タブ」、44%が「スペース2つ」、11%が「スペース4つ」という結果になりました。

アンケートについて、詳しくは記事「HTMLコーダーへのアンケート結果(コードの書き方)」で紹介してますので、あわせて参考ください。本記事はJavaScript界隈のインデントルールをほんの一部まとめたものに過ぎませんが、みなさんのプロジェクトの規約作成の際に参考にしていただけたら幸いです。

※この記事が公開されたのは8年前ですが、1年前の2023年3月に内容をメンテナンスしています。

編集部

ICS MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。

この担当の記事一覧