JavaScript スタイルガイド

Volardev 編集部 April 18, 2026

1. JavaScript コーディング規約

すべてのJavaScriptプロジェクトにおいて、常に一貫したコーディング規約を使用することが重要です。

コーディング規約は、プログラミングのためのスタイルガイドラインです。一般的に以下の内容をカバーします：

変数や関数の命名および宣言ルール
空白（ホワイトスペース）、インデント、コメントの使用ルール
プログラミングの慣行（プラクティス）と原則

コーディング規約を守ることで、以下の品質が保証されます：

コードの可読性（Readability）の向上
コードの保守（Maintenance）の容易化

規約はチームで共有されるドキュメント化されたルールである場合もあれば、個人のコーディング習慣である場合もあります。このページでは、一般的なJavaScriptの規約について説明します。

2. 変数名（Variable Names）

当ガイドでは、識別子名（変数および関数）にキャメルケース（camelCase）を使用します。
すべての名前はアルファベットで開始する必要があります。

firstName = "太郎";
lastName = "田中";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

3. 演算子の前後のスペース

演算子（ = + - * / ）の前後、およびカンマ（ , ）の後ろには、常にスペースを入れます。

例：

let x = y + z;
const myArray = ["ボルボ", "サアブ", "フィアット"];

4. コードのインデント（Indentation）

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

関数：

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

インデントにタブ（Tab）を使用しないでください。エディタによってタブの解釈が異なるため、レイアウトが崩れる原因になります。

5. ステートメントのルール

単純なステートメント（Simple Statements）の一般的なルール：

単純なステートメントは、常にセミコロン（;）で終了させます。

例：

const cars = ["ボルボ", "サアブ", "フィアット"];

const person = {
  firstName: "太郎",
  lastName: "田中",
  age: 50,
  eyeColor: "青"
};

複合ステートメント（Complex Statements）の一般的なルール：

開始ブラケット（{）は最初の行の末尾に置く。
開始ブラケットの前にスペースを1つ入れる。
終了ブラケット（}）は、先頭にスペースを入れず、新しい行に置く。
複合ステートメントをセミコロンで終了させない。

関数：

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

ループ：

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

条件分岐：

if (time < 20) {
  greeting = "良い一日を";
} else {
  greeting = "こんばんは";
}

6. オブジェクトのルール

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

開始ブラケットはオブジェクト名と同じ行に置く。
各プロパティとその値の間には、コロン（:）とスペースを1つ入れる。
文字列の値には引用符を使用し、数値には使用しない。
最後のプロパティと値のペアの後にカンマを付けない。
終了ブラケットは、先頭にスペースを入れず、新しい行に置く。
オブジェクト定義は、必ずセミコロンで終了させる。

例：

const person = {
  firstName: "太郎",
  lastName: "田中",
  age: 50,
  eyeColor: "青"
};

短いオブジェクトは、次のようにスペースのみを使用して1行で圧縮して記述することもできます：

const person = {firstName:"太郎", lastName:"田中", age:50, eyeColor:"青"};

7. 行の長さ（Line Length）は80文字以内

可読性を高めるため、80文字を超える長い行は避けてください。
JavaScriptのステートメントが1行に収まらない場合、改行するのに最適な場所は演算子またはカンマの後です。

例：

document.getElementById("demo").innerHTML =
"こんにちは、ドリー。";

8. 命名規則（Naming Conventions）

すべてのコードで常に同じ命名規則を使用してください。

変数および関数名：キャメルケース（camelCase）
グローバル変数：大文字（UPPERCASE）を使用することもある
定数（例：PI）：大文字（UPPERCASE）

変数名にハイフン、キャメルケース、アンダースコアのどれを使うべきか？

HTML/CSSのハイフン： HTML5属性（data-quantity）やCSSプロパティ（font-size）で使用。しかしJavaScriptではハイフンは減算と誤認されるため、識別子名には使用できません。
アンダースコア（_）： SQLデータベースやPHPのドキュメントで好まれます。
パスカルケース（PascalCase）： C言語のプログラマに好まれる傾向があります。
キャメルケース（camelCase）： JavaScript自体、jQuery、その他の主要なライブラリで使用されています。

名前を $ 記号で始めないでください。多くのJavaScriptライブラリ名と衝突する可能性があります。

9. HTMLでのJavaScriptの読み込み

外部スクリプトの読み込みには単純な構文を使用します（type属性は不要です）。

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

10. HTML要素へのアクセス

「不適切な」HTMLスタイルを使用すると、JavaScriptのエラーを引き起こす可能性があります。
以下の2つのステートメントは、IDの大文字小文字が異なるため、別の結果をもたらします。

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

可能な限り、HTMLでもJavaScriptと同じ命名規則を使用することをお勧めします。

11. ファイル拡張子

HTMLファイル：.html （ .htm も許容）
CSSファイル：.css
JavaScriptファイル：.js

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

ほとんどのWebサーバー（Apache、Unix）は、ファイル名の大文字・小文字を区別（Case sensitive）します。
london.jpg に London.jpg としてアクセスすることはできません。

一方、MicrosoftのIISなどは区別しませんが、区別しないサーバーから区別するサーバーへ移行した場合、小さなミスでサイトが壊れる原因になります。これを避けるため、常に小文字のファイル名を使用するようにしてください。

13. パフォーマンス（Performance）

コーディング規約自体は、コンピュータによって実行されるものではありません。ほとんどのルールはプログラムの実行速度に影響を与えません。
インデントや余分なスペースは、小さなスクリプトでは無視できる程度です。

開発中は可読性を優先すべきであり、本番環境にデプロイする大規模なスクリプトは、ミニファイ（最小化/圧縮）して使用すべきです。