# React勉強会_vol.8

###### tags:`勉強会中のメモ`

### Web

* カプセル化された再利用可能なコンポーネントに分割し、それらの組み合わせで Web コンテンツを表現するしくみを作ろう
* Custom Elements ←**ReactでいうReactElementオブジェクト**
* HTML にユーザーが独自の DOM 要素を定義することを可能にする
* Shadow DOM
* DOM 要素をカプセル化してメインのツリーからアクセスできなくすることで、HTML やCSS に隔離されたスコープを形成する
* HTML Templates
* Custom Elements の内容を記述する HTML のマークアップテンプレートを定義する
* HTML Imports
* … HTML ドキュメントが、他のファイルに記載された HTML コンテンツを取り込めるようにする

## Reactコンセプト

* Declarative（宣言的）
* Component-Based（コンポーネントベース）
* Just The UI（UI にしか関知しない）
* Virtual DOM（仮想 DOM）
* One-Way Dataflow（単方向データフロー）
* Learn Once, Write Anywhere（ひとたび習得すれば、あらゆるプラットフォームで開発できる）

### Declarative（宣言的）

* 宣言型プログラミング
* 出力の性質やあるべき状態を記述
* 対義語が命令プログラミング
* 最終的な出力を得るために、時系列に沿って直前の状態に依存しながら命令を順番に書いていく
* そこに『どんなデータが表示されるべきか』を記述しておくだけで React がそこにそのデータを表示し、適切なタイミングで適切な表示に更新してくれる。
* 『あらゆるコンポーネントとデータフローを純粋関数で表現すること』を目指し、命令的要素を最小化する

### Component-Based（コンポーネントベース）／Just The UI（UI にしか関知しない

* 見た目と機能がカプセル化されたコンポーネントというアプリケーションの部品を作成し、それらを組み合わせることで複雑な UI を構築するという設計思想

### Virtual DOM（仮想 DOM）

* ブラウザで何らかのイベントが発生したりしてツリーのどこかの要素の状態が変更されると、それにリンクされているコンポーネント関数自身が、コンポーネントがクラスの場合はその render メソッドが再実行される。
* するとその子要素の React Elements に設定されていた propsにも変更が発生するのでそのコンポーネントが新しい props で再実行され、その連鎖によって該当子孫ツリーのレンダリング内容が変化する。
* そうしてできあがった新しい仮想 DOM をキャッシュしされていた以前の仮想 DOM と比較して、その差分だけをリアル DOM に反映させる

### One-Way Dataflow（単方向データフロー）

* 双方向データバインディング
* 制御ロジック側での値の変更が view へ埋め込んだデータに伝播されると同時に、view 側での値の変更が制御ロジックのデータに反映される
* React における単方向データフローとは、**データがコンポーネントツリーを親コンポーネントから子コンポーネントに対して一方向に、props という形をとって流れ落ちること**をいう

フォームを実装する際は、その各パーツを子コンポーネントとして持つ単一の親コンポーネント
をまず作成する。そしてその親コンポーネントでフォームデータを自身の state（状態）として持つ。
さらにその state を変更する関数を作り、それを子コンポーネントに props として渡す。子コンポー
ネントは渡された関数をフォームパーツに仕込んでおいて、操作の際にそれが任意の引数でもって
実行されるようにする

* コンポーネントの独立性が保たれる
* 関数型プログラミングと相性がいい

### Learn Once, Write Anywhere（ひとたび習得すれば、あらゆるプラットフォームで開発できる）

* React は設計として本体と仮想 DOM を実際の UI にレンダリングするレンダラーが分離されていて、いろんなドキュメントやプラットフォーム向けのレンダラーが提供されている
* コードをまるまる共有はできないけど、コンポーネントベースな React の書き方を学べば、レンダラーを変更することでいろんなプラットフォームの開発できる