トップ > React基礎 > React.js初心者におすすめ！CDNを使って簡単にReactプロジェクトを始めよう

React.js初心者におすすめ！CDNを使って簡単にReactプロジェクトを始めよう

React基礎

React.jsプロジェクトのセットアップは初心者にとって非常に時間がかかる手順であり、特にReactエコシステムの初心者の場合はより困難となります。

しかし、一般的にはcreate-react-app(CRA)を使用してReact.jsアプリケーションを作成することが推奨されています。

CRAは、正確なnpmバージョンやReact関連ライブラリなどの心配をする必要がなく、npx create-react-appのようなコマンドを使用するだけでReactプロジェクトを構築することができます。

CRAはReactプロジェクトの構築に非常に便利なツールであり、事前に学習しなくても簡単に始めることができます。

ただし、初心者がCRAを使用してReactプロジェクトを構築する場合、npm startコマンドがエラーで実行されないなどの問題に遭遇することがあります。

このような問題は、package.jsonの設定やnpmの学習を怠ったり、Node.jsのバージョンを事前にチェックしなかったために発生する可能性があります。

React.js CDNを使用すると、開発者としての生活が大幅に楽になります。

ただし、本番サイトではお勧めできません。

CDNは、主に学習目的または小規模のアプリケーション目的で使用することが適しています。

React Docsには、1分でReactを追加できると記載されています。

これは真実です。

この記事では、React CDNを使用してコンポーネントにJSXを追加する方法を学習することができます。

CDNとは

CDN（Content Delivery Network）は、Webサイトのコンテンツを世界中に分散させたサーバー群から配信するグローバルネットワークです。

これにより、トラフィックの急増に対応し、Webサイトのパフォーマンスと信頼性を向上させることができます。

CDNは通常、画像、ドキュメント、スタイルシート、HTMLページ、クライアント側のスクリプトなどの静的コンテンツを配信するために使用されます。

大規模なWebサイトは、独自のCDNを維持していますが、小規模なWebサイトや電子商取引のベンダーは、有名なプロバイダーのグループからCDNサービスを利用することができます。

Reactを始めたばかりの場合やWebサイトが事前に構築されており、Reactコンポーネントを含める必要がある場合は、CDNが賢明な選択肢となります。

CDNは非常に便利で、セットアップが簡単であり、より少ないコード行で作業を開始することができます。

React CDNは、React Ecosystemで利用できる人気のあるCDNの1つです。

特に初心者の場合は、CDNリンクを使用することで、React.jsのすべての機能をプロジェクトで利用できます。CDNリンクを追加すると、多くの価値があることがわかります。

CDNベースのアプローチは、ローカルファイルシステムへの依存を最小限に抑えた単純なReact.jsアプリケーションを作成してデプロイするために最適な方法となります。

プロジェクトにReact CDNを含める方法

CDNからReactアプリケーションを作成する場合、ローカル環境にNode.jsまたはNode.jsパッケージをインストールする必要はありません。

基本的には、ローカルHTTPサーバーを使用して実行していきます。

プロジェクトにReact CDNを設定することは、Vanilla.JSプロジェクトにJSスクリプトを追加することに似ています。

CDNスクリプトをindex.htmlファイルに追加する必要があります。

新しいHTMLまたは既存のHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>React Project</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

ご存知だと思いますが、HTMLの解析は上から下に流れ、同期、非同期または読み込みと実行の時間を延期しながら、その間にJSを読み込むことができます。

React.jsに必要なすべての依存関係とインポートは、DOMが解析する前にロードして完了する必要があります。

そうでないと、実行中にいくつかの問題が発生します。

head内に下記3つのスクリプトを配置します。

本日は、現在の最新であるReact v18指定となります、以前のバージョンであれば@17に変更して下さい。

<head>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>

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

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</head>

ReactとコンポーネントをReact.jsエコシステムにロードするには、React CDNが必要です。

3つのスクリプトこれは

・ Reactの本体

・ DOM操作用のreact-dom

・JSのトランスコンパイラである「Babel」を読み込んでいます。

コンポーネントをDOMツリーにレンダリングするにはReactDOMが必要となります。

なぜバベルが必要なのか？

JSXはブラウザが理解できる通常のJSにトランスパイルしないため、機能しません。

すべてのブラウザがコンポーネントを読み取れるように、JSXを単純なJSにトランスパイルするためにBabel(バベル)が必要となります。

これらCDNは、React Docsにオープンソースとして掲載されていますので、スクリプトをコピペしいつでも追加が可能となります。

コンポーネントを作成しJSXを追加

CDNとしてReactを使用したコンポーネントの作成は、通常の開発方法とは何の変化もありません。

npmを使用してReactを使用する場合と同じ方法で、クラスまたは関数コンポーネントを作成が可能です。

マークアップ ファイルのどこかに divタグを作成し、Reactコンポーネントをプラグインしてレンダリングする部分をマークします。

<body>

<div id="root"></div>

</body>

この部分に一意のIDを与えます。

当記事での、ID属性はrootとします。

そのIDは、後でJavaScriptのコードでその場所を特定するために使用します。

つまり、id="root"は、コンポーネントが返すJSXは、要素内のDOMにレンダリングされます。

HTMLに関しましては、これで以上となります。

各コンポーネントのJSファイルのtypeプロパティを「text/babel」に設定することです。

<body>

 <script type="text/babel"></script>

</body>

設定しないと、せっかく書いたコードが読み込まれなくなってしまいます。

type属性をこの値に設定すると、Babel がJSXを単純なJavaScript(ES5)にトランスパイルするのに役立ちます。

詳しくはbabelドキュメントを参照下さい。

スクリプトはなるべくbodyの下部(終了タグの直前)に配置するようにして下さい。

JavaScriptがたくさんある場合は、HTMLをロードする前にすべてのJavaScriptをロードするため、ページのロードが明らかに遅くなる可能性があります。

JavaScriptをHTML本文の下部に配置すると、JavaScriptが読み込まれる前にHTMLが読み込まれる時間が与えられるため、エラーを防ぎWebサイトの応答時間を短縮できます。

ですがJavaScriptはHTMLのbodyの最後に記述するのがベストですが、HTMLのheadに記述しても必ずエラーになるわけではありません。

それでは、関数コンポーネントを作成します。

<body>

<div id="root"></div>

<script type="text/babel">

const App = () => {
   return (
<div>
<h1>My React App with CDN</h1>
</div>
   )
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

</script>

</body>

See the Pen HTML React CDN by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

App関数によって返される、JavaScriptXML(JSX)と呼ばれる奇妙な構文に気づいたかもしれません。

JSXとReactを使用すると、HTMLとJavaScriptを簡単に組み合わせることができます。

1つのブレンドされた構文となりますが、一緒に機能する2つの完全に異なるタイプの構文がある事になります。

これはHTMLをJavaScriptコードで直接記述できるため、HTMLコードとJSコードを分離する必要はありません。

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

Reactでは、Appコンポーネントをページのルート要素にレンダリングします。

そして、アプリケーションはReact Libraryが提供する、ルートAPIであるReactDOM.createRoot()メソッドでHTML要素を動的に作成します。

root要素をcontainer変数でcreateRootメソッドの引数として渡すことにより、Reactルートを構築します。

これはReact 18での新しいAPIルートとなっています。

CDNでフックを使用する

CDNでReact フックを使用する場合は、デフォルトエクスポートでインポートせずに使用することも可能です。

通常はReactパッケージから直接エクスポートされた関数やコンポーネントを使用するために、以下のようにそれらを変数に格納することが推奨されています。

<script type="text/babel">

const useState = React.useState;
const useEffect = React.useEffect;

</script>

上記のように変数に格納することで、Reactパッケージの名前空間を明示的に指定することなく、関数やコンポーネントにアクセスできます。

ただし、この方法はコードの可読性を低下させる場合があるため、使用時には注意が必要です。

また、React v17以降では、CDNを使用してReactを読み込む場合、上記のような変数への代入は必要ありません。

Reactのグローバルオブジェクトが自動的に設定されます。

<body>

<div id="root"></div>

<script type="text/babel">

const App = () => {

const [state, setState] = useState(0)

const handleClick = () => setState(state + 1)

  return (
    <div>
      カウント: {state} 
      <div>
        <button onClick={handleClick}>count up</button>
      </div>
    </div>
  )
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

</script>

</body>

See the Pen HTML React CDN useStateフック by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


Propsの渡し方

CDNを使用して、Propsを渡す方法をみていきましょう。

<body>
   <div id="root"></div>

<script type="text/babel">

const App = () => {

const greeting = 'Welcome to the world of React.js!';

  return (
    <div>

<Child text={greeting} />

    </div>
  )
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

</script>

</body>

親コンポーネントから子にProps(小道具)を渡します。

Childコンポーネントを作成します。

Child関数の引数として、Propsを受け取ります。

const Child = (props) => {

  return (
    <div>
<h2>{props.text}</h2>
    </div>
  )
}

See the Pen HTML React CDN useStateフック by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

以下にCDNを使用したReactアプリで、親コンポーネントApp.jsから外部ファイルの子コンポーネントにデータを渡す方法をコードとして示します。

まず、ReactとReactDOMのCDNを読み込みます。

次に、App.jsとChildComponent.jsを<script>タグで読み込みます。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
 <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script src="./App.js" type="text/babel"></script>
  <script src="./ChildComponent.js" type="text/babel"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

次に、App.jsで親コンポーネントを定義します。

ファイルの階層は、ここではHTMLと同じ配置場所でも構いません。

greeting変数にデータを代入し、ChildComponentコンポーネントに同じ名前としてgreetingをPropsとして渡します。

// App.js
const App = () => {
    const greeting = 'Welcome to the world of React.js!';
    return (
        <div>
            <h1>My new React App</h1>
            <ChildComponent greeting={greeting} />
        </div>
    )
};

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

最後に、ChildComponent.jsで子コンポーネントを定義します。

Propsオブジェクトからgreetingを受け取り、表示します。

// ChildComponent.js

const ChildComponent = ({ greeting }) => {
    return (
        <div>
            <h2>{greeting}</h2>
        </div>
    );
};

これで、CDNを使用して外部ファイルに定義された子コンポーネントにデータを渡すことができます。

最後に、App.jsのroot.render()で親コンポーネントをレンダリングします。

注意点としては、CDNを使用しているためimport構文は使用できないということです。

そのため、<script>タグで直接ファイルを読み込み、App.jsでChildComponent.jsを直接参照して、子コンポーネントを作成する必要があります。

React CDNを使用する上での注意点

React CDNを使用し問題なく実行するには、次の点に注意する必要があります。

CDN React.jsを使用する場合は、Crossorigin(クロスオリジン)属性が必要となります。

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

これはReact Docsでも推奨されております。

React.jsのv16以降でのエラー処理エクスペリエンスを向上させるのに役立ちます。

最も重要な事は、Reactアプリケーションを本番環境に設定する場合、アプリケーション全体がそれに依存するため、CDNは常に最適な速度で実行し続ける必要があります。

ユーザーからの何千ものリクエストを処理している間、CDNがあなたに応答しなくなる場合がありますのでご注意下さい。

加えて、CDNにDoS攻撃を軽減し、サイバー脅威やフィッシングからデータを保護するのに十分なツールがあるかどうかを常に確認する必要があります。

セキュリティを提供する信頼性の高いプロトコルが必須となります。

最後に

単一のHTMLページでReactをセットアップすることは、アプリケーションをすばやくセットアップするための興味深い方法です。

create-react-app(CRA)のパッケージをインストールするだけでも、200MBを超える可能性がありますが、小さなプロジェクトを数kbに収めることができます。

自分のWebサイトでも同じ手順を実行できます。

または、最初からやり直したい場合は、空のHTMLファイルを作成してReactをいつでも開始できます。

このアプローチは、最小限のコンポーネントまたは機能を必要とする小さなアプリケーションに適しています。

本格的なReactアプリケーションを構築している場合は、CDNの代わりにnpmを使用して依存関係をインストールする必要があります。

この記事では、新しいHTMLファイルまたは既存のWebサイトにReactコンポーネントを作成しJSXを追加する方法を学びました。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].

'); $entries_archive.insertBefore(sections[0]); for(var i=0; i < view_sec_num; i++) { $(sections[i]).appendTo($entries_archive); page_index += 1; } archive_num += 1; for(var i=view_sec_num; i < sections.length; i++) { if(page_index==view_sec_num) { var $read_more_link = $('

もっと表示する

'); $read_more_link.on('click',{archive_num: archive_num},function(e){ $(e.target).hide(); $('#entries-archive-' + e.data.archive_num).fadeIn("slow"); }); var $before_archive = $('#entries-archive-' + (archive_num-1)); $before_archive.append($read_more_link); $entries_archive = $('
'); $entries_archive.hide(); $entries_archive.insertAfter($before_archive); page_index = 0; archive_num += 1; } $(sections[i]).appendTo($entries_archive); page_index += 1; } $entries_archive.hide(); } }); // ページトップ処理 $(function () { var pagetop = $('#pagetop'); // スクロールした場合 $(window).scroll(function() { // スクロール位置が200を超えた場合 if ($(this).scrollTop() > 200) { pagetop.fadeIn("slow"); } else { // ページトップへをフェードアウト pagetop.fadeOut("slow"); } }); // クリックした場合 pagetop.click(function() { // ページトップへスクロール $('html, body').animate({ scrollTop: 0 },"slow"); return false; }); });