Visual Studio 2022 で、ブラウザーリンクの機能を使わない場合は不要となる Visual Studio とブラウザ間の通信を行わないようにする方法を書きます。2023 年 12 月 10 日現在の最新版 17.8.3 の話で、更新プログラムが適用されると話が変わるかもしれませんのでご注意ください。

Visual Studio 2022 では、上の画像の赤枠で示した「ブラウザーリンクを有効にする」にはデフォルトでチェックは入っていません。しかし、チェックを入れなくてもブラウザーリンクの機能による Visual Studio とブラウザー間の通信が行われます。ブラウザーリンクは使わないのにそのための通信が行われるのは避けたい場合、通信を行わないようにするにはどうすればいいかという話です。

ブラウザーリンクというのは何かですが、Visual Studio 2013 で新たに搭載された機能で、Edge, Chrome, Forefox など複数のブラウザを同時に立ち上げて表示させたり、Visual Studio 上でのコードの修正を複数のブラウザに同時に反映させたりする機能だそうです。詳しくは以下のMicrosoft のドキュメントを見てください。

• クロスブラウザのテストに Visual Studio 2013 のブラウザー リンクをどうぞ
• Visual Studio 2013でのブラウザー リンクの使用
• ASP.NET Core の Browser Link

「ブラウザーリンクを有効にする」にチェックが入ってない状態でも ASP.NET が生成する html ソースの body 要素の最後に以下のようなブラウザーリンクのためのコードが追加されます。（その下の script タグの aspnetcore-browser-refresh.js はホットリロード機能を実現するために使うものらしいです）

<!-- Visual Studio Browser Link -->
<script type="text/javascript" 
  src="/_vs/browserLink" 
  async="async" 
  id="__browserLink_initializationData" 
  data-requestId="14aa4d281859488cbb19bdfef314a877" 
  data-requestMappingFromServer="false" 
  data-connectUrl="http://localhost:57421/8a979671883c4acf85fb8bd2fd42853e/browserLink">
</script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js">
</script>

Visual Studio からアプリを実行すると、上のスクリプトが動いて Visual Studio とブラウザが自動的に通信を行います。アプリを実行して Fiddler で要求・応答をキャプチャすると、その中には上のスクリプトによる通信が含まれます。下の画像を見てください。

画像の #13, #16, #18 が script 要素の data-connectUrl 属性に設定された localhost:57421 との通信です。#23 の localhost:44320 は、応答が HTTP 101 Switching Protocols となっており、応答ヘッダに Upgrade: websocket が含まれているところを見ると、やはりブラウザーリンクの関係のようです (ブラウザーリンクは通信に SignalR を使います)。

Visual Studio を使っての開発中であれば、ブラウザーリンクの機能を使う使わないに関わらず、デフォルトの設定のままにしておいて不都合はないかもしれません。しかし、使わないのに Visual Studio とブラウザー間のやり取りがあるのは煩わしいという場合があると思います。

その余計なやり取りをなくすにはどうしたらいいかですが、ググって調べてみると How to disable Browser Link in ASP.NET Core (.NET 6, VS 2022) という記事が見つかりました。Visual Studio の［ツール(T)］⇒［オプション（O)...］でオプション画面を開いてホットリロード関係の設定を変更する必要があるとのことです。

設定画面を開いてみると、デフォルトでは以下のように「CSS ホットリロード」が「有効」に設定されています。

これを無効に変更すると、ASP.NET が生成する html ソースにはブラウザーリンクのため script 要素は含まれなくなり localhost:57421 との通信は行われなくなくなります。上の Fiddler の画像の #48 以降のやり取りがその結果です。

ただし、ここまででは #51 に示されるように依然として localhost:44320 との通信が行われています。また、html にはホットリロード用の script タグは残ったままになります。

localhost:44320 との通信およびホットリロード用の script タグも無くしたい場合は、「自動ビルドと更新のオプション」も「なし」に設定し、

さらに、デバッグ > .NET/C++ ホットリロードの設定画面で以下の赤枠の 2 項目のチェックを外します。

詳しいことは分かりませんが、ブラウザーリンクとホットリロードとは関係があるようで、上のようなホットリロードの設定がブラウザーリンクに影響しているようです。

ASP.NET のようなサーバーサイドの技術だけでなくフロントエンドの技術の勉強もしないと時代に取り残されるかもしれないと思って React の勉強を初めることにしました。下の画像が今日のところの成果です。（笑）

フロントエンドのフレームワークの有名どころは React, Angular, Vue だそうですが、まずは React の勉強から始めることにしました。

理由は、下の画像の通り使い慣れた Visual Studio のテンプレートでアプリの基本的な部分は自動的に生成してくれ、実行やデバッグも Visual Studio でできそうだったからです。

Angular という選択肢もあったのですが、テンプレートで作ってみると TypeScript などが何となく自分には合わなそうな気がしたので止めました。Vue は Visual Studio のテンプレートには見つからなかったのでとりあえずパスです。

一番上の今日の成果の画像は、Visual Studio 2022 の「React.js での ASP.NET Core」のテンプレートで作った React アプリに、mdn web docs の記事「React をはじめる」のサンプルを追加したものです。

JavaScript の知識の習得が何年か前に止まったままの自分には class とか => とか見慣れないものが出てきて、上の画像を表示するだけでもすでにいろいろ躓いています。（汗） なので、途中で挫折しそうな気もしますが、少なくとも半年ぐらいは頑張ってみようと思っています。

2021 年 11 月 8 日にリリースされた Visual Studio Community 2022 を自分の PC にダウンロードして使えるように設定しました。

まず手始めに、テンプレートを使って .NET 6.0 の ASP.NET Core MVC アプリのプロジェクトを作ってみましたので、Visual Studio 2019 との違いなど気が付いた点を備忘録として書いておきます。

注: ここに書いたことは自分が最初にプロジェクトを作ったときに気が付いた点のみで他にも変更点は多々あるようです。詳しくは Microsoft のドキュメント「ASP.NET Core 5.0 から 6.0 への移行」を見てください。

この記事を書いた時点での Visual Studio のバージョンは 17.0.1、.NET SDK のバージョンは 6.0.100、.NET Runtime のバージョンは 6.0.0 です。

(1) 開発サーバー

デフォルトで Kestrel をエッジサーバーとして使うようになってました。

なので、その設定のまま Visual Studio からアプリを起動すると以下のように dotnet run コマンドによってアプリが Kestrel で実行され、

処理された応答が自動的にブラウザに表示されます。（注: 自動的にブラウザに表示されるのは Visual Studio を使った場合です）

ちなみに、Visual Studio 2019 ではデフォルトでは IIS Express を使用するインプロセスホスティングモデルになります。

詳しくは先の記事「開発環境で Kestrel 利用 (CORE)」を見てください。

(2) Bootstrap

Bootstrap.css, Bootstrap.js のバージョンが 5.1.0 にアップグレードされています。

ちなみに、Visual Studio 2019 で .NET 5.0 の ASP.NET Core MVC アプリを作った場合のバージョンは 4.3.1 になります。

自分が気が付いた限りですが、特に大きく違うのがラベルとテキストボックスの表示でした。他にも違いは多々あると思いますが。

他に、Bootstrap.js が jQuery に依存しなくなったことも大きな違いだと思います。

(3) Startup.cs / Program.cs

Startup.cs が無くなっていました。Visual Studio 2019 ではそれにサービス、ミドルウェア追加のためのコードを書いていたのですが、それらは Program.cs に移すことにしたらしいです。

Program.cs にエントリーポイントとして存在しなければならないはずの Main メソッドが見当たりません。Microsoft の「新しい C# テンプレートで、最上位レベルのステートメントが生成される」はコンソールアプリのドキュメントですが、ここに書いてあることが ASP.NET Core MVC にも適用されているようです。

(4) NULL 許容参照型

NULL 許容参照型がプロジェクト全体で有効化されています。

ASP.NET Core Identity 関係の .cshtml ファイルのソースコードにそれに対応してない部分があって警告が出ます。（.cshtml.cs ファイルの方は #nullable disable の付与で対応済み）

自分が試した時には Logout.cshtml, Login.cshtml, Register.cshtml, _Layout.cshtml の 4 つのファイルで警告が出ました。

Layout.cshtml は (string) ⇒ (string?) に変更、Logout.cshtml は if (User.Identity?.IsAuthenticated ?? false) に変更、Login.cshtml と Register.cshtml は @foreach (var provider in Model.ExternalLogins!) というように null 免除演算子 ! の追加で対処できます。

(5) CSS 分離

.NET 5.0 の Blazor アプリで導入された CSS 分離のための仕組みが MVC アプリにも導入されました。下の画像は Views/Shared/_Layout.cshtml の一部ですが、赤枠で囲ったコードがその機能を使うためのものです。

Microsoft のドキュメント「ASP.NET Core Blazor の CSS の分離」によると、CSS スタイルを個々のビューに分離して、次のことを回避するのが目的だそうです。

• 維持が困難なグローバル スタイルへの依存関係
• 入れ子になったコンテンツでのスタイルの競合

具体的には、以下のようにビューと同じ名前の css ファイルを作成し、

このセクションの一番上の画像のように <link ... href="~/<プロジェクト名>.styles.css" ... という外部 css ファイルへの参照をコードに含めると、それからダウンロードされる css ファイルには以下のように属性セレクタが含まれるようになり、

当該ビュー（上の例では _Layout.cshtml）の html 要素には上の css の属性セレクタに設定された属性が付与されます。

その結果、css スタイルを個々のビューに分離することができます。

(6) ブラウザーリンクとファイルウォッチャー

html ソースを見ると以下のコードが自動的に（勝手に）生成されています。

前者は名前からすると Visual Studio 2015 にもあったブラウザーリンクという機能らしいです。Visual Studio 2019/2022 ではデフォルトで無効になっています。なのにスクリプトファイルを参照しているのは何故か、どのように使うのかは不明・未確認です。

後者はファイルウォッチャートという機能らしいです。aspnetcore-browser-refresh.js で検索すると「ファイル ウォッチャーを使用した ASP.NET Core アプリの開発」という記事が見つかります。

その記事の「ブラウザーの更新」のセクションに "開発中のこのような場合には、アプリに手動でスクリプトを挿入します。 たとえば、Web アプリを構成してスクリプトを手動で挿入するには、_framework/aspnet-browser-refresh.js を含むようにレイアウト ファイルを更新します。" と書いてあります。

Visual Studio 2022 で提供されたホットリロードというデバッグ中にコードを変更しながら開発を行うことを可能にした機能を実現するために使うものらしいですが、詳細は調べ切れてなくて不明です。

これらをどのように利用できるかは今後の課題ということで・・・