こんにちは！インフラジスティックス・ジャパンの Mori です。
今回は、弊社ナッレジベースの記事の中から、Ignite UI for Blazor の入門にぴったりのコンテンツをピックアップしました！この記事を読んで実際にサンプルをさわっていただくだけで、製品にスムーズに慣れていただけること間違いなしです！
というわけで、まずは全体のラインナップをご紹介します。今回は２回に分けてお届けします！
（その１）
- 導入・セットアップ 編
- 基本コンポーネント操作 編
- IgbGrid：基本表示 編
（その２）
- IgbGrid：カスタマイズ 編
- IgbDataChart：基本と応用 編
- IgbGrid：ローカライズ 編
いかがでしょうか。なかなかいいんじゃないですか。
その１（なんか古いな）では、まずは導入から IgbGrid の表示までのファーストステップを見ていただき、その２ではちょっとした応用ステップを見ていただきたいと思います！
では早速いってみましょー！
その１ 🐥
導入・セットアップ 編 (｀･ω･´)
ご紹介する記事はこちら！
Visual Studio でのプロジェクト作成から Ignite UI for Blazor の導入手順をステップごとに解説。最初の “つまづき” を防ぎます。
導入やらセットアップってほんと苦手です。
こちらの記事では、手順をひとつずつ丁寧に解説してくれているので、非常にありがたい。しかもサンプルもあるので、実際に動くものを確認しながら、自分の環境を整えていくことができる優れもの。
この記事のおもしろいところは、最初からカードコンポーネントっていうちょっと普段はあまり扱わないコンポーネントを採用しているところ！画像入れたり、テキスト入れたり、Web では当たり前のことなので、個人的にはすごくいいです！
どうか皆さんには僕のようにつらい思いをしてほしくないので、この記事のご加護がありますように。。😌✨
基本コンポーネント操作 編 (^_^)/
ご紹介する記事はこちら！
イベントハンドリングと CSS クラス操作の基本。Blazor コンポーネントの動的挙動を学ぶ最初の一歩に最適です。
最初のイベント処理にはボタンコンポーネントがやはりいいですね！こちらではボタンの色をイベント処理で更新していくので、シンプルでとても分かりやすい構成です！ 🙂
テキストも変更してくれてるところが非常に評価高いです。結構需要ありんす。
そしてお次はこちら！
CSSパーツで IgbTextarea の高さをピクセル単位で自在に調整する方法を伝授。CSS パーツの扱い方を入門レベルで習得できます。
こちらもシンプルな構成で CSS クラスの操作に集中！ちょっとシンプル過ぎない？そこがいいんです。いろいろ詰込み過ぎないところがやさしさ🧸
IgbGrid：基本表示 編 (・ω・)ノ
ご紹介する記事はこちら！
CellStylesScript／CellClassesScript を使ったスタイル適用例。列のレイアウト調整をサクッと理解できます。スクリプトの導入例を通して手軽にスタイル適用を学べます。
Grid みたいなレイアウトだと切っても切れない関係の右寄せ（どういうことなの？🤔）
標準的な位置は置いておいて、Grid やテーブル表示ではご要望が多いと思います。標準的なところを操作するのはそれなりに手間が必要ですが、スクリプトを使って操作をする最初のサンプルにはうってつけ！
お次はこちら！
FormatterScript で数値に単位などを付加する方法。データ書式設定の基礎を押さえられます。
フォーマットの変更もとてもご要望の多い実装ですね！以下の画像からわかるとおり、元のデータは同じですが、 単位をつけたり、採用した単位にあわせた数値に変更していますね！元のデータはそのままに、 UI 側でユーザーにとって扱いやすいように加工して表示するという、 UI の本質機能のひとつです。
表示内容を操作するので、学習している最中でも製品のアイデアが浮かんでくるのではないでしょうか 😌✨
まとめ (＾▽＾)
いかがでしたでしょうか！！すっごくよかったですよね！うんうん！
今回はその１ということで、３つのセクションにわけて５つの記事をご紹介しました！
（その１）1️⃣
- 導入・セットアップ 編
- 基本コンポーネント操作 編
- IgbGrid：基本表示 編
次回はその２として、以下の内容でご紹介したいと思いますので、どうぞよろしくお願いします！
（その２）2️⃣
- IgbGrid：カスタマイズ 編
- IgbDataChart：基本と応用 編
- IgbGrid：ローカライズ 編
