JavaScript

JavaScript coding rules focus on consistently using let and const without omitting semicolons, unifying indentation and naming conventions, employing strict equality operators, and leveraging tools like ESLint and Prettier for automatic formatting and error detection, all to maintain readability, maintainability, and overall code quality.

コード記述のルール

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