プリザンターをVSCodeだけでビルド・デバッグできる環境を整えてみる

はじめに

プリザンターの開発環境構築といえば、公式の手順では Visual Studio を使ったセットアップが紹介されています。しかし、普段から VSCode をメインエディタとして使っている方にとっては、できれば VSCode だけで完結させたいところです。

この記事では、Visual Studio を使わずに VSCode と .NET SDK だけでプリザンターをビルド・デバッグする環境を構築する方法を紹介します。

.NET SDK と VSCode はクロスプラットフォームに対応しているため、Windows・macOS・Linux のいずれでもセットアップできます。各ツールのインストールコマンドは OS ごとに記載しています（データベース部分は各 OS に合わせて読み替えてください）。

必要なツール

VSCode

まず VSCode 本体をインストールします。

OS	コマンド
Windows	winget install Microsoft.VisualStudioCode
macOS	brew install --cask visual-studio-code
Linux (Ubuntu/Debian)	sudo snap install code --classic

ダウンロードページからのインストールも可能です: https://code.visualstudio.com/

.NET 10 SDK

プリザンターのビルドには .NET 10 SDK が必要です。

OS	コマンド
Windows	winget install --id=Microsoft.DotNet.SDK.10 -e
macOS	brew install --cask dotnet-sdk
Linux (Ubuntu/Debian)	sudo apt-get update && sudo apt-get install -y dotnet-sdk-10.0

ダウンロードページからのインストールも可能です: https://dotnet.microsoft.com/download/dotnet/10.0

Linux でパッケージが見つからない場合は、公式のインストールスクリプトを使用してください。

wget https://dot.net/v1/dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh --channel 10.0

インストール後、ターミナルでバージョンを確認します。

dotnet --version

10.0.100 以上が表示されれば OK です。

プリザンターの global.json で SDK バージョンが指定されています。rollForward: latestFeature が設定されているため、10.0.1xx 系であれば動作しますが、メジャーバージョンは一致させる必要があります。

Node.js

プリザンターのフロントエンドは TypeScript + Vite で構成されています。ビルド時に npm run build が自動実行されるため、Node.js のインストールが必要です。

公式では VOLTA を使ったバージョン管理が推奨されています。

OS	Volta インストールコマンド
Windows	winget install Volta.Volta
macOS / Linux	curl https://get.volta.sh | bash

Volta をインストールしたら、Node.js をインストールします。

volta install node@latest

VOLTA を使わない場合は https://nodejs.org/ から直接インストールするか、各 OS のパッケージマネージャーを使用してください。

OS	コマンド（Volta を使わない場合）
Windows	winget install OpenJS.NodeJS.LTS
macOS	brew install node
Linux (Ubuntu/Debian)	sudo apt-get update && sudo apt-get install -y nodejs npm

VSCode 拡張機能

以下の拡張機能をインストールします。

拡張機能	用途
C# Dev Kit	C# の開発支援（ソリューション管理・デバッグ）
C#	C# 言語サポート（自動で入ります）

ターミナルからまとめてインストールできます。

code --install-extension ms-dotnettools.csdevkit

C# Dev Kit をインストールすると、ソリューションエクスプローラーや launch.json を使った .NET プロジェクトのデバッグが可能になります。

データベースの準備

データベースのセットアップは Visual Studio でも VSCode でも共通です。公式の手順と同じ手順に従ってください。

プリザンターは SQLServer・PostgreSQL・MySQL のいずれかに対応しています。ここでは PostgreSQL を例に説明します。

接続文字列の設定方法

プリザンターの接続文字列は Rds.json への直接設定と環境変数での設定の 2 つの方法があります。開発環境では Rds.json を直接編集する方法が手軽でおすすめです。

方法1: Rds.json を直接編集する（おすすめ）

Implem.Pleasanter/App_Data/Parameters/Rds.json を開いて、接続文字列を直接書き換えます。

Implem.Pleasanter/App_Data/Parameters/Rds.json

{
    "Dbms": "PostgreSQL",
    "Provider": "Local",
    "SaConnectionString": "Server=localhost;Database=postgres;UID=postgres;PWD=実際のパスワード",
    "OwnerConnectionString": "Server=localhost;Database=#ServiceName#;UID=#ServiceName#_Owner;PWD=実際のパスワード",
    "UserConnectionString": "Server=localhost;Database=#ServiceName#;UID=#ServiceName#_User;PWD=実際のパスワード",
    "SqlCommandTimeOut": 0,
    "MinimumTime": 3,
    "DeadlockRetryCount": 4,
    "DeadlockRetryInterval": 1000,
    "DisableIndexChangeDetection": true,
    "SysLogsSchemaVersion": 1,
    "MySqlConnectingHost": "%"
}

Rds.json は Git で管理されているファイルです。パスワードを含む変更をコミットしないように注意してください。git update-index --skip-worktree Implem.Pleasanter/App_Data/Parameters/Rds.json を実行しておくと、変更が追跡されなくなるため安全です。

Env.json でパラメータの参照先を変更する

Env.json を使うと、パラメータファイルの読み込み先を別のディレクトリに変更できます。リポジトリ外にパラメータファイル一式をコピーして指定すれば、Git の追跡を気にせず自由に設定を変更できるため、開発環境ではとても便利です。

Implem.Pleasanter/App_Data/Parameters/Env.json を新規作成します。

Implem.Pleasanter/App_Data/Parameters/Env.json

{
    "ParametersPath": "C:\\MyPleasanterDev\\Parameters"
}

指定したディレクトリに App_Data/Parameters 配下のファイルをコピーし、そのコピー側の Rds.json 等を自由に編集します。Env.json 自体はリポジトリ内に残りますが、機密情報を含むパラメータファイルはリポジトリ外に分離できます。

Env.json は任意のファイルです。存在しない場合はデフォルトの App_Data/Parameters が使用されます。

方法2: 環境変数で設定する

環境変数での設定も可能です。Rds.json の値が空の場合に環境変数が参照されます。

# ユーザー環境変数に設定する例
[Environment]::SetEnvironmentVariable(
    "Implem.Pleasanter_Rds_PostgreSQL_SaConnectionString",
    "Server=localhost;Database=postgres;UID=postgres;PWD={SA用パスワード}",
    "User")

[Environment]::SetEnvironmentVariable(
    "Implem.Pleasanter_Rds_PostgreSQL_OwnerConnectionString",
    "Server=localhost;Database=#ServiceName#;UID=#ServiceName#_Owner;PWD={Owner用パスワード}",
    "User")

[Environment]::SetEnvironmentVariable(
    "Implem.Pleasanter_Rds_PostgreSQL_UserConnectionString",
    "Server=localhost;Database=#ServiceName#;UID=#ServiceName#_User;PWD={User用パスワード}",
    "User")

{SA用パスワード} などのプレースホルダーは実際のパスワードに置き換えてください。環境変数の設定後は VSCode を再起動する必要があります。

リポジトリのクローンとセットアップ

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

git clone https://github.com/Implem/Implem.Pleasanter
cd Implem.Pleasanter

2. フロントエンドの依存関係をインストール

cd Implem.PleasanterFrontend/wwwroot
npm install
cd ../..

3. VSCode でソリューションフォルダを開く

code .

VSCode でリポジトリのルートディレクトリを開くと、C# Dev Kit がソリューションファイル Implem.Pleasanter.sln を自動的に検出します。

ビルド

ターミナルからビルド

VSCode の統合ターミナル（Ctrl+`）で以下のコマンドを実行します。

dotnet build Implem.Pleasanter.sln -c Debug

ビルドが成功すると、フロントエンドのビルド（npm run build）も PostBuild イベントで自動実行されます。初回ビルドには 1〜2 分程度かかります。

-c Debug を省略した場合もデフォルトで Debug 構成が使用されます。Release ビルドが必要な場合は -c Release を指定してください。

VSCode でのデバッグ設定

launch.json の作成

VSCode でデバッグを行うには .vscode/launch.json にデバッグ構成を追加します。リポジトリのルートに .vscode ディレクトリを作成し、以下の内容で launch.json を作成してください。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Pleasanter: デバッグ実行",
      "type": "dotnet",
      "request": "launch",
      "projectPath": "${workspaceFolder}/Implem.Pleasanter/Implem.Pleasanter.csproj"
    },
    {
      "name": "CodeDefiner: DB初期化",
      "type": "dotnet",
      "request": "launch",
      "projectPath": "${workspaceFolder}/Implem.CodeDefiner/Implem.CodeDefiner.csproj",
      "args": ["_rds"]
    },
    {
      "name": "CodeDefiner: コード定義",
      "type": "dotnet",
      "request": "launch",
      "projectPath": "${workspaceFolder}/Implem.CodeDefiner/Implem.CodeDefiner.csproj",
      "args": ["def"]
    }
  ]
}

tasks.json の作成（任意）

よく使うビルド操作をタスクとして登録しておくと便利です。

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/Implem.Pleasanter.sln",
        "-c",
        "Debug"
      ],
      "problemMatcher": "$msCompile",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "frontend: install",
      "type": "shell",
      "command": "npm install",
      "options": {
        "cwd": "${workspaceFolder}/Implem.PleasanterFrontend/wwwroot"
      },
      "problemMatcher": []
    },
    {
      "label": "frontend: dev",
      "type": "shell",
      "command": "npm run dev",
      "options": {
        "cwd": "${workspaceFolder}/Implem.PleasanterFrontend/wwwroot"
      },
      "isBackground": true,
      "problemMatcher": []
    }
  ]
}

データベースの初期化

初回セットアップ時はデータベースの初期化が必要です。

方法1: デバッグ構成から実行

VSCode のデバッグパネル（Ctrl+Shift+D）から「CodeDefiner: DB初期化」を選択して実行します。ターミナルにメッセージが表示されるので、指示に従って操作してください。

方法2: ターミナルから実行

dotnet run --project Implem.CodeDefiner -- _rds

プリザンターのデバッグ実行

データベースの初期化が完了したら、いよいよプリザンターをデバッグ実行します。

1. ブレークポイントを設定

デバッグしたい箇所のコードにブレークポイントを設定します（行番号の左をクリック）。

2. デバッグを開始

デバッグパネル（Ctrl+Shift+D）から「Pleasanter: デバッグ実行」を選択して F5 で実行します。

3. ブラウザでアクセス

デバッグが開始されると、プリザンターが http://localhost:59803/ で起動します。ブラウザでアクセスしてログイン画面が表示されれば成功です。

ブレークポイントを設定した箇所を通過する操作を行うと、VSCode のデバッガーが停止し、変数の確認やステップ実行が可能になります。

フロントエンドの開発

フロントエンド（TypeScript / SCSS）の変更をリアルタイムで反映させたい場合は、別のターミナルで Vite の開発サーバーを起動します。

cd Implem.PleasanterFrontend/wwwroot
npm run dev

これにより、TypeScript や SCSS の変更が自動的にビルドされ、プリザンター側に反映されます。

Visual Studio との違い

VSCode だけで開発する場合の主な違いをまとめます。

項目	Visual Studio	VSCode
ビルド	GUI のビルドボタン	dotnet build コマンド
デバッグ	プロジェクト右クリック → 開始	launch.json + F5
ソリューション管理	ソリューションエクスプローラー	C# Dev Kit のソリューションビュー
NuGet 管理	GUI のパッケージマネージャー	dotnet add package コマンド
DB 初期化	スタートアッププロジェクト切替	launch.json で構成を切替
DB 接続設定	環境変数 or Rds.json	Rds.json 直接編集がおすすめ

まとめ

今回は VSCode と .NET SDK だけでプリザンターをビルド・デバッグする環境を構築する方法を紹介しました。Visual Studio がなくても、C# Dev Kit と dotnet CLI を活用すれば、十分に開発を進めることができます。

特に、普段から VSCode を使い慣れている方にとっては、エディタを統一できるメリットは大きいと思います。ぜひ試してみてください！