🌊

CDNで読み込んだライブラリをReact + Typescriptのコンポーネントで使用する

2023/08/12に公開

React

ReactやVueを使用した開発でサードパーティのパッケージを利用する場合、npmに公開されているパッケージをnpmやyarnなどのパッケージマネージャでインストールする事が殆どではないでしょうか。
しかし、時にはnpmにパッケージが公開されておらずCDNしか選択肢がないベンダーのライブラリを使用しなければならない場合や、バンドルサイズを減らすためにCDNを利用するケースもあると思います。
そんな時の使用方法をまとめてみました。

そもそもCDNとは

CDNとは、Contents Delivery Networkの略で、Web上のコンテンツを迅速にエンドユーザーに届けるための仕組みです。
JavascriptのCDNだと jsdelivr や unpkg などが有名でしょうか。

axios をCDNで読み込む場合、次のようにheadタグ内に記載して読み込みます。

<head>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

Reactコンポーネントでの使用法

今回は例としてaxiosをCDNで読み込み、Reactのコンポーネントで使用してみます。

CDNで読み込まれたパッケージは、windowオブジェクトに存在しています。
Chromeの開発者ツールを開いて、コンソールからwindowオブジェクトを確認します。
読み込まれていれば存在が確認できます。

windowオブジェクトに存在していることが確認できたら、早速コンポーネントで使用していきます。
ページロード時に使用するのであれば次のような感じ。

import { useEffect } from "react";

export default function Hoge() {
  useEffect(() => {
    const axios = window.axios;
  }, []);
  
  return <div>fuga</div>;
}

しかし、Typescript環境下では、元々のwindowインターフェースにaxiosが存在しないため、エラーとなってしまいます。

では、どうするか。

windowインターフェースの型をTypeScriptのアンビエント宣言で拡張します。

window.d.ts のようなファイル名で型定義ファイルを作成し、次のように型を定義します。

window.d.ts

export declare global {
  interface Window {
    axios: any;
  }
}

※ 便宜上any型で宣言しましたが、any型は型補完が効かないため、必要な場合は適時型を定義してください。

これで型エラーが消え、使用できる準備が整いました。

そもそもCDNとは

Reactコンポーネントでの使用法

Discussion