javascript-pro

JavaScript Pro

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

• バニラ 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. 使用したパターンの簡潔な説明

Synergetic Solutions のプリンシパルコンサルタント、@jeffallan がメンテナンスしています

ドキュメント