「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-戻る（[[ASP.NET SPA]]、[[ASP.NET Core]]）
--[[Web Essentials]]
--[[ASP.NET Core SPAテンプレート]]
--.esproj（JavaScript・TypeScriptプロジェクトシステム）

* 目次 [#c6f34b2c]
#contents

*概要 [#ie1b8f4c]
-Visual Studio 2022から本格導入された、モダンなSPA開発をC#の世界（MSBuild）とスマートに融合させるための新しいプロジェクト形式
-従来のように「.csprojの中に無理やりJavaScriptのファイルを詰め込む」のではなく、フロントエンドを独立して扱うために作られた。

*詳細 [#odffefde]
...VSCode使えば良いのでは？...

**CLIの利用 [#t2b2bfb3]
VSはVSCと同様に、生のnpm、npx、またはyarn、pnpmなどのCLIツールをバックグラウンドで直接呼び出す。

**解決した3つの課題 [#nc0c1995]
.esprojの導入により、Visual StudioでのWeb開発は以下のように劇的に変化

-ビルド
--...が重い：C#をビルドするたびにnpm run buildが走り、時間がかかる。
--...の分離：デバッグ時はVite等の高速なHMR（Hot Module Replacement）を使い、C#側はAPIのコンパイルだけに専念。

-PJ依存関係
--...がごちゃ混ぜ：NuGetパッケージとnpmパッケージの管理が1つの場所で混ざる。
--...の完全分離：バックエンドは.csproj（NuGet）、フロントエンドは.esproj（npm）と完全に分かれる。

-デバッグの
-...開始が面倒：APIとSPAを両方立ち上げるために、手動でターミナルを2つ開く必要があった。
-...マルチスタートアップ：VSの「開始」ボタン1つで、APIの起動とSPAの開発サーバー（Vite等）の起動、ブラウザ起動まで自動化。

**ファイルの中身（仕組み） [#f4e3ca51]
.esprojファイルの実体は、C#の.csprojなどと同じXML形式（MSBuild形式）のファイルで、主に「JavaScriptツールチェーンとMSBuildを結びつける設定」だけが書かれる。

 <Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.0-alpha.x.x">
   <PropertyGroup>
     <StartupCommand>npm run dev</StartupCommand>
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
     <SpawnServerScript >true</SpawnServerScript>
     <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
     <ShouldRunBuildScript>false</ShouldRunBuildScript>
   </PropertyGroup>
   <ItemGroup>
     <Folder Include="src\assets\" />
   </ItemGroup>
 </Project>

-重要なMSBuildプロパティ
--ShouldRunNpmInstall: true（デフォルト）にしておくと、VSでソリューションを開いた時やビルド時に、自動で npm install を実行
--ShouldRunBuildScript: 製品リリース用（Publish）ビルドの際、自動で npm run build を走らせ、成果物を指定のフォルダに出力

**ASP.NETとの「プロキシ連携」 [#z66f4aaa]
-.esproj テンプレート（例：React with ASP.NET Core）を選ぶと、フロントエンドとバックエンドがどうやって通信するかの仕掛け（プロキシ設定）が自動で構築される。
--SPA側（Vite等）のポート: localhost:5173
--API側（C#）のポート: localhost:7200

-開発中、SPA側から /api/weather のようにリクエストを送ると、Vite側の開発用プロキシ（vite.config.ts に自動記述される設定）が、裏側で自動的にC#側の localhost:7200/api/weather へリクエストを転送しCORSエラーに悩まされることがなくなる。

**どんな人に向いている？ [#l41ed86b]
-Visual Studio 1つで開発を完結させたい：「C#のデバッグはVS、フロントエンドはVS Code」と画面を行き来するのが面倒で、1つのIDE、1つの「デバッグ開始（F5）」ボタンで全てを制御したい場合に最高のパフォーマンスを発揮
-CI/CD（ビルドパイプライン）を一本化したい：MSBuildの仕組みに乗っかっているため、Azure PipelinesやGitHub Actionsで「ソリューション全体のビルド」を実行するだけで、フロントエンドの npm install & build も処理できる。

*参考 [#de3d0797]
...

----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS