js勉強会用資料

JavaScript

ちょっとした勉強会用に書いたやつ

太古のコード

See the Pen jzNaoa by tic40 (@ccpzjoh) on CodePen.

特徴

  • DOMの状態管理がない
  • DOMを手作業で直接更新
  • DOMの状態を毎回把握しないといけない

データバインディング

See the Pen dmbJPy by tic40 (@ccpzjoh) on CodePen.

特徴

  • モデル(js object)の更新に伴って、ビュー(DOM)に変更が反映される
  • 手作業でDOMを更新する必要がない

データバインディング + コンポーネントベース

See the Pen yKBpwr by tic40 (@ccpzjoh) on CodePen.

特徴

  • DOMはほぼjs側で生成する
  • コンポーネント化することで、コードの再利用性が高まる
  • コンポーネントごとに単一の責任を負わせることで副作用が減る
  • テストが容易