Ignite UI for React 19.5.1: 新しい情報は?
Grid PDFエクスポートから、IgrGrid、IgrTreeGrid、IgrHierarchicalGrid、IgrPivotGridから新しいIntlベースのレンダリングパイプラインなどにデータをエクスポートできます。こちらがあなたのツールボックスの最新情報です。
Radoslav Mirchev
6 min read
Ignite UI for React 19.5.1は現在、npmで利用可能です。このリリースでは、パッケージに直接組み込まれたLLMエージェントスキル、すべてのグリッドバリアント向けのPDFエクスポート、新しい公開ローカリゼーションAPIによるi18nの全面オーバーホール、動的スクロール性能の向上、ドロップダウンやダイアログのネイティブPopover APIサポートが実現しています。
Ignite UI for React 19.5.1のすべてのアップデートを一目でご覧ください:
- LLMエージェントスキル:3つのReact専用スキルファイルがnpmパッケージ内に収録され、GitHub Copilotや他のLLMエージェントに一般的なタスクのステップバイステップのガイダンスを提供します
- Grid PDF Export: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF
- グリッドスクロール性能:レンダリングデータに基づく動的スクロールスロットル調整により、大規模なデータセットでの不安定さが軽減されます
- Popover API:ドロップダウンやダイアログは、より良い位置づけとアクセシビリティのためにHTMLポップオーバーAPIを使用しています
- i18n Overhau l:新しい国際ベースのレンダリングパイプライン、すべての対応言語のローカリゼーションの更新、公開APIを備えた新しいパッケージ
igniteui-i18n-resources - ブレーキング:CSSのカスタムプロパティプレフィックスの名前変更;グリッドアレイの突然変異検出が変更されました。チャットスロットAPIが更新されました;ツールチップ
disableArrow削除;Node.js ≥ 22人必要
npm install igniteui-react@19.5.1 npm install igniteui-react-grids@19.5.1
LLM Agent Skills
現在、3つのLLMエージェントスキルがigniteui-reactnpmパッケージのskills/ディレクトリ内に収録されており、GitHub Copilot、Cursor、Windsurf、Claude Code、その他のLLM搭載エージェントに対して、正しいIgr*コンポーネント、インポートパス、JSXパターン、スタイリングアプローチを教えています。これらはすべてReactおよびigniteui-reactpackageファミリーに特有のものです。
各スキルは、手順ごとに説明書、コードreference/例、サポート資料のサブディレクトリを含む自己完結型のマークダウンファイルです。プロジェクトごとにエージェントに一度だけワイヤードし、すべてのセッションが自動的に基準に従っています。
| Skill | 内容 | 使用 |
|---|---|---|
igniteui-react-components | UIパターンの適切なIgr*コンポーネントを特定し、インストール、インポート、使用します — JSXパターン、イベント、参照、フォーム | コンポーネントの選択や、それをReactでセットアップして使うこと |
igniteui-react-customize-theme | CSSのカスタムプロパティ、Sass、Ignite UIテーマシステムを使ってReactコンテキストでスタイリングをカスタマイズできます | Applying custom brand colors or styles |
igniteui-react-optimize-bundle-size | Reduce bundle size with granular imports, tree-shaking, and lazy loading | Optimizing production performance |
スキルをIDEに取り込む方法
スキルはパッケージがインストールされるとすでにディスクに保存されています。エージェントのディスカバリーパスにコピーしてください。構造はエージェントに依存しないため、スキルファイルをサポートするアシスタントは直接利用できます。
# macOS / Linux / Windows (PowerShell) - installed npm package cp -r node_modules/igniteui-react/skills/. .agents/skills/ # Use the npx skills CLI npx skills add IgniteUI/igniteui-react # GitHub Copilot — copy into .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/ # Claude Code — copy into .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .claude/skills/
Cursor、Windsurf、その他のエージェントについては、正しいスキルディレクトリパスについてはエージェントのドキュメントを参照してください。スキルファイルはスキルベースのコンテキスト読み込みをサポートするアシスタントと連携します。
View LLM Agent Skills documentation →
Grid PDF Export
4つのグリッドバリアント(IgrGrid、IgrTreeGrid、IgrHierarchicalGrid、IgrPivotGridは、現在はPDFへの直接エクスポートに対応しています。PDFエクスポートは既存のExcelエクスポートパイプラインに加わり、サーバー側のレンダリングステップなしで印刷可能で共有可能な文書へのネイティブなパスを提供します。この機能はigniteui-react-gridsパッケージを通じて利用可能で、既存のツールバーインフラと統合されます。
import { IgrGridToolbarExporter } from 'igniteui-react-grids';
// In your toolbar, PDF export is available alongside Excel export
View Grid PDF Export documentation
Grid Scroll Performance
IgrGridIgrTreeGrid,IgrHierarchicalGrid、そしてIgrPivotGrid7.0で6つのレンダリングおよび変更検出の最適化をターゲットにしたセットを受け取りました。100k行のデータセットで100回のスクロール操作を組み合わせた結果:~40–55 FPSに対し、以前は15–25 FPS(100–150%改善)、総ブロッキング時間は~8–12秒から~3–5秒に短縮されました(50–60%の短縮)。
ベンチマークされたハードウェアへの影響(10万行、100スクロール操作)を総合的に測定しました:
| Metric | 以前は | 後 | Delta |
|---|---|---|---|
| Long Tasks Count | ~80–120 | ~30–50 | −50%から−60% |
| Avg Long Task Duration | ~80–120ms | ~55–75ms | −30%から−40%まで |
| Total Blocking Time | ~8–12 sec | ~3–5 sec | −50%から−60% |
| Frames per second | ~15–25 fps | ~40–55 fps | +100%から+150%へ |
View Grid Virtualization documentation
ドロップダウンとダイアログ用のポップオーバーAPI
ドロップダウンメニューやダイアログは、カスタムオーバーレイ配置ロジックの代わりにブラウザネイティブのHTMLポップオーバーAPIを使用しています。Popover APIは浮動要素をトップレイヤーに配置し、複雑なレイアウトにおける長年のzインデックス積み重ねの問題を解決し、オーバーフロー隠れたコンテナ内のクリッピングを排除します。アクセシビリティの向上は副次的で、フォーカス管理や無視の動作がカスタム実装ではなくブラウザネイティブの期待に沿うようになります。この変更は透明で、APIの表面変更や移行は必要ありません。
i18n Overhaul and New igniteui-i18n-resources Package
日付と数字をレンダリングするグリッドコンポーネントはネイティブIntlベースのパイプラインを使用しており、カレンダー、DatePicker、DateRangePickerの実装もそれに合わせて更新されています。エンジンの変更に伴う新しい公開ローカリゼーションAPIと、現在サポートされているすべての言語のリソース文字列を含む別パッケージigniteui-i18n-resourcesも含まれています。カスタムリソース文字列を使用するアプリケーションは、新しいパッケージとAPIに移行する必要があります。以下にリンクされた渡りガイドをご覧ください。コンボ、チップ、入力、ツリー、カルーセルの各コンポーネントも新しいローカライゼーション実装でカバーされています。
npm install igniteui-i18n-resources@19.5.1
View Localization documentation
Breaking Changes & Migration
CSS Custom Property Prefix Rename (Themes)
影響を受ける:テーマ化のためにCSSカスタムプロパティを使用しているすべてのコンポーネント
変更点:グローバルCSSのカスタムプロパティプレフィックスが他のIgnite UIライブラリに合わせて名前を変更しました。古いプレフィックス[OLD_PREFIX]を使ったプロパティは更新が必要です[NEW_PREFIX]。
移行:スタイルシート内のすべてのカスタムプロパティ参照を見つけて置き換えてください。名称変更された物件の完全なリストは移行ガイドでご覧いただけます。
移動ガイドを見る
グリッドアレイ変異検出の削除
影響:IgrGrid,IgrTreeGrid,IgrHierarchicalGridIgrPivotGrid変更点:バウンdataドアレイへの直接的な変異(プッシュ、スプライス、インデックス割り当て)が自動的に再レンダリングをトリガーしなくなりました。
移行:インプレイス変異を新しい配列参照に置き換えます — 例:setData([...data, newRow])代わりにdata.push(newRow)。これは標準的なReact不変性パターンと一致しており、このリリースにおけるより大きな影響を与える行動変更です。
移動ガイドを見る
チャット:typingIndicatorテンプレートレンダラーが削除されました
影響を受けました:IgrChat変更点:テンプレートtypingIndicatorレンダラープロップが削除されました。
移行:利用してくださいtyping-indicatorスロットにしよう。
Tooltip: disableArrow Removed
影響を受ける:IgrTooltip変更点:以前に非推奨disableArrowプロパティが削除されました。
移行:ツールチップの使用からdisableArrow参照を削除してください;物件には代替品がありません。
Node.js Minimum Version: ≥ 22
影響を受ける:ビルド環境とCIパイプライン
変更点:最低必要なNode.jsバージョンは22になりました。
移行:アップグレード前にNode.jsの実行時間を更新してください。CIパイプラインの設定、Dockerベースのイメージ、ローカルツールチェーンを確認してください。
Ignite UI for React 19.5.1のインストール方法は?
# Core package npm install igniteui-react@19.5.1 # Grids package (required for all grid components) npm install igniteui-react-grids@19.5.1 # New: localization resources package npm install igniteui-i18n-resources@19.5.1
Ignite UI for React 19.5.1で始めよう
今日プロジェクトを更新し、AI Copilot Skills、Grid PDFエクスポート、新しいi18n APIにアクセスするための始めガイドに従い、グリッドデータバインディング、Chatコンポーネント、またはテーマ化用のCSSカスタムプロパティを使用している場合は、移行ガイドを必ず確認してください。
