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

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

鈴⽊ 章太郎 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

• https://www.docswell.com/user/shosuz

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

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

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

• https://devblogs.microsoft.com/visualstudio/exploring-javascript-and-typescript-development-in-visual-studio/

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

ユーザーからのフィードバックと改善、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

• https://vitejs.dev/

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

• https://vitejs.dev/

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

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

• https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/

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

新しい 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

• https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/

最新のフロントエンド 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

• https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-7/

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

Hot Reload © 2023 VMware, Inc. 15

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

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

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

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

Modern MVC Validation © 2023 VMware, Inc. 20

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

リソース⼀覧 (本⽂掲載以外) • .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

• https://www.dotnetconf.net/agenda
• https://github.com/dotnet-presentations/dotNETConf/tree/main/2023/Technical
• https://www.youtube.com/watch?v=H1LlRUqj9U4
• https://github.com/danroth27/DotnetJavaScriptSamples
• https://learn.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022
• https://visualstudio.microsoft.com/vs/preview/

まとめ © 2023 VMware, Inc. 23

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

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