最新の React/TypeScript SPA テンプレートを .NET 8 で試してみよう

16.4K Views

November 25, 23

#react #angular #vue #node.js #vite #javascript #visual studio 2022 preview #visual studio code #typescript #.net conf #asp.net core #.net 8 #interactjs #microsoft.jsinterop #npm #React #TypeScript #.NET 8 #SPA #Vite

スライド概要

「最新の React / TypeScript SPA テンプレートを .NET 8 で試してみよう」
ASP. NET をバックエンドとして React / TypeScript Web アプリケーションを開発する際に、プロジェクトの作成と実行エクスペリエンスが大幅に高速化されるという、新しい Vite ベースのテンプレートをご紹介します。

.NETラボ 勉強会 2023年11月
https://dotnetlab.connpass.com/event/299544/

profile-image
スライド一覧

FPT ジャパン FPT データ& AI インテグレーション　エグゼクティブエバンジェリスト 独立行政法人　国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から、Dell、Accenture、Elastic、VMware を経て現職まで一貫して開発者向けに最新技術を啓発。GPU クラウド技術訴求、AI 駆動開発推進。　 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。 Locofy.ai Regional Developer Advocate Google Cloud Partner All Certifications Engineer 2025

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用
intellij spring starter github github copilot github copilot chat visual studio code java spring boot h2
user-img Shotaro Suzuki 61.3K
slide-thumbnail

新たな AI 駆動開発の潮流(SWE Agent, AutoDev,Devin, GitHub Copilot Workspace等)
devin opendevin azure autodev github github copilot github copilot chat swe agent chatgpt openai python conda claude github copilot workspace gpt-4 gpt-4o agent github codespace
user-img Shotaro Suzuki 47.1K
slide-thumbnail

Locofy.ai による AI 駆動 エンタープライズフロンドエンド開発実践-s
vs code github copilot gemini locofy.ai figma enterprise ui/ux designer & developer collaboration fpt fpt ai factory nvidia gpu cloud frontend
user-img Shotaro Suzuki 46.8K
slide-thumbnail

Azure OpenAI Service 概要とサンプルアプリ等のご紹介
microsoft azure openai .net python javascript ai chatgpt azure openai service csharp
user-img Shotaro Suzuki 46.5K
slide-thumbnail

FPT AI Factory で加速する AI 開発-20250213-公開版
fpt fpt ai factory generative ai azure google cloud aws kubernetes gpu metal cloud nvidia enterprise nvidia nvidia nim nvidia nemo code vista test vista fpt ai studio gpu managed cluster gpu container nvidia h100 nvidia h200 fine tuning model serving rag openai anthropic claude google gemini visual studio code visual studio intellij idea android studio jetbrains multi-agent ai driven development ivychat
user-img Shotaro Suzuki 28.8K
slide-thumbnail

VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2
vscode github github copilot github copilot chat codex mermaid visual studio code visual studio azure sql database azure cosmos db openai asp.net core azure cognitive seach csharp azure openai service prompt engineering signalr chat
user-img Shotaro Suzuki 15.7K
各ページのテキスト
1.

最新の React/TypeScript SPA テンプレートを .NET 8 で試してみよう 鈴⽊ 章太郎 主席エンタープライズアーキテクト ヴイエムウェア株式会社 戦略ビジネス推進本部 © 2023 VMware, Inc.

2.

鈴⽊ 章太郎 X (Twitter) : @shosuz ヴイエムウェア株式会社 戦略ビジネス推進本部 主席エンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、 Microsoft Azure 等の開発者向け技術啓発活動を実施。 その後 Dell、Accenture、Elastic での開発者向け技術 啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ 策定等を中⼼に、開発者向け最新技術啓発活動中。 2019年4⽉より2021年8⽉まで、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務。 2021年9⽉より、デジタル庁 プロジェクトマネージャーユニット & 戦略・組織グループ 調査・企画 AI チーム ソリューション アーキテクトを兼務。 ©2023 VMware, Inc. https://www.docswell.com/user/shosuz

3.

Agenda l React TypeScript SPA テンプレートについて l フィードバックと Vite の採⽤による進化 l 新しい React TypeScript SPA テンプレートの登場 l .NET 8 とのインタラクション l .NET Conf 2023 セッション他リソース l まとめ ©2023 VMware, Inc. 3

4.

React TypeScript SPA テンプレートについて © 2023 VMware, Inc. 4

5.

Visual Studioで JavaScript と TypeScript を開発する https://devblogs.microsoft.com/visualstudio/exploring-javascript-and-typescript-development-in-visual-studio/ ・ 4/27 に初めて新テンプレートが登場 ・ JavaScript および TypeScript プロジェクトのサポート ・ プロジェクトテンプレートの追加 ・ VS Code デバッグとの互換性の追加 © 2023 VMware, Inc. April 27th, 2023 5

6.

フィードバックと Vite の採⽤による進化 © 2023 VMware, Inc. 6

7.

ユーザーからのフィードバックと改善、Vite の取り込み フィードバックによる改善 • ユーザーはより優れた React TypeScript プロジェクト作成エクスペリエンスを望んでいる 対応︓ tsconfig と SpaProxy をすぐに設定できる ASP.NET テンプレートを組み合わせた 新しい React TypeScript テンプレートを提供 1. ASP.NET バックエンドプロジェクトから React TypeScript フロントエンドプロジェクトへのプロジェクト参照は⾃動的に設定 される 2. 両⽅のプロジェクトを1つのアプリケーションとして⼀緒に公開できる • create-react-app と vue cli の両⽅が、これらのフレームワーク⽤の新しいアプリケーション を作成するための推奨される⽅法ではなくなった 対応︓ React と Vue の両⽅で、 Vite (ヴィート、フランス語で「素早い」という意味の単語）を⽤いて JavaScript と TypeScript プロジェクト テンプレートの新しいプロジェクトを作成 1. プロジェクトのビルドと実⾏、サーバーの起動や更新の⾼速化など、プロセスのパフォーマンスも向上 2. これらのタイプのプロジェクトの作成時間が⼤幅に短縮される 3. 必要な依存関係がマシンにローカルにインストールされていない場合の作成エラーの問題にも対処できる © 2023 VMware, Inc. 7

8.

https://vitejs.dev/ © 2023 VMware, Inc. 8

9.

新しい React TypeScript SPA テンプレートの登場 © 2023 VMware, Inc. 9

10.

React and ASP.NET Core (Preview) テンプレート https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/#spa 現在は .NET 8 と Visual Studio 17.8 で推奨 される SPA テンプレート 最新の React TypeScript SPA テンプレートを 最新のプレビューで利⽤できる ・JavaScript SDK を使⽤するすべての React および Vue テンプレートが Vite を使⽤するように変更 ・ASP.NET をバックエンドとして使⽤して React TypeScript Web アプリケーションを開発する場合に最適 ・プロジェクトの作成と実⾏エクスペリエンスが⼤幅に⾼速化 © 2023 VMware, Inc. 10

11.

新しいプロジェクトテンプレート © 2023 VMware, Inc. 11

12.

新しい Visual Studio SPA テンプレート https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/#spa .NET と JavaScript の世界を簡単につなぐことができる • • • • • • • • マシンにローカルにインストールした最新のフロント エンドフレームワークのバージョンに対応 React、Angular、Vue の JavaScript と TypeScript の両⽅に対応したテンプレート リッチな JavaScript と TypeScript のコード 編集体験 フロントエンドとバックエンドのプロジェクトをきれいに 分離 JavaScript ビルドツールを .NET ビルドと統合 npm 依存関係管理 UI Visual Studio Code のデバッグと起動設定に 対応 任意の JavaScript テストフレームワークを使⽤ して、テストエクスプローラーで、フロントエンドの ユニットテストを実⾏ © 2023 VMware, Inc. ※ 古い単⼀の SPA テンプレートから、.esproj を使⽤する新しい 複数のプロジェクトセットアップにテンプレート化された既存のプロジェクト の更新に関するガイドは、後⽇別のブログ記事で公開とのこと 12

13.

最新のフロントエンド JavaScript CLI ツールを使⽤してクライアント アプリを⽣成 https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/#spa 常に最新バージョンで最新の状態に保たれる • • • • • • [新しい npm パッケージのインストール] ダイアログ npm の依存関係を簡単に検索してインストール できる JavaScript プロジェクトをビルドすると、 JavaScript SDK によって npm パッケージの 依存関係がインストールされる その後、Visual Studio から、またはコマンドライン で dotnet run を使⽤してアプリを実⾏可能 .NET コードと JavaScript コードの両⽅に対して 豊富なデバッグ サポートを利⽤できる Visual Studio テスト エクスプローラーを使⽤して テストを検出して実⾏も可能 © 2023 VMware, Inc. 13

14.

npm ⾃動インストール、デバッグ設定、 npm の依存関係の検索とインストール、 デバッグ実⾏と値ウォッチ © 2023 VMware, Inc. 14

15.

Hot Reload © 2023 VMware, Inc. 15

16.

.NET 8 とのインタラクション © 2023 VMware, Inc. 16

17.

React + ASP.NET Core 統合して発⾏ © 2023 VMware, Inc. 17

18.

interact.js を使ったドラッグ＆ドロップの実装 © 2023 VMware, Inc. 18

19.

Microsoft.JSInterop を使った各種ライブラリとの連携 © 2023 VMware, Inc. 19

20.

Modern MVC Validation © 2023 VMware, Inc. 20

21.

.NET Conf 2023 セッション他リソース © 2023 VMware, Inc. 21

22.

リソース⼀覧 (本⽂掲載以外) • .NET Conf 2023 Agenda https://www.dotnetconf.net/agenda • .NET Conf 2023 Resources https://github.com/dotnet-presentations/dotNETConf/tree/main/2023/Technical • .NET is the best backend for your JavaScript frontend https://www.youtube.com/watch?v=H1LlRUqj9U4 • Samples of using .NET with JavaScript https://github.com/danroth27/DotnetJavaScriptSamples • チュートリアル: Visual Studio での React を使⽤した ASP.NET Core アプリの作成 • https://learn.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022 Visual Studio 2022 Preview のダウンロード Confidential │ ©2021 VMware, Inc. 22

23.

まとめ © 2023 VMware, Inc. 23

24.

Agenda まとめ l React TypeScript SPA テンプレートについて l フィードバックと Vite の採⽤による進化 l 新しい React TypeScript SPA テンプレートの登場 l .NET 8 とのインタラクション l .NET Conf 2023 セッション他リソース l まとめ ©2023 VMware, Inc. 24

25.

Thank you for your attention! © 2023 VMware, Inc.