JavaScript コード規約

すべての JavaScript プロジェクトに同じ規約を適用します。

JavaScript コード規約

コード規約には通常、以下の側面が含まれます:

  • 変数と関数の命名規則
  • スペース、インデント、コメントの使用規則。
  • その他の一般的な規約……

規約に従ったコードは、読みやすく保守しやすくなります。

コード規約は通常、開発前に定め、チームメンバーと相談して設定できます。

変数名

変数名はキャメルケースで命名することをお勧めします(camelCase):

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);
}
Note TABキーでのインデントは推奨されません。エディタによってTABキーの解釈が異なるためです。

文の規則

単純な文の一般的な規則:

  • 文は通常セミコロンで終了します。

例:

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

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

複雑な文の一般的な規則:

  • 左中括弧は最初の行の末尾に置きます。
  • 左中括弧の前にスペースを1つ追加します。
  • 右中括弧は単独で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 文が80文字を超える場合は、演算子またはカンマの後で改行することをお勧めします。

例:

document.getElementById("demo").innerHTML =
    "Hello サンプル.";

試してみる »

命名規則

一般的に、多くのプログラミング言語の命名規則は似ています。例:

  • 変数と関数は小キャメルケースで識別します。つまり、最初の単語を除いて他の単語の最初の文字を大文字にします（lowerCamelCase）
  • グローバル変数は大文字（UPPERCASE )
  • 定数（PIなど）は大文字（UPPERCASE )

変数命名にこれらの規則を使用していますか：hyp-hens, camelCase, またはunder_scores ?

HTML と CSS のハイフン(-)文字:

HTML5 属性は data- (例：data-quantity, data-price) をプレフィックスにできます。

CSS は属性名を接続するために - を使用します (font-size)。

Note - は通常 JavaScript では減算と見なされるため、使用できません。

アンダースコア:

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

PHP 言語は通常アンダースコアを使用します。

パスカルケース（PascalCase）:

パスカルケース（PascalCase）は C 言語で多く使われます。

キャメルケース：

JavaScript では通常キャメルケースが推奨され、jQuery や他の JavaScript ライブラリもキャメルケースを使用しています。

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

HTML で外部 JavaScript ファイルを読み込む

簡潔な形式で JavaScript ファイルを読み込みます（type 属性は必須ではありません）:

<script src="myscript.js">

JavaScript を使用して HTML 要素にアクセスする

不適切な HTML 形式は JavaScript の実行エラーを引き起こす可能性があります。

次の2つの JavaScript 文は異なる結果を出力します:

例

var obj = getElementById("Demo")

var obj = getElementById("demo")

試してみる »

HTML と JavaScript ではできるだけ同じ命名規則を使用してください。

HTML(5) コード規約にアクセス。

ファイル拡張子

HTML ファイルの拡張子は次のものを使用できます.html（または.htm)。

CSS ファイルの拡張子は.css 。

JavaScript ファイルの拡張子は.js 。

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

ほとんどの Web サーバー（Apache、Unix）は大文字と小文字を区別します：london.jpg は London.jpg ではアクセスできません。

他の Web サーバー（Microsoft、IIS）は大文字と小文字を区別しません：london.jpg は London.jpg または london.jpg でアクセスできます。

一貫したスタイルを維持する必要があります。小文字のファイル名を統一して使用することをお勧めします。

その他の拡張