mcpField
C
coding-javascript

coding-javascript

github.com/alphaonedev開発53 回インストール
リポジトリ

coding-javascript について

coding-javascript は、OpenClaw で現代的な JavaScript のコーディングを支援するスキルです。ブラウザー開発を中心に、DOM、非同期処理、ジェネレーター、WeakRef、Proxy などを扱います。

主な機能

  1. 01DOM 要素の操作
  2. 02fetch と async/await の利用
  3. 03ジェネレーターの活用
  4. 04WeakRef による参照管理
  5. 05Proxy による動作のカスタマイズ
  6. 06現代的な JavaScript パターンの適用

活用シーン

  1. 01インタラクティブなブラウザーアプリの構築
  2. 02API リクエストと応答の処理
  3. 03ジェネレーターによる値の処理
  4. 04Proxy によるオブジェクト変更の検証

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill coding-javascript

インストール後、Claude Code で/coding-javascriptを入力して読み込まれたか確認します。

詳細

coding-javascript

目的

このスキルは、DOM 操作、非同期処理、高度なパターンなど、最新のブラウザーを使った開発に重点を置き、ES2024 の機能を活用した JavaScript のコーディングタスクを OpenClaw が支援できるようにします。

使用する場面

インタラクティブな Web アプリの構築、API リクエストの処理、WeakRef を使った効率的なメモリ管理の実装など、フロントエンドの JavaScript に関する支援が必要な場合にこのスキルを使用します。特にブラウザー環境で、ES6 以降の環境におけるプロミス、ジェネレーター、Proxy を扱うタスクに適用します。

主な機能

  • querySelector とイベントリスナーを使って DOM 要素を操作します。
  • fetch API、プロミス、async/await を使って非同期コードを処理します。
  • ループ内で値を yield するなど、反復処理にジェネレーターを使用します。
  • ガベージコレクションに適した参照として WeakRef を使い、メモリを管理します。
  • プロパティアクセスのトラップなど、オブジェクトの動作をカスタマイズする Proxy を実装します。
  • モジュール、アロー関数、分割代入などの最新パターンを適用します。

使用パターン

このスキルを呼び出すには、OpenClaw コマンドでユーザーのクエリに「use coding-javascript」を付けます。例：「openclaw use coding-javascript and write a fetch function」。コードを生成する場合は、変数名や API エンドポイントなどの具体的な入力を指定します。必要に応じて、「WeakRef を使ってコードを生成する」のように ES2024 の機能を必ず指定してください。「use coding-javascript then coding-web for full-stack advice」のようにスキルを連結して統合します。デプロイ前に、ブラウザーのコンソールで出力をテストしてください。

一般的なコマンド/API

OpenClaw CLI を使って有効化します：openclaw run coding-javascript --query="explain promises"。JavaScript の詳細については、以下を参照してください。

  • Fetch API：fetch('https://api.example.com/data', { method: 'GET' }) を使ってリクエストを行い、.then(response => response.json()) でレスポンスを処理します。
  • プロミス：.then() と .catch() でチェーンします。例：new Promise(resolve => resolve('data')).then(data => console.log(data))。
  • ジェネレーター：function* gen() { yield 1; yield 2; } で定義し、for (let value of gen()) { console.log(value); } で反復処理します。
  • WeakRef：new WeakRef(object) で作成し、.deref() で参照を取得します。ガベージコレクション済みの場合は null になる可能性があります。
  • Proxy：new Proxy(target, { get: (target, prop) => console.log(prop) }) で設定し、アクセスをインターセプトします。 設定形式：スキル入力には JSON を使用します。例：OpenClaw の設定で { "feature": "promises", "example": true }。外部 API を使用する場合は、スクリプト内で $JAVASCRIPT_API_KEY などの環境変数を使って認証を設定します。

統合に関する注意

「openclaw chain coding-javascript and coding-css」のように、複数スキルのワークフローにこのスキルを含めて、OpenClaw と統合します。ブラウザー環境では、Chrome や Node.js v14+ などの最新のエンジンでコードが動作することを確認してください。シークレットには環境変数を使用します。例：export $FETCH_API_KEY を設定し、コード内で process.env.FETCH_API_KEY として参照します。「ES2024 のみを使用する」のようにバージョンを指定して、競合を避けてください。テストする場合は、コードをモジュールでラップします：import { fetch } from 'whatwg-fetch';。

エラー処理

非同期コードは、必ず try-catch ブロックでラップしてください。例：

try {
  await fetch('url').then(res => res.json());
} catch (error) {
  console.error('Fetch failed:', error.message);
}

プロミスには .catch() を使います：promise.then(data => process(data)).catch(err => logError(err))。ジェネレーターでは、ループ内の try-catch で反復処理のエラーを処理します。Proxy では、ハンドラー内でエラーをトラップします。例：new Proxy({}, { get: (target, prop) => { if (!target[prop]) throw new Error('Property not found'); } })。WeakRef が有効か確認します：if (weakRef.deref() !== undefined) { useObject(); }。OpenClaw では、openclaw log --skill=coding-javascript --error=details でエラーを記録します。

具体的な使用例

  1. ユーザーデータを取得して表示する場合：openclaw use coding-javascript and generate: const userId = 1; fetch(https://api.example.com/users/${userId}`).then(res => res.json()).then(data => console.log(data.name));`を使用します。
  2. Proxy ベースの検証の場合：openclaw use coding-javascript and code: const handler = { set: (obj, prop, value) => { if (prop === 'age' && value < 18) throw Error('Underage'); obj[prop] = value; } }; const proxy = new Proxy({}, handler); proxy.age = 16; // Throws errorで呼び出します。

グラフの関係

  • 関連：coding-python（言語間の比較用）、coding-web（フロントエンドとの統合用）。
  • 依存：general-coding（基本構文用）、async-patterns（Promise の処理用）。
  • 競合：legacy-javascript（ES5 に重点を置いているため）。

コメント

Markdown 対応