JavaScript スタイルガイドとコーディング規約

❮ 前章へ次章へ ❯

すべての JavaScript プロジェクトにおいては、常に同じコーディング規則を使用してください。

JavaScript コーディング規約

コーディング規則はプログラミングのスタイルガイドラインです。これは、通常次のようなことカバーします：

変数と関数の命名規則と宣言規則。
空白、字下げ、およびコメントの使用に関する規則。
プログラミングの慣習と原則

コーディング規則は、品質を保証します：

コードの読みやすさを改善する
コードのメンテナンスを容易にする

コーディング規則は、チームが従うためのルールを文書化することも、個々のコーディング慣習とすることもできます。

このページでは、W3School で使用している一般的な JavaScript コード規約について説明します。
また、次の "Best Practices" の章を読んで、コードの落とし穴を避ける方法を学ぶ必要があります。

変数名

W3schoolでは、識別子名（変数と関数）には camelCase を使用しています。

すべての名前は文字で開始しています。

このページの最後で、命名規則についてのより広い議論がありますので参照してください。

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

演算子前後のスペース

常に演算子（ = + - * / ）の前後と、カンマの後にスペースを入れます：

Examples:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

コードのインデント

コードブロックのインデントには常に4つのスペースを使用します：

関数：

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

インデントにタブを使用しないでください。エディタによっては、タブの解釈が異なります。

ステートメントの規則

簡単なステートメントの一般的な規則：

簡単なステートメントは、常にセミコロンで終ります。

例：

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

複雑な（複合型）ステートメントの一般規則：

最初の行の最後に開き括弧を置きます。
開き括弧の前にスペースを1つ置いてください。
新しい行に、スペースを入れずに閉じ括弧置きます。
複雑なステートメントをセミコロンで終了しないでください。

関数：

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

ループ：

for (i = 0; i < 5; i++) {
x += i;
}

条件：

if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

オブジェクトの規則

オブジェクト定義の一般的な規則：

オブジェクト名と同じ行に開き括弧を配置します。
各プロパティと値の間にコロンと1つのスペースを使用します。
文字列の値を引用符で囲み、数値は囲みません。
最後のプロパティと値のペアの後にカンマは追加しません。
新しい行に、スペースを入れずに閉じ括弧置きます。
オブジェクト定義は、常にセミコロンで終了します。

例

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

短いオブジェクトは、次のようにプロパティ間のスペースだけを使って1行に圧縮して書くことができます：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

1行の長さ < 80

読みやすくするため、1行は80文字を超えないようにしてください。

JavaScript 文が1行に収まらない場合、演算子かカンマの後が改行するのに最適な場所です。

例

document.getElementById("demo").innerHTML =
"Hello Dolly.";

Try it Yourself »

命名規則

常に、すべてのコードに対して同じ命名規則を使用してください。例えば：

変数と関数名は camelCase で記述する
グローバル変数は大文字で記述する (ここではそうしてませんが、かなり一般的です)
定数（PIのような）は大文字で記述する

変数名に、hyp-hens、camelCase、 under_scores を使用する必要がありますか？

これはプログラマがよく議論する質問です。答えはあなたが尋ねる人によって異なります：

HTML と CSS におけるハイフォン：

HTML5 の属性は、data- から始めることができます (data-quantity, data-price)。

CSS は、ハイフォンをプロパティ名で使用しています（font-size）。

ハイフォンは減算と誤解される可能性があります。ハイフォンは JavaScript 名には使用できません。

アンダースコア：

多くのプログラマ、特に SQL データベースではアンダースコア（date_of_birth）の使用を好みます。

アンダースコアは PHP のドキュメントでよく使われています。

PascalCase:

PascalCase は、主に C プログラマーに好まれます。

camelCase:

camelCase は、JavaScript自体、jQuery などの JavaScript ライブラリで使用されます。

名前は $ 記号で始めないでください。多くの JavaScript ライブラリ名と衝突します。

HTML への JavaScript のロード

外部スクリプトの読み込みには単純な構文を使用します（type 属性は必要ありません）：

HTML 要素へのアクセス

「汚い」HTMLスタイルを使用すると、JavaScript エラーが発生する可能性があります。

次の2つの JavaScript 文は、結果が異なります。

var obj = getElementById("Demo")

var obj = getElementById("demo")

可能であれば、HTML 内でも（JavaScriptなどと）同じ命名規則を使用します。

HTML スタイルガイドをご覧ください。

ファイル拡張子

HTML ファイルの拡張子は、.htm ではなく、.html でなければなりません。

CSS ファイルの拡張子は、.css でなければなりません。

JavaScript ファイルの拡張子は、.js でなければなりません。

ファイル名には小文字を使用する

ほとんどの Web サーバ（Apache、Unix）では、ファイル名を大文字と小文字で区別します：

london.jpg は、London.jpg でアクセスすることはできません。

他の Web サーバ（Microsoft、IIS）では、大文字と小文字は区別しません：

london.jpg は、London.jpg や london.jpg でアクセスできます。

大文字と小文字の組み合わせを使用する場合は、厳しく首尾一貫していなければなりません。

大文字小文字を区別しないサーバから、大文字小文字を区別するサーバに移行した場合、小さなエラーでも Web サイトが破損する可能性があります。

これらの問題を回避するには、可能であれば、常に小文字のファイル名を使用してください。

パフォーマンス

コーディング規則は、コンピュータが使用するものではありません。ほとんどのルールは、プログラムの実行にほとんど影響しません。

小さなスクリプトでは、インデントや余分なスペースは重要ではありません。

開発中のコードは、読みやすさが優先されるべきです。大規模なスクリプトの作成は、細分化する必要があります。

❮ 前章へ次章へ ❯