{"id":"javascript-pro","name":"javascript-pro","summary":"最新のES2023+機能、非同期/待機パターン、ESMモジュールシステム、Node.js APIを用いてJavaScriptコードを書き、デバッグし、リファクタリングします。","body":"# JavaScript Pro\n\n## When to Use This Skill\n\n- Building vanilla JavaScript applications\n- Implementing async/await patterns and Promise handling\n- Working with modern module systems (ESM/CJS)\n- Optimizing browser performance and memory usage\n- Developing Node.js backend services\n- Implementing Web Workers, Service Workers, or browser APIs\n\n## Core Workflow\n\n1. **Analyze requirements** — Review `package.json`, module system, Node version, browser targets; confirm `.js`/`.mjs`/`.cjs` conventions\n2. **Design architecture** — Plan modules, async flows, and error handling strategies\n3. **Implement** — Write ES2023+ code with proper patterns and optimisations\n4. **Validate** — Run linter (`eslint --fix`); if linter fails, fix all reported issues and re-run before proceeding. Check for memory leaks with DevTools or `--inspect`, verify bundle size; if leaks are found, resolve them before continuing\n5. **Test** — Write comprehensive tests with Jest achieving 85%+ coverage; if coverage falls short, add missing cases and re-run. Confirm no unhandled Promise rejections\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| Modern Syntax | `references/modern-syntax.md` | ES2023+ features, optional chaining, private fields |\n| Async Patterns | `references/async-patterns.md` | Promises, async/await, error handling, event loop |\n| Modules | `references/modules.md` | ESM vs CJS, dynamic imports, package.json exports |\n| Browser APIs | `references/browser-apis.md` | Fetch, Web Workers, Storage, IntersectionObserver |\n| Node Essentials | `references/node-essentials.md` | fs/promises, streams, EventEmitter, worker threads |\n\n## Constraints\n\n### MUST DO\n- Use ES2023+ features exclusively\n- Use `X | null` or `X | undefined` patterns\n- Use optional chaining (`?.`) and nullish coalescing (`??`)\n- Use async/await for all asynchronous operations\n- Use ESM (`import`/`export`) for new projects\n- Implement proper error handling with try/catch\n- Add JSDoc comments for complex functions\n- Follow functional programming principles\n\n### MUST NOT DO\n- Use `var` (always use `const` or `let`)\n- Use callback-based patterns (prefer Promises)\n- Mix CommonJS and ESM in the same module\n- Ignore memory leaks or performance issues\n- Skip error handling in async functions\n- Use synchronous I/O in Node.js\n- Mutate function parameters\n- Create blocking operations in the browser\n\n## Key Patterns with Examples\n\n### Async/Await Error Handling\n```js\n// ✅ Correct — always handle async errors explicitly\nasync function fetchUser(id) {\n  try {\n    const response = await fetch(`/api/users/${id}`);\n    if (!response.ok) throw new Error(`HTTP ${response.status}`);\n    return await response.json();\n  } catch (err) {\n    console.error(\"fetchUser failed:\", err);\n    return null;\n  }\n}\n\n// ❌ Incorrect — unhandled rejection, no null guard\nasync function fetchUser(id) {\n  const response = await fetch(`/api/users/${id}`);\n  return response.json();\n}\n```\n\n### Optional Chaining & Nullish Coalescing\n```js\n// ✅ Correct\nconst city = user?.address?.city ?? \"Unknown\";\n\n// ❌ Incorrect — throws if address is undefined\nconst city = user.address.city || \"Unknown\";\n```\n\n### ESM Module Structure\n```js\n// ✅ Correct — named exports, no default-only exports for libraries\n// utils/math.mjs\nexport const add = (a, b) => a + b;\nexport const multiply = (a, b) => a * b;\n\n// consumer.mjs\nimport { add } from \"./utils/math.mjs\";\n\n// ❌ Incorrect — mixing require() with ESM\nconst { add } = require(\"./utils/math.mjs\");\n```\n\n### Avoid var / Prefer const\n```js\n// ✅ Correct\nconst MAX_RETRIES = 3;\nlet attempts = 0;\n\n// ❌ Incorrect\nvar MAX_RETRIES = 3;\nvar attempts = 0;\n```\n\n## Output Templates\n\nWhen implementing JavaScript features, provide:\n1. Module file with clean exports\n2. Test file with comprehensive coverage\n3. JSDoc documentation for public APIs\n4. Brief explanation of patterns used\n\n[Documentation](https://jeffallan.github.io/claude-skills/skills/language/javascript-pro/)","author":"@Jeffallan","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/Jeffallan/claude-skills/tree/main/skills/javascript-pro","license":"MIT","category":"writing","lang":"en","tokens":970,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"references/async-patterns.md","size":8012,"sha256":"0a4e9a195d3f7f2d4e8b6c8a8c8a80c886733968e5d6aa3043900ae7975d8f52"},{"path":"references/browser-apis.md","size":9506,"sha256":"169bd23e862339654016ae52259597aca3cfb505bbf7e359f7648ef6e61845d7"},{"path":"references/modern-syntax.md","size":6078,"sha256":"88c6cb7b863067c364a5d4242c0a187098bdec50c4c05efb0ab9f90aedf3314f"},{"path":"references/modules.md","size":7679,"sha256":"d6fc9198f0ea7e2342d0927a524f98664ada8084a039fe70b1cc7abda0cf9af3"},{"path":"references/node-essentials.md","size":11230,"sha256":"d8863b3776d74816ba4855da31932198571484a295126a24bdaebeb3edf61729"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["esm.sh","jeffallan.github.io","mirror1.example.com","mirror2.example.com","mirror3.example.com"]}}