Skip to content

MS_VSCodeSPADevelopment

Jump to bottom
nishi_74322014 edited this page Aug 21, 2026 · 1 revision

Visual Studio CodeによるSPA開発

概要

  • 今後、主流は、「Visual Studio Code」＋
    「npm（DNET_npm.md）, etc. の Node.js（DNET_JavaScript.md）系のツール」に
    なる可能性がある。

  • 「Visual Studio Code」を使用した SPA では、
    バックエンドも ASP.NET Core である必要はない。PHP などでも開発可能。

補足（原文の予測は当たった）: 「今後、主流は VS Code + Node.js 系の
ツールになる可能性がある」——この見立ては、その通りになった。

【フロントエンド開発の現在】
   エディタ      … VS Code（圧倒的シェア）★
   パッケージ管理 … npm / pnpm / yarn
   ビルド        … Vite / esbuild / webpack
   型            … TypeScript
   整形・検査     … Prettier / ESLint

   → 【すべて Node.js 系のツール】であり、
     Visual Studio（本体）の関与はほぼない

「バックエンドが ASP.NET Core である必要はない」という指摘も
重要で、これはフロントとバックの分離が
もたらす当然の帰結である。

【分離するとどうなるか】
   フロント： HTML/CSS/JS を返すだけ。静的ファイル
   バック  ： JSON を返すだけ。【言語・基盤は何でもよい】★

     → ASP.NET Core でも、Node.js でも、Java でも、Go でも、PHP でも
     → 契約は【HTTP + JSON】（OpenAPI で定義する）

これは組織にとっての利点でもある。

・フロント担当者が .NET を知らなくても開発できる
・バックエンドを後から別言語に置き換えられる
・モバイル アプリからも同じ API を使える

Visual Studio のテンプレートを引き継ぐ

Visual Studio のテンプレートを引き継がない。

補足（2 つの選択肢の現在の評価）: 原文が示す 2 択のうち、
後者が主流になった。

テンプレートを引き継ぐ 引き継がない（分離）
プロジェクト構成 1 つ 2 つ（フロント / バック）
起動 dotnet run で両方 それぞれ起動（または並列起動の設定）
ビルド .NET のビルドに乗る npm scripts で独立
デプロイ 1 単位 別々（CDN + API）
担当分け 分けにくい 分けやすい ★
現況 .NET 8 以降のテンプレートも分離型に 主流

なお、.NET 8 以降の「引き継ぐ」形も、実質的には分離型である
（.esproj（JavaScript・TypeScriptプロジェクトシステム））。
2 プロジェクト構成のまま、VS が両方を起動するという形になった。

【現在の VS のテンプレート（React の場合）】
   MyApp.sln
     ├ MyApp.Server/     … ASP.NET Core
     └ myapp.client/     … Vite + React（.esproj）

   ・F5 で【両方が起動】する（マルチ スタートアップ プロジェクト）
   ・Vite の dev server にプロキシして繋ぐ
   ・【中身は分離型】だが、IDE の体験は統合されている ★

VS Code で同じことをするなら、
.vscode/launch.json の compound 設定を使う。

{
  "compounds": [{
    "name": "Full stack",
    "configurations": [".NET Core Launch (web)", "Launch Vite"]
  }]
}

詳細

以下の手順で Visual Studio Code による SPA 開発が可能。

SPA側

React（DNET_ReactFirstStep.md）

, etc.

Web API側

ASP.NET Core

デバッグ実行

, etc.

補足（VS Code で .NET を開発する現在の環境）: 原文が挙げる
CSharp for Visual Studio Code は、その後大きく変わった。

時期 拡張機能 内部
当時 C# for Visual Studio Code（ms-dotnettools.csharp） OmniSharp
2023～ 同上（v2 以降） C# Dev Kit / Roslyn LSP ★
現在 C# Dev Kit（ms-dotnettools.csdevkit）を併用 ソリューション エクスプローラー、テスト実行 
【現在の推奨構成（VS Code で .NET）】
   ・C#（ms-dotnettools.csharp）      … 言語サポート（必須）
   ・C# Dev Kit（ms-dotnettools.csdevkit） … ソリューション管理・テスト
      ※ ライセンスに注意（個人・OSS・小規模は無償、企業は VS ライセンスが要る）
   ・.NET Install Tool

C# Dev Kit のライセンス条件は、
無償の VS Code とは異なる（Visual Studio のライセンスに準じる）。
導入前に組織のライセンス状況を確認する必要がある。
C# 拡張だけなら MIT で、これだけでも開発は可能である。

デバッグ設定（図の内容に対応）:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [{
    "name": ".NET Core Launch (web)",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build",
    "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
    "env": { "ASPNETCORE_ENVIRONMENT": "Development" },
    "serverReadyAction": {
      "action": "openExternally",
      "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
    }
  }]
}

serverReadyAction は、
起動ログを見てブラウザを自動で開く便利な設定である。

補足（フロントとバックを繋ぐ実務上の課題）: 分離構成にすると、
必ず以下に当たるので整理しておく。

① CORS（オリジンが違う）

開発時： フロント localhost:5173 / API localhost:5001
  → 【別オリジン】なので、ブラウザがブロックする

// 対策A： API 側で CORS を許可する
builder.Services.AddCors(o => o.AddDefaultPolicy(p => p
    .WithOrigins("http://localhost:5173")
    .AllowAnyHeader().AllowAnyMethod()
    .AllowCredentials()));          // Cookie を使うなら必須
app.UseCors();
// 対策B（推奨）： Vite の proxy で【同一オリジンに見せる】★
// vite.config.ts
export default defineConfig({
  server: { proxy: { '/api': { target: 'https://localhost:5001',
                               secure: false, changeOrigin: true } } }
});

対策 B が優れている理由:

・CORS が発生しない（ブラウザからは同一オリジンに見える）
・Cookie 認証がそのまま使える
・【本番の構成（同一ドメイン）に近い】★
・API 側に開発用の設定を入れずに済む

② 認証

【トークン方式】 localStorage に置くと XSS で盗まれる
【Cookie 方式】  HttpOnly + Secure + SameSite で置く（推奨）
   → BFF パターン。同一ドメインなら素直に使える

③ 型の共有

C# の DTO と TypeScript の型を【手で二重管理】すると必ずずれる

【対策】 OpenAPI（Swagger）から TypeScript の型を生成する ★
   dotnet でスキーマを出力 → openapi-typescript / NSwag で型を生成
   → ビルド時に自動化すれば、ずれが起きない

npx openapi-typescript https://localhost:5001/swagger/v1/swagger.json \
    -o src/api-types.ts

参考

Postman

Microsoft Learn

Tags: 移行, .NET開発, .NET Core, プログラミング, ツール類

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally