JavaScriptで綺麗なコードを書く方法

プログラミングを始めるにあたって大抵の人がまずHTML/CSSから入る。そして、次に学び始める言語に最も選ばれるのがJavaScriptだ。この記事では、私が参考にしている書籍「改訂新版JavaScript本格入門〜モダンスタイルによる基礎から現場での応用まで」の最終章（8.5 読みやすく保守しやすいコードを書く - コーディング規約 -）をまとめていく。

まずはじめに。

プロフェッショナルのエンジニアには、「可読性」の高いコードを書くスキルは必要不可欠です。（参照：エンジニアHub）

万人がほぼ同じ書き方をするHTMLやCSSとは異なり、JavaScriptには答えがない。ある人は何行にもなるコードで書いたものをある人は１行で済ませられるかもしれない。しかし、いくら短くしたとしてもJavaScriptでの表現の幅が広がるにつれてコードも大規模になっていくのは仕方がないことだ。

ウェブアプリなどのクライアントがいるプログラムは特に一度書いたら終わりではない。完成した後もバグが見つかれば修正したり、後から発生した要件にしたがってコードを追加・更新したりと常に変更される可能性がある。この時、あとから自分の書いたコードを読んだ時に何をしようとしていたかわからなくなってしまわないよう、綺麗な（＝可読性の高い）コードを記述することが重要となる。

JavaScriptの主なコーディング規約

JavaScriptには、以下のようなコーディング規約が公開されている。

・JavaScript style guide (MDN) （日本語版）
・Google JavaScript Style Guide （日本語版）
・Airbnb JavaScript Style Guide （日本語版）
・Node.js Style Guide （日本語版）
・JavaScript Style Guide (jQuery)

ここで定められている規約には矛盾した項目もあるため、あくまで１つのガイドラインとして捉えること。

JavaScript style guide (MDN)の主な規約

ここでは「JavaScript style guide (MDN)」を例に挙げて主なポイントをまとめる。（※あくまで規約であって構文規則ではないことに注意。）

(１)基本
・１行あたりの行数は８０文字以下に収めること
・ファイルの末尾は改行すること
・カンマ/セミコロンの後方にはスペースを入れること
・関数やオブジェクトなどの定義ブロックの前後は空行で区切ること

(２)空白
・インデントはスペース２個で表現すること（タブは使わない）
・２項演算子は空白で区切ること
・カンマ/セミコロン、キーワードの後方には空白を含めること（ただし、行末の空白は不要）

(３)命名規則
・変数/関数名は先頭小文字のcamelCase形式
・定数名は全て大文字のアンダースコア形式
・コンストラクター/クラス名は先頭大文字のCamelCase形式
・プライベートメンバーは「_」で始めること
・イベントハンドラー関数は「on」で始めること

(４)その他
・すべての変数は宣言、初期化すること
・変数の宣言が重複しないこと
・配列、オブジェクトの生成には、[...]、{...}などのリテラル構文を利用すること
・真偽値をtrue/falseと比較しないこと （参照）

Google標準のコーディングスタイル

次に「Google JavaScript Style Guide )」の主なポイントを上に挙げたものと重複しない範囲でまとめる。

・.jsファイルの名前は小文字で統一
・セミコロンは省略しない
・文字列のくくりには「"」よりも「'」を優先して利用する
・基本データ型（stringやnumber、booleanなど）のラッパーオブジェクトは使用しない
・名前空間を利用して、グローバルレベルの名前は最小限に抑える
・ブロックを表す{...}の前に改行は入れない
・ビルトインオブジェクトのプロトタイプは書き換えない
・with/eval命令は利用しない
・for...in命令は連想配列/ハッシュでのみ利用する

まとめ

読みやすいコードを書くことは他人に優しいコードを書くことと同じである。この「可読性」を高くすることでバグの発生を未然に防ぎ問題が起きた時も早期修正が可能になるため、長期的に見て「保守性」を高めることになる。そして、それは最終的に生産性を左右する。

参考資料：

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで