プログラミング初心者のための入門ブログエンジニアが未来を切り開く。React.js初心者におすすめ!CDNを使って簡単にReactプロジェクトを始めようこの広告は、90日以上更新していないブログに表示しています。2022-07-18React.js初心者におすすめ!CDNを使って簡単にReactプロジェクトを始めようReact基礎React.jsプロジェクトのセットアップは初心者にとって非常に時間がかかる手順であり、特にReactエコシステムの初心者の場合はより困難となります。一般的にはcreate-react-app(CRA)を使用してReact.jsアプリケーションを作成することが推奨されています。create-react-appのようなコマンドを使用するだけでReactプロジェクトを構築することができます。CRAはReactプロジェクトの構築に非常に便利なツールであり、事前に学習しなくても簡単に始めることができます。startコマンドがエラーで実行されないなどの問題に遭遇することがあります。このような問題は、package.jsonの設定やnpmの学習を怠ったり、Node.jsのバージョンを事前にチェックしなかったために発生する可能性があります。CDNを使用すると、開発者としての生活が大幅に楽になります。本番サイトではお勧めできません。CDNは、主に学習目的または小規模のアプリケーション目的で使用することが適しています。Docsには、1分でReactを追加できると記載されています。CDNを使用してコンポーネントにJSXを追加する方法を学習することができます。Network)は、Webサイトのコンテンツを世界中に分散させたサーバー群から配信するグローバルネットワークです。これにより、トラフィックの急増に対応し、Webサイトのパフォーマンスと信頼性を向上させることができます。CDNは通常、画像、ドキュメント、スタイルシート、HTMLページ、クライアント側のスクリプトなどの静的コンテンツを配信するために使用されます。大規模なWebサイトは、独自のCDNを維持していますが、小規模なWebサイトや電子商取引のベンダーは、有名なプロバイダーのグループからCDNサービスを利用することができます。Reactを始めたばかりの場合やWebサイトが事前に構築されており、Reactコンポーネントを含める必要がある場合は、CDNが賢明な選択肢となります。CDNは非常に便利で、セットアップが簡単であり、より少ないコード行で作業を開始することができます。Ecosystemで利用できる人気のあるCDNの1つです。初心者の場合は、CDNリンクを使用することで、React.jsのすべての機能をプロジェクトで利用できます。CDNリンクを追加すると、多くの価値があることがわかります。CDNベースのアプローチは、ローカルファイルシステムへの依存を最小限に抑えた単純なReact.jsアプリケーションを作成してデプロイするために最適な方法となります。CDNを含める方法CDNからReactアプリケーションを作成する場合、ローカル環境にNode.jsまたはNode.jsパッケージをインストールする必要はありません。基本的には、ローカルHTTPサーバーを使用して実行していきます。CDNを設定することは、Vanilla.JSプロジェクトにJSスクリプトを追加することに似ています。CDNスクリプトをindex.htmlファイルに追加する必要があります。新しいHTMLまたは既存のHTMLファイルを用意します。/></head><body></body></html>ご存知だと思いますが、HTMLの解析は上から下に流れ、同期、非同期または読み込みと実行の時間を延期しながら、その間にJSを読み込むことができます。React.jsに必要なすべての依存関係とインポートは、DOMが解析する前にロードして完了する必要があります。ないと、実行中にいくつかの問題が発生します。head内に下記3つのスクリプトを配置します。v18指定となります、以前のバージョンであれば@17に変更して下さい。DOM操作用のreact-dom・JSのトランスコンパイラである「Babel」を読み込んでいます。コンポーネントをDOMツリーにレンダリングするにはReactDOMが必要となります。バベルが必要なのか?JSXはブラウザが理解できる通常のJSにトランスパイルしないため、機能しません。すべてのブラウザがコンポーネントを読み取れるように、JSXを単純なJSにトランスパイルするためにBabel(バベル)が必要となります。Docsにオープンソースとして掲載されていますので、スクリプトをコピペしいつでも追加が可能となります。コンポーネントを作成しJSXを追加CDNとしてReactを使用したコンポーネントの作成は、通常の開発方法とは何の変化もありません。npmを使用してReactを使用する場合と同じ方法で、クラスまたは関数コンポーネントを作成が可能です。divタグを作成し、Reactコンポーネントをプラグインしてレンダリングする部分をマークします。id="root"></div></body>この部分に一意のIDを与えます。当記事での、ID属性はrootとします。そのIDは、後でJavaScriptのコードでその場所を特定するために使用します。id="root"は、コンポーネントが返すJSXは、要素内のDOMにレンダリングされます。HTMLに関しましては、これで以上となります。各コンポーネントのJSファイルのtypeプロパティを「text/babel」に設定することです。type="text/babel"></script></body>設定しないと、せっかく書いたコードが読み込まれなくなってしまいます。JSXを単純なJavaScript(ES5)にトランスパイルするのに役立ちます。詳しくはbabelドキュメントを参照下さい。スクリプトはなるべくbodyの下部(終了タグの直前)に配置するようにして下さい。JavaScriptがたくさんある場合は、HTMLをロードする前にすべてのJavaScriptをロードするため、ページのロードが明らかに遅くなる可能性があります。JavaScriptをHTML本文の下部に配置すると、JavaScriptが読み込まれる前にHTMLが読み込まれる時間が与えられるため、エラーを防ぎWebサイトの応答時間を短縮できます。JavaScriptはHTMLのbodyの最後に記述するのがベストですが、HTMLのheadに記述しても必ずエラーになるわけではありません。それでは、関数コンポーネントを作成します。CodePen.App関数によって返される、JavaScriptXML(JSX)と呼ばれる奇妙な構文に気づいたかもしれません。JSXとReactを使用すると、HTMLとJavaScriptを簡単に組み合わせることができます。1つのブレンドされた構文となりますが、一緒に機能する2つの完全に異なるタイプの構文がある事になります。これはHTMLをJavaScriptコードで直接記述できるため、HTMLコードとJSコードを分離する必要はありません。/>);Reactでは、Appコンポーネントをページのルート要素にレンダリングします。Libraryが提供する、ルートAPIであるReactDOM.createRoot()メソッドでHTML要素を動的に作成します。root要素をcontainer変数でcreateRootメソッドの引数として渡すことにより、Reactルートを構築します。18での新しいAPIルートとなっています。フックを使用する場合は、デフォルトエクスポートでインポートせずに使用することも可能です。通常はReactパッケージから直接エクスポートされた関数やコンポーネントを使用するために、以下のようにそれらを変数に格納することが推奨されています。React.useEffect;</script>上記のように変数に格納することで、Reactパッケージの名前空間を明示的に指定することなく、関数やコンポーネントにアクセスできます。この方法はコードの可読性を低下させる場合があるため、使用時には注意が必要です。v17以降では、CDNを使用してReactを読み込む場合、上記のような変数への代入は必要ありません。Reactのグローバルオブジェクトが自動的に設定されます。CodePen.Propsの渡し方CDNを使用して、Propsを渡す方法をみていきましょう。/>);</script></body>親コンポーネントから子にProps(小道具)を渡します。Childコンポーネントを作成します。Child関数の引数として、Propsを受け取ります。CodePen.以下にCDNを使用したReactアプリで、親コンポーネントApp.jsから外部ファイルの子コンポーネントにデータを渡す方法をコードとして示します。ReactとReactDOMのCDNを読み込みます。次に、App.jsとChildComponent.jsを<script>タグで読み込みます。id="root"></div></body></html>次に、App.jsで親コンポーネントを定義します。ファイルの階層は、ここではHTMLと同じ配置場所でも構いません。greeting変数にデータを代入し、ChildComponentコンポーネントに同じ名前としてgreetingをPropsとして渡します。/>);最後に、ChildComponent.jsで子コンポーネントを定義します。Propsオブジェクトからgreetingを受け取り、表示します。);};これで、CDNを使用して外部ファイルに定義された子コンポーネントにデータを渡すことができます。最後に、App.jsのroot.render()で親コンポーネントをレンダリングします。注意点としては、CDNを使用しているためimport構文は使用できないということです。そのため、<script>タグで直接ファイルを読み込み、App.jsでChildComponent.jsを直接参照して、子コンポーネントを作成する必要があります。CDNを使用し問題なく実行するには、次の点に注意する必要があります。React.jsを使用する場合は、Crossorigin(クロスオリジン)属性が必要となります。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を追加する方法を学びました。本日は以上となります。最後までこの記事を読んで頂きありがとうございます。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。