coding-web

coding-web

目的

このスキルを使うと、JavaScript、TypeScript、Node.js を用いたフルスタックのウェブ開発で OpenClaw を活用できます。ウェブアプリケーション向けのコード生成、デバッグ、最適化に重点を置いています。

使用するタイミング

フロントエンド（React、Vue など）とバックエンド（Node.js サーバーなど）を含むウェブプロジェクトの構築や保守に使用します。特に、アプリのひな形作成、JS/TS コードのバグ修正、API の統合などの作業に適しています。迅速なプロトタイピングやレガシーコードの最新の標準への移行など、反復的な開発サイクルで活用してください。

主な機能

• Node.js サーバーのボイラープレートを生成します。ルートを含む Express アプリを作成する場合に使用します。例：server.js ファイルを出力します。
• TypeScript への変換に対応します。型安全性を確保しながら JS を TS に変換します。たとえば、既存の関数にインターフェースを追加します。
• フロントエンドコードを最適化します。JS/TS アセットを圧縮してバンドルします。React など、対象のフレームワークを指定するパラメーターを付けて実行します。
• よくあるウェブエラーをデバッグします。Node.js の CORS や React コンポーネントの状態管理などの問題を特定し、修正方法を提案します。
• データベースと統合します。async/await パターンを使用して、Node.js で MongoDB または SQL に接続するコードを生成します。
• コードスニペット：シンプルな React コンポーネントの場合、OpenClaw は次のように出力します：import React from 'react'; const MyComponent = () => <div>Hello</div>; export default MyComponent;

使用パターン

このスキルを呼び出すには、ターミナルでコマンドの先頭に openclaw coding-web を付けるか、OpenClaw の API を通じて統合します。必ずサブコマンド（例：generate、debug）を最初に指定し、その後に --language ts や --framework react などのオプションを続けます。API 呼び出しでは、{ "action": "generate", "params": { "type": "component", "name": "UserForm" } } を含む JSON ペイロードを使用して、/api/coding-web/execute に POST リクエストを送信します。認証用の環境変数を設定します。たとえば、コマンドを実行する前に $OPENCLAW_API_KEY を export します。出力をパイプで渡してスキルを連携できます。たとえば、データベーススキルの出力をここへの入力として使用します。

よく使うコマンド／API

• CLI コマンド：openclaw coding-web generate --type server --framework express --port 3000 – 基本的な Express サーバーを作成します。TypeScript を使用するには --language ts を追加します。
• CLI コマンド：openclaw coding-web debug --file app.js --issue "undefined variable" – 指定したファイルのエラーを分析して修正します。
• API エンドポイント：{ "codeType": "component", "language": "ts", "details": { "name": "Login", "props": ["username"] } } を本文として /api/coding-web/generate に POST します。生成されたコードが JSON として返されます。
• 設定形式：JSON 設定ファイルを使用します。例：{ "defaultLanguage": "ts", "framework": "react", "apiKey": "$OPENCLAW_API_KEY" } を .openclaw/config.json に配置します。
• コードスニペット：API レスポンスを処理する場合：const response = await fetch('/api/coding-web/generate', { method: 'POST', body: JSON.stringify({ action: 'generate' }) }); const code = await response.json();
• 認証：API 呼び出しでは必ずヘッダーに $OPENCLAW_API_KEY を含めます。例：headers: { 'Authorization': Bearer ${process.env.OPENCLAW_API_KEY} }。

統合に関する注意事項

VS Code などの IDE にこのスキルを統合するには、拡張機能に追加するか、OpenClaw のプラグインシステムを使用します。npm install openclaw-vscode でインストールします。CI/CD では、GitHub Actions などのスクリプトに埋め込みます：run: openclaw coding-web generate --type test --file src/app.js。依存関係を扱うには、"engines": { "node": ">=14" } のように package.json で Node.js のバージョンを指定します。他のツールと併用する場合は、生成されたコードをモジュールとしてエクスポートします：module.exports = generatedCode;。実行前に node -v で確認し、環境に Node.js がインストールされていることを確かめてください。

エラー処理

エラーが発生した場合は、CLI コマンドの終了コード（失敗の場合はコード 1 など）を確認し、API から返される JSON エラーレスポンスを解析してください。これには { "error": "Invalid params", "details": "Missing --type flag" } のようなフィールドが含まれます。よくある問題の場合は、入力を修正して再試行します。たとえば、依存関係が不足していて生成に失敗した場合は、まず npm install express を実行してください。コードスニペットでは try-catch を使用してください：try { await openclawAPI.call('coding-web', { action: 'generate' }); } catch (e) { console.error(e.message); // e.g., "API key required" }。認証に失敗した場合（例：ステータス 401）は、$OPENCLAW_API_KEY が設定されていて、有効期限が切れていないことを確認してください。

具体的な使用例

1. 例 1：Node.js Express サーバーを生成する
   使用方法：openclaw coding-web generate --type server --framework express --language js
   これにより、基本的なサーバーファイルが作成されます：const express = require('express'); const app = express(); app.listen(3000, () => console.log('Server running'));
   次に、node server.js を実行して、ポート 3000 でサーバーを起動します。

2. 例 2：TypeScript の React コンポーネントをデバッグして修正する
   使用方法：openclaw coding-web debug --file MyComponent.tsx --issue "Type error in props"
   修正済みのスニペットが出力される場合があります：interface Props { name: string; } const MyComponent: React.FC<Props> = ({ name }) => <div>{name}</div>;
   出力をプロジェクトにコピーして組み込み、tsc で再ビルドしてください。

グラフの関係

• 関連先：「coding-backend」（Node.js の機能を共有）
• 依存先：「tools-node」（Node.js ランタイムへのアクセス用）
• 接続先：「web-frontend」（React／Vue など、フロントエンド固有のタスク用）
• 重複先：「fullstack-dev」（より幅広い開発を扱う「coding」クラスター内）