nodejs-development

Node.js 開発

高性能なツールとフレームワークに重点を置いた、モダンな JavaScript／TypeScript 開発の専門知識です。

このスキルを使用する場面

シナリオ	このスキルを使用	代替手段
Vue 3／Vite／TypeScript プロジェクトのセットアップ	はい	該当なし
Vite のビルドと開発サーバーの設定	はい	該当なし
Vue 3 Composition API と Pinia の使用	はい	該当なし
Node.js／Bun ランタイム全般に関するガイダンス	はい	Bun 固有の機能には bun-development
Bun スクリプト、テスト、ビルドの実行	いいえ — bun-development を使用	簡単な実行には bun-test、bun-build
npm／Bun の依存関係の管理	いいえ — bun-package-manager を使用	簡単な追加には bun-add
TypeScript／JS アプリケーションのデバッグ	いいえ — typescript-debugging を使用	該当なし
Sentry によるエラー監視	いいえ — typescript-sentry を使用	該当なし

主な専門分野

モダンな JavaScript ツール

• Bun：主要な JavaScript ランタイム兼パッケージマネージャー（npm より 25 倍高速）
• Vite：HMR と最適化された本番ビルドを備えた、非常に高速なビルドツール
• TypeScript：モダンな設定による型安全な開発
• ESM：モダンなモジュール構文とツリーシェイキングの最適化

主な機能

Bun ランタイムとパッケージ管理

• 依存関係のインストールには bun install を使用し、再現可能なビルドには bun.lock を使用します
• スクリプトの実行には bun run を使用し、bun dev／bun build のパターンを活用します
• プロジェクト固有の Bun 設定には bunfig.toml を設定します
• Bun のネイティブな TypeScript サポートと組み込みバンドラーを活用します

Vue 3 とモダンなフロントエンド

• Vue 3：Composition API、script setup、リアクティブなパターン
• Pinia：TypeScript サポートを備えた状態管理
• Vuetify：マテリアルデザインのコンポーネント
• Vite：即時 HMR を備えた高速な開発サーバー

優れた TypeScript 開発

• strict モードとモダンなターゲット設定で TypeScript を構成します
• Vue コンポーネントとストアに包括的な型定義を実装します
• 最適な開発体験のために、Vite と TypeScript を併用します
• 堅牢なアプリケーションのために、高度な TypeScript パターンを適用します

テストと品質保証

• Vitest：ネイティブな TypeScript サポートを備えた高速な単体テストフレームワーク
• Playwright：ブラウザー自動化によるエンドツーエンドテスト
• Biome：統合された高速なコード品質チェックとフォーマット

デバッグ

• Chrome DevTools：ブラウザーと Node.js の高度なデバッグ
• Node.js Inspector：ブレークポイントとプロファイリングを備えた組み込みデバッグ機能
• ヒープスナップショット：メモリーリークの検出とヒープ分析
• パフォーマンスプロファイリング：CPU プロファイリング、フレームグラフ、ボトルネックの特定
• Vue DevTools：コンポーネントツリー、状態の調査、パフォーマンスの監視

基本コマンド

# Bun-first workflow
bun create vite my-app --template vue-ts  # Create Vue 3 + TypeScript project
cd my-app && bun install                  # Install dependencies

# Development
bun dev                          # Start dev server
bun build                        # Build for production
bun run check                    # Run Biome lint + format
bun run test                     # Run tests

# Debugging
node --inspect script.js         # Node.js debugging
bun --inspect script.ts          # Bun debugging
node --prof script.js            # CPU profiling

ベストプラクティス

プロジェクト構成

• Vue 3 プロジェクトは、コンポーネント、ストア、ルーターを明確に分離して構成します
• 最適化を適用して vite.config.ts を設定します
• 適切なエラーバウンダリーと読み込み状態を実装します
• 高度な UI パターンには Vue 3 の Teleport と Suspense を使用します

パフォーマンスとセキュリティ

• 適切な CSP ヘッダーとセキュリティ設定を実装します
• Vite のアセット処理を活用して画像とアセットを最適化します
• 遅延読み込みとコード分割を使用します
• 適切なフォーム検証とサニタイズを適用します

型安全性

// Modern type annotations (TypeScript 5.0+)
function processData(
    items: string[],
    config: Record<string, number>,
    optional?: string | null
): [boolean, string] {
    return [true, "success"];
}

詳細なデバッグパターン、Vue 3 のコンポーネント構成、Vite の設定、本番環境でのデバッグ、フレームワークとの統合については、REFERENCE.md を参照してください。