インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

Next.js で Ignite UI for React の連携方法:動的インポートを徹底解説(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、大手企業の「データ計測アプリケーション」にインフラジスティックス製のUIライブラリである「Ignite UI for React のチャート 」を使いたいというお話をお寄せいただきました。

複雑なチャートの機能要件(滑かで精度の高い曲線/ズームイン/ズームアウト/2段チャート/ラインの見せ方/etc...)を追求していく上で、React のためのレンダリングフレームワークである「Next.js」の環境を使いたいという内容でした。

お客様のご質問はこのような点でした。

  • Ignite for React のトライアル」を進める中で「Next.js プロジェクト」がうまく動作しません。
  • 「Ignite for React」は、SSRやCSRなどのレンダリング方法をサポートしていますか?
  • 「Next.js」フレームワークで動作させるための「コーディング方法」を知りたい。

Ignite UI for React」は、軽快でインタラクティブなソリューションを実現するUIコンポーネントですが、最初のトライアルでつまづくような場合の問題解決の Tips になれば幸いです。では、詳細をご説明させていただきます。

https://jp.infragistics.com/products/ignite-ui-react

Next.js でインフラジスティックス製の Ignite UI for React コンポーネントは動きますか?

Igunite UI for React を Next.js フレームワークで使用する場合は「CSR(クライアントサイドレンダリング)」に限り、ご利用が可能です。

「Next.js」のCSRレンダリングでは「Ignite UI for React」のUIライブラリを読み込ませるインポートの際に「動的インポート(Dynamic imports)」を使用することが1つのポイントになります。

import dynamic from "next/dynamic";

今回は「Next.js」上で「動的インポート(Dynamic imports)」の使用したサンプルアプリケーションを作成しました。コード解説と併せてご参照ください。

公式ヘルプドキュメント

公式のヘルプドキュメントです。Ignite UI for React を Next.js プロジェクトに統合する方法について記載されています。

jp.infragistics.com

コード解説のためのサンプルアプリケーションの公開

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mtanoue/20240308/20240308145307.png

今回のサンプルアプリケーションは「Ignite UI for React」の「データチャート(IgrDataChart)」を「Next.js プロジェクト」として動作させています。ラインチャート(折れ線)スプラインチャート(なめらか曲線)ステップチャート(凹凸) のUIライブラリを「動的インポート(Dynamic imports)」を使って作成しています。

このサンプルアプリケーションを使って、コードの解説を見て行きましょう。

コード解説 1:useDataChart.tsx の作成

ファイルの概要:動的インポート(useDataChart.tsx)

\project\blog-sample-app\hooks\useDataChart.tsx

まず、「動的インポート」を実現させるための「useDataChart.tsx」を作成していきましょう。このファイルは、Ignite UI for React のチャートコンポーネントを動的にインポートし、それらのコンポーネントに ref を設定するためのカスタムコンポーネントを提供しています。

コードの解説(useDataChart.tsx)

それぞれの項目について、ソースコード内のどの部分であるかを説明します。

1. 動的インポート

dynamic メソッドを使用して、Ignite UI for React のチャートコンポーネントを動的にインポートしています。

// ダイナミックインポート
export const IgnDataChart = dynamic(
  async () => {
    // インポート処理
    const { 
      IgrDataChart,
      IgrDataChartCoreModule,
      // 以下省略
     } = await import(
      "igniteui-react-charts"
    );
  },
  { ssr: false }
);
2. カスタムコンポーネントの定義

forwardRef を使用して、各Ignite UI for React のコンポーネントに ref を設定するためのカスタムコンポーネントが定義されています。

// カスタムコンポーネントの定義
export const FIgrDataChart = forwardRef<any, PropsWithChildren<IIgrDataChartProps>>((props, ref) => {
  // カスタムコンポーネントの実装
});

export const FIgrCategoryXAxis = forwardRef<any, IIgrCategoryXAxisProps>((props, ref) => {
  // カスタムコンポーネントの実装
});

// 他のカスタムコンポーネントも同様のパターンで定義されています
3. カスタムコンポーネントのラッピング

インポートされた Ignite UI for React のコンポーネントは、カスタムコンポーネント内でラップされ、ref を受け取るための新しい表示用のコンポーネントとして使用されます。

// 各カスタムコンポーネントのラッピング
const IgnDataChartComponent = ({
  dataChartRef,
  ...props
}: IIgnDataChartProps) => {
  return <IgrDataChart ref={dataChartRef} {...props}></IgrDataChart>;
};
4. 各コンポーネントのダイナミックインポート処理

dynamic メソッド内で、各Ignite UI for React のコンポーネントが動的にインポートされ、適切なモジュールが登録されます。

// 各コンポーネントのダイナミックインポート処理
async () => {
  // インポート処理
}

コード解説 2:index.tsx の作成

ファイルの概要:ビューによるチャートの表示(index.tsx)

\project\blog-sample-app\pages\index.tsx

このファイルは、React アプリケーション内でデータチャートを表示するためのものです。

コードの解説(index.tsx)

1. カスタムコンポーネントのインポート
   import {
     FIgrDataChart, FIgrCategoryXAxis, FIgrNumericYAxis,
     FIgrLineSeries, FIgrSplineSeries, FIgrStepLineSeries,
     FIgrCrosshairLayer,
     FIgrDataLegend,
     FIgrDataToolTipLayer,
   } from "../hooks/useDataChart";

これは、自作のカスタム React コンポーネントがインポートされています。

2. React コンポーネントの定義
   const DataChartNext = () => {
     // 中略
   }

この部分は、React の関数コンポーネント DataChartNext を定義しています。

3. 状態変数と ref の定義
   const [chartObject, setChartObject] = useState<IgrDataChart | null>(null);
   const [dataLegendObject, setDataLegendObject] = useState<IgrDataLegend | null>(null);
   const chartRef = useRef<IgrDataChart>(null);
   const crosshairLayerRef1 = useRef<IgrCrosshairLayer>(null);
   const lineSeriesRef = useRef<IgrLineSeries>(null);
   const splineSeriesRef = useRef<IgrSplineSeries>(null);
   const stepLineSeriesRef = useRef<IgrStepLineSeries>(null);
   const dataLegendRef = useRef<IgrDataLegend>(null);

これらの行では、状態変数と ref が定義されています。

4. 各 ref へのコールバック関数
   const onChartRef = (chart: IgrDataChart) => { /* 中略 */ };
   const onCrosshairLayerRef1 = (crosshairLayer: IgrCrosshairLayer) => { /* 中略 */ };
   const onLineSeriesRef = (lineSeries: IgrLineSeries) => { /* 中略 */ };
   const onSplineSeriesRef = (splineSeries: IgrSplineSeries) => { /* 中略 */ };
   const onStepLineSeriesRef = (stepLineSeries: IgrStepLineSeries) => { /* 中略 */ };
   const onDataLegendRef = (legend: IgrDataLegend) => { /* 中略 */ };

これらの関数は、各コンポーネントの ref に割り当てられるコールバック関数です。

5. チャートコンポーネントのレンダリング
   <FIgrDataChart
     ref={onChartRef}
     /* 他のプロパティ */
   >
     {/* 子コンポーネント */}
   </FIgrDataChart>

これは、チャートコンポーネントがレンダリングされる部分です。

6. コンポーネントのレンダリング
   <FIgrCategoryXAxis name="xAxis" label="X" />
   <FIgrNumericYAxis 
     name="yAxis" 
     labelVisibility={0} 
     labelLocation="InsideLeft"
   />
   <FIgrLineSeries
     ref={onLineSeriesRef}
     /* 他のプロパティ */
   />
   /* 他のシリーズコンポーネント */
   <FIgrCrosshairLayer
     ref={onCrosshairLayerRef1}
     /* 他のプロパティ */
   />

コンポーネントがレンダリングされる部分です。それぞれのコンポーネントに、関連する ref コールバック関数を渡すところがポイントになります。 今回の解説は、以上になります。

「Next.js」で「Ignite UI for React」を始めましょう!

今回の記事では、「Next.js」フレームワーク上で Infragistics製の「Ignite UI for React」を自由に動作させるための Tips でした。ぜひ、「Ignite UI for React」でUIコンポーネントを活用して画面開発される場合の、問題解決の Tips になれば幸いです。

すべてを体験するには、Ignite UI for React 無料トライアル にアクセスして最新バージョンを入手してください。

  • 「こんなことは実現できるの?」
  • 「どうやって実装すれば良いの?」

といった開発上の疑問にソリューションコンサルタントが直接お答えします。

ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。

  • Reactの企業ロゴ © 2024 React. Some rights reserved. この画像はCC-BY-4.0ライセンスの下で利用されています。詳細についてはこちらを参照してください。
  • Next.jsの企業ロゴ © 2024 Next.js. Some rights reserved. この画像の詳細については、Vercel社の公式ガイドラインを参照してください。

https://jp.infragistics.com/products/ignite-ui-react