React
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
諸事情でReactを使ってアプリを一つ開発します。
Reactは使ったことがないので、学んだ内容をブログにしようと思います。
Reactとは？
JavaScriptのライブラリです。
ユーザーインタフェースを構築するのに使われ、Viewに特化しています。
基本的にはES6に基づいて開発を進めることになります。
仮想DOMを採用しており、変更発生する度に仮想DOMの差分を確認(再描写)し、差分箇所のDOMを更新します。
(ReactDOMによって、React要素に合致するようにDOMを更新します)
そして、Reactでは仮想的にHTML(JSX)が使えます。
つまり、変更があればHTMLを更新する、そして常に最新の状態のDOMをレンダリングすることができます。
システム側からすると、差分更新になるので高速に実行が可能になります。
jQueryのような「ここはこう変化させる」と要素ごとに操作する必要がなくなります。
なのでReactは、記事などHTMLの活躍が多いWEBサービスよりも、JavaScriptの活躍(動作)が多いWEBサービスにReactは向いています。
注目ポイント
・SPAの需要増=View(フロントエンド)の部分でJavaScriptの作業が増えた
・JSXを利用した仮想DOMを採用している(実装者は仮想DOMを記述する)
・コンポーネント指向
・コンパイル時に通常のDOM生成コードに変換できる
・XSS(cross-site-scripting) 対策
歴史
ReactはFacebookのソフトウェアエンジニアによって開発されました。
同じくFacebookで開発されたPHP拡張のXHPの影響を受けているので、記述方法はXHPと似ています。
「XHPが使いやすかったので、JavaScriptでも使いたい」と思い開発されたのがReactといったところでしょうか。
2011年にFacebookのニュースフィード上で最初に使用され、2012年にはインスタでも使用されるようになった。
2013年にオープンソース化されました。
既存アプリへのReact環境構築
環境
・Mac
・React
React環境構築
詳細はこちらをご確認ください。
用語
SPA：
Single Page Applicationの略。
2010年頃から流行したアプリ構造で、HTML5によりURLの動的書き換えが可能になったことでページ遷移が必要なくなり、部分的な更新を行うのが主流となった結果生まれたアプリ構造。
単一Webページで構成ができるが、サーバーエンド側で行う処理の大半がフロントエンド 側に移行することになった。
JSX：
JavaScript XMLの略で、コンポーネントのマークアップを書くための規則・記法。
HTMLとほとんど同じなので、JavaScriptにマークアップが混在するような形になる。
ReactでJSXを使用することは必須ではありません。
React要素を生成できます。
JavaScriptの値を使いたい場合は、{}で囲む必要があります。
キャメルケースのプロパティ命名規則を使用します。
コンパイルするとJavaScriptになります。
様々なエラーや警告を表示してくれます。
React要素：
Reactアプリケーションの最小単位の構成ブロックで、イミュータブルオブジェクトです。
一度要素を作成すると、その子要素もしくは属性を変更することはできません。
JSXで記述します。
プログラミング言語などの人工言語で定められている構文規則や記法。
ユーザーインタフェースパーツのロジックとマークアップを一箇所に定義したもの。
Reactにおいては、DOMとJavaScriptのセットがコンポーネントとなる。
簡単に言うと、Viewをオブジェクト化したもの。
コンポーネント名は大文字で始める。
JSXのロジック：
他のユーザーインターフェースロジックと本質的に結合しているらしい。
なので、イベントへの応答や経過的な状態変化、画面表示のためのデータを準備する方法などは他のユーザーインターフェースと同じロジックのようです。
XSS(cross-site-scripting)対策：
ReactDOMはJSXに埋め込まれた値をレンダリングされる前にエスケープします。
renderの前に全てが文字列に変換されます。
renderメソッド：
コンポーネントを返すことができるメソッド。
使い方は、renderメソッドでコンポーネントのDOM構造を返し、ReactDOM.renderで指定したReact要素にコンポーネントを記述する。
props：
コンポーネントに対して外部から値を渡すメソッド。
読み取り専用です。
外部とのインターフェースになる。
state：
コンポーネントによって完全に管理されているメソッド。
ユーザー操作や時間経過などで動的に変化するデータを扱うために確保されている機能です。
【注意点】
・stateは直接変更しない
・stateの更新は非同期に行われる可能性がある
・stateの更新はマージされる
ライフサイクルメソッド：
マウントとアンマウントが交互に実行されること。
マウント：
クラスやコンポーネントがDOMとして描写されるときのこと。
アンマウント：
クラスやコンポーネントに基づいて生成されたDOMが削除されること。
今後に向けて
jQueryとDOMの勉強をしないといけないなーと痛感しました。。。
JSXは掘り下げたら面白そう！
時間もないので、実際にアプリを開発してReactに慣れていこうと思います。
参考
これからReactを勉強する人が最初に見るべきスライド７選 | UX MILK
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
