Webフリーランスとして働く 
Reactとは？
目次
ReactはFacebookが作ったJavaScriptでUIを作るためのライブラリです。
MVCのViewの部分のみを扱うためのもので、それ以外のM・Cの部分には関わりません。
主に、DOMの操作とイベントのハンドリングをやってくれます。
フレームワークではないので、よく比較検討されるAngularなどのフレームワークと併用することも可能です。
Reactの特徴
Reactを使う上で知っておきたい概念や特徴は以下です。
- Virtual DOM（仮想DOM）
- コンポーネント
- JSX
一つずつ、詳しく説明していきます。
Virtual DOM（仮想DOM）
Reactでは、仮想DOMという考え方を導入しています。
仮想DOMは更新が必要な箇所を自動的に計算して実際のDOMを更新する役割を果たします。
差分だけを更新するので、全更新と比較して、無駄な再描画をしなくていい分高速に実行可能です。
エンジニア的は常に仮想DOMに対して全更新をかけるだけでいいので簡単でミスが少なくなります。
あとは仮想DOMが自動で差分計算、DOMに差分を適用します。
コンポーネント
Reactではコンポーネントという単位でUIのパーツを作っていきます。
コンポーネントはUIパーツのロジックとマークアップが１箇所に定義されたものです。
UIパーツごとに分割できるので再利用しやすい、コンポーネント内の処理はコンポーネント内に閉じ込めることができるといったメリットがあります。
JSX
JSXとはJavaScript XMLの頭文字を取ったもので、JSX を使うと React 要素を簡便な形式で作成することができます。
従来は、マークアップで記述する部分とロジックの部分を分けるべきというお作法が良いとされてきましたが、ReactではXML風の言語でJavaScriptの中に直接マークアップを書くので、一見、HTMLとJavaScriptが合体したような感じになり、扱いに慣れるまでは少し気持ち悪い感じがするかもしれません。。
一方で、JSXで記述をしておくと、コンパイラでエラーが出るようになるので、事前に簡単なミスを発見できる等のメリットもあります。
JSXでは、JavaScriptの値を使いたいときは｛｝で囲みます。
｛｝の中身はJavaScriptの式として解釈されるので、変数だけでなく関数も使用可能で、使いこなせると非常に便利です。
Reactの使いどころ
Reactは、特にSPA（シングルページアプリケーション）の開発に向いています。
なぜならば、SPAはUIの使いやすさをあげるためにJavaScriptを多様する必要あるからです。
JavaScriptで効率的に、シンプルにUIを作るためのライブラリであるReactはまさにうってつけです。
ボタンやテキストがページの中に多数配置されていて、入力した値を即座に表示したり、見た目を変化させる必要な画面の実装では特にReactの良さが生きてきます。
JavaScriptの標準規格ECMAScript（エクマスクリプト）の基本
企業の情報やエンジニアとしてのキャリアアップの方法、現在の待遇（給料・報酬）、未経験からのステップアップ方法などのご相談を受け付けています。
お気軽にお問合せください。
