すぐに使える 3 つのBlazorアプリの例

Blazorサンプル アプリは、新しいBlazor Server/WebAssemblyプロジェクトを構築する場合 (特に初めての場合) に適した出発点となります。特定のニーズに合わせて調整およびカスタマイズした後、さまざまなシナリオで使用できます。コード サンプルの提供からドキュメント化、ローカル テスト アプリへのサンプルのコピーの容易化、Blazorのベスト プラクティスのデモンストレーションまで、Blazorアプリのサンプルから多くのことを学び、メリットを得ることができます。

しかし、あなたのアプリの要件やシナリオにマッチする良いサンプルを見つけることは、時には難しいかもしれません。Blazorプロジェクトのサンプルの中には、すぐに基礎として使用できるように、最新の状態に保たれているため、簡単に始められ、微調整もしやすいものがあります。また、次のような理由で、少し圧倒されるかもしれません：

• サードパーティのライブラリとデータ クラスが多すぎます。
• 要件とアーキテクチャの詳細。
• Blazor自体が大幅に改善されたため、最新のベスト プラクティスとパターンを反映していない古いサンプル アプリ。

そのため、この記事では、すぐに使用できる 3 つのトップBlazorアプリの例を集めました。

Blazorアプリの例をいつ開始すればよいですか?

Blazor構文、機能、その他の基礎について、すぐに開始して実践的な学習体験を得られるという明らかな利点の他に、Blazorサンプル アプリケーションを使用すると、他にも多くの利点がもたらされます。

迅速なプロトタイピングや小規模なPOC向け

Blazor Web アプリの例には通常、Blazorアプリの要件に合わせて拡張または変更できる基本構造があります。これにより、プロトタイプの作成をスピードアップしながら、後で独自の機能を実装することに集中できます。このようなBlazorアプリケーションを使用すると、技術的な実現可能性や適合性、Blazorプロジェクトにどの程度役立つかなどを評価および検証するのにも役立ちます。関係者の前で、実装する予定のコア機能を紹介できます。

貴重な洞察を得る

通常、サンプルや例は、ベスト プラクティス、アーキテクチャ パターン、推奨されるコーディング手法に基づいて作成されます。これらのサンプル アプリを調べることで、Blazorアプリケーションを設計および開発するための業界標準のアプローチを直接理解できます。

潜在的な問題を特定する

Blazorプロジェクトの例を使用する 1 つの方法は、一般的な問題やバグをトラブルシューティングするための簡単なリソースとしてそれらを見ることです。サンプル アプリを独自のBlazorアプリと並べて調べることで、コード、構造、実装を比較できます。この比較により、サンプル アプリが同様の機能をどのように処理するかを確認でき、根本原因である可能性のある不一致をより簡単に特定できます。

すぐに使えるBlazorアプリ例のトップ 3 を厳選

ここでリストされているすべてのBlazorサンプル アプリケーションはフレームワークに依存しないことに注意してください。これらは当初Blazor用に構築されましたが、AngularまたはWeb Componentsに切り替えて、ローコードApp Builderを使用してワンクリックでコードを生成できます。

在庫管理アプリ

ここに表示されているのは、在庫レベルを管理し、在庫商品を確認するためのレポートダッシュボードです。Blazorアプリでは、カスタムサイドナビゲーションを使ってルーティングを行い、カテゴリーチャートを使ってパフォーマンスを報告しています。その他Blazorコンポーネントを使用しています：その他の使用コンポーネント：アバター​、ボタン​、カード​、チェックボックス​、データグリッド​、ドロップダウン​、アイコン​、入力グループ​、リスト​、セレクト。

​在庫管理アプリのプレビューを確認し、コードを検査します。

CRMアプリ

このサンプルは、HubSpot にヒントを得た、顧客の詳細を管理するためのマスター詳細スタイルのアプリです。概要ダッシュボードと複数のタブを持つ顧客の詳細のレスポンシブ ビューが含まれています。使用されるその他のBlazorコンポーネント:アコーディオン、アバター、ボタン、アイコン ボタン、チェックボックス、ダイアログ ウィンドウ、ドロップダウン、拡張​パネル、データ グリッド、アイコン、入力グループ、リスト、ナビゲーション バー、ナビゲーション ドロワー、選択、タブ レイアウト。

​CRM アプリのプレビューを確認し、コードを検査します。

チームコラボレーションアプリ

このBlazorアプリケーションの例には、タスクを含むレイアウトとダッシュボードのコレクションという 2 つのメイン モジュールがあります。どちらも、さまざまな種類のアイテムを表示するリスト、テーブル、カードの組み合わせを使用します。メイン ナビゲーションはヘッダーによって実現されます。これにより、プロジェクトを選択したり、タスクを作成したりできます。また、上記のモードを切り替えるアイコンを含むミニ ナビゲーション ドロワーもあります。デフォルトでは、Team Collaboration アプリはダーク モードになっています。使用されるその他のBlazorコンポーネント: Icon、Avatar、List、Button、Grid。

​チームコラボレーション アプリのプレビューを確認し、コードを検査します。

お知らせ: Blazorサンプル アプリケーションとその背後にあるコードの謎を解明

上記のサンプル アプリは、ローコードのWYSIWYG App BuilderとIgnite UI for BlazorのさまざまなBlazorコンポーネントを使用してゼロから作成されました。ローコード ツールは、アプリの開発、クリーンなBlazorコードの生成、リアルタイムでの検査を最も簡単かつ迅速に行う方法を提供しますが、Ignite UI ライブラリには、あらゆるアプリ シナリオに対応する幅広いビルド済みの C# コントロールと 60 を超える高性能チャートが用意されています。

ローコード ツールを使用するときに、サンプル アプリとその背後にあるコードを簡単に検査できるようにする簡単な方法をいくつか紹介します。

• ビジュアル開発環境があります。
• 完全なドラッグ アンド ドロップ開発エクスペリエンスを活用できます。
• 全体的に再利用できる UI コントロールのツールボックスがあります。
• このツールにはコード生成機能があります。
• 迅速なプロトタイピングと反復を効率化します。
• バックエンド システム、データベース、API との組み込み統合機能も利用できます。

最後に簡単な開発者向けヒント

Blazorプロジェクトで使用するサンプルアプリの品質、信頼性、拡張性を常に慎重に評価することが不可欠です。それがあなたのプロジェクトの要件と長期的な目標に準拠していることを確認してください。Blazorアプリをゼロから構築する場合は特に、当社のフル機能Blazorコンポーネント ライブラリを活用して、スケーラブルなプロジェクトでクラス最高のウィジェットを取得することもできます。