プログラミングには様々なお作法があります。
プログラムの書き方についてのルールがコーディング規約です。
本記事では、JavaScriptのコーディング規約についてまとめます。
JavaScriptのコーディング規約
JavaScriptのコーディング規約として、以下の内容を採り上げます。
- コーディング規約の種類
- 命名に関する規約
- フォーマットに関する規約
- コメントに関する規約
- その他の規約
コーディング規約の種類
JavaScriptのコーディング規約は、様々な種類があり、代表的なものとして、以下のようなものがあります。
上記以外にもたくさんのコーディング規約があるのですが、本記事では最も参考にされていると思われる『Google JavaScript Style Guide』の内容から主にスタイルに関する規約をまとめます。
命名に関する規約
| 命名 | 規則 | 例 |
|---|---|---|
|
関数名
|
キャメルケース | myFunction |
|
変数名
|
キャメルケース
|
myName
|
|
クラス名
|
パスカルケース（アッパーキャメルケース）
|
MyClass
|
|
Enum名
|
パスカルケース（アッパーキャメルケース）
|
MyEnum
|
|
メソッド名
|
キャメルケース
|
myMethd
|
|
定数名
|
アッパースネークケース
|
MY_CONSTANT
|
|
名前空間
|
キャメルケース
|
hoge.myNamespace.foo
|
|
ファイル名
|
チェインケース
|
my-filename.js
|
Privateプロパティ、メソッド
Privateのプロパティ、メソッドには、末尾にアンダースコア _ を付けます。
Protectedのプロパティ、メソッドにはつけません。（パブリックも同様）
メソッドと関数のパラメータ
オプション引数（指定が必須でないデフォルト引数）には opt_ というプレフィックスを付けます。
function myFunc(hour, minute, opt_second = 0) {
console.log(opt_second);
}
可変長引数をとる場合、最後の引数を var_args と名付けます。参照する際は、arguments を参照します。
function myFunc(hour, minute, var_args) {
console.log(arguments[2]);
}
コードのフォーマットに関する規約
波括弧
ブロックの開始となる波括弧は、改行せずに同じ行に書きます。
if (something) {
// ...
} else {
// ....
}
配列・オブジェクトの初期化
一行に収まる場合は、一行で記載します。
var arr = [1, 2, 3]; // 括弧の前後に空白を入れない
var obj = {a: 1, b: 2, c: 3}; // 括弧の前後に空白を入れない
複数行に渡る初期化の場合は、スペース2つのインデントを行い、括弧だけで一行を使います。
// オブジェクトの初期化
var rectangle = {
top: 10,
right: 20,
bottom: 30,
left: 40
};
// 配列の初期化
var array = [
'top',
'right',
'bottom',
'left'
];
// メソッドの引数としてのオブジェクト
myFunction(color, {
top: 10,
right: 20,
bottom: 30,
left: 40
}, visible);
関数の引数
可能であればすべての関数の引数は一行で記述します。
80文字の制限を超えてしまう場合は複数行に折り返します。
折り返した際は、空白4つのインデントにするか、括弧の位置に合わせます。
myFunc = function(
top,
right,
bottom,
left) {
// ...
}
function myFunc(top,
rigth,
bottom,
left) {
// ...
}
空白行
論理的に関連のある行をまとめるために空白行を適切に使用します。
コメントに関する規約
すべてのファイル、クラス、メソッド、プロパティに対してのコメントを JSDoc形式で記述します。
インラインコメントには // を使用します。
トップレベル・ファイルレベルコメント
トップレベルコメントは、そのコードに詳しくない読者を対象として、そのファイルが何をしているのかを説明するコメントです。ファイル内容や互換性の情報などを記述します。
/** * @fileoverview ファイルの説明, 使用方法や * 依存関係の情報など. * @author メールアドレス (名前) */
クラスコメント
クラスコメントには説明とコンストラクタを示す型情報を記述します。
/**
* クラスに関する説明.
* @param {string} arg1に関する情報.
* @param {Array.} arg2に関する情報.
* @constructor コンストラクタに関する情報
*/
メソッド・関数コメント
メソッド・関数の説明やパラメータと戻り値の内容を記述します。
/**
* メソッド・関数の説明
* @param パラメータの内容.
* @return {boolean} 戻り値の内容.
*/
プロパティコメント
プロパティの説明や型情報を記述します。
/**
* プロパティの説明.
* @type {number}
*/
その他の規約
丸括弧に関する規約
丸括弧は必要なところだけで使い、基本的になるべく使わないようにします。
単項演算子（deleteやtypeof）やvoidに丸括弧は使用しません。
また、returnやthrow、case、newなどのあとにも使用しません。
文字列に関する規約
ダブルクォートよりもシングルクォートを使うほうが、HTMLを含む文字列を作る際に便利です。
ツールを使って自動的にチェックできるようにしよう
コーディング規約は、多くの場合、プロジェクトや組織ごとに異なります。
それらをすべて覚えてプログラミングするのは、返って効率が悪くなる場合があるので、主要な部分は覚えて、細かい部分はツールでチェックできるようにすると良いです。
IDEにツールが備わっている場合もありますし、それぞれのコーディング規約に沿ったチェックツールが提供されている場合もあります。
それらを上手く活用し、自分たち向けにカスタマイズして、誰もが同じ規約のもとで、同じようにコードが書けるようにするのがベターです。
今回はJavaScriptのコーディング規約について紹介しました。
参考になれば幸いです。
コメント