カレンダー

JS チュートリアル

JS バージョン

JS オブジェクト

JS フォンク

JS クラス

JS Async

JS HTML DOM

JS ブラウザ BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS グラフィック

JSインスタンス

JSリファレンスマニュアル

選択科目

コース推薦：

CodeW3C.com コレクション

JavaScriptのスタイルガイド

前のページ JS デバッグ
次のページ JS ベストプラクティス

すべてのJavaScriptプロジェクトで同じコーディングの慣習を使用することを常にお勧めします。

JavaScriptのコーディングの慣習

コーディングの慣習（Coding conventions）とは、プログラミングのスタイルガイドライン。これらの原則は以下のことが含まれます：

変数および関数の命名と宣言のルール
スペース、インデント、およびコメントのルール
プログラミングの習慣と原則

コードの慣習品質を確保する：

コードの可読性を改善する
コードの可維持性を向上させる

コードの慣習は、チームが守る文書化されたルールでも、個人のコーディングの習慣でもあります。

このページでは、CodeW3C.comで使用されている一般的なJavaScriptコードの慣習について説明します。

次の章「ベストプラクティス」を読み続け、コーディングの罠を避ける方法を学びましょう。

変数名

CodeW3C.comでは、識別子の名前（変数と関数）に以下のようにキャメルケースの大文字を使用しています：キャメルケースの大文字）。

すべての名前は文字開頭。

このページの最下部で、命名規則についてより広く議論します。

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

演算子の周りのスペース

演算子（= + - * /）の周りやカンマの後にスペースを常に追加してください：

例

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: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

複雑な文（複合文）の一般的なルール：

最初の行の終わりに開括号を書いてください
開括号の前にスペースを使用してください
閉括号は前導スペースなしで新しい行に書いてください
複雑な文の終わりにはセミコロンを使用しないでください

関数：

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";
}

オブジェクトのルール

オブジェクト定義の一般的なルール：

開括号とオブジェクト名を同一行に配置してください
各属性とその値の間にコロンとスペースを使用してください
最後の属性値の対の後にコロンを付けないでください
閉括号は前導スペースなしで新しい行に書いてください
オブジェクトの定義を常にセミコロンで終了してください

例

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

短オブジェクトを一行で圧縮することができます、属性間にのみスペースを使用します：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

行の長さは 80 より短い

読みやすさを向上させるために、各行の長さが 80 文字を超えないようにしてください。

JavaScript ステートメントが一行を超える場合、改行の最適な場所は演算子やカンマの後にです。

例

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

自分で試してみてください

命名慣習

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

変数と関数名はキャメルケースで書きます
グローバル変数は大文字（私たちはこれをしないが、非常に一般的です）
定数（例えば PI）は大文字

変数名に使用すべきかどうかハイフン、キャメルケースまたはアンダースコアか？

これはプログラマーたちがよく議論する問題です。答えは誰が答えるかにもよります：

HTML と CSS でのハイフン：

HTML5 属性は data- で始まることができます（data-quantity, data-price）。

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

ハイフンは誤って減法演算子として見なされることがあります。JavaScript の命名ではハイフンを使用することは許可されていません。

アンダースコア：

多くのプログラマーはアンダースコア（date_of_birth）を使用することが好きで、特に SQL データベースでよく使用されます。

アンダースコアはよく PHP 参考資料に使用されます。

パスカルネーミング法（PascalCase）：

C 言語のプログラマーはよくパスカルネーミング法を使用します。

キャメルケース（camelCase）：

JavaScript 自体、jQuery その他の JavaScript ライブラリはキャメルケースの大文字小文字を使用します。

JavaScript の命名において、$ 符号で始めることは避けてください。これにより、JavaScript の名前の衝突が発生します。

HTML で JavaScript をロード

外部スクリプトをロードするためのシンプルな構文（type 属性は必須ではありません）：

<script src="myscript.js"></script>

HTML 要素にアクセス

「不整然な」HTML スタイルの結果として、JavaScript エラーが発生する可能性があります。

これらの JavaScript ステートメントは異なる結果を生み出します：

var obj = getElementById("Demo")
var obj = getElementById("demo")

可能であれば、HTML で同じ名前の慣習を使用してください（例えば、JavaScript と同じように）。

HTML スタイルガイドへのアクセス）。

ファイル拡張子

HTML ファイルは以下を使用するべきです .html 拡張子（ .htm）。

CSS ファイルは以下を使用するべきです .css 拡張子。

JavaScript ファイルは以下を使用するべきです .js 拡張子。

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

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

london.jpg は London.jpg としてアクセスできない可能性があります。

他のウェブサーバー（マイクロソフトの IIS）は大文字小文字を区別しません：

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

大文字小文字を混在させる場合は、厳密に連続して一貫して使用する必要があります。

あなたが大文字小文字を区別しないサーバーから大文字小文字を区別するサーバーにサイトを移行した場合、このような小さなエラーでもあなたのウェブサイトを壊す可能性があります。

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

パフォーマンス

コンピュータはコードの慣習を使用しません。ほとんどのルールはプログラムの実行にほとんど影響を与えません。

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

開発中のスクリプトについては、読みやすさを優先してください。より大きなプロダクションスクリプトは縮小するべきです。

前のページ JS デバッグ
次のページ JS ベストプラクティス