Write cleaner, more maintainable JavaScript using ES6+ features like async/await, destructuring, spread operators, and functional programming patterns.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「modern-javascript-patterns」を使用しています。 Convert this callback to async/await: function getData(id, callback) { fetch('/api/' + id) .then(res => res.json()) .then(data => callback(null, data)) .catch(err => callback(err)); }
期待される結果:
Refactored async/await version:
async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}
Benefits:
- Cleaner, synchronous-looking code
- Better error handling with try/catch
- Easier to debug and maintain
「modern-javascript-patterns」を使用しています。 Apply destructuring to this code: const user = { name: 'John', age: 30, address: { city: 'NYC' } }; const name = user.name; const city = user.address.city;
期待される結果:
Refactored with destructuring:
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
Or with renaming:
const { name: userName, address: { city: userCity } } = user;
セキュリティ監査
安全All 89 static findings are FALSE POSITIVES. The scanner misinterprets JavaScript code examples in markdown documentation as security risks. Backticks in code blocks are not shell commands. References to fetch() and dynamic import() are legitimate ES6+ patterns being taught. This is a safe educational skill about modern JavaScript patterns.
高リスクの問題 (1)
中リスクの問題 (2)
低リスクの問題 (2)
品質スコア
作れるもの
Legacy Code Modernization
Refactor older callback-based JavaScript code to use Promises and async/await for better readability and error handling.
Learning Modern JavaScript
Understand and apply ES6+ features like destructuring, spread operators, and modules to write more expressive code.
Code Review Improvements
Apply modern JavaScript patterns during code reviews to suggest cleaner, more maintainable implementations.
これらのプロンプトを試す
Convert this callback-based JavaScript function to use async/await syntax. Show the before and after code. [Insert callback code here]
Refactor this JavaScript code to use object and array destructuring. Make the code more concise and readable. [Insert code with nested properties or arrays here]
Transform this imperative JavaScript code to use functional programming with map, filter, and reduce. Show a chainable pipeline approach. [Insert loop-based transformation code here]
Show me how to implement lazy loading with dynamic import() for this feature module. Include error handling and conditional loading logic.
ベストプラクティス
- Use const by default, let only when reassignment is needed
- Prefer arrow functions for callbacks to avoid this binding issues
- Use async/await over Promise chains for better readability
回避
- Using var instead of const/let - lacks block scoping
- Callback hell with nested anonymous functions
- Mutating objects directly instead of using immutable patterns
よくある質問
What is the difference between let and const?
When should I use async/await over Promises?
What is destructuring in JavaScript?
What are the benefits of arrow functions?
What is the spread operator used for?
How do dynamic imports help performance?
開発者の詳細
作成者
sickn33ライセンス
MIT
リポジトリ
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patterns参照
main
ファイル構成