javascript-pro

JavaScript Pro

このスキルを使用する場面

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

基本的なワークフロー

1. 要件を分析する — package.json、モジュールシステム、Node のバージョン、対象ブラウザーを確認し、.js/.mjs/.cjs の規約を確認します
2. アーキテクチャを設計する — モジュール、非同期処理のフロー、エラー処理の方針を計画します
3. 実装する — 適切なパターンと最適化を用いて ES2023+ のコードを記述します
4. 検証する — リンターを実行します（eslint --fix）。リンターが失敗した場合は、報告された問題をすべて修正してから、次に進む前に再実行します。DevTools または --inspect でメモリーリークを確認し、バンドルサイズを検証します。リークが見つかった場合は、続行する前に解消します
5. テストする — Jest で網羅的なテストを作成し、カバレッジ 85% 以上を達成します。カバレッジが不足する場合は、足りないケースを追加して再実行します。未処理の Promise の拒否がないことを確認します

リファレンスガイド

状況に応じて、詳細なガイダンスを読み込みます。

トピック	リファレンス	読み込むタイミング
モダンな構文	references/modern-syntax.md	ES2023+ の機能、オプショナルチェーン、プライベートフィールド
非同期パターン	references/async-patterns.md	Promise、async/await、エラー処理、イベントループ
モジュール	references/modules.md	ESM と CJS の比較、動的インポート、package.json の exports
ブラウザー API	references/browser-apis.md	Fetch、Web Workers、Storage、IntersectionObserver
Node の基礎	references/node-essentials.md	fs/promises、ストリーム、EventEmitter、ワーカースレッド

制約事項

必ず行うこと

• ES2023+ の機能のみを使用する
• X | null または X | undefined のパターンを使用する
• オプショナルチェーン（?.）と Null 合体演算子（??）を使用する
• すべての非同期処理で async/await を使用する
• 新規プロジェクトでは ESM（import/export）を使用する
• try/catch で適切なエラー処理を実装する
• 複雑な関数には JSDoc コメントを追加する
• 関数型プログラミングの原則に従う

必ず避けること

• var を使用する（常に const または let を使用する）
• コールバックベースのパターンを使用する（Promise を優先する）
• 同じモジュール内で CommonJS と ESM を混在させる
• メモリーリークやパフォーマンスの問題を放置する
• 非同期関数でエラー処理を省略する
• Node.js で同期 I/O を使用する
• 関数のパラメーターを変更する
• ブラウザーでブロッキング処理を作成する

主要なパターンと例

Async/Await のエラー処理

// ✅ Correct — always handle async errors explicitly
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;
  }
}

// ❌ Incorrect — unhandled rejection, no null guard
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

オプショナルチェーンと Null 合体演算子

// ✅ Correct
const city = user?.address?.city ?? "Unknown";

// ❌ Incorrect — throws if address is undefined
const city = user.address.city || "Unknown";

ESM モジュールの構成

// ✅ Correct — named exports, no default-only exports for libraries
// 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";

// ❌ Incorrect — mixing require() with ESM
const { add } = require("./utils/math.mjs");

var を避け、const を優先する

// ✅ Correct
const MAX_RETRIES = 3;
let attempts = 0;

// ❌ Incorrect
var MAX_RETRIES = 3;
var attempts = 0;

出力テンプレート

JavaScript の機能を実装する際は、以下を提供します。

1. エクスポートを整理したモジュールファイル
2. 網羅的なカバレッジを備えたテストファイル
3. 公開 API の JSDoc ドキュメント
4. 使用したパターンの簡潔な説明

ドキュメント