ReactでUMD形式ライブラリを動的に読み込む方法と完了検知の実装🚀

はじめに (対象読者・この記事でわかること)

この記事は、Reactを使用したWeb開発の経験がある開発者で、UMD形式のライブラリを動的に読み込みたいと考えている方を対象としています。特に、npmパッケージとして提供されていないブラウザ専用のライブラリをReactプロジェクトで利用する際の課題解決に役立ちます。

この記事を読むことで、Reactを使ってUMD形式のライブラリを動的に読み込み、読み込み完了を検知する方法を理解できます。具体的には、スクリプトタグを動的に追加し、読み込み完了イベントを検知する実装方法を学びます。また、ライブラリの読み込み状態を管理し、コンポーネントで適切に利用するためのパターンも習得できます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Reactの基本的な知識（コンポーネント、フックなど） - JavaScriptの非同期処理に関する基本的な理解 - UMD（Universal Module Definition）形式の概念

UMD形式ライブラリの動的読み込みの必要性

Web開発において、既存のライブラリをReactプロジェクトに統合する必要がある場面は多くあります。特に、ブラウザ専用でUMD形式のみ提供されているライブラリの場合、通常のnpmパッケージとしてインストールできないため、動的に読み込む必要があります。

UMD形式は、ブラウザ環境でもNode.js環境でも動作するように設計されたモジュール形式で、グローバルオブジェクト（通常はwindow）にライブラリの機能が公開されます。Reactでこのようなライブラリを利用するには、スクリプトタグを動的に追加し、読み込み完了を検知する仕組みが必要です。

また、動的読み込みは初期ロード時間の短縮にも貢献します。必要なライブラリだけを必要なタイミングで読み込むことで、初期表示のパフォーマンスを向上させることができます。

ReactによるUMDライブラリの動的読み込みと完了検知の実装

ステップ1：ライブラリの動的読み込み関数の実装

まず、ライブラリを動的に読み込むための関数を実装します。この関数は、指定されたURLからスクリプトを読み込み、読み込み完了時にPromiseを解決するようにします。

Javascript

const loadScript = (url) => {
  return new Promise((resolve, reject) => {
    // 既に読み込まれているか確認
    if (document.querySelector(`script[src="${url}"]`)) {
      resolve();
      return;
    }

    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Script load error for ${url}`));

    document.body.appendChild(script);
  });
};

この関数は、以下の特徴があります： - 重複読み込みを防ぐために、既に読み込まれているスクリプトをチェック - Promiseベースで非同期処理を扱えるように実装 - 読み込み成功と失敗をそれぞれresolve/rejectで通知

ステップ2：Reactフックによる読み込み状態の管理

次に、Reactフックを使ってライブラリの読み込み状態を管理します。カスタムフックを実装することで、コンポーネント内で簡単にライブラリの読み込み状態を扱えるようにします。

Javascript

import { useState, useEffect } from 'react';

const useScript = (url) => {
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    if (!url) {
      setStatus('idle');
      return;
    }

    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.onload = () => setStatus('ready');
    script.onerror = () => setStatus('error');

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);

  return status;
};

このフックは、ライブラリの読み込み状態を'ready'、'loading'、'error'のいずれかで返します。コンポーネント内でこのフックを使用することで、ライブラリの読み込み状態に応じたUI表示や処理の分岐が可能になります。

ステップ3：ライブラリの利用準備完了検知

ライブラリのグローバルオブジェクトが利用可能かどうかを確認し、準備完了を検知するための関数を実装します。

Javascript

const checkLibraryReady = (libraryName, checkInterval = 100, maxAttempts = 50) => {
  return new Promise((resolve, reject) => {
    let attempts = 0;

    const check = () => {
      attempts++;

      if (window[libraryName]) {
        resolve(window[libraryName]);
      } else if (attempts >= maxAttempts) {
        reject(new Error(`Library ${libraryName} not loaded after ${maxAttempts} attempts`));
      } else {
        setTimeout(check, checkInterval);
      }
    };

    check();
  });
};

この関数は、指定されたライブラリ名がwindowオブジェクトに存在するかを定期的にチェックし、利用可能になったらPromiseを解決します。maxAttemptsで最大チェック回数を設定することで、無限ループを防ぎます。

ステップ4：ライブラリの動的読み込みと完了検知を組み合わせた実装

上記の関数を組み合わせて、ライブラリの動的読み込みと完了検知を行うカスタムフックを実装します。

Javascript

import { useState, useEffect } from 'react';

const useDynamicLibrary = (url, libraryName) => {
  const [status, setStatus] = useState('idle');
  const [library, setLibrary] = useState(null);

  useEffect(() => {
    if (!url || !libraryName) {
      setStatus('idle');
      return;
    }

    setStatus('loading');

    const loadLibrary = async () => {
      try {
        // スクリプトの読み込み
        await loadScript(url);

        // ライブラリの利用準備完了を検知
        const lib = await checkLibraryReady(libraryName);
        setLibrary(lib);
        setStatus('ready');
      } catch (error) {
        console.error('Failed to load library:', error);
        setStatus('error');
      }
    };

    loadLibrary();
  }, [url, libraryName]);

  return { status, library };
};

このフックは、ライブラリのURLとライブラリ名を受け取り、読み込み状態とライブラリのインスタンスを返します。コンポーネント内でこのフックを使用することで、簡単にライブラリの動的読み込みと完了検知を実装できます。

ステップ5：コンポーネントでの利用例

実際にReactコンポーネントで上記のフックを利用する例を以下に示します。

Javascript

import React from 'react';
import useDynamicLibrary from './useDynamicLibrary';

const MyComponent = () => {
  const { status, library } = useDynamicLibrary(
    'https://example.com/some-library.js',
    'SomeLibrary'
  );

  if (status === 'loading') {
    return <div>ライブラリを読み込み中...</div>;
  }

  if (status === 'error') {
    return <div>ライブラリの読み込みに失敗しました</div>;
  }

  // ライブラリが利用可能になったらコンポーネントを表示
  return (
    <div>
      <button onClick={() => library.someFunction()}>
        ライブラリの関数を実行
      </button>
    </div>
  );
};

export default MyComponent;

この例では、ライブラリの読み込み状態に応じて異なるUIを表示しています。読み込みが完了したら、ライブラリの関数を呼び出すボタンを表示します。

ハマった点やエラー解決

ライブラリの動的読み込みを実装する際には、いくつかの問題点に直面することがあります。

問題1：ライブラリの読み込み順序の保証 複数のライブラリを動的に読み込む場合、依存関係があるライブラリ同士の読み込み順序が保証されないことがあります。例えば、ライブラリAがライブラリBに依存している場合、ライブラリBの読み込みが完了する前にライブラリAが読み込まれてしまう可能性があります。

問題2：ライブラリのグローバルオブジェクトのタイミング ライブラリの読み込みが完了したとしても、グローバルオブジェクトがすぐに利用可能になるとは限りません。特にライブラリ内で非同期処理を行っている場合、タイミングによってはグローバルオブジェクトが未定義の状態でアクセスしようとしてエラーが発生することがあります。

問題3：コンポーネントのアンマウント時のクリーンアップ コンポーネントがアンマウントされた際に、動的に追加したスクリプトタグを適切に削除しないと、メモリリークの原因になったり、不要なスクリプトが残ってしまったりします。

解決策

これらの問題に対する解決策を以下に示します。

解決策1：ライブラリの読み込み順序の保証 依存関係があるライブラリを順番に読み込むための関数を実装します。

Javascript

const loadScriptsInOrder = (scriptUrls) => {
  return scriptUrls.reduce((promise, url) => {
    return promise.then(() => loadScript(url));
  }, Promise.resolve());
};

この関数は、配列で指定されたスクリプトURLを順番に読み込みます。使用例は以下の通りです。

Javascript

const scriptUrls = [
  'https://example.com/library-b.js',
  'https://example.com/library-a.js'
];

loadScriptsInOrder(scriptUrls)
  .then(() => console.log('All libraries loaded'))
  .catch(error => console.error('Error loading libraries:', error));

解決策2：ライブラリのグローバルオブジェクトのタイミング 前述のcheckLibraryReady関数を使用して、ライブラリのグローバルオブジェクトが利用可能になるまで待機します。この関数は、指定されたインターバルで定期的にチェックを行うため、ライブラリ内の非同期処理が完了するまで待つことができます。

解決策3：コンポーネントのアンマウント時のクリーンアップ ReactのuseEffectクリーンアップ関数を使用して、コンポーネントがアンマウントされた際に動的に追加したスクリプトタグを削除します。

Javascript

useEffect(() => {
  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, [url]);

まとめ

本記事では、Reactを使ってUMD形式のライブラリを動的に読み込み、読み込み完了を検知する方法を解説しました。具体的には、スクリプトタグを動的に追加する関数、ライブラリの読み込み状態を管理するReactフック、ライブラリの利用準備完了を検知する関数を実装し、これらを組み合わせたカスタムフックを作成しました。

また、ライブラリの読み込み順序の保証、グローバルオブジェクトのタイミング問題、コンポーネントのアンマウント時のクリーンアップといったハマりポイントとその解決策も紹介しました。これらの技術を活用することで、ReactプロジェクトでUMD形式のライブラリを効果的に統合できるようになります。

参考資料

• UMD (Universal Module Definition) について
• React useEffect フックの公式ドキュメント
• JavaScript 非同期処理と Promise
• 動的にスクリプトを読み込む方法