JA Getting Started Development Setup - hiraishikentaro/rails-factorybot-jump GitHub Wiki

はじめに: 開発環境セットアップ

前提条件

開発環境をセットアップする前に、以下のツールがインストールされていることを確認してください：

必須ツール

  • Node.js (18.x 以上) - JavaScript ランタイム
  • npm - Node パッケージマネージャー（Node.js に付属）
  • Visual Studio Code - 拡張機能の開発とテスト用
  • Git - バージョン管理システム

開発ツール

  • TypeScript - 主要な開発言語
  • ESLint - コード品質とスタイルチェック
  • Mocha - テストフレームワーク

ソース: package.json#L77-L89

環境セットアップ

1. リポジトリのクローン

git clone https://github.com/hiraishikentaro/rails-factorybot-jump.git
cd rails-factorybot-jump

2. 依存関係のインストール

npm install

これにより以下を含む必要な依存関係がすべてインストールされます：

  • TypeScript コンパイル用の開発依存関係
  • テストフレームワーク（Mocha、Sinon）
  • VSCode 拡張テストツール
  • コード品質ツール（ESLint、TypeScript ESLint）

ソース: package.json#L77-L90

3. 開発スクリプト

プロジェクトには開発用の npm スクリプトがいくつか用意されています：

# TypeScript ソースコードをコンパイル
npm run compile

# ファイル変更を監視して自動的に再コンパイル
npm run watch

# テストスイートを実行
npm run test

# コード品質チェック用の ESLint を実行
npm run lint

# 公開準備（compile + lint）
npm run vscode:prepublish

ソース: package.json#L68-L76

VSCode 拡張開発セットアップ

1. VSCode で開く

code .

2. 推奨拡張機能のインストール

必須ではありませんが、以下の VSCode 拡張機能は開発に役立ちます：

  • TypeScript and JavaScript Language Features（組み込み）
  • ESLint - リアルタイムリンティング
  • Mocha Test Explorer - テストランナー統合

3. デバッグ設定

プロジェクトには拡張機能開発用の VSCode デバッグ設定が含まれています：

  1. プロジェクトを VSCode で開く
  2. F5 を押して新しい Extension Development Host を起動
  3. これにより拡張機能がロードされた新しい VSCode ウィンドウが起動
  4. 新しいウィンドウで変更をテスト

TypeScript 設定

プロジェクトは以下の設定で TypeScript を使用しています：

コンパイラオプション:

  • ターゲット: ES2020
  • モジュール: CommonJS（VSCode 拡張機能で必須）
  • ストリクトモード: 型安全性のため有効
  • ソースマップ: デバッグのため有効
  • 出力ディレクトリ: out/（コンパイル済み JavaScript）

ソース: tsconfig.json#L1-L13

プロジェクト構造

src/
├── extension.ts              # メイン拡張機能エントリーポイント
├── providers/
│   └── factoryLinkProvider.ts # コアリンクプロバイダー実装
├── models/                   # データモデル（もしあれば）
├── parsers/                  # ファイル解析ユーティリティ（もしあれば）
├── services/                 # ビジネスロジックサービス（もしあれば）
├── utils/                    # ユーティリティ関数（もしあれば）
└── test/
    ├── runTest.ts           # テストランナー設定
    └── suite/
        ├── index.ts         # テストスイートセットアップ
        └── extension.test.ts # メインテストファイル

開発ワークフロー

1. 変更を加える

src/ ディレクトリ内のソースファイルを TypeScript で編集します。

2. コンパイル

npm run compile を実行するか、自動コンパイル用に npm run watch を使用します。

3. テスト

npm run test を実行してテストスイートを実行します。

4. デバッグ

VSCode で F5 を使用して Extension Development Host を起動してテストします。

5. コード品質

npm run lint を実行してコード品質の問題をチェックします。

テスト環境

拡張機能は VSCode のテストインフラストラクチャを使用します：

  • テストランナー: @vscode/test-electron
  • フレームワーク: モック用の Sinon を使った Mocha
  • 環境: 現実的なテストのため実際の VSCode インスタンスで実行
  • カバレッジ: コア機能、設定、エッジケースをテスト

ソース: src/test/runTest.ts

一般的な開発タスク

新機能の追加

  1. src/ で TypeScript で実装
  2. src/test/suite/ にテストを追加
  3. 必要に応じて package.json の設定を更新
  4. テストとリントチェックを実行

問題のデバッグ

  1. console.log() または VSCode デバッガーを使用
  2. Extension Development Host を起動（F5）
  3. VSCode Developer Tools を開く（Help > Toggle Developer Tools）
  4. 拡張機能のログとエラーをチェック

依存関係の更新

npm update
npm audit

次のステップ

開発環境がセットアップできたら：