React事始め「すごいぞ！ReactはCDNで動いたんだ！」

新シリーズ。JSフレームワークReact、はじめました。今回は初回ということで、環境構築なしにCDNリンクでReactの仮想DOMを初体験してみます。それでは行きましょう！

【目次】

Reactを習得するためにやったことまとめ qiita.com

三大フレームワークの一つReactを事始める

以前の記事で触れたJS三大フレームワーク「Angular」「React」「Vue.js」。この記事にもあるように、自分はそのうちのVue.jsを事始めていた。一番敷居が低そうという理由だった。

※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ - クモのようにコツコツと

今後、仕事でReactも扱うことになりそうなため、そろそろReactも事始めたい。

なんと！今、Vue.jsで取り組んでいる書籍「Vue.js & Nuxt.js超入門」と同じ掌田さんが「React.js & Next.js超入門 」という本も書いていた！

React.js&Next.js超入門

目次を見ると「Vue.js & Nuxt.js超入門」とほぼ同じような構成で、最後はFirebaseでDBと連携したWebアプリを作るところまで行きそう。早速購入！

読んでみると先にVue.jsをやっていたおかげで「あ、コレはVueでいるアレだな」みたいな連想が効いて理解がしやすい。これこれ、こうなることを予想していた♪

しかも、ReactもVue.jsと同様、開発環境構築なしにCDNリンクだけで始められるらしい！（←これがVue.jsを選択した大きな理由だった）

いやー、知らなかったなー。

ネイティブJSでDOM操作

今回Reactでやりたい作例をネイティブJSの「DOM操作」で再現してみた。

See the Pen React 01(no React) by イイダリョウ (@i_ryo) on CodePen.

タイトル「りあくと事始め」の下に「ネイティブJSで書き換え」というテキストがある。

HTMLコード

<section>
    <h1>りあくと事始め</h1>
    <div class="text">読み込み中…</div>
</section>

テキストは.text'で囲っていて、中身は「読み込み中…」。しかし画面上は「ネイティブJSで書き換え」になっている。

画面上のHTMLコードはこうなっている。

<section>
    <h1>りあくと事始め</h1>
    <div class="text">
        <p>ネイティブJSで書き換え</p>
    </div>
</section>

.textの中にpタグが入れ子になっていて、その中身が「ネイティブJSで書き換え」。これはネイティブJSのDOM操作で実現している。

JSコード

//DOM取得
const text = document.querySelector('.text');

//DOM作成
const p = document.createElement('p');

p.textContent = 'ネイティブJSで書き換え';

//書き換え
text.textContent = '';
text.appendChild(p);

• 変数text：DOM.text'を取得
• 変数p：createElement()メソッドでpタグを生成
• pの中身textContentオブジェクト「ネイティブJSで書き換え」という文字列を入れる
• textの中身textContentオブジェクトに元々のあった文字列「読み込み中…」を空にする
• textにappendChild()メソッドでpを追加

これらのオブジェクトやメソッドはネイティブJS組み込みのもの。pタグを追加したいためinnerHTMLオブジェクトではなくappendChild()を使う。

※参考：ライブラリを使わない素のJavaScriptでDOM操作 - Qiita

一応、ネイティブJSで実現はできるんだが、これがだんだんと複雑になっていくと状況の把握が困難になっていくため、Reactの「仮想DOM」を使う。

ReactをCDNで事始める

ReactはSSR（サーバサイドレンダリング）のイメージが強かったので、Node.jsの開発環境じゃないと触れないと思っていた。

そしたら、なんとVue.jsと同様CDNリンクでも始められた！（知らなかった）

HTMLに下記のjsファイルをリンクする。

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

react.development.jsと/react-dom.development.js

※参考：CDN リンク – React

Reactで仮想DOMを作る

ということでCodePenでできる！やってみた。

See the Pen React 02 by イイダリョウ (@i_ryo) on CodePen.

「読み込み中…」が「ネイティブJSで書き換え」になっている。HTMLも.textの中にpタグが入れ子になっている。

JSコード

//DOM取得
const text = document.querySelector('.text');

//DOMの中身設定
const elm = React.createElement(
    'p', {}, 'こんにちは、りあくと。'
);

//レンダリング
ReactDOM.render(elm, text);

• 変数text：DOM'.textを取得
• 変数elm：値はReact.createElement()関数
  React.createElement()でエレメント作成。
  第一引数はp、第二引数は連想配列{}で中身は空、第三引数は文字列「こんにちは、りあくと。」
• ReactDOM.render()でレンダリング。第一引数はelm、第二引数はtext

React.createElement()はエレメント（要素）を作成する。

React.createElement( タグ, 属性, 中身 );

今回は属性は追加しないので空。

ReactDOM.render()でレンダリング（変換）する。

ReactDOM.render( エレメント, DOM);

これで、pの中にelmのエレメントが入る。

カウントのイベントを仕込んで仮想DOMを操作

次にカウントのイベントを仕込んでみる。

See the Pen React 03 by イイダリョウ (@i_ryo) on CodePen.

「ここ押せワンワン→ 1」の要素をクリックするとカウントの数値が上がる。

HTMLコード

<section>
    <h1>りあくと事始め</h1>
    <div class="text" onclick='Oshite();'>読み込み中…</div>
</section>

• .textにonclick属性を追加。値はOshite()関数

onclickはネイティブJSのイベント！最近はイベントリスナで書くことが多く懐かしい。

※参考：【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと

値のOshite()関数の設定はJSコードに書いてある。

JSコード

//カウンター初期値
let counter = 0;

//DOM取得
const text = document.querySelector('.text');


//カウンター設定
function Oshite() {
    counter++;

    //DOMの中身設定
    const elm = React.createElement(
        'p', {}, 'ここ押せワンワン！→ ' + counter
    );

    //レンダリング
    ReactDOM.render(elm, text);
        
}

//カウンター実行
Oshite();

• 変数counterの値は数値0
• 変数textでDOM. textを取得
• 以下、関数Oshiteを設定
  counterに数値を追加
  変数elm：React.createElement()でエレメント作成。
  第一引数はp、第二引数は連想配列{}で中身は空、第三引数は文字列「ここ押せワンワン！ →」とcounter
ReactDOM.render()でレンダリング。第一引数はelm、第二引数はtext
• 関数Oshite()を実行（0が1に）

書式「React.js & Next.js超入門 」にはこうあった

Reactの表示更新の基本は「更新の必要が生じたら、仮想DOMという仕組みのエレメントを作ってレンダリングする」というものです。

'.textをクリックするたびにReactDOM.render()によって仮想DOMがレンダリングされていることがイメージできた。

終わりに

ということで、2019年の大晦日にようやくReactの仮想DOMを初体験しました！まだJSXやコンポーネントなどReactらしいことはやれていないですが、来年以降も引き続きやっていきます。ゆくゆくはNext.jsによるWebアプリやReactNativeによるモバイルアプリなども作っていきたし！本年のブログは以上になります。来年もよろしくお願いいたします。

---

Reactを習得するためにやったことまとめ qiita.com