環境構築不要で学ぶcdnとreactの最小限開発法完全ガイド

2025 11/29

2025/11/29

はじめに

本書の目的

本調査報告は、Node.jsやnpmを使わずにReactを手軽に使いたい方のために作成しました。CDNを利用することで環境構築の手間を省き、学習や小規模プロジェクトで迅速に試作できる点をわかりやすく解説します。

対象読者

ウェブ開発を始めたばかりの方、短時間で動くサンプルを作りたい方、既存のHTMLにReactを組み込みたい方を想定しています。事前知識はHTMLと少しのJavaScriptがあれば十分です。

本書で扱う範囲

CDNを使った最小構成の例、読み込むスクリプトの意味、コンポーネント定義とレンダリング方法、注意点、そしてReact 19以降のポイントを順に説明します。具体的なコード例を交えて進めますので、実際に手を動かしながら学べます。

進め方

まずは最小構成で動かす例を示し、次に各要素の役割を詳しく説明します。章ごとに短い実例を置き、すぐ試せる形式にしています。ご自身の環境で試す際は、ブラウザだけで完結することを確認しながら進めてください。

React.jsをCDNで使う – 環境構築なしで最小構成を実現

導入

Node.jsやnpmで環境を作らなくても、CDNを使えばブラウザだけでReactを試せます。ファイルをダウンロードしたり設定する手間が不要で、学習やプロトタイプ作成に向きます。

最小構成のHTML例

以下は最小限のサンプルです。React本体、ReactDOM、Babel（ブラウザ内でJSXを変換）をCDNから読み込みます。

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8"><title>React CDN</title></head>
  <body>
    <div id="root"></div>

    <!-- React / ReactDOM -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Babel: 開発時のみ -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- JSXを直接書く -->
    <script type="text/babel">
      function App() {
        return <h1>こんにちは、React（CDN版）</h1>;
      }
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>

ポイントと補足

スクリプトの順番は重要です。React → ReactDOM → Babelの順で読み込みます。
この方法は学習や確認に便利です。ブラウザ内でJSXを変換するため遅く、実運用向けではありません。
本番ではビルド済みのファイルとproduction用のCDN（minified、productionビルド）を使うことを推奨します。
セキュリティやバージョン指定に注意してください。CDN URLにバージョンを明示すると安定します。

CDNスクリプトの詳細説明

読み込む3つのスクリプト

ブラウザでReactを動かすには主に3つのCDNスクリプトを読み込みます。
– React本体（UIの仕組み）
– ReactDOM（HTMLのDOMへ反映）
– Babel（JSXを通常のJavaScriptに変換）

それぞれの役割をやさしく説明

React本体: コンポーネントや状態管理など、Reactの核となる機能を提供します。UIの設計図を作る部分です。
ReactDOM: 作った設計図を実際のHTML（DOM）に描画します。例えば
に表示する役割です。
Babel: JSXという見た目に近い記法をブラウザが理解する通常のJSに変換します。開発時に便利です。

読み込み順と実例

読み込み順は重要で、React → ReactDOM → Babel の順で読み込みます。簡単な例：

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

JSX を書く場合、該当するに type=”text/babel” を指定します。

開発用と本番用の違い

CDNには開発用（development）と最適化された本番用（production）があります。開発用はエラーメッセージが詳しく、学習や試作に向きます。本番では軽量化されたファイルを使い、パフォーマンスを優先します。Babelを本番で直接使うのは推奨されません。

簡単な注意点

CDNは手軽ですが、ネットワーク依存やバージョン管理に注意してください。特定バージョンを明示すると予期せぬ更新を防げます。

Reactコンポーネントの定義方法

概要

Reactのコンポーネントは、JSXを返す普通のJavaScript関数として定義します。見た目と振る舞いを小さな部品に分けて作る考え方です。

関数コンポーネントの書き方

矢印関数と従来の関数は同じ働きをします。例：

const App = () => {
  return <div>こんにちは</div>
}
// と
function App() {
  return <div>こんにちは</div>
}

どちらもJSXを返す点で等価です。

JSXとは

JSXはJavaScriptの中にHTMLのような記述をできる構文です。内部では要素を作る処理に変換され、最終的にDOM操作につながります（CDNで使うときはReactの仕組みがこの変換を助けます）。

propsの受け渡し

コンポーネントは引数で値を受け取ります。例：

function Greeting(props) {
  return <h1>ようこそ、{props.name}さん</h1>
}

// 使用例
<Greeting name="太郎" />

状態（state）の扱い

状態を持つにはフックを使います。CDN環境ではReact.useStateを使います。

function Counter() {
  const [count, setCount] = React.useState(0)
  return <button onClick={() => setCount(count+1)}>Count: {count}</button>
}

コンポーネントの分割と再利用

小さな部品に分けて組み合わせることで管理しやすくなります。propsでデータを渡し、必要ならstateはそのコンポーネント内で持たせます。

HTML上へのレンダリング

手順

レンダリング先の要素を取得します。例: document.getElementById('root')。
ReactDOM.createRoot()に要素を渡してルートを作ります。例: const root = ReactDOM.createRoot(el)。
root.render(<App />)でコンポーネントを画面に描画します。Reactコンポーネントは <関数名 /> の形式で記述します。

簡単な例

<div id="root"></div>
<script>
  const el = document.getElementById('root');
  const root = ReactDOM.createRoot(el);
  function App(){ return React.createElement('div', null, 'Hello React'); }
  root.render(React.createElement(App));
</script>

上はトランスパイル不要の例です。JSXで書く場合はBabelなどの変換が必要になります。

ポイント

レンダリング先の要素は事前に存在させてください。ページ読み込み前だと取得できません。
createRootは通常1つの要素に1回だけ呼び出します。同じ要素に複数回呼ぶと意図しない動作になります。
JSX形式の <App /> は見やすく書けますが、ブラウザで直接使うには変換が要ります。変換を使わない場合は React.createElement を使ってください。

重要な注意事項

ESM専用配布について

React 19以降のCDN配布はESM（ECMAScript Modules）専用になりました。従来の<script src="...">でグローバルに読み込む方法は使えません。HTML側では<script type="module">での読み込みが基本です。

JSXは事前に変換する必要があります

ブラウザが直接JSXを理解しないため、JSXは事前にJavaScriptに変換（トランスパイル）してください。一般的にはビルドツール（Vite、Webpack、Parcel）やBabelを使って変換します。例：
npx babel src --out-dir dist --presets=@babel/preset-react

ブラウザ内でのBabel変換を使う場合

開発時にブラウザ内で変換する方法もありますが、React 19対応のBabelバージョンを必ず確認してください。対応しないと動作しないか、エラーになります。またこの方法は本番向けではなく、パフォーマンスとセキュリティの面で推奨しません。

importの制限と対策

CDN環境ではjsファイル同士のimportで注意が必要です。相対パスでローカルファイルを読み込むとCORSやMIMEタイプの問題で失敗することがあります。対策としては、ビルドして単一のバンドルにまとめる、またはローカル開発用の簡易サーバ（npm serveやvite dev）を使って配信してください。