javascript

JavaScript 開発

モダンでクリーンな JavaScript と TypeScript を記述します。

使用する場面

• JavaScript／TypeScript コードの作成
• 非同期処理のデバッグと最適化
• Node.js 開発
• ブラウザー互換性の問題
• モジュールシステムに関する質問

モダン JavaScript のパターン

Async/Await

// Prefer async/await over promise chains
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    throw error;
  }
}

// Parallel execution
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// Error handling for multiple promises
const results = await Promise.allSettled([task1(), task2(), task3()]);
const succeeded = results.filter((r) => r.status === "fulfilled");

分割代入とスプレッド構文

// Object destructuring with defaults
const { name, age = 0, ...rest } = user;

// Array methods
const active = users.filter((u) => u.active).map((u) => u.name);

// Object spread for immutable updates
const updated = { ...user, name: "New Name" };

クラスとモジュール

// ES modules
export class UserService {
  #privateField; // Private field

  constructor(config) {
    this.#privateField = config.secret;
  }

  async getUser(id) {
    return await this.#fetch(`/users/${id}`);
  }
}

// Named and default exports
export { UserService };
export default UserService;

TypeScript のパターン

// Interfaces over types for objects
interface User {
  id: string;
  name: string;
  email?: string;
}

// Generics
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Utility types
type CreateUser = Omit<User, "id">;
type ReadonlyUser = Readonly<User>;

Node.js のパターン

// ESM in Node.js
import { readFile } from "fs/promises";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

// Streams for large files
import { createReadStream, createWriteStream } from "fs";
import { pipeline } from "stream/promises";

await pipeline(
  createReadStream("input"),
  transform,
  createWriteStream("output"),
);

よくある落とし穴

• this のバインド（アロー関数または .bind() を使用）
• 未処理の Promise（必ず await するか、処理する）
• == と === の違い（必ず === を使用）
• 配列の変更（map／filter は新しい配列を返し、sort は配列を変更します）

例

入力：「非同期処理の問題を修正して」 **アクション：**未処理の Promise、競合状態、適切なエラー処理を確認します

入力：「TypeScript に変換して」 **アクション：**型とインターフェースを追加し、型エラーを修正して、tsconfig を設定します