ASP.NET Core Web UI を選択する

ASP.NET Core は完全な UI フレームワークです。 アプリの Web UI のニーズに合わせて組み合わせる機能を選択します。

新しいプロジェクト開発では、ASP.NET Core Blazor をお勧めします。

ASP.NET Core Blazor

Blazor はフルスタック Web UI フレームワークであり、ほとんどの Web UI シナリオでお勧めします。

Blazor を使用する利点:

• 再利用できるコンポーネント モデル。
• 効率的な差分ベースのコンポーネント レンダリング。
• WebAssembly 経由でサーバーまたはクライアントからコンポーネントを柔軟にレンダリングする。
• C# で豊富な対話型 Web UI コンポーネントをビルドする。
• サーバーからコンポーネントを静的にレンダリングする。
• スムーズなナビゲーションとフォーム処理を実現し、ストリーミング レンダリングを可能にするために、サーバー レンダリング コンポーネントを段階的に強化します。
• クライアントとサーバーで共通ロジックのコードを共有します。
• JavaScript との相互運用。
• コンポーネントを既存の MVC、Razor Pages、または JavaScript ベースのアプリと統合します。

Blazor の完全な概要、そのアーキテクチャと利点については、「ASP.NET Core Blazor」および ASP.NET Core Blazor のホスティング モデル」を参照してください。 最初の Blazor アプリの使用を開始するには、最初の Blazor アプリのビルドに関するページを参照してください。

ASP.NET Core Razor Pages

Razor Pages は、サーバーでレンダリングされた Web UI をビルドするためのページ ベースのモデルです。 Razor Pages の UI は、ブラウザー要求に応答してページの HTML と CSS を生成するために、サーバーに動的にレンダリングされます。 そのページは、表示する準備が整ったクライアントに到着します。 Razor Pages のサポートは、ASP.NET Core MVC に基づいています。

Razor Pages の利点:

• UI をすばやくビルドして更新します。 UI とビジネス ロジックの懸念事項を分離したまま、ページのコードがページと共に保持されます。
• テスト可能で、大規模なアプリにスケーリングできます。
• ASP.NET MVC よりも簡単な方法で ASP.NET Core ページを整理しておくことができます。
  • ビュー固有のロジックとビュー モデルを、独自の名前空間とディレクトリにまとめることができます。
  • 関連ページのグループは、独自の名前空間とディレクトリに保持できます。

初めての ASP.NET Core Razor Pages アプリを始めるには、「Razor」を参照してください。 ASP.NET Core Razor Pages の完全な概要については、「Razor」を参照してください。

ASP.NET Core MVC

ASP.NET Core MVC ではサーバーで UI をレンダリングし、Model-View-Controller (MVC) アーキテクチャ パターンを使用します。 この MVC パターンでは、モデル、ビュー、コントローラーという 3 つの主要なコンポーネントのグループにアプリを分けます。 ユーザー要求はコントローラーにルーティングされます。 コントローラーには、ユーザーの操作を実行したり、クエリの結果を取得したりするためにモデルを操作する役割があります。 コントローラーではユーザーに表示するビューを選択し、必要なモデル データを提供します。

ASP.NET Core MVC の利点:

• 大規模な Web アプリをビルドするスケーラブルで成熟したモデルに基づいています。
• 最大限の柔軟性を実現するために明確に懸念事項を分離します。
• Model-View-Controller での責任の分離により、低レベルの実装の詳細に密結合することなく、ビジネス モデルを確実に進化させることができます。

ASP.NET Core MVC の使用を開始する場合は、「ASP.NET Core MVC の概要」を参照してください。 ASP.NET Core MVC のアーキテクチャと利点の概要については、「ASP.NET Core MVC の概要」を参照してください。

フロントエンド JavaScript フレームワークを使用する ASP.NET Core シングルページ アプリケーション (SPA)

Angular、React、Vue のような、一般的な JavaScript フレームワークを使用する ASP.NET Core アプリ用のクライアント側ロジックをビルドします。 ASP.NET Core では、Angular、React、Vue 用のプロジェクト テンプレートが提供され、他の JavaScript フレームワークでも使用できます。

JavaScript フレームワークを使用する ASP.NET Core SPA には、前述の一覧に示されたクライアント レンダリングの利点に加えて、次のような利点があります。

• JavaScript ランタイム環境は、ブラウザーで既に提供されています。
• 大規模なコミュニティと成熟したエコシステム。
• Angular、React、Vue のような、一般的な JS フレームワークを使用する ASP.NET Core アプリ用のクライアント側ロジックをビルドします。

欠点:

• より多くのコーディング言語、フレームワーク、およびツールが必要です。
• コードを共有するのが難しいため、一部のロジックが重複する可能性があります。

作業を開始するには、次のトピックをご覧ください。

• Angular を使用した ASP.NET Core アプリの作成
• React を使用した ASP.NET Core アプリの作成
• Vue を使用した ASP.NET Core アプリの作成
• Visual Studio の JavaScript および TypeScript

複数の Web UI ソリューションの組み合わせ: ASP.NET Core MVC または Razor Pages と Blazor

MVC、Razor Pages、および Blazor は、ASP.NET Core フレームワークの一部であり、一緒に使用するように設計されています。 Razor コンポーネントは、Razor Pages と MVC アプリに統合できます。 ビューまたはページがレンダリングされるときには、コンポーネントを同時に事前レンダリングすることができます。

MVC または Razor Pages + Blazor には、MVC または Razor Pages の利点に加え、次のような利点があります。

• 事前レンダリングを行うと、サーバー上で Razor コンポーネントが実行されて、ビューまたはページにレンダリングされます。これにより、アプリの読み込み時間が短縮されます。
• コンポーネント タグ ヘルパーを使用して、既存のビューまたはページに対話機能を追加します。

ASP.NET Core MVC または Razor Pages と Blazor の使用を開始するには、「ASP.NET Core Razor コンポーネントを ASP.NET Core アプリに統合する」を参照してください。

次のステップ

詳細については、次を参照してください。

• ASP.NET Core Blazor
• ASP.NET Core Blazor のホスティング モデル
• ASP.NET Core Razor コンポーネントを ASP.NET Core アプリに統合する
• HTTP API を使用した gRPC サービスの比較