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 になれば幸いです。では、詳細をご説明させていただきます。

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

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

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

import dynamic from "next/dynamic";

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

公式ヘルプドキュメント

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

jp.infragistics.com

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

今回のサンプルアプリケーションは「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社の公式ガイドラインを参照してください。