format_list_bulleted
【React.js】CDNを使ってReactを手軽に試す(React 入門)
最終更新日時:2020-11-02 00:42:38

JavaScriptを代表するライブラリの一つにReact.jsがあります。React.jsはFacebookとコミュニティによって開発されているライブラリです。Reactを用いることで仮想DOMを用いたDOM操作やSPAの構築を行うことができます。今回はReactの入門編としてCDNを使って手軽にReactで触って遊んでみたいと思います。React公式ドキュメントのチュートリアルを参考に内容を噛み砕いて説明していきます。

今回取り上げる内容

本記事では以下の内容を取り上げます。

  • CDNでのReactのインストール
  • ReactでDOMを操作してみる
  • ReactでState(変数)を扱う
  • Reactでコンポーネントを使ってみる
  • ReactでJSXを使ってみる

まず使ってみることを目的としているので詳細な解説はせず、どう使うかについて説明していきます。

作成する画面

今回は簡易的な投票画面を題材にしながらReactを触ってみます。以下のような画面を作ります。

投票画面

実際に触ってみたい方は以下から確認できます。

コードペン

また、今回使用したコードはcode-databaseのgithubリポジトリにも載せてありますので手元で確認したい方はこちらも活用してみてください。

作成手順

投票画面の実装は以下のような手順で行っていきます。

  1. ReactのDOM操作に必要なhtmファイルを用意する
  2. CDNでReactをインストールする
  3. 投票ボタンのコンポーネントを作成する
  4. 投票ボタンの描画をJSXで行うためにBabelをCDNでインストールする
  5. コンポーネントをDOMに書き込みボタンを表示させる

今回は投票ボタンをReactのコンポーネント(今は画面のパーツのような意味と思っていただければいいです)を使って作成し、それを３つ表示させています。投票ボタンは押すと表示が切り替わる仕組みになっています。

実際に作ってみる

それでは先ほどの手順に則って画面を作ってみましょう。

ReactのDOM操作に必要なhtmファイルを用意する

まずはhtmlファイルを用意しましょう。htmlファイル内にはそれぞれの候補者の名前と、Reactで投票ボタンを表示させるためのdiv.vote_button_containerを用意しておきます。

タイトル:index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>react_cdn</title>
</head>
<body>
    <p>
    候補者1:田中
    <div class="vote_button_container"></div>
    </p>
    
    <p>
    候補者2:鈴木
    <div class="vote_button_container"></div>
    </p>
    
    <p>
    候補者3:佐藤
    <div class="vote_button_container"></div>
    </p>
</body>
</html>

CDNでReactをインストールする

続いてCDNでReactを読み込み、Reactを使えるようにしましょう。CDNとはscriptタグのsrcから外部URLを用いて外部ライブラリを読み込み、使用できる仕組みです。

タイトル:index.html

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

この二つのscriptタグをbodyタグ内の一番下に記述します。これで、Reactを使用できるようになりました。

投票ボタンのコンポーネントを作成する

続いて投票ボタンを作っていきましょう。ここからはReactを使用していきます。まずは、Reactを記述するためのscriptタグを用意します。

タイトル:index.html

<script type="text/babel">
    'use strict';
    class VoteButton extends React.Component {
    }
</script>

そこにVoteButtonという名前のコンポーネントをクラスで定義します。このクラスはReact.Componentというクラスを継承するものです。クラスの扱いについて詳しく知りたい方は「クラスの書き方・使い方について解説」を参照してみるといいと思います。

続いてVoteButtonの中身を記述していきます。このコンポーネントは押されていない時にはvoteという表示をして、押されている時にはvotedという表示をし、押すたびにこの表示が切り替わるような機能を要件としています。このため、ボタンには表示を二段階に分ける状態、すなわち真偽値型の変数を用意する必要があります。

タイトル:index.htmlのscriptタグ内

class VoteButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { voted: false };
    }
}

Reactのコンポーネントでは上記のようにconstructorメソッドを通じてstateという状態を扱うプロパティを扱うことで状態管理を行います。今回の例ではvotedというプロパティを真偽値(初期値はfalse)で扱うのでthis.state = { voted: false }で状態を用意します。

続いてボタンを表示する処理を記述していきます。

タイトル:index.htmlのscriptタグ内

class VoteButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { voted: false };
    }

    render() {
        if (this.state.voted) {
            return (
                <button onClick={() => this.setState({ voted: false })}>
                    voted
                </button>
            )
        } else {
            return (
                <button onClick={() => this.setState({ voted: true })}>
                    vote
                </button>
            );
        }
    }
}

renderというメソッドを定義することでコンポーネントの表示を定義することができます。votedの内容で表示を切り替える必要があるのでif文で条件分岐をしています。さらに、returnでJSXを用いたhtml要素の表現がなされています。

JSXとは後にJavaScriptに変換される言語で、htmlファイルのように記述できるのが特徴です。ReactではJSXを用いたhtml要素の記述ができるのが特徴です。

今回のコードではbuttonタグのクリックイベントにコンポーネントのvotedの状態を変更する処理が記述されています。

状態の変更にはsetStateメソッドを用います。状態を定義した際のような代入演算子を用いた状態の変更はできないことに注意が必要です。

投票ボタンの描画をJSXで行うためにBabelをCDNでインストールする

先ほどJSXはJavaScriptの記述に変更されると記述しましたが、これを行うためにBabelというコードを変換するツールをインストールする必要があるので、こちらもCDNでインストールします。

タイトル:index.html

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 追記 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>という一行を追記してあげましょう。

さらに先ほどから記述しているscriptタグにtype/babelをつけてbabelのトランス対象であることを示してあげましょう。

タイトル:index.html

<script type="text/babel">

コンポーネントをDOMに書き込みボタンを表示させる

最後にReactで記述したコンポーネントをhtmlファイルの要素に紐づける処理を記述します。

タイトル:index.htmlのscriptタグ内

'use strict';

class VoteButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { voted: false };
    }

    render() {
        if (this.state.voted) {
            return (
                <button onClick={() => this.setState({ voted: false })}>
                    voted
                </button>
            )
        } else {
            return (
                <button onClick={() => this.setState({ voted: true })}>
                    vote
                </button>
            );
        }
    }
}
//追記
const e = React.createElement;
document.querySelectorAll('.vote_button_container')
            .forEach(domContainer => {
                ReactDOM.render(
                    React.createElement(VoteButton),
                    domContainer
                );
            });

ReactDOM.renderというメソッドを用いて実際のDOMに変更を適用します。renderメソッドの第一引数には描画する要素を指定しますが、今回はReact.createElementメソッドで生成された要素を指定します。createElementメソッドは引数にコンポーネントなどを指定して要素を生成するメソッドです。renderメソッドの第二引数にはDOMの描画を行うhtml要素を指定します。

今回の場合ではforEachを使って要素のそれぞれに描画を行っています。forEachの使い方については「forEachを用いた配列のループ処理」を参考にしてみてください。

お疲れ様でした！これで正しく描画されているはずです！

全体のコード

最後に今回使用したコード全体を貼っておきます。使用したコードはcode-databaseのgithubリポジトリにも載せてあります。

タイトル:index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>react_cdn</title>
</head>
<body>
    <p>
    候補者1:田中
    <div class="vote_button_container"></div>
    </p>
    
    <p>
    候補者2:鈴木
    <div class="vote_button_container"></div>
    </p>
    
    <p>
    候補者3:佐藤
    <div class="vote_button_container"></div>
    </p>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        'use strict';
        class VoteButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = { voted: false };
            }

            render() {
                if (this.state.voted) {
                    return (
                        <button onClick={() => this.setState({ voted: false })}>
                            voted
                        </button>
                    )
                } else {
                    return (
                        <button onClick={() => this.setState({ voted: true })}>
                            vote
                        </button>
                    );
                }
            }
        }
        document.querySelectorAll('.vote_button_container')
            .forEach(domContainer => {
                ReactDOM.render(
                    React.createElement(VoteButton),
                    domContainer
                );
            });
    </script>
</body>
</html>

この記事のまとめ

今回はReactの入門編としてCDNを使ってちょっとした投票画面を作ってみました。最後に記事の要点をまとめておきます。

  • ReactはCDNでインストールすることで手軽に利用できる
  • コンポーネントでhtml要素のパーツを生成できる
  • コンポーネントを使い回すことができる
  • ReactではJSXでhtml要素の記述ができる
  • JSXはBabelでJavaScriptに変換する必要がある

皆さんもReactで開発していきましょう！