2022/06/17

2023/08/06

【簡単3分】Reactの実行環境構築を初心者向けに解説

JavaScriptのライブラリ・フレームワークにおいて、開発の多様性からjQueryをも凌ぐほど人気・需要が高まっているライブラリ「React」。

WEBエンジニアであれば是非ともマスターしておきたいライブラリですが、実行環境の構築で躓いてしまう方も少なくありません。今回は、そんなReactの実行環境を構築する方法を初心者向けに解説します。

サンプルプログラム

本題に入る前に、実行環境が構築できたかどうかをチェックするためのプログラムを作っておきましょう。

自身で作成するのも良いと思いますが、ここではひとまず以下のコードをコピーし、jsファイルなどにペーストしておくのがおすすめです。

【サンプルコード】

<body>
    <div id="sample-container"></div>

    <!-- 通常のjsファイルでもOK -->
    <script src="./sample.jsx"></script>
</body>

/* sample.jsx */

class CountNumber extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            "number": 0
        }
        this.countup = 5;
    }

    componentDidMount(){
        // 1秒ごとに5ずつ数値アップ
        setInterval(()=>{
            this.setState({
                "number": this.state.number + this.countup
            });
        }, 1000);
    }

    render(){
        return(
            <div style={{
                "font-size": "30px",
                "color": "#ffffff",
                "width": "100px",
                "height": "100px",
                "border-radius": "100px",
                "background": "#000000",
                "line-height": "100px",
                "text-align": "center"
            }}>
                {this.state.number}
            </div>
        );
    }
}

let target = document.getElementById("sample-container");
ReactDOM.render(
    <CountNumber />,
    target
);

今回は環境構築についての記事なので、サンプルプログラムに関する詳しい解説はしません。一応、以下のように1秒ごとに数値が上がっていくReactの基本的なプログラムです。

ただし、今の状態ではただコードを書いただけなので、当然ながらプログラムは正常に動きません。

超簡単！CDNで環境構築

サンプルプログラムも用意できたところで、次はいよいよ環境構築をします。

環境構築については色々と方法があるのですが、npmをかませたりして、初心者の方にはハードルが高いです。

そのため、今回は超簡単なCDNによる実行環境の構築方法を紹介していきます。

ちなみに、CDNというのは、大量のソースファイル及びプログラムのデータを取り扱う、データ専用のネットワークのことです。

一般的なサーバからURLでファイルを取得するのとは違い、安定した環境でデータが提供されるため、CDNでの実装はサーバエラーなどによるトラブルが発生しにくいというメリットがあります。

jQueryやVue.jsなど軽量なJavaScriptライブラリ・フレームワークのほとんどは、CDNで簡単に実装できます。

1．ReactのCDN

まず手始めに、ReactおよびReactDOMを扱えるようにするためのファイルをCDNで取得します。

ReactのCDNは以下の通りです。

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

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

これらを実装することで、サンプルプログラムの一部が有効になります。

React.Component
ReactDOM( .render( ) )

2．JSXを扱えるようにする

React, ReactDOMのファイルを取得しても、サンプルプログラムは動作しません。なぜかというと、本来JavaScriptでは、<CountNumber />というような書き方でDOM構造を作ることができないからです。

HTMLタグの書式をそのままコード内に書き込めるようにするためには、JSX記法を扱えるようにしなければなりません。

ここでは、BabelのCDNを用いてJSXを扱えるようにしましょう。まず、以下のCDNをReactの下辺りに追加します。

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

ただ、これだけではBabelのファイルを取得しただけ。

JSXは通常のJavaScript形式ではないため、HTMLに埋め込んでいる<script>のテキストタイプを指定してあげることで、はじめてJSXが扱えるようになります。

テキストタイプの指定は、以下のように「type=”text/babel”」と属性値を追加すればOKです。

<script src="./sample.jsx" type="text/babel"></script>

3．環境構築完了！

1，2の内容をまとめた結果が、以下のコードです。

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

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

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

<body>
    <div id="sample-container"></div>
    <script src="./sample.jsx" type="text/babel"></script>
</body>

うまくできていれば、サンプルプログラムが正常に動作するでしょう。

注意として、Reactのソースファイルを読み込む前にJavaScriptのプログラムを読み込んでしまうと、当然ながらうまく動作しません。

HTMLは上から順に読まれていくので、上記のコードのように必ずJavaScriptを読み込むよりも前にCDNを貼り付けるようにしてください。

CDNで環境構築する際の注意点

先述の通り、CDNで環境構築すれば、Reactもしっかり動作するようになります。

しかし、本来は軽量なライブラリ・フレームワークを中心に用いられているCDNは、Reactを実装する上で完全な適役だとは言い切れません。

ここからは、CDNで環境構築する際の注意点をいくつかご紹介していきます。

React-Nativeが動くわけではない

Reactとよく似た、というかアプリケーション開発向けとして再開発されたものに「React-Native」があります。

もしかすると「ReactがCDNで実装可能？！NativeもOKなの？！？！？！？」となった方がいるかもしれませんが、答えはNOです。

あくまでライブラリのReactおよびReactDOMが動作するようにしているだけなので、ビルドが必要なフレームワークも動かせるようになるわけではありません。

React-Nativeによる開発はまた特別に環境を構築する必要があります。

リンク元のCDNが変更になる場合がある

もう一つ注意すべきなのが、CDNの提供元のファイルはいつでも変更される可能性があるという点です。これはReactに限らず、CDN全般のデメリットと言えます。

ライブラリ・フレームワークは頻繁にアップデートが行われており、その都度新しいバージョンのリンクが新たに提供されます。

その際、過去のバージョン、つまり今まで使っていたCDNのリンク元にあるファイルが削除される可能性もゼロではありません。

CDNはただリンク先のファイルを読み込んでくるだけの機能ですから、提供元のファイルが消えれば、そのリンクを扱っていたWEBサイトの該当CDNが全て無効になってしまいます。

ダウンロードして同じサーバに置いたり、ローカル上で環境構築（ビルド）したりする場合は、こういった問題が起こりにくいため、トラブルの心配が少ないのです。

ただ、ほとんどの場合は過去のバージョンのデータ削除されることはありません。あまりにも致命的な欠陥が目立った場合には提供が打ち切られる可能性はありますが、基本的にはいちいち気にしなくても良いでしょう。

まとめ

Reactの環境構築というとnpmやyarnからデータを持ってくるものが多いですが、願うならば全ての機能をCDNで実装できる方が末端の開発者としては気楽です。環境構築の方法に悪戦苦闘している方は、この記事を参考にしながらReactの学習をスタートしてみてください。