JavaScript Pro

このスキルを使う時

• バニラ JavaScript アプリケーションの構築
• async/await パターンと Promise ハンドリングの実装
• モダンモジュールシステム (ESM/CJS) の操作
• ブラウザのパフォーマンスとメモリ使用量の最適化
• Node.js バックエンドサービスの開発
• Web Workers、Service Workers、またはブラウザ API の実装

コアワークフロー

1. 要件の分析 — package.json、モジュールシステム、Node バージョン、ブラウザターゲットを確認；.js/.mjs/.cjs の規約を確認
2. アーキテクチャの設計 — モジュール、async フロー、エラーハンドリング戦略を計画
3. 実装 — ES2023+ コードを適切なパターンと最適化で記述
4. 検証 — リンター実行 (eslint --fix)；リンターが失敗した場合、すべての報告された問題を修正して再実行。DevTools または --inspect でメモリリークをチェック；バンドルサイズを検証；リークが見つかった場合は続行前に解決
5. テスト — Jest で 85%+ カバレッジを達成する包括的なテストを記述；カバレッジが不足する場合は欠落ケースを追加して再実行。未処理の Promise リジェクションがないことを確認

リファレンスガイド

コンテキストに基づいて詳細なガイダンスを読み込む：

トピック	リファレンス	読み込むタイミング
モダン構文	references/modern-syntax.md	ES2023+ フィーチャー、オプショナルチェーン、プライベートフィールド
Async パターン	references/async-patterns.md	Promises、async/await、エラーハンドリング、イベントループ
モジュール	references/modules.md	ESM vs CJS、動的インポート、package.json exports
ブラウザ API	references/browser-apis.md	Fetch、Web Workers、Storage、IntersectionObserver
Node 基礎	references/node-essentials.md	fs/promises、streams、EventEmitter、worker threads

制約

必須事項

• ES2023+ フィーチャーのみを使用
• X | null または X | undefined パターンを使用
• オプショナルチェーン (?.) と nullish coalescing (??) を使用
• すべての非同期操作に async/await を使用
• 新規プロジェクトでは ESM (import/export) を使用
• try/catch を使用した適切なエラーハンドリングを実装
• 複雑な関数に JSDoc コメントを追加
• 関数型プログラミングの原則に従う

禁止事項

• var を使用しない（常に const または let を使用）
• コールバックベースのパターンを使用しない（Promises を優先）
• 同じモジュール内で CommonJS と ESM を混在させない
• メモリリークやパフォーマンスの問題を無視しない
• async 関数でエラーハンドリングをスキップしない
• Node.js で同期 I/O を使用しない
• 関数のパラメータをミューテートしない
• ブラウザでブロッキング操作を作成しない

主なパターンと例

Async/Await エラーハンドリング

// ✅ 正しい — async エラーは常に明示的に処理
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error("fetchUser failed:", err);
    return null;
  }
}

// ❌ 誤り — 未処理のリジェクション、null ガードなし
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

オプショナルチェーン & Nullish Coalescing

// ✅ 正しい
const city = user?.address?.city ?? "Unknown";

// ❌ 誤り — address が undefined の場合スロー
const city = user.address.city || "Unknown";

ESM モジュール構造

// ✅ 正しい — named exports、ライブラリ用の default-only export ではない
// utils/math.mjs
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// consumer.mjs
import { add } from "./utils/math.mjs";

// ❌ 誤り — require() と ESM の混在
const { add } = require("./utils/math.mjs");

var を避ける / const を優先

// ✅ 正しい
const MAX_RETRIES = 3;
let attempts = 0;

// ❌ 誤り
var MAX_RETRIES = 3;
var attempts = 0;

出力テンプレート

JavaScript フィーチャーを実装する場合、以下を提供：

1. クリーンな export を持つモジュールファイル
2. 包括的なカバレッジを持つテストファイル
3. パブリック API の JSDoc ドキュメント
4. 使用されたパターンの簡潔な説明

ドキュメント