JavaScript開発で役立つ便利なTips 2024年版

Javascript は常に進化し続けており、新しい機能や便利な書き方が次々と登場しています。今回は、2024 年のモダンな javascript 開発で役立つ Tips を紹介します。

1. Optional Chainingとnullish coalescingの活用

オブジェクトのネストが深い場合、エラーを避けるための冗長なチェックが必要でしたが、Optional Chaining を使えばスッキリ書けます。

// 従来の書き方
const city = user && user.address && user.address.city;

// Optional Chainingを使った書き方
const city = user?.address?.city;

// Nullish coalescingと組み合わせる
const displayName = user?.name ?? 'ゲストユーザー';

2. 配列の便利メソッド

ECMAScript 2023 で追加された新しい配列メソッドを活用しましょう。

// toSorted() - 元の配列を変更せずにソート
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.toSorted(); // [1, 1, 3, 4, 5]
console.log(numbers); // [3, 1, 4, 1, 5] (元の配列は変更されない)

// toReversed() - 元の配列を変更せずに反転
const reversed = numbers.toReversed(); // [5, 1, 4, 1, 3]

// with() - 特定のインデックスの要素を置き換えた新しい配列を作成
const updated = numbers.with(2, 99); // [3, 1, 99, 1, 5]

3. 構造化とスプレッド構文の応用

オブジェクトの操作をより簡潔に書く方法です。

// オブジェクトの一部を除外する
const user = { id: 1, name: 'Taro', email: 'taro@example.com', password: 'secret' };
const { password, ...publicData } = user;
console.log(publicData); // { id: 1, name: 'Taro', email: 'taro@example.com' }

// 条件付きでプロパティを追加
const config = {
  baseURL: 'https://api.example.com',
  timeout: 5000,
  ...(isDevelopment && { debug: true }),
  ...(token && { headers: { Authorization: `Bearer ${token}` } }),
};

4. Promise.allSettledでエラーハンドリング

複数の非同期処理を並列実行する際、1 つでも失敗したら全て失敗扱いになる Promise.all の代わりに、Promise.allSettled を使うことで個別に結果を処理できます。

const promises = [fetch('/api/user'), fetch('/api/posts'), fetch('/api/comments')];

const results = await Promise.allSettled(promises);

results.forEach((result, index) => {
  if (result.status === 'fulfilled') {
    console.log(`API ${index} 成功:`, result.value);
  } else {
    console.error(`API ${index} 失敗:`, result.reason);
  }
});

5. WeakMapを使ったプライベートフィールド

クラスのプライベートフィールドを WeakMap で実装する方法です。

const privateData = new WeakMap();

class User {
  constructor(name, email) {
    privateData.set(this, { email });
    this.name = name;
  }

  getEmail() {
    return privateData.get(this).email;
  }

  setEmail(email) {
    const data = privateData.get(this);
    data.email = email;
  }
}

const user = new User('Taro', 'taro@example.com');
console.log(user.name); // 'Taro'
console.log(user.email); // undefined (直接アクセスできない)
console.log(user.getEmail()); // 'taro@example.com'

6. Generatorを使った遅延評価

大量のデータを扱う際、メモリ効率を考慮して Generator を使う方法です。

function* fibonacci(limit) {
  let [prev, curr] = [0, 1];

  while (curr <= limit) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

// 必要な分だけ計算される
for (const num of fibonacci(100)) {
  console.log(num); // 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
}

// 配列に変換
const fibArray = [...fibonacci(50)]; // [1, 1, 2, 3, 5, 8, 13, 21, 34]

7. Proxyを使った動的なプロパティアクセス

オブジェクトのプロパティアクセスをカスタマイズする高度なテクニックです。

const handler = {
  get(target, property) {
    if (property in target) {
      console.log(`プロパティ "${property}" にアクセスしました`);
      return target[property];
    }
    return `プロパティ "${property}" は存在しません`;
  },

  set(target, property, value) {
    console.log(`プロパティ "${property}" に "${value}" を設定しました`);
    target[property] = value;
    return true;
  },
};

const user = new Proxy({ name: 'Taro' }, handler);

console.log(user.name); // "プロパティ "name" にアクセスしました" → "Taro"
console.log(user.age); // "プロパティ "age" は存在しません"
user.email = 'taro@example.com'; // "プロパティ "email" に "taro@example.com" を設定しました"

まとめ

Javascript は豊富な機能を持つ言語です。これらのテクニックを適切に使うことで、より簡潔で保守性の高いコードを書くことができます。

ただし、過度に高度な機能を使うとコードの可読性が下がることもあるので、チームメンバーのスキルレベルやプロジェクトの要件に応じて適切に選択することが重要です。

次回は、typescript の型システムを活用した安全なコーディングテクニックについて紹介予定です。お楽しみに！