Replit ローカル開発ループ

概要

Replit向けの高速で再現可能なローカル開発ワークフローを構築します。

前提条件

• replit-install-auth セットアップの完了
• Node.js 18以上（npm/pnpm搭載）
• TypeScriptサポート対応のコードエディタ
• バージョン管理用のGit

手順

ステップ1: プロジェクト構造の作成

my-replit-project/
├── src/
│   ├── replit/
│   │   ├── client.ts       # Replit クライアントラッパー
│   │   ├── config.ts       # 設定管理
│   │   └── utils.ts        # ヘルパー関数
│   └── index.ts
├── tests/
│   └── replit.test.ts
├── .env.local              # ローカルシークレット (gitで無視)
├── .env.example            # チーム用テンプレート
└── package.json

ステップ2: 環境設定

# 環境テンプレートをコピー
cp .env.example .env.local

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run dev

ステップ3: ホットリロード設定

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

ステップ4: テスト設定

import { describe, it, expect, vi } from 'vitest';
import { ReplitClient } from '../src/replit/client';

describe('Replit Client', () => {
  it('should initialize with API key', () => {
    const client = new ReplitClient({ apiKey: 'test-key' });
    expect(client).toBeDefined();
  });
});

出力

• ホットリロード機能付きの動作する開発環境
• モッキング機能を備えた設定済みテストスイート
• 環境変数管理
• Replit開発向けの高速イテレーションサイクル

エラーハンドリング

エラー	原因	解決方法
Module not found	依存関係が不足している	npm install を実行
Port in use	別のプロセスが使用中	プロセスを終了するか、ポート番号を変更
Env not loaded	.env.localが見つからない	.env.exampleからコピー
Test timeout	ネットワークが遅い	テストのタイムアウト時間を増加

例

Replit レスポンスをモック

vi.mock('@replit/sdk', () => ({
  ReplitClient: vi.fn().mockImplementation(() => ({
    // ここにモックメソッドを記述
  })),
}));

デバッグモード

# 詳細ログを有効化
DEBUG=REPLIT=* npm run dev

リソース

• Replit SDK リファレンス
• Vitest ドキュメンテーション
• tsx ドキュメンテーション

次のステップ

本番環境対応コードパターンについては replit-sdk-patterns を参照してください。