スキル一覧に戻る
doanchienthangdev

writing-javascript

by doanchienthangdev

Omega Vibecode Kit

2🍴 1📅 2026年1月21日
GitHubで見るManusで実行

SKILL.md


name: Writing JavaScript description: Writes modern JavaScript with ES2024+ features, async patterns, and functional programming. Use when building Node.js applications, implementing async workflows, or writing clean maintainable code. category: languages triggers:

  • javascript
  • js
  • es6
  • es2024
  • ecmascript
  • node
  • nodejs
  • npm

Writing JavaScript

Quick Start

// Modern destructuring and spread
const { name, email, role = 'user' } = user;
const settings = { ...defaults, theme: 'dark' };
const [first, ...rest] = items;

// Optional chaining and nullish coalescing
const street = user?.address?.street ?? 'Unknown';
config.timeout ??= 5000;

// Async/await with error handling
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 (error) {
    console.error('Failed to fetch:', error);
    throw error;
  }
}

// Functional composition
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const processData = pipe(filter(isValid), map(transform), reduce(aggregate, []));

Features

FeatureDescriptionGuide
DestructuringExtract values from objects and arraysUse const { a, b } = obj or const [x, y] = arr
Spread OperatorExpand iterables and merge objectsUse ... for shallow copies and merging
Optional ChainingSafe property access on nullable valuesUse ?. to avoid "cannot read property" errors
Nullish CoalescingDefault values for null/undefined onlyUse ?? instead of || for falsy values
Async/AwaitClean asynchronous code flowUse try/catch for error handling
Promise MethodsParallel and conditional executionUse all, allSettled, race, any for concurrency
Array MethodsFunctional array transformationsUse map, filter, reduce, find, at, toSorted
ClassesObject-oriented patterns with private fieldsUse # prefix for truly private members
ModulesESM import/export for code organizationUse named exports and barrel files
IteratorsCustom iteration with generatorsUse function* and for...of loops

Common Patterns

Async Patterns with Concurrency Control

// Parallel execution
const [user, posts] = await Promise.all([fetchUser(id), fetchPosts(id)]);

// Handle mixed success/failure
const results = await Promise.allSettled(ids.map(fetchUser));
const successful = results.filter(r => r.status === 'fulfilled').map(r => r.value);
const failed = results.filter(r => r.status === 'rejected').map(r => r.reason);

// Retry with exponential backoff
async function withRetry(fn, maxRetries = 3, baseDelay = 1000) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxRetries - 1) throw error;
      await new Promise(r => setTimeout(r, baseDelay * Math.pow(2, attempt)));
    }
  }
}

// Concurrent execution with limit
async function mapConcurrent(items, fn, limit = 5) {
  const results = [];
  const executing = new Set();
  for (const item of items) {
    const promise = fn(item).then(r => { executing.delete(promise); return r; });
    executing.add(promise);
    results.push(promise);
    if (executing.size >= limit) await Promise.race(executing);
  }
  return Promise.all(results);
}

Functional Programming Utilities

// Currying
const curry = fn => function curried(...args) {
  return args.length >= fn.length ? fn(...args) : (...next) => curried(...args, ...next);
};

// Memoization
const memoize = fn => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
};

// Immutable updates
const updateUser = (user, updates) => ({ ...user, ...updates, updatedAt: new Date() });
const addItem = (arr, item) => [...arr, item];
const removeAt = (arr, i) => [...arr.slice(0, i), ...arr.slice(i + 1)];

Error Handling with Result Type

class Result {
  constructor(value, error) { this.value = value; this.error = error; }
  static ok(value) { return new Result(value, null); }
  static err(error) { return new Result(null, error); }
  isOk() { return this.error === null; }
  map(fn) { return this.isOk() ? Result.ok(fn(this.value)) : this; }
  unwrapOr(defaultValue) { return this.isOk() ? this.value : defaultValue; }
}

async function safeFetch(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) return Result.err(new Error(`HTTP ${res.status}`));
    return Result.ok(await res.json());
  } catch (e) { return Result.err(e); }
}

// Usage
const result = await safeFetch('/api/data');
const data = result.map(d => d.items).unwrapOr([]);

Event Emitter Pattern

class EventEmitter {
  constructor() { this.events = new Map(); }

  on(event, listener) {
    if (!this.events.has(event)) this.events.set(event, new Set());
    this.events.get(event).add(listener);
    return () => this.off(event, listener);
  }

  off(event, listener) { this.events.get(event)?.delete(listener); }

  emit(event, ...args) {
    this.events.get(event)?.forEach(listener => listener(...args));
  }

  once(event, listener) {
    const wrapper = (...args) => { listener(...args); this.off(event, wrapper); };
    return this.on(event, wrapper);
  }
}

Modern Collection Usage

// Map for key-value with any type keys
const cache = new Map();
cache.set(userObj, 'data'); // Object as key
for (const [key, value] of cache) { /* iterate */ }

// Set for unique values and operations
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const union = new Set([...setA, ...setB]);
const intersection = new Set([...setA].filter(x => setB.has(x)));

// WeakMap for private data without memory leaks
const privateData = new WeakMap();
class Secret {
  constructor(value) { privateData.set(this, { value }); }
  getValue() { return privateData.get(this).value; }
}

Best Practices

DoAvoid
Use const by default, let only when neededUsing var for variable declarations
Use === for strict equality comparisonsUsing == which allows type coercion
Use async/await over raw promise chainsDeep nesting with .then() callbacks
Use optional chaining for safe property accessManual null checks at every level
Use destructuring for cleaner parameter extractionAccessing object properties repeatedly
Use template literals for string interpolationString concatenation with +
Use arrow functions for callbacksUsing function expressions for simple callbacks
Handle promise rejections explicitlyIgnoring unhandled rejection warnings
Use modules (ESM) for code organizationPolluting the global namespace
Write pure functions when possibleFunctions with hidden side effects
  • typescript - Type-safe JavaScript development
  • nodejs - Server-side JavaScript runtime
  • react - JavaScript UI framework

References

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です