JavaScriptスタイルガイド
すべてのJavaScriptプロジェクトで常に同じコーディング規則を使用してください。
JavaScriptのコーディング規約
コーディング規約は、プログラミングのスタイルガイドラインです。それらは通常以下をカバーします：
- 変数と関数の命名と宣言のルール。
- 空白、インデント、およびコメントの使用に関する規則。
- プログラミングの実践と原則
コーディング規約は品質を確保します：
- コードの可読性が向上します
- コードのメンテナンスを容易にする
コーディング規約は、チームが従うべき文書化されたルールにすることも、個々のコーディング慣行にすることもできます。
このページでは、W3Schoolsで使用される一般的なJavaScriptコード規則について説明します。
また、次の章「ベストプラクティス」を読み、コーディングの落とし穴を回避する方法を学ぶ必要があります。
変数名
W3schoolsでは、識別子名（変数と関数）にキャメルケースを使用しています。
すべての名前は文字で始まります。
このページの下部に、命名規則に関する幅広い議論があります。
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
オペレーターの周りのスペース
常に演算子（= +-* /）の前後、およびコンマの後にスペースを入れてください。
例：
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
コードのインデント
コードブロックのインデントには、常に2つのスペースを使用してください。
機能：
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
インデントにタブ（タブ）を使用しないでください。編集者が異なれば、タブの解釈も異なります。
ステートメントルール
簡単なステートメントの一般的なルール：
- 単純なステートメントは常にセミコロンで終了します。
例：
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
複雑な（複合）ステートメントの一般的な規則：
- 最初の行の終わりに開き角かっこを置きます。
- 開き角かっこの前に1つのスペースを使用します。
- 先頭にスペースを入れずに、閉じ括弧を新しい行に配置します。
- 複雑なステートメントをセミコロンで終わらせないでください。
機能：
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
ループ：
for (let i = 0; i < 5; i++) {
x += i;
}
条件：
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
オブジェクトルール
オブジェクト定義の一般的な規則：
- オブジェクト名と同じ行に開き角かっこを配置します。
- 各プロパティとその値の間にコロンと1つのスペースを使用します。
- 数値ではなく、文字列値を引用符で囲みます。
- 最後のプロパティと値のペアの後にコンマを追加しないでください。
- 先頭にスペースを入れずに、閉じ括弧を新しい行に配置します。
- オブジェクト定義は常にセミコロンで終了してください。
例
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
短いオブジェクトは、次のように、プロパティ間にのみスペースを使用して、1行に圧縮して書き込むことができます。
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
線の長さ<80
読みやすくするために、80文字を超える行は避けてください。
JavaScriptステートメントが1行に収まらない場合、それを分割するのに最適な場所は、演算子またはコンマの後にあります。
例
document.getElementById("demo").innerHTML =
"Hello Dolly.";
命名規則
すべてのコードに常に同じ命名規則を使用してください。例えば：
- キャメルケースとして記述された変数名と関数名
- 大文字で書かれたグローバル変数（私たちはしませんが、それはかなり一般的です）
- 大文字で書かれた定数（PIなど）
変数名にhyp- hens 、camelCase、または under_scoresを使用する必要がありますか？
これは、プログラマーがよく議論する質問です。答えはあなたが誰に尋ねるかによります：
HTMLおよびCSSのハイフン：
HTML5属性は、data-（data-quantity、data-price）で始めることができます。
CSSは、プロパティ名（フォントサイズ）にハイフンを使用します。
ハイフンは減算の試みと間違えられる可能性があります。JavaScript名にはハイフンを使用できません。
下線：
多くのプログラマーは、特にSQLデータベースでアンダースコア（date_of_birth）を使用することを好みます。
アンダースコアは、PHPのドキュメントでよく使用されます。
PascalCase：
PascalCaseは、Cプログラマーに好まれることがよくあります。
キャメルケース：
camelCaseは、JavaScript自体、jQuery、およびその他のJavaScriptライブラリによって使用されます。
名前を$記号で始めないでください。多くのJavaScriptライブラリ名と競合することになります。
HTMLでJavaScriptをロードする
外部スクリプトをロードするために単純な構文を使用します（type属性は必要ありません）：
<script src="myscript.js"></script>
HTML要素へのアクセス
「乱雑な」HTMLスタイルを使用すると、JavaScriptエラーが発生する可能性があります。
これらの2つのJavaScriptステートメントは、異なる結果を生成します。
const obj = getElementById("Demo")
const obj = getElementById("demo")
可能であれば、HTMLで（JavaScriptと同じ）命名規則を使用してください。
ファイル拡張子
HTMLファイルの拡張子は.htmlである必要があります（ .htmを使用できます）。
CSSファイルの拡張子は.cssである必要があります。
JavaScriptファイルの拡張子は.jsである必要があります。
小文字のファイル名を使用する
ほとんどのWebサーバー（Apache、Unix）は、ファイル名について大文字と小文字を区別します。
london.jpgはLondon.jpgとしてアクセスできません。
他のWebサーバー（Microsoft、IIS）では、大文字と小文字は区別されません。
london.jpgには、London.jpgまたはlondon.jpgとしてアクセスできます。
大文字と小文字を組み合わせて使用する場合は、非常に一貫している必要があります。
大文字と小文字を区別しないサーバーから大文字と小文字を区別するサーバーに移行すると、小さなエラーでもWebサイトが破損する可能性があります。
これらの問題を回避するには、常に小文字のファイル名を使用します（可能な場合）。
パフォーマンス
コーディング規約はコンピューターでは使用されません。ほとんどのルールは、プログラムの実行にほとんど影響を与えません。
小さなスクリプトでは、インデントと余分なスペースは重要ではありません。
開発中のコードでは、読みやすさが優先されます。より大きな本番スクリプトは縮小する必要があります。