React: CDN/スクリプトタグでJavaScriptパッケージを簡単にインポートして開発を楽々

2024-07-01

ReactにおけるCDN/スクリプトタグからのJavaScriptパッケージのインポート方法

方法1：CDNを使用する

HTMLファイルにCDNリンクを追加する
CDNホスト (例：unpkg、jsdelivr) から、インポートしたいパッケージのURLを <script> タグを使ってHTMLファイルに追加します。
```
<script src="https://unpkg.com/react/"></script>
<script src="https://unpkg.com/axios/dist/"></script>
```

パッケージをグローバル変数として使用する

CDNで読み込まれたパッケージは、グローバル変数として使用できます。

const React = window.React;
const axios = window.axios;

// Reactとaxiosを使用してコンポーネントを作成
const MyComponent = () => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

方法2：スクリプトタグを使用する

HTMLファイルにスクリプトファイルをインクルードする
<script> タグを使って、作成したJavaScriptファイルをHTMLファイルにインクルードします。
```
<script src="my-component.js"></script>
```

注意事項

CDNを使用する場合、パッケージの最新バージョンが常に読み込まれるとは限りません。必要に応じて、バージョンを指定して読み込むようにしてください。
スクリプトタグを使用する場合、ファイルのパスを正しく設定する必要があります。
いずれの方法を使用する場合も、パッケージのドキュメントをよく読んで、使用方法を確認してください。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reactサンプル</title>
  <script src="https://unpkg.com/react/"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

JavaScriptファイル (app.js)

const React = window.React;
const axios = window.axios;

const MyComponent = () => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<MyComponent />, rootElement);

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reactサンプル</title>
  <script src="react.min.js"></script>
  <script src="axios.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

(Reactのmin化されたコードをここに挿入)

import React from './react.min.js';
import axios from './axios.min.js';

const MyComponent = () => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<MyComponent />, rootElement);

説明

上記の例では、MyComponent というコンポーネントを作成し、https://jsonplaceholder.typicode.com/posts/1 からAPIデータを取得して表示しています。
CDNを使用する例では、react と axios パッケージを unpkg から読み込んでいます。
スクリプトタグを使用する例では、react.min.js と axios.min.js という名前のJavaScriptファイルを事前に用意し、それらをHTMLファイルにインポートしています。
どちらの例でも、ReactDOM.render 関数を使用して、MyComponent コンポーネントを #root 要素にレンダリングしています。

補足

実際のプロジェクトでは、より複雑なコンポーネントやデータフェッチングロジックを使用することになります。
コードを本番環境にデプロイする前に、コードを min化して圧縮することをお勧めします。

ReactでJavaScriptパッケージをインポートするその他の方法

npm/yarnとwebpack/Rollupを使用する

概要: Node.jsのパッケージマネージャーであるnpm/yarnと、モジュールバンドラーであるwebpack/Rollupを使用して、プロジェクトに必要なJavaScriptパッケージを管理およびバンドルします。
利点:
- プロジェクトの依存関係を効率的に管理できる
- コードの分割と圧縮が可能
- 開発環境と本番環境で異なる設定を使用できる
欠点:
- 初心者にとって設定が複雑
- ビルドツールの習得が必要

Parcelを使用する

概要: ゼロ設定のモジュールバンドラーであるParcelを使用し、開発と本番環境でシームレスに動作するバンドルを作成します。
利点:
- 設定が簡単で、すぐに始められる
- Hot reloadingによる開発効率の向上
- ゼロコンフィグで動作
欠点:
- webpack/Rollupほど機能が豊富ではない
- 一部の複雑なプロジェクトには向いていない

Create React Appを使用する

概要: 公式のReact CLIツールであるCreate React Appを使用して、新しいReactプロジェクトを素早くセットアップできます。
利点:
- すぐにはじめられるテンプレートが用意されている
- Webpackの設定が事前に行われている
- ホットリロードやコード分割などの機能が利用可能
欠点:
- プロジェクト構成の自由度が低い
- 個別の設定が必要な場合がある

ES modulesを使用する