Archy

🚀 TypeScriptを使用したArchyサーバーの開発

このプロジェクトでは、TypeScriptを使用してArchyサーバーを開発する方法を説明します。以下の手順に従って、開発環境をセットアップし、サーバーを実行することができます。

🚀 クイックスタート

📦 インストール

依存関係のインストール

Archyの開発を開始するには、まず必要な依存関係をインストールする必要があります。

npm install typescript ts-node nodemon @types/node @types/express --save-dev

TypeScriptのインストール

以下のコマンドを使用して、TypeScriptと型定義ファイルをグローバルにインストールします。

npm install -g typescript typescript@latest

📝 設定ファイルの作成

tsconfig.json ファイルを作成し、以下の内容を追加します。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "build",
    "declaration": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}

💻 開発モードでの実行

開発環境でサーバーを実行するには、以下のコマンドを使用します。

npm run dev

このコマンドは、ファイルの変更に応じてサーバーを自動的に再読み込みします。

🛠️ TypeScriptプロジェクトのコンパイル

TypeScriptコンパイラを実行するには、以下の方法を使用できます。

ローカルにインストールされたTypeScriptの使用

npx tsc

tsconfig.json ファイルを指定するには、次のように実行します。

npx tsc --project tsconfig.json

監視モード（リアルタイムで再コンパイル）を有効にするには、次のコマンドを実行します。

npx tsc --watch

グローバルにインストールされたTypeScriptの使用

TypeScriptをグローバルにインストールしている場合は、以下のコマンドを実行します。

tsc

⚙️ 一般的なTypeScriptコンパイルオプション

• --outDir <directory>：出力ディレクトリを指定します。
• --target <ES バージョン>：ECMAScriptのターゲットバージョンを指定します（例：ES2020）。
• --module <モジュールシステム>：モジュールシステムを指定します（例：NodeNext）。
• --declaration：.d.ts 宣言ファイルを生成します。
• --sourceMap：デバッグをサポートするためのソースマップファイルを生成します。

📁 プロジェクト構造

• src/：TypeScriptソースファイル
  • src/index.ts：プログラムのエントリポイントとサーバーの実装
  • src/server.ts：サーバーの実装
  • src/generators/：ダイアグラム生成ロジック
  • src/utils/：ユーティリティ関数と補助関数
• build/：コンパイルされたJavaScriptファイル
• examples/：使用例のスクリプト
• test/：テストファイル

💻 使用例

📈 Archyを使用したダイアグラムの生成

テキストからのクラスダイアグラムの生成

generate_diagram_from_text({
  "description": "为图书馆系统创建一个包含 Book、Author 和 Library 类的类图。书籍有标题和 ISBN。作者有姓名并可以编写多本书。图书馆馆藏包含书籍。",
  "language": "zh-CN"
});

URLからのダイアグラムの生成

generate_diagram_from_url({
  "url": "https://example.com",
  "language": "zh-CN"
});

🌐 開発環境の設定

package.json に以下の内容を追加します。

{
  "name": "archy-server",
  "version": "1.0.0",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "ts-node": "^10.9.2",
    "nodemon": "^3.0.2",
    "@types/node": "^20.10.0",
    "@types/express": "^4.18.1"
  }
}

🚀 サーバーの実行

開発サーバーを起動するには、以下のコマンドを実行します。

npm run dev

🐞 開発モードの機能

デバッグログの有効化

tsconfig.json に以下の内容を追加して、デバッグログを有効にします。

{
  "compilerOptions": {
    "traceResolution": true,
    "verbose": true
  }
}

🛠️ 一般的な問題のトラブルシューティング

モジュール解決エラー

プロジェクトのルートディレクトリに tsconfig.json ファイルが存在し、include と exclude の設定が正しいことを確認してください。

サーバーを起動できない場合

インストールが成功したことを確認するには、以下のコマンドを実行します。

npm list -g typescript ts-node nodemon

📡 コード例

シンプルなHTTPサーバー

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`应用运行在 http://localhost:${port}`);
});

ルーティングを持つサーバー

import express from 'express';
const router = express.Router();

router.get('/api', (req, res) => {
  res.json({ message: 'Hello API' });
});

const app = express();
app.use('/', router);

const port = 3000;
app.listen(port, () => {
  console.log(`应用运行在 http://localhost:${port}`);
});

⚙️ 高度な機能

🔌 プロキシの設定

tsconfig.json を編集して、以下の内容を追加します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

その後、コードでモジュールパスを使用します。

import { generate_diagram_from_text } from '@';

📦 TypeScriptモジュール解決の設定

tsconfig.json を編集して、以下の内容を追加します。

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "."
  }
}

📋 まとめ

上記の手順に従うことで、TypeScriptを使用したArchyサーバーを成功裏に設定し、開発することができます。