syncfusion-blazor-common

Syncfusion Blazor の始め方

Blazor Web Apps で Syncfusion Blazor コンポーネントをセットアップし、構成するためのガイドです。

使用する場面

次のような場合にこのスキルを使用します。

• Syncfusion Blazor コンポーネントを使って新しい Blazor プロジェクトをセットアップする
• 特定の .NET バージョン（net8.0、net9.0、net10.0 など）を対象とした Blazor Web App を作成する
• コンテキストに応じた機能を備える Syncfusion コンポーネント（Grid、Button など）を追加する
• 静的アセットまたは CDN を使ってスクリプトの読み込みを最適化する
• Syncfusion コンポーネントの bUnit テストをセットアップする

クイックリファレンス

• 始め方：プロジェクトのセットアップ手順の詳細は、getting-started.md を参照してください
• スクリプトと CDN：スクリプトの読み込み方法については、add-script-reference-and-cdn.md を参照してください
• bUnit テスト：単体テストのセットアップについては、bunit-setup.md を参照してください
• ローカライズとグローバリゼーション：カルチャとローカライズのセットアップについては、localization-globalization.md を参照してください

前提条件

• .NET 8+ SDK
• Blazor Web App プロジェクト
• Syncfusion アカウント（無料トライアル）
• NuGet パッケージへのアクセス

1. 始め方

詳細ガイド：getting-started.md

クイックセットアップ

1. 使用するレンダーモードと明示的な .NET バージョン（例：.NET 10）を指定して Blazor Web App を作成します
2. Syncfusion.Blazor.Grid と Syncfusion.Blazor.Themes の NuGet パッケージをインストールします。すべての個別パッケージはこちらに掲載されています
3. @using Syncfusion.Blazor と関連するコンポーネントの名前空間を _Imports.razor に追加します
4. Program.cs に builder.Services.AddSyncfusionBlazor() を登録します
5. テーマ CSS とスクリプト参照を App.razor に追加します
6. ページで Syncfusion コンポーネントを使用します

重要なルール：Auto/WASM モードの場合は、サーバープロジェクトとクライアントプロジェクトの両方に登録します
重要：互換性を確保するため、プロジェクトを作成する際は必ず対象の .NET フレームワークのバージョンを指定してください

クイックスタートの方法

• Blazor Playground：ブラウザー上で利用でき、ローカルへのインストールは不要です
• Template Studio：VS/VS Code 用の事前構成済みプロジェクトテンプレートです

2. スクリプト参照と CDN

詳細ガイド：add-script-reference-and-cdn.md

スクリプトの読み込み方法

方法	最適な用途
静的 Web アセット（推奨）	最適なパフォーマンス、オフラインサポート
CDN	クラウドホスト環境、すばやいセットアップ
個別スクリプト	使用するコンポーネントが最小限の場合

3. bUnit テスト

詳細ガイド：bunit-setup.md

bUnit を使って Syncfusion Blazor コンポーネントの単体テストを行います。

必須のセットアップ

bunit NuGet パッケージをインストールし、各テストで登録します。

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

テストのパターン

1. RenderComponent<TPage>() → レンダリング
2. FindComponent<SfButton>() → 検索
3. .Click() → 操作
4. MarkupMatches(...) → 検証

xUnit と NUnit で使用できます（NUnit では、名前の競合を避けるために Bunit.TestContext を使用してください）。

4. ローカライズとグローバリゼーション

詳細ガイド：localization-globalization.md

Syncfusion Blazor コンポーネントで、多言語対応とカルチャ固有の書式設定を構成します。

主な概念

• 国際化（i18n）：日付、時刻、数値、通貨の解析と書式設定
• ローカライズ（l10n）：カルチャ固有のカスタマイズの追加と UI テキストの翻訳
• グローバリゼーション：i18n と l10n の両方を組み合わせたもの

クイックセットアップ

1. GitHub からカルチャベースの .resx リソースファイルをダウンロードして追加します - ダウンロードする前に許可を求めてください
2. ISyncfusionStringLocalizer を実装する SyncfusionLocalizer クラスを作成します
3. Program.cs に登録します。

   builder.Services.AddSyncfusionBlazor();
   builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
   

4. カルチャを静的または動的に設定します（サーバー、WebAssembly、または MAUI アプリ）
5. カルチャを動的に選択するための CultureSwitcher コンポーネントを作成します