Blazorコード生成 – ステップバイステップガイド

最終更新日 2022年11月16日

Blazorは、AngularやReactなどのフレームワークで作成されたアプリと同じような、最新のシングルページ アプリケーション (SPA) アプリを構築するための、大規模な .NET 開発者コミュニティに対する Microsoft の回答です。Blazorより前、Microsoft は世界で最も人気のある Web フレームワークである ASP.NET Web Forms を出荷していました。Microsoft によって長い間廃止されていたため、.NET 開発者の唯一の選択肢は Razor Pages と ASP.NET MVC アプリケーションでした。これらは人気はあったものの、最新の Web 開発者の「残り」がシングルページ アプリケーション フレームワークで使用していたものと競合することはありませんでした。Blazorにより、Microsoft / .NET コミュニティは、.NET Framework へのアクセス、C# の使用機能など、必要なものがすべて揃ったフレームワークを手に入れました。最新の Web アプリを作成するために JavaScript を学ぶ必要もなくなりました。

なぜBlazorなのか?

Blazorは、開発者が JavaScript ではなく純粋な C# スキル、HTML コード、Razor 構文を使用してインタラクティブな Web UI を作成できるようにする、無料のオープンソース Web フレームワークです。このフレームワークへの関心が高まったのは、2021 年 5 月に Microsoft がBlazor 3.2 とBlazor WebAssembly をリリースし、ReactやAngularなどのプラットフォームが従うアプリケーションを作成するための SPA (シングル ページ アプリケーション) パターンに一致させたときです。クライアント コードとサーバー コードの両方が C# で記述されているため、ユーザーはBlazorコードと .NET ライブラリを簡単に共有できます。さらに、Blazorコードは定型句が少なくなるように最適化されており、使い始めるのが非常に簡単です。

弊社のブログには、BlazorとAngular、BlazorとReact、Blazor Server と Web Assemblyの違いを詳しく説明した 3 つの記事が掲載されています。ご興味がおありでしたら、詳細をご確認ください。

Blazorコード生成とは何ですか?

コード生成、特にBlazorコード生成は、コンパイラがアプリケーションの動作コードを自動的に生成するプロセスであり、これにより、手作業によるコーディングで発生する時間、労力、エラーが削減されます。このようなコンパイラは、ソース コードを入力として受け取り、それをマシン コードに変換します。この場合、コード ジェネレーターはApp Builder ™です。

注: Blazor (およびAngular) 用のWYSIWYG ローコード アプリ開発ツールの詳細については、以下のApp Builder製品の概要とチュートリアルをご覧ください。

App Builderを使用してBlazorコードを生成する方法は?

App Builderを初めて知る方のために説明すると、これはデザインからコード生成まですべてのプロセスを処理する包括的な WYSIWYG ドラッグ アンド ドロップ アプリ メーカーです。この製品の主な特徴は次のとおりです。

• 製品マネージャー、デザイナー、関係者、開発者向けのビジュアル アプリ ビルダーと統合プラットフォーム。
• 企業が完全なビジネス アプリを 80% 高速に設計および構築できるようにするクラウドベースのローコード アプリ開発ツール。
• 実稼働対応のBlazor WASM およびBlazor Server コード、およびAngularおよびWeb Componentsコードを生成します。また、Sketch およびFigmaデザイン ツールからデザインをインポートする機能もあります。
• Windows、MacOS、Linux 用のApp Builderデスクトップ アプリケーション。
• アプリ構築を遅らせるサイロとハンドオフを排除します。
• Blazorでは UI のあらゆる側面を手動でコーディングする必要がないため、時間、労力、コストを節約できます。
• 実行中のBlazor、Angular、Web Componentsアプリケーションのプロトタイプ作成、テスト、ライブ プレビューが容易になります。
• サードパーティのサービス、追加のデータ ソース、追加のセキュリティとコンプライアンスなどを導入できます。
• Blazorアプリの作成に役立つ優れた学習リソースを提供します。

.NET 6 では、コード生成オプションとしてBlazorを使用したApp Builderサポートが正式に開始されました。つまり、簡単なドラッグ アンド ドロップで任意のBlazor UI を作成し、次のサポート対象コンポーネントの運用可能な Razor、C#、CSS コードをすべてクリックするだけで取得できるようになりました。

• グリッドとツリー データバインディング付きグリッド
• バッジ
• アイコン
• チェックボックス、スイッチ
• アバター
• 入力グループ
• コンテナ – 絶対、行、列
• ハイパーリンク、画像、テキスト、タイトル
• リスト
• ボタン、リンクボタン
• カード
• ナビゲーションバー
• ラジオグループ

Blazorコードを生成する 5 つのステップ

ステップ1: App Builderを起動する

次に、App Builderを使用してBlazorコードを生成するには、まずApp Builderプロファイルに直接ログインしてプラットフォームを起動する必要があります。2 番目のオプションを選択すると、ホーム画面にリダイレクトされ、そこから [アプリ] タブの 3 つのコア製品 (プロトタイプ、ユーザビリティ テスト、App Builderにそれぞれアクセスできます。

ステップ 2: Blazorアプリの開始 – サンプル アプリ、既定のレイアウト、またはインポート デザインから選択します 

App Builderホーム画面から、新しいアプリを起動したり、既存のアプリをプレビューまたは編集したりできます。コンテキスト メニューから、既存のアプリの名前を変更したり、複製したり、アーカイブしたりすることもできます。

新しいBlazorアプリを起動するには、次の 4 つの方法があります。

• 既存のSketchまたはFigmaデザインから作成
• 簡単に変更できるサンプルアプリを使用する
• 基本的なデフォルトレイアウトを使用して新しいアプリを起動する
• 空白オプションを使用して最初から始める

App Builderに入ると、プラットフォームを離れることなく、デザイン時にアプリ内サイド メニューからアクティブなアプリ間を簡単に切り替えたり、ワークスペースに戻ったりすることができます。

ステップ3: Blazor WASMまたはBlazor Serverを選択する 

Blazorアプリケーションの設計を確定し、コードをプレビューする前に、ナビゲーション バーの [GitHub に公開] および [プレビュー] アクション ボタンのすぐ横にある [プラットフォーム ピッカー] ドロップダウンに注目してください。Blazorのコードを生成するには、Blazor WASM] または [サーバー] オプションを選択します。ピッカーは選択内容を記憶し、次回App Builderに移動すると、希望するフレームワークが事前に選択されます。

ステップ4: Blazorコードのプレビュー 

生成されるBlazorアプリ コードをプレビューするにはどうすればよいでしょうか。コード ビューをオンに切り替えて、デザインと並べて表示します。読み取り専用モードですが、生成されたコードの品質を確認するのに役立ちます。次に、プレビューをクリックすると、コード プレビューが表示され、これが Razor ページであることがわかります。すべてのコントロール定義、div などが表示されます。もちろん、Blazorコード タグ、表示している特定のページのレイアウトの CSS も表示されます。

ステップ5: GitHubに公開するか、Zipファイルとして保存する 

「編集」に戻ると、GitHub に公開するか、zip ファイルとしてダウンロードするかを選択できます。

コード ビューでは、HTML、CSS、TS を個別に表示できます。これにより、マークアップと CSS を記述してピクセル パーフェクトなものを作成する手間が省かれ、時間が節約されます。詳細については、包括的な開発者向けドキュメントを確認し、Blazorのサポート用App Builderを参照してください。

App Builder、デザイン サーフェイスとプレビュー ウィンドウにライブ実行中の Web アプリケーションを表示します。つまり、デザイン サーフェイスでアプリに変更を適用すると、基盤となるBlazorコードとアプリケーション モデルがリアルタイムで更新されます。生成されたBlazorアプリケーション コードは、プレビュー ウィンドウでいつでも表示できます。また、生成されたアプリケーションは、完全なアプリケーション コード リポジトリとしていつでもダウンロードでき、任意のコード エディターで開くことができます。その後、App Builderを使用して設計したアプリケーションをローカル マシンでビルドして実行し、生成されたコードに追加の変更を加えることができます。ただし、Blazorアプリケーションのコードがダウンロードされると、ローカルで行われた変更はApp Builderユーザー スペースに反映されないことに注意してください。

ただし、多くの方がAngular好んでいることは承知しています。これがフレームワークである場合は、App Builderを使用してAngularで本番環境対応のコードを生成することもできます。

Visual Studio のApp BuilderからBlazorアプリを使用する方法

アプリケーションをダウンロードしたら、.csprojファイルを開いてください。最初に気づくことの1つは、Blazor WebAssembly/Serverアプリを生成していることです。WASMアプリは、WebAssemblyベースの.NETランタイム上のブラウザで直接実行されます。Blazor WebAssemblyアプリは、AngularやReactのようなフロントエンドJavaScriptフレームワークと同様に機能します。

注: .NET ランタイムは、アプリ アセンブリおよび必要な依存関係とともにアプリとともにダウンロードされます。ブラウザー プラグインや拡張機能は必要ありません。

これで、 F5 キーを押すだけで完了です。アプリをローカルで実行しています。App App Builderで設計したものに追加していきましょう。

WYSIWYG App BuilderやIgnite UI for Blazorなどの主要なフレームワークの最新リリースやアップグレードを常に最新の状態に保ちたい場合は、ブログ記事をフォローし、タグで記事をフィルタリングしてください。