メインコンテンツまでスキップ

ベストプラクティス

ここまでの知識を踏まえ、読みやすく保守しやすいコードを書くための基本的な習慣を紹介します。

1. 変数と関数の命名規則​

// キャメルケース（変数・関数）
let firstName = "太郎";
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// パスカルケース（クラス名・コンストラクタ関数）
// ※ class 自体は本ガイドの範囲外。ここでは「パスカルケースで書く対象」の例として見てください
class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

// アッパースネークケース（定数）
const MAX_SIZE = 100;
const API_ENDPOINT = "https://api.example.com";
初級者向け解説

名前を見ただけで「何を表すか」「どう使うか」が分かるようにするのが命名の目的です。対象ごとにケース（書式）を統一すると、コードの種類が一目で分かります。なお user_name のようなスネークケースは JavaScript では一般的ではありません。

2. コードの構造化​

関連する機能をオブジェクトにまとめると、見通しが良くなります。

// ユーザー関連の機能をまとめる
const userService = {
  login(username, password) {
    console.log(`${username} がログインしました`);
  },
  logout() {
    console.log("ログアウトしました");
  },
  getProfile(userId) {
    return { id: userId, name: "太郎" };
  }
};

userService.login("taro", "password");
console.log(userService.getProfile(1)); // { id: 1, name: '太郎' }

3. エラー処理​

try-catch で、エラーが起きても処理を止めずに対応できます。

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("0で割ることはできません");
    }
    return a / b;
  } catch (error) {
    console.error("エラーが発生しました:", error.message);
    return null; // デフォルト値を返す
  } finally {
    console.log("処理が完了しました");
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null (エラーをキャッチ)
エラー内容を使わないとき

エラーオブジェクトを使わない場合、catch {} のように引数を省略できます（ES2019）。

try {
  riskyOperation();
} catch {
  console.log("失敗しましたが処理を続けます");
}

4. モジュール化（ES6）​

機能をファイルごとに分け、export / import で再利用します。

// math.js
export function add(a, b) {
  return a + b;
}

// デフォルトエクスポート
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add } from './math.js';

console.log(add(5, 3));      // 8
console.log(multiply(2, 6)); // 12
ブラウザでモジュールを使うとき

ブラウザで ES モジュールを読み込むには <script type="module"> を指定し、import するパスには ./math.js のように 拡張子まで 書く必要があります。Node.js の ES モジュールも同様に拡張子必須で、省略できるのはバンドラー経由や CommonJS の require の場合です。

5. デバッグ技術​

console には用途別のメソッドがあります。

console.log("基本的なログ出力");
console.warn("警告メッセージ");
console.error("エラーメッセージ");

// データを表形式で表示
console.table([
  { name: "鈴木", age: 30 },
  { name: "佐藤", age: 25 }
]);

// 実行時間の測定
console.time("処理時間");
for (let i = 0; i < 1000000; i++) {
  // 何か処理
}
console.timeEnd("処理時間"); // 処理時間: 1.234ms

おわりに​

このガイドで JavaScript の基本的な概念と使い方を学びました。実際にコードを書いて試すことで、理解が深まります。

次のステップとして、型による安全性を高める TypeScript ガイド、コード品質を底上げする Clean Code に進むのがおすすめです。