jpskill.com
🎨 デザイン コミュニティ

nodejs-project-arch

AI開発を支援するNode.jsプロジェクトの設計標準で、ファイル分割や設定外部化、ルーティングのモジュール化などを推奨し、大規模なコードのリファクタリングやAIのコンテキストウィンドウ消費を抑え、H5ゲームやデータツール、APIサービスなど幅広い用途に適用できるSkill。

📜 元の英語説明(参考)

Node.js project architecture standards for AI-assisted development. Enforces file splitting (<400 lines), config externalization, route modularization, and admin dashboards. Use when creating new Node.js projects, refactoring large single-file codebases, or when AI context window is being consumed by oversized files. Covers H5 games (Canvas/Phaser/Matter.js), data tools (crawlers/scrapers), content platforms, monitoring dashboards, API services, and SDK libraries.

🇯🇵 日本人クリエイター向け解説

一言でいうと

AI開発を支援するNode.jsプロジェクトの設計標準で、ファイル分割や設定外部化、ルーティングのモジュール化などを推奨し、大規模なコードのリファクタリングやAIのコンテキストウィンドウ消費を抑え、H5ゲームやデータツール、APIサービスなど幅広い用途に適用できるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nodejs-project-arch.zip https://jpskill.com/download/8804.zip && unzip -o nodejs-project-arch.zip && rm nodejs-project-arch.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8804.zip -OutFile "$d\nodejs-project-arch.zip"; Expand-Archive "$d\nodejs-project-arch.zip" -DestinationPath $d -Force; ri "$d\nodejs-project-arch.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して nodejs-project-arch.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → nodejs-project-arch フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

AIフレンドリーな開発のための Node.js プロジェクトアーキテクチャ

AIエージェントがコンテキストウィンドウを圧迫せずに読み取り/編集できるほどファイルを小さく保つアーキテクチャ標準。

コアルール

  • 単一ファイルの最大行数 400行index.html の最大行数 200行server.js エントリの最大行数 100行
  • すべての調整可能な値は config.json に格納し、実行時にロードし、管理ダッシュボードから編集可能
  • バックエンド: ドメインごとの routes/、共有ロジック用の services/、データベース用の db.js
  • フロントエンド: HTMLスケルトンのみ、JS/CSS は別のファイルに
  • すべてのプロジェクトに、設定のホットリロード用の admin.html + routes/admin.js を用意

プロジェクトタイプの選択

プロジェクトタイプを決定し、対応するリファレンスをお読みください。

タイプ シグナル リファレンス
H5 Game Canvas, Phaser, Matter.js, ゲームループ, スプライト references/game.md
Data Tool クローラー, スクレイパー, スケジューラー, データ同期, アナリティクス references/tool.md
Content/Utility ジェネレーター, ライブラリ, パブリッシャー, ファイル処理 references/tool.md
Dashboard/Monitor チャート, リアルタイム, アラート, メトリクス references/tool.md
API Service REST エンドポイント, ミドルウェア, マイクロサービス references/tool.md
SDK/Library 共有モジュール, ビルドステップ, 複数コンシューマー references/sdk.md

クイックスタート (すべてのタイプ)

  1. 上の表からプロジェクトタイプを特定
  2. 対応するリファレンスファイルを読み込む
  3. リファレンスに従ってディレクトリ構造を作成
  4. ハードコードされた値を config.json に抽出
  5. 大きなファイルを機能ごとに分割 (それぞれ400行未満)
  6. routes/admin.js + admin.html を追加
  7. フロントエンド: config.js は起動時に /api/config をフェッチし、コードは GAME_CONFIG.xxx または APP_CONFIG.xxx を読み取る
  8. ローカルでテスト → バックアップ → デプロイ

config.json パターン (共通)

// Server: load and serve config
const config = JSON.parse(fs.readFileSync('./config.json', 'utf8'));
app.get('/api/config', (req, res) => {
  const safe = { ...config };
  delete safe.admin; // strip secrets
  res.json(safe);
});

// Admin: hot-reload
app.post('/admin/config', requireAdmin, (req, res) => {
  fs.writeFileSync('./config.json.bak', fs.readFileSync('./config.json'));
  fs.writeFileSync('./config.json', JSON.stringify(req.body, null, 2));
  Object.assign(config, req.body);
  res.json({ ok: true });
});

管理ダッシュボードパターン (共通)

admin.html は設定構造からフォームを自動生成します。

  • パスワードログイン (x-admin-password ヘッダー)
  • 保存 + ホットリロード付きのビジュアル設定エディタ
  • 統計概要 (ユーザー/データ/稼働時間)
  • 設定バックアップ履歴 + リストア

これが重要な理由

大きな単一ファイルは、AIが読み込む際に大量のコンテキストトークンを消費します。

  • 3000行のファイル → 読み込みごとに約40Kトークン (200Kウィンドウの20%)
  • 200行のモジュール → 読み込みごとに約2.7Kトークン (ウィンドウの1.3%)
  • 結果: コンテキスト圧縮前の3〜5ラウンドに対して、10〜15の生産的なラウンド
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Node.js Project Architecture for AI-Friendly Development

Architecture standards that keep files small enough for AI agents to read/edit without blowing the context window.

Core Rules

  • Single file max 400 lines, index.html max 200 lines, server.js entry max 100 lines
  • All tunable values in config.json, loaded at runtime, editable via admin dashboard
  • Backend: routes/ by domain, services/ for shared logic, db.js for database
  • Frontend: HTML skeleton only, JS/CSS in separate files
  • Every project gets admin.html + routes/admin.js for config hot-reload

Project Type Selection

Determine project type, then read the corresponding reference:

Type Signals Reference
H5 Game Canvas, Phaser, Matter.js, game loop, sprites references/game.md
Data Tool Crawler, scraper, scheduler, data sync, analytics references/tool.md
Content/Utility Generator, library, publisher, file processing references/tool.md
Dashboard/Monitor Charts, real-time, alerts, metrics references/tool.md
API Service REST endpoints, middleware, microservice references/tool.md
SDK/Library Shared module, build step, multi-consumer references/sdk.md

Quick Start (All Types)

  1. Identify project type from table above
  2. Read the corresponding reference file
  3. Create directory structure per the reference
  4. Extract hardcoded values → config.json
  5. Split large files by function (each <400 lines)
  6. Add routes/admin.js + admin.html
  7. Frontend: config.js fetches /api/config at startup, code reads GAME_CONFIG.xxx or APP_CONFIG.xxx
  8. Test locally → backup → deploy

config.json Pattern (Universal)

// Server: load and serve config
const config = JSON.parse(fs.readFileSync('./config.json', 'utf8'));
app.get('/api/config', (req, res) => {
  const safe = { ...config };
  delete safe.admin; // strip secrets
  res.json(safe);
});

// Admin: hot-reload
app.post('/admin/config', requireAdmin, (req, res) => {
  fs.writeFileSync('./config.json.bak', fs.readFileSync('./config.json'));
  fs.writeFileSync('./config.json', JSON.stringify(req.body, null, 2));
  Object.assign(config, req.body);
  res.json({ ok: true });
});

Admin Dashboard Pattern (Universal)

admin.html auto-generates form from config structure:

  • Password login (x-admin-password header)
  • Visual config editor with save + hot-reload
  • Stats overview (users/data/uptime)
  • Config backup history + restore

Why This Matters

Large single files consume massive context tokens when AI reads them:

  • 3000-line file → ~40K tokens per read (20% of 200K window)
  • 200-line module → ~2.7K tokens per read (1.3% of window)
  • Result: 10-15 productive rounds vs 3-5 before context compression