Visual Studio用Blazorエクステンションで時間を節約

Tim Corey

9 分 31 秒

Blazorは、C#や.NETを使用したフル機能のウェブアプリを構築する上で、急速に普及しつつある技術です。 Blazor WebAssemblyアプリ、Blazorサーバープロジェクト、あるいはモバイルとデスクトップのハイブリッドアプリのいずれに取り組むにしても、生産性は非常に重要です。 *"Timesaving Blazor Extension for Visual Studio"*と題された9分間のビデオでは、ティム・コーリーが、日常的なBlazor開発タスクから摩擦を取り除くために設計された強力なVisual Studio拡張について説明しています。

理論を深く掘り下げる代わりに、TimはJimmy Engströmが開発したこのツールが、Visual Studio内でBlazorファイルをより効率的に作成、管理、リファクタリングする方法について、実践的なデモンストレーションを提供します。 このチュートリアルの詳細を、ビデオのタイムラインに合わせて説明します。

クイック概要：Blazor 開発をより簡単に

Timはまず、Visual StudioでBlazorを使用する開発者がワークフローを効率化できるようにする、という目標を説明します。 このエクステンションは、複数の Blazor コンポーネントや Blazor ページで作業する際に繰り返しになりがちな、Blazor ファイルの管理、名前空間、コードビハインドの分離といった、小さな煩わしさをターゲットにしているそうです。

このVisual Studio拡張機能は、利便性だけを追求したものではありません； レンダリングパフォーマンスの向上、UIインタラクティビティの簡素化、.NET開発サイクルのスピードアップ、特にBlazorウェブアプリのためのものです。

拡張機能のインストール by Jimmy Engström

Timは、Jimmy Engströmが作成したBLMというVisual Studioの拡張機能を紹介します。 Visual StudioのExtensions > Manage Extensionsから "BLM extension "を検索してください。インストールしたら、Visual Studioを再起動する必要があります。

Timは、この拡張機能には、GitHubのREADMEファイルから直接引っ張ってきた優れたドキュメントが含まれていると指摘する。つまり、新しい開発者でもIDEを離れることなく使い方を理解することができるということだ。

Blazorプロジェクトの立ち上げ

インストール後、新しい Blazor プロジェクトを作成するか、既存の Blazor プロジェクトを開く必要があります。 Timは、.NET Coreを使用したBlazor Serverプロジェクトである "SuggestionApp "というサンプルプロジェクトをロードします。 これは、Razorの構文とコンポーネント内のコードビハインドロジックが混在していることを示す、素晴らしい例です。

RazorファイルとCode-Behindで作業する

Tim は Profile.razor ファイルを開き、Razor マークアップと C# ロジックの両方が含まれていることを説明します。 ロジックをcode-behindファイルに分離したい場合、この拡張機能を使えば、右クリック > Create Code Behindで簡単にできます。 これにより、.razor コンポーネントに関連付けられた .razor.cs ファイルが生成されます。

例にはすでにいくつかのコードが含まれていますが、Tim はそれを削除して新しく始めることをシミュレートし、Test.razor という名前の新しいコンポーネントを作成します。

Razorコンポーネントの記述とリンクについて

Test.razorで、Timは単純な文字列変数を定義しています：

string test = "hello world";

string test = "hello world";

Dim test As String = "hello world"

Dim test As String = "hello world"

そして、Razorマークアップの@test式を使ってブラウザにレンダリングする。 プロジェクトをコンパイルした後、コンポーネントは完全に機能します。 この例では、.NETランタイムとコンパイルされたアセンブリを使用して、Blazorコンポーネントでダイナミックコンテンツをレンダリングするデフォルトの動作を紹介します。

Visual StudioのCode-Behind機能への抽出

Timは、Visual Studioのネイティブ機能である、Quick Actions > Refactor > Extract to Code Behindを使用したインラインRazorロジックのコードビハインドファイルへの抽出を実演します。 これは、保守性とテストのために良い習慣です。

拡張機能は逆機能を追加します

この拡張機能が真価を発揮するのはここからです。 Visual Studioは.razor.csファイルへのコードの移動をサポートしていますが、戻すことはできません。 拡張機能を使って、ティムは .razor.cs ファイルを右クリックし、"Move Code Behind to Razor" を選択します。即座に C# ロジックが Razor ファイルに戻されます。

この機能はベータ版ですが、ティムは、開発者がファイルを簡素化したり、ロジックをインラインでデバッグしたりする際に、安定しており、役に立つと評価しています。

分離された CSS と JS ファイルを作成する

Tim氏は、右クリック > 分離されたCSSを作成するという、もう1つの時間節約方法を紹介しています。 これは、Blazorがコンポーネント固有のスタイリングに使用するパターンであるTest.razor.cssという名前のファイルを作成します。 Tim氏は、拡張子がなければ、Add > New Itemでファイルを手動で作成し、命名が一致するようにする必要があると説明しています。

JavaScriptの分離にも同じ機能があり、スコープされた動作を個々のコンポーネントに簡単にアタッチすることができます。

アプリ全体でコンポーネントの使用法を検索する

もう一つの便利な機能として、ティムはNotAuthorizedコンポーネントを右クリックし、"Find Component Usages "を選択します。これにより、そのコンポーネントが参照されているすべてのファイルがすぐに表示されます。 特に、ページやレイアウトにまたがってコンポーネントが再利用される大規模な.NETプロジェクトでは、リファクタリングに非常に役立ちます。

コンポーネントから BUnit テストを生成する

テストは、どのようなウェブアプリにも欠かせないものです。Blazor のテストフレームワークである BUnit テストを自動生成する方法を紹介します。 コンポーネントを右クリックして "Generate BUnit Test "を選択すると、RazorまたはC#の構文を選択できます。

このツールは、必要なテストの足場を生成し、UIテストの迅速なセットアップを可能にします。 自動テストを通じて、セキュリティ、レスポンス検証、UI動作を実装したい開発者に最適です。

共有 UI を再利用可能なコンポーネントに抽出する

次にTimは、Razor UIブロックをハイライトし、"Extract to Component "を選択する方法を紹介します。彼のデモでは、コンテナ内のボタンをTestButtonという新しいコンポーネントに抽出しています。 これにより、モバイルアプリ、Blazorハイブリッドアプリ、または大規模なWebアプリケーションを開発する際に特に重要な、よりクリーンなコード、より良い再利用、モジュール化されたUI設計が可能になります。

Blazorアプリでルートを視覚化する

もう一つの特筆すべき機能は、Show Blazor Routesで、Extensions > BLM > Show Blazor Routesでアクセスできます。 このツールは、Razorファイルの@pageディレクティブで定義された、プロジェクト全体で定義されたすべてのルートを一覧表示します。

Timは、Test.razorの@pageディレクティブを変更すると、ルートリストが即座に更新されることを示します。リスト内の任意のルートをダブルクリックして、対応するコンポーネントを開くことができます。 これにより、特に拡張ナビゲーション、複数のレンダーモード、または深くネストされたコンポーネントを使用するアプリでは、ナビゲーション管理がより効率的になります。

.NETウォッチでプロジェクトを実行する

Timは、Visual Studioに内蔵されているホットリロードに頼るのではなく、PowerShell経由で.NET Watchを使用するという、パフォーマンスに関する重要なヒントを紹介しています。 彼は、従来のリロードはより遅く、一貫性がないと説明しています。 しかし、拡張機能を使えば、プロジェクトを右クリックして、"Run .NET Watch "を選択できます。

PowerShellウィンドウを起動し、以下のコマンドでアプリを実行します：

dotnet watch

dotnet watch

dotnet watch

dotnet watch

これにより、ライブリロード、高速起動、より応答性の高い開発が可能になります。 ウェブサーバーにデプロイする開発者や、正式にはプログレッシブアプリと呼ばれるものを構築する開発者にとって、このスピードアップは開発体験を大幅に向上させることができます。

最後に思うこと：この拡張機能をインストールすべき理由

最後の1分で、ティムはBlazor開発のためのこのVisual Studio拡張機能のパワーを総括します。 Blazor WebAssemblyアプリ、サーバーサイドのプロジェクト、またはその中間を構築しているかどうかにかかわらず、このツールは提供します：

• ファイルとコンポーネントの作成を高速化

• Razor と C# のコードをより明確に分離する。

• より簡単なテストとルート探索

• レンダーツリー理解の向上

• コンパイルされた構文とマークアップのより良い管理

Timは、.NET、C#、またはBlazorアプリを使用している人は、この拡張機能をインストールし、デフォルトのツールチェーンに統合することを検討することを強くお勧めします。

結論Blazor + Visual Studio = この拡張機能でさらに良くなります

もしあなたがVisual StudioでBlazorを使ってモダンなWebアプリを開発しているなら、Tim Coreyのウォークスルーはこの小さな拡張機能がいかに強力かを示しています。 ファイル操作、テスト、ルーティング、ビルド効率を高める機能を備え、最小限のセットアップで大きな利益をもたらします。

Jimmy Engströmの仕事のおかげで、開発者はBlazorと.NET Coreのエコシステムに完璧に適合するツールを利用できるようになりました。

モバイル、デスクトップ、またはウェブアプリのいずれを開発している場合でも、この拡張機能は、Blazor、Visual Studio、および .NET ランタイムのフルポテンシャルを解き放ちます。詳細については、Tim の ビデオ を視聴し、彼の チャンネル に登録して、C# および開発に関する知見あるビデオをさらにお楽しみください。