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

❮前次の章❯

常にすべてのJavaScriptのプロジェクトのための同じコーディング規約を使用します。

JavaScriptのコーディング規則

コーディング規約は、 プログラミングのスタイルガイドラインです。これらは、典型的に覆います。

変数と関数の命名と宣言ルール。
空白、インデント、およびコメントを使用するためのルール。
プログラミングの実践と原則

コーディング規約の安全な品質 ：

コードの可読性を向上させます
コードの保守が容易になります

チームは従って、またはちょうどあなたの個々のコードの練習になるためにコーディング規約は、ルールを文書化することができます。

このページには、w3iiで使用される一般的なJavaScriptコードの規則について説明します。
あなたはまた、次の章「ベストプラクティス」を読み、コーディング落とし穴を回避する方法を学ぶ必要があります。

変数名

w3iiで私達は識別子名（変数や関数）のためのキャメルケースを使用します 。

すべての名前は文字で始まります。

このページの一番下に、命名規則については、より広い議論があります。

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

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

行の長さ<80

読みやすくするために、80文字より長い行を避けます。

JavaScriptステートメントは、1行に収まらない場合は、それを破るのに最適な場所は、オペレータまたはコンマの後です。

例

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

»それを自分で試してみてください

命名規則

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

変数名と関数名はキャメルケースのように記述します
大文字で書かれたグローバル変数（私たちにはないが、それは非常に一般的です）
大文字で書かれた（PIなど）の定数

あなたは、変数名にHYP-雌鳥 、 キャメルケース 、またはunder_scoresを使用する必要がありますか？

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

HTMLとCSSでハイフン：

HTML5は、DATA-（データ量、データ-価格）で開始することができます属性。

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

ハイフンは、減算試みと誤認されることがあります。ハイフンは、JavaScriptの名に許可されていません。

アンダースコア：

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

アンダースコアは、多くの場合、PHPのドキュメントで使用されています。

PascalCase：

PascalCaseは、多くの場合、Cプログラマに好まれます。

キャメルケース：

キャメルケースでは、JavaScript自体、jQueryのことであり、他のJavaScriptライブラリで使用されます。

$記号で名前を起動しないでください。それは多くのJavaScriptライブラリ名と競合であなたを配置します。

HTMLにJavaScriptをロード

（type属性は必要ありません）外部スクリプトをロードするための簡単な構文を使用します。

HTML要素へのアクセス

「だらしない」HTMLスタイルを使用した結果は、JavaScriptのエラーが発生する可能性があります。

これらの2つのJavaScriptのステートメントは、異なる結果を生成します：

var obj = getElementById("Demo")

var obj = getElementById("demo")

可能な場合は、HTMLで（JavaScriptなど）と同じ命名規則を使用します。

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

ファイルの拡張子

HTMLファイルは.html拡張子（ないの.htm）を持っている必要があります。

CSSファイルは、.cssの拡張子を持つ必要があります。

JavaScriptのファイルは、拡張子が.jsを持っている必要があります。

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

ほとんどのWebサーバー（Apacheのは、Unixの）は、ファイル名に関する大文字と小文字が区別されます：

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

他のWebサーバー（マイクロソフト、IIS）は、大文字と小文字を区別しません。

london.jpgとしてアクセスすることができLondon.jpgまたはlondon.jpg 。

あなたは大文字と小文字が混在して使用する場合は、非常に一貫している必要があります。

あなたは大文字と小文字を区別し、サーバーに、大文字と小文字を区別しないから移動すると、小さくてもエラーはあなたのウェブサイトを破ることができます。

これらの問題を回避するために、常に小文字のファイル名（可能な場合）を使用します。

パフォーマンス

コーディング規約は、コンピュータが使用されていません。ほとんどのルールは、プログラムの実行にはほとんど影響を持っています。

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

開発中のコードでは、読みやすさが好まれるべきです。より大きな生産スクリプトは縮小されるべきです。

❮前次の章❯

JS チュートリアル

JS フォーム

JS オブジェクト

JS 機能

JS HTML DOM

JS ブラウザ BOM

JS 例

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