Reactと仮想DOMの考え方

• HTMLはDOM（ツリー構造のオブジェクトモデル）として抽象化されている
  • 動的なWEBサイトを実現するには、JSからDOMを操作する必要がある。
  • Vanilla JSではDOMの操作がやりにくい & ブラウザごとの差異がある
  • リアルDOMの操作は重い
    • リアルな DOM はなぜ遅いのか
    • 値が更新されるたびに毎回仮想DOMを作って比較して実際の更新、、、って非効率な気もするけど、、、
      • 君はVue,Reactの次に来るSvelteを知っているか？
• js→jQuery（ライブラリ）の登場
  • ブラウザに依存しない
  • DOM操作と変更が容易
• →そもそも、DOMがJSの外部に存在していて、JSから操作する対象になってるのが使いにくい
• →React(仮想DOM)の登場
  • DOMをJSの値(第一級オブジェクト:基本的な操作を制限無しに出来る対象)にしてしまう
    • js
      • HTML(DOM) = 操作対象
    • jsx
      • HTML(DOM) = JSXの値
  • 仮想DOM
    • const helloNode = <div>Hello!</div>;
• 単純なWebアプリなら静的なHTMLを外側のJSで操作するのが単純
  • 複雑なWebアプリになると破綻する
• 例えば : Todoリスト
  • リストの増減をするには
    • js
      • DOMを足す、DOMを消す、という操作をする
    • 仮想DOM
      • 配列を操作し、配列をJSXに展開する
• Vue.jsも仮想DOMであるが、テンプレート構文が推奨されている
• ※JSXはそのままJavaScriptエンジンでは動作しないので、JavaScriptへトランスパイルする(Babel)
  • TypescriptのTSXで書けばTypescriptがトランスパイルするのでBabelが不要？
• 従来のフロントエンドはDOMの操作は手続き的だったが、モダンフロントエンドでは宣言的
• 手続き的

const menu = document.queryselector('.menu')
menu.onClick = () => {...}

• 宣言的
  • <nav style={{display: isOpened ? 'block' : 'none'}}>MENU</nav>

コンポーネント指向のUIライブラリは、UI部品を中心として組み合わせていくことが本質で、単にHTMLで平たく一回だけ書下す以上のことができます。部品化を考えなければ、今までどおりのほうが楽なのかもしれません。