Zenn
🍣

React.jsをCDNで使う

2024/04/21に公開
React
tech

生成AIの進化に伴い、自然言語でコードを生成できるようになっている。create.xyzもその一つ。
「アルバムサムネイル」という具合に、作りたいデザインを入力すると、デザインが自動生成される。そしてそのソースコードを、Reactで出力できる。

この手の自然言語でコードを生成するサービスの多くは、フロント兼バックエンドはReact.jsが多く、デザインはtailwindCSSをベースとしていることが多い

苦手意識があり、内部ロジックの実装よりも倍以上時間をかけていたフロントエンドを、生成AIによって作れるのはめちゃくちゃ便利。

ただ、唯一の不満がある。それは環境構築だ。React.jsはnode.js環境下で動作するのでnode.js環境が必要だし、最小構成を作るにも、npmを利用してプロジェクト群を生成する。まあこの機能自体はめちゃくちゃ楽なのだけど、個人でかつ小規模で、サクッと開発したいというときにはネックとなってしまう。
デプロイに集中して、その過程に余計な工程を挟みたくない。

そういうニーズに応えるための方法の一つに、CDNがある。

というわけでCDNを使ったReact.jsの最小構成について紹介

#　とりあえず結論から
最小構成のソースコードは以下。コピーすると

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>タイトル</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>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel">
            const ChildComponent = ({ greeting }) => {
            return (
                    <div>
                        <h2>{greeting}</h2>
                    </div>
                );
            };


            const App = () => {
                return (<div>hello<ChildComponent greeting='おはよう'></ChildComponent></div>)
            }
            const container = document.getElementById('root')

            const root = ReactDOM.createRoot(container)
            root.render(<App/>)
        </script>
    </body>
</html>

コード説明

        <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>

上から順番に、

  • React.jsのフレームワーク用CDN
  • Reactのコードを、html上のDOMに反映（レンダリング）するためのクラス群
  • babel : React.jsの記法であるJSXをJSへと変換するときに、ブラウザごとにサポートされているJS記法へ変換するためのCDN

Reactコンポーネントを定義する

戻り値にJSXを返却する関数を定義する。ちなみに下記記述は、function App() {}と同義。

const App = () => {
 return (//JSX)
}

JSXは、React.jsの記述方法で、JSファイル内に、htmlのようにコードを書いたとしても、よしなに構文解析してくれる記述方法。おそらく内部的には以下のような処理が行われていそう

const element = <h1>Hello World!</h1>

const element = document.createElement('h1');
element.innerHtml = 'Hello World!'

HTML上に反映

いくらReactコンポーネントを作成しても、画面上に描写しなければ勿体無い。
そのための方法がReactDOMコンポーネント。
以下の3ステップで実行される

  • どの要素にレンダリングするか指定する（getElementById()）
  • ReactDOM要素に読み込ませる（ReactDOM.createRoot()）
  • 作成したReactコンポーネントをレンダリングする（root.render(<App/>)）
    • Reactコンポーネントの記述は、<{関数名} />

注意

jsファイルをimportする機能

https://qiita.com/TakamiChie/items/4d92c7e80a9d4cce0178

Discussion