JavaScript

Learn simple rules to write clean, easy-to-read JavaScript — using let and const properly, keeping names consistent, and formatting your code neatly.

コード記述のルール

JavaScriptには公式の「言語仕様（ECMAScript仕様）」はあるものの、「こう書かなければならない」という絶対的な記述ルールは存在しません。しかし、可読性や保守性、パフォーマンス、セキュリティなどの観点から、多くのプロジェクトやコミュニティが “推奨される” コーディングスタイルやベストプラクティスを策定しています。代表的な例としては Airbnb JavaScript Style Guide や Google JavaScript Style Guide などが挙げられます。

大文字小文字の区別

JavaScriptでは、大文字・小文字を厳密に使い分ける必要があります。一例を挙げると、変数を宣言（使用）するときに let というキーワードを使いますが、これはすべて半角の小文字でなければなりません。例えば、次の例では、２つの文で意味が変わるため、注意が必要です。

JavaScript

let hello = "hello";    // これ（let）は変数hello が宣言される
Let bye = "goodbye";    // これ（Let）はエラーが発生する

また、変数を宣言する際の変数名も大文字・小文字が区別されるので注意してください。例えば、次の２つの変数は、それぞれ異なるものとみなされます。

JavaScript

let val = "これは小文字の変数名です。";
let VAL = "これは大文字のため、小文字の変数とは異なる変数とみなされます。";

全角半角の区別

プログラムのコードは、基本的に半角文字を使って記述します。ダブルクォート（"）で囲まれた文字列などの一部例外を除き、プログラム内で全角文字を使用することはありません。変数名では全角文字を使用できますが、不要なバグを招くため、文字列以外は半角英数字で記述するようにしたほうが良いようです。また、コードにスペースを挿入するときも、全角スペースではなく、半角スペース、またはタブを使うようにしてください。

JavaScript

let greeting = "半角英数字でコードは記述しましょう。";
ｌｅｔ　ｇｒｅｅｔｉｎｇ = "ｌｅｔが全角のためエラー";    // これ（ｌｅｔ）はエラーが発生する

変数宣言の方法

let / const を優先使用する

JavaScript

// 良い例
let count = 0;
const API_URL = 'https://example.com/api';

// 悪い例（古い書き方）
var age = 20;

スコープを意識する

セミコロン（;）の有無

JavaScriptは自動セミコロン挿入(ASI: Automatic Semicolon Insertion)という仕組みをもっており、行末のセミコロンがなくても動作します。しかし、ASIに依存すると想定外の動作を引き起こす場合があるため、多くのスタイルガイドでは「行末に常にセミコロンを書く」方針が推奨されています。

JavaScript

// 推奨（セミコロンをつける）
let name = 'Taro';
console.log(name);

// 非推奨（動作はするが想定外の挙動を起こすケースあり）
let name = 'Taro'
console.log(name)

インデントとスペース

インデント

JavaScript

// スペース2つ
function greet(name) {
	console.log(`Hello, ${name}`);
}

// スペース4つ
function greet(name) {
	console.log(`Hello, ${name}`);
}

スペースの使い方

JavaScript

// 一般的な例
if (isValid) {
	console.log('Valid!');
}

命名規則

変数・関数名

JavaScript

// 良い例
let userCount = 10;
function getUserName(userId) {
	// ...
}

// 悪い例
let x = 10;
function aaa(bbb) {
	// ...
}

クラス名

JavaScript

class UserManager {
	// ...
}

定数

JavaScript

const MAX_VALUE = 100;

関数の記法

通常の関数宣言

JavaScript

function greet(name) {
	console.log(`Hello, ${name}`);
}

関数式

JavaScript

const greet = function(name) {
	console.log(`Hello, ${name}`);
};

アロー関数式

JavaScript

const greet = (name) => {
	console.log(`Hello, ${name}`);
};

コードブロックと波括弧

if / else / for / while など

波括弧 {} は省略せずに書くことが推奨されます。ワンライナーのブロックでも{}をつけることで可読性と安全性が向上します。

JavaScript

// 推奨
if (isValid) {
	doSomething();
} else {
	doSomethingElse();
}

// 非推奨
if (isValid) doSomething();
else doSomethingElse();

文字列のクォート

JavaScript

// シングルクォート
const myString = 'Hello';

// ダブルクォート
const myString = "Hello";

// テンプレートリテラル
const name = 'Taro';
const greeting = `Hello, ${name}!`;

等価演算子

JavaScript

// 推奨
if (value === 10) {
	// ...
}

// 非推奨
if (value == 10) {
	// ...
}

ESLint や Prettier の活用

JavaScriptのスタイルや構文エラーを機械的にチェック＆修正するためのツールとして、ESLint と Prettier が広く利用されています。

ESLint
コードの品質やベストプラクティス違反を検知できるリンター。
Prettier
コードフォーマッター。自動でインデントやスペースを整形してくれる。

これらを使うと、チーム全体でフォーマットやルールを統一できるため、可読性が大幅に向上します。

そのほかのベストプラクティス

Strict Mode ("use strict") の使用
ES6以降、モジュールスクリプトではデフォルトで strict mode ですが、レガシーコードやグローバルスクリプトでは "use strict" を先頭に書くことでエラーを早期に検出できます。
配列メソッドの活用
ループで配列を操作する際は、forEach, map, filter, reduce などの高階関数を活用することでみやすさが向上します。
null / undefined のチェック
JavaScriptでは null と undefined が明確に区別されるため、条件分岐でどちらを想定しているを意識的に扱う必要があります。
オブジェクトの分割代入や配列の分割代入
ES6で導入された分割代入（Destructuring）を使うと、コードが分かりやすくなる場合が多いです

JavaScript

const user = { id: 1, name: 'Taro', age: 20 };
const { name, age } = user;
console.log(name, age); // 'Taro', 20
スプレッド構文
配列やオブジェクトをコピー・マージする際はスプレッド構文（...）が簡潔に書けて便利です。

JavaScript

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]
Promise / async/await
非同期処理はコールバックよりも Promise や async/await を使うと、可読性が高くエラーハンドングもしやすくなります。

JavaScript

// async/await の例
async function fetchData(url) {
	try {
		const response = await fetch(url);
		const data = await response.json();
		return data;
	} catch (error) {
		console.error(error);
		throw error;
	}
}

よくあるエラー早見表

Uncaught SyntaxError: Unexpected identifier

よくある原因
全角文字（全角スペース・全角英字）がコードに混ざっている／クォートが全角。
起きやすい例

JavaScript

ｌｅｔ name = "Taro";   // ← let が全角
直し方
半角英数字と半角スペースだけを使う。クォートも半角に。
チェックポイント
文字を一度消して半角で打ち直す。エディタの「不可視文字表示」をON。

Uncaught ReferenceError: xxx is not defined

よくある原因
変数の宣言漏れ／スコープ外で参照／大文字小文字の取り違え。
起きやすい例

JavaScript

console.log(userName);  // まだ宣言していない
let username = "taro";
console.log(userName);  // 大文字小文字が違う
直し方
先に let / const で宣言してから使う。綴りと大文字小文字を統一。
チェックポイント
その変数が上の行で宣言されているか、名前が完全一致か。

Uncaught SyntaxError: Unexpected token '['（または ( など）

よくある原因
セミコロン省略時に、次の行が [ や ( で始まるとASlが失敗。
起きやすい例

JavaScript

const name = 'Taro'
[1, 2, 3].forEach(n => console.log(n)) // ← 構文エラー
直し方
前の行の末尾にセミコロンを入れる。

JavaScript

const name = 'Taro';
[1, 2, 3].forEach(n => console.log(n));
チェックポイント
行頭が ( [ の行の前は必ずセミコロン。

Uncaught TypeError: xxx is not a function

よくある原因
関数だと思っていたものが実は数値・文字列など／同名の変数で上書き。
起きやすい例

JavaScript

function sum(a, b) { return a + b; }
let sum = 10;           // 関数名を変数で上書き
sum(1, 2);              // もう関数ではない → エラー
直し方
関数名と変数名を重ねない。呼び出し前に型をconsole.logで確認。
チェックポイント
typeof sum の結果が "function" かを確認。

Uncaught TypeError: Cannot read properties of undefined (reading 'xxx')

よくある原因
オブジェクトや配列の中身が undefined のままプロパティにアクセス。
起きやすい例

JavaScript

const user = undefined;
console.log(user.name); // undefined.name → エラー
直し方
値があるかチェックしてから読む。オプショナルチェーンも有効。

JavaScript

if (user) {
	console.log(user.name);
}
console.log(user?.name);
チェックポイント
データ取得が非同期のときに特に起きやすい（fetch後すぐに読む、など）。

Uncaught SyntaxError: Unexpected end of input

よくある原因
} や )、]、クォートの閉じ忘れ。
起きやすい例

JavaScript

function greet(name) {
	console.log("Hello, " + name);
// } が足りない
直し方
対になる記号をすべて閉じる。エディタの自動整形で位置を整える。
チェックポイント
VSCode の「Format Document」や波括弧のハイライトを活用。

Uncaught TypeError: Assignment to constant variable.

よくある原因
const で宣言した変数に再代入している。
起きやすい例

JavaScript

const count = 0;
count = 1;  // 再代入 → エラー
直し方
再代入が必要なら let を使う。const は「上書きしない」用。
チェックポイント
オブジェクトや配列の中身の変更はOK（参照は同じだから）。

Uncaught SyntaxError: Identifier 'xxx' has already been declared

よくある原因
同じスコープで let / const を二重宣言。
起きやすい例

JavaScript

let total = 0;
let total = 1;  // 同じスコープで再宣言 → エラー
直し方
1回だけ宣言し、値の変更は再代入で。
チェックポイント
ファイルを二重読み込みしていないか（scriptタグ重複など）。

Uncaught ReferenceError: Cannot access 'xxx' before initialization

よくある原因
let / const のTemporal Dead Zone(TDZ) で宣言前に参照。
起きやすい例

JavaScript

console.log(score); // ここではまだ使えない
let score = 10;
直し方
宣言の行より後で使う。宣言を上に移動。
チェックポイント
var と違い、let/const は巻き上げ後も未初期化で使えない。

SyntaxError: Invalid or unexpected token（コピペ直後に多発）

よくある原因
スマホやWebからのコピーでスマートクォート（ “ ” ‘ ’ ）が混入。
起きやすい例

JavaScript

console.log(“Hello”); // ← 見た目は似てるが別文字
直し方
クォートを手で打ち直す（半角 " または ' ）。
チェックポイント
置換で “ ” ‘ ’ → " or ' に。

SyntaxError: Unexpected token ' in JSON（JSON.parse で多発）

よくある原因
JSON文字列のクォートはダブルのみ。シングルは無効。
起きやすい例

JavaScript

JSON.parse('{\'name\':\'Taro\'}'); // ← JSONではNG
直し方
JSONはすべてダブルクォートで。

JavaScript

JSON.parse("{\"name\":\"Taro\"}");
チェックポイント
JSONとJavaScriptオブジェクトリテラルの書式の違いに注意。

TypeError: this is undefined（クラスやイベントで）

よくある原因
アロー関数で this を期待している／呼び出し方で this が変わる。
起きやすい例

JavaScript

const obj = {
	name: "Taro",
	getName: () => {
		return this.name; // アローでは this が外側を参照 → undefined
	}
};
console.log(obj.getName());
直し方
this を使うメソッドは通常の関数で書く。

JavaScript

const obj = {
	name: "Taro",
	getName() {
		return this.name;
	}
};
チェックポイント
アロー関数は this を束縛しない （外側の this を参照）。

TypeError: Cannot read properties of null (reading 'xxx')（DOM操作）

よくある原因
document.querySelector が要素を見つけられていない／実行時点で未生成。
起きやすい例

JavaScript

const el = document.querySelector('#app');
el.textContent = 'Hello'; // #app が無い → null.textContent
直し方
セレクタの綴り・存在を確認。DOMContentLoaded 後に実行。

JavaScript

document.addEventListener('DOMContentLoaded', () => {
	const el = document.querySelector('#app');
	if (el) {
		el.textContent = 'Hello';
	}
});
チェックポイント
<script> を </body> 直前に置く方法も有効。

SyntaxError: await is only valid in async functions

よくある原因
await を async 関数の外で使っている。
起きやすい例

JavaScript

const data = await fetch('/api'); // async じゃない → エラー
直し方
async function の中で await を使う。

JavaScript

async function main() {
	const res = await fetch('/api');
	const data = await res.json();
	console.log(data);
}
main();
チェックポイント
モジュール(type="module")ならトップレベル await が使える環境もあるが、まずは async function に入れるのが安全。

Uncaught (in promise) TypeError/ReferenceError ...（未処理のPromise拒否）

よくある原因
async/await で try...catch を付けていない／.catch() を忘れた。
起きやすい例

JavaScript

async function load() {
	const res = await fetch('/nope'); // 失敗しても握りつぶされず上がる
	return res.json();
}
load(); // 例外が未処理で「Unhandled」になる
直し方

JavaScript

async function load() {
	try {
		const res = await fetch('/nope');
		if (!res.ok) throw new Error(res.statusText);
		return await res.json();
	} catch (e) {
		console.error(e);
		return null;
	}
}
チェックポイント
await の行にはエラーが来る前提で囲う癖を。

TypeError: xxx is not iterable（for...of / スプレッド）

よくある原因
null や普通のオブジェクトを反復可能だと思って使う。
起きやすい例

JavaScript

const obj = { a: 1, b: 2 };
for (const v of obj) {  // オブジェクトは iterable ではない
	console.log(v);
}
直し方
オブジェクトなら Object.entries(obj) を使う。

JavaScript

for (const [k, v] of Object.entries(obj)) {
	console.log(k, v);
}
チェックポイント
for...of は配列・文字列・Map/Set などに。

CORS／ネットワーク関連（ブラウザコンソールに赤字が並ぶ）

よくある原因
別ドメインのAPIへ直接アクセス／サーバー側に Access-Control-Allow-Origin が無い。
起きやすい例

JavaScript

const res = await fetch('https://api.example.com/data'); // CORS制限に当たる
直し方
サーバー側でCORSヘッダーを許可／自分のサーバー経由のプロキシを挟む。
チェックポイント
クライアント側だけでは回避できないことが多い（設定はサーバー側）。

使い方のコツ