こんにちは！
私は、現在JavaScriptに再入門中で、オブジェクト指向初心者の私がJavaScriptにも再入門 「決意表明編」 〜JavaScriptパターン 学習0日目【逃げメモ】〜のような記事を書いている最中です。
ある程度進んだ所で、前々から興味のあった React.js を触ってみたくなったので、一旦パターン学習は置いておいて、React.jsをどんなものか体験しようと思います。
今話題沸騰中のReact.jsって何？
React.jsは、 MVCパターンフレームワークのVの部分を担うライブラリ です。
MVCとは
Mは「Model」の略で、オブジェクトであればそのオブジェクト自体の形を宣言したり、その中に計算をする機能を付けたり（関数・メソッド）して、ビジネスロジック部分を担う存在を言います。
Vは「View」の略で、見た目やUIなど、使う側が「触れる」部分を意味します。ボタンやテキストボックス、画像など、目に見える部分を総じてVとして捉えましょう。動的な所で言えば、VはMの値を参照して形作られます。
Cは「Controller」の略で「View」と「Model」を繋げる役割を行います。たとえば、「View」から入力された値などを「Controller」で受け、渡さなければいけない相手を選定して、その相手である「Model」に命令と共に渡したり、「Model」の計算結果を受け取り、「View」に表示の命令を出したり、主に指示をする部分といえます。
MVCもまたパターンなので、そういった作りの機能があるわけではなく、そういった作り方をする、というのが基本的な考え方で、機能として実装したものが フレームワーク として提供される事がしばしばあります。
そのMVCの中で、 React.jsはVだけを担当する 存在です。MやCはJavaScriptそのものにさせたり、その他フレームワークを利用する事で初めてプログラムとして機能する、という感じでしょうか。
カンタンな「Hello, World」を体験
CODE PENに簡単なReact.jsで書いたコードを載せました。
今回はJSXを使用しないでJavaScriptのコードだけで作成しました。そしてES5での書き方となります。
HTML1ファイルで表示すると以下の様なコードとなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<!-- React.jsを使えるよう読み込み -->
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script>
//Helloというカスタムコンポーネントを定義
var Hello = React.createClass({
//初期値の設定：propsは変更不能の値。オブジェクトを返すと、this.propsとなる
getDefaultProps:function(){
return{
word : "Hello"
};
},
//初期値の設定：stateは変更可能な値。オブジェクトを返すと、this.stateとなる。
getInitialState:function(){
return{
who : "world"
};
},
//描画を行うメソッド
render:function(){
//Reactで使用する要素の作成
return React.createElement('p',{className:"text"},this.props.word + ", " + this.state.who);
}
});
//document上にdivを作成
var appNode = document.createElement('div');
document.body.appendChild(appNode);
//今作成したdivの中にHelloカスタムコンポーネントで作られるReact要素を描画
ReactDOM.render(React.createElement(Hello,{displayName:'hello'}),appNode);
</script>
</body>
</html>
解説
細かくソースを見ていきましょう
react.jsの読み込み
SPAや大規模に開発するために開発環境を整えるのは「慣れ」や「勉強」が必要ですが、サクッとReact.jsに触れたい！という時にはjQueryなどと同じようにscriptタグにてスクリプトを呼び出すだけで利用できてしまいます。
上記ではreactとreactDOMの2つを読み込んでいます。両方必要です。
カスタムコンポーネントの作成
Reactではテンプレートとロジックを集約してそれを コンポーネント として扱います。そして自在にコンポーネントを作る事ができます。今回は、「Hello, world」と表示するpタグを持ったコンポーネントを作成してみます。
getDefaultProps
コンポーネントを生成する時、Reactの機能として1回だけ呼ばれるメソッドです。
ここで初期値の変数を設定できるのですが、設定できるのは 変更できない値 です。constやletのようなものです。後々変更予定の無いものはここで宣言しておきましょう。
宣言はオブジェクトで行い、そいつをreturnで戻り値にすることで、その他の場所からthis.props.xxx（xxxはキー）として利用する事ができます。
getInitialState
これも初期値の変数を設定するものですが、このコンポーネントをインスタンス化した時に呼ばれるメソッドであり、 動的な値 を設定するメソッドとして機能します。
例えば、テキストボックスで入力された値を入れておく変数などユーザーの入力や、他のメソッドでAJAXなどを行って取得したデータを置いておくための変数など、ここで宣言しておく事ができます。
宣言はこちらもオブジェクトで行い、returnで戻すと、`this.state.xxx'（xxxはキー)'として扱えます。
値の変更は、this.state.xxxを直接編集するのではなく、this.setState()で行う事が約束事なので、必ず守って下さい。
this.setState()'が走ると直後にrender()`メソッドがReactの機能として呼ばれるので、 値の変更があれば描画 が約束されます。これが便利ですよね。
render
描画を行うメソッドです。戻り値にReactElementを指定する事で、それらが表示される前段階が整うと言う事です。createElementsメソッドを呼び出す事でReactElementを作ることができます。
引数1で要素の種類、引数2で要素の属性をオブジェクトで指定します。今回classNameとなっています。classNameはReactでサポートされている記法に基きますので、以下も参照しながら使いましょう。
Supported Attributes - React Official
画面に出力
ReactDOM.renderメソッドにて先ほど定義したカスタムコンポーネントを生成して、それを引数である実Document上の要素に「描画」します。厳密には違うかもしれませんが、その場に描画するという感覚が大事です。
今回、値の変わるような処理を入れていませんが、setState()にて値の書き換えが行われると、renderメソッドが呼ばれ、出力する要素が書き換わります。それが起こると、ReactDOM.renderにて指定した実Documentの要素もまた描画されて、見た目も書き換わります。
感想
オライリーの本とネットの情報を照らし合わせながら進めていくと理解がとても深まりました。
「 データが変われば自動的に色々なものが作用して動く 」という一方向で理解し易い仕組みが、Reactの魅力だなと思いました。
今後は、JSXを用いた書き方や、ES6（クラスがあって書きやすいJS!）やSCSSを絡めて開発できる環境づくりをして、より「書きやすい」状態に持って行って、より複雑なコンポーネント作成やアニメーションに挑戦して、頭を悩ませようと思います。