15.5.0ReactはFacebook社が開発している、今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに表示することができます。2015)が用いられるようになりました。入門」では「TUTORIAL」をもとに、それらの構文も含めてご説明します。動かしてみる」を読まれるとよいでしょう。コードを書く前に素材を整える「TUTORIAL」でつくるのは、マルバツゲームです。できあがりは、CodePenに掲げられています(サンプル001)。JavaScriptコードを見ると、HTMLのタグ<>がスクリプトの中に書き込まれています。DOM、JSX超入門」の「JSXとBabelの使い方」参照)。JSXはブラウザがわかるように変換(コンパイル)しなければなりません。CodePenのJavaScriptコードの上に「Babel」というボタンがあります。このBabelがコンパイラなのです。ダウンロードして試すには、手もとにJSXのコンパイル環境を整えなければなりません。学習に必ずしもつながらないコードも含まれているようです。そこで、できるだけ簡素な素材を揃えつつ進めることにします。CodePen.HTMLドキュメントはつぎのとおりです。はじめのふたつの<script>要素が、ReactのJavaScriptライブラリを読み込みます。CDNを使っていますので、ローカルにダウンロードしなくて構いません。3つめの<script>要素には、babel-standaloneを読み込んでいます。JSXをブラウザ上でコンパイルするBabelのJavaScriptライブラリです。ReactのJSXコードを書くJavaScriptファイル(script.js)は別につくって、フォルダ(src)に納めることにします。このファイルを読み込む<script>要素には、type属性に"text/babel"を与えてください。<body>には<div>要素をひとつ加え、JavaScriptコードから参照するid属性(container)を与えました。type="text/babel"></script></body></html>ランタイムのコンパイルはコードが手軽に試せるものの、ブラウザに負荷をかけるので効率はよくありません。presetでJSXを標準のJavaScriptコードにコンパイルする」)。その場合、babel-standaloneは要らなくなります。スタイルシートのCSSファイル(style.css)は、前掲サンプル001のCodePenからそのまま使います(フォルダcssに納めます)。つぎのコードをコピーしても構いません。マス目の要素をつくってページに差し込むJavaScriptファイル(script.js)に、JSX構文でReactのコードを書きます。要素をHTMLドキュメントに差し込むのはReactDOM.render()メソッドです。差し込み先親要素)第1引数のつくる要素は、JSXでタグをじかに書き込んでも構いません。コンポーネントとしてクラスで定めることもできます。2015)には、クラス構文が採り入れられました。コンポーネントは、classキーワードを用いてつぎのように定義します。コンポーネントのクラスは、extendsキーワードでReact.Componentを基本クラスとして継承しなければなりません。render()メソッドからJSXで書いた要素の定めを返します[*1]。クラスに備えるメソッドは、関数と同じかたちです。キーワードfunctionは添えません。(要素の定め);}}以下のコード001は、マス目の要素(<button>)をひとつつくって、ページの親要素(id属性container)に差し込みます。ReactDOM.render()メソッドの第1引数に渡すJSXのタグには、クラス名(Square)を与えました。JSXのタグに定めるクラスは、オブジェクトとしての要素のclassNameプロパティに加えます。class属性ではありませんのでご注意ください。React.Componentは抽象クラスです。継承したサブクラスは、render()メソッドを備えなければなりません(「React.Component」の「Overview」参照)。9マスの盤面を組み立てるゲームの盤面はマス目9つで組み立てます。盤面はつぎのように新たなクラス(Board)で定めました。JSXの構文の中に波かっこ{}を使うと、JavaScriptの式が書けます。変数(プロパティ)を参照したり、関数(メソッド)が呼び出せるのです。render()メソッドは、const宣言した定数(status)の値を<div>要素のテキストとして差し込み、3コマから1行をつくる<div>要素の中からメソッド(renderSquare())を呼び出します。メソッドからマス目(Square)の要素をひとつ受け取って加えているのです。className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}}マス目(Square)の要素を返すメソッド(renderSquare())は、引数(i)の値を属性(value)に与えています。属性は変数としてコンポーネントのpropsプロパティに納められます。すると、モジュール(Square)の要素の記述から、つぎのように波かっこ{}でプロパティを参照すれば、変数値が取り出せるのです。className="square">{this.props.value}</button>);}}ReactDOM.render()メソッドの呼び出しをつぎのように書き換えれば、組み立てられた9つのマス目それぞれに0からはじまる連番整数が示されます(図002)。6には、アロー関数式=>が採り入れられました。名前のない関数がつぎのように書き替えられます。式マス目のコンポーネント(Square)の要素に、onClickイベントのハンドラをアロー関数式で定めてみましょう[*2]。JSXのタグにイベントハンドラをつぎのように書き加えれば、クリックしたマス目の番号が警告ダイアログに示されます。alert(this.props.value)}>{this.props.value}</button>);}}コンポーネントのインスタンスにプロパティを定めたいときは、setState()メソッドを用います。呼び出すとき引数に渡すオブジェクトは、インスタンスのstateプロパティに納められるのです。マス目のコンポーネント(Square)の要素に加えたonClickイベントのハンドラを、つぎのように書き替えます。すると、クリックしたマス目の要素に「X」がつきます(図003)。stateプロパティの値ははじめはnullです。その場合、オブジェクトとして参照できません。そのため、論理演算子&&で存在をたしかめました。this.state.value}</button>);}}図003■クリックしたマス目にXがつくこれで9マスのゲーム盤面ができ上がり、クリックしたマス目に「X」がつくようになりました。ここまでのスクリプトを、つぎのコード002にまとめます。合わせて以下のサンプル002にjsdo.itのコードを掲げました。6のJavaScriptコードは[ES6]タブに書いています。アロー関数式は、本体のthisが関数の定められたオブジォクトを参照します。名前のない関数ではthisを束縛しないため、つぎのように書かなければなりません。