モダンなJavaScriptフレームワークの仕組みを自分で作りながら学ぶ

 (nolanlawson.com)
26 ポイント 投稿者 GN⁺ 2023-12-04 | 1件のコメント | WhatsAppで共有

モダンなJavaScriptフレームワークの仕組みを理解する

  • 自分自身のJavaScriptフレームワークを作ってみることは、学習に役立つ。
  • 「モダンなJavaScriptフレームワーク」は、React以降のフレームワークを意味する。
  • これらのフレームワークはReactから着想を得ているが、互いによく似た方向へ進化してきた。

モダンなフレームワークの特徴

  • DOM更新のためにリアクティビティ（reactivity）を使う。
  • DOMレンダリングのためにテンプレートの複製（cloning templates）を使う。
  • <template> や Proxy のようなモダンなWeb APIを使う。

リアクティビティ（Reactivity）

  • Reactはリアクティブではないとしばしば言及される。
  • モダンなフレームワークは、パフォーマンスを優先するためにプッシュベースの反応モデルを使う。
  • Proxy を利用して、状態が変更されるたびにDOMが更新されるよう実装する。

DOMツリーの複製（Cloning DOM trees）

  • <template> タグを使ってHTMLを一度だけパースし、その後全体を高速に複製する技術は効率的である。
  • この方法は、さまざまなJavaScriptフレームワークで使われている。

モダンなJavaScript API

  • <template> と Proxy は、リアクティビティシステムを構築するのに役立つAPIである。
  • タグ付きテンプレートリテラル（tagged template literals）を使って、HTMLテンプレートAPIをシンプルに作る。

リアクティビティ構築の段階

  • 状態管理と、状態変更時のDOM更新を定義するリアクティビティがフレームワークの土台になる。
  • Proxy を使って状態変更を検知し、queueMicrotask を通じて更新を効率よく管理する。

DOMレンダリングの段階

  • html 関数を使ってDOMツリーを構築し、効率的に更新する。
  • タグ付きテンプレートリテラルを使ってHTMLテンプレートを記述し、WeakMap を用いてHTMLパースを最適化する。

リアクティビティとDOMレンダリングの結合

  • createEffect を使って、状態に応じてDOMを更新する。
  • 状態変更時にテキストが自動で更新されるように実装する。

次のステップ

  • DOMレンダリングシステムを改善できる方法は多数ある。
  • テンプレートを一度だけパースし、バインディングも一度だけ設定して更新を最小化することが目標である。

GN⁺の意見

この記事で最も重要なのは、モダンなJavaScriptフレームワークの中核概念と実装方法を理解し、実際に自分だけのフレームワークを作ってみる体験を通じて学ぶプロセスである。このようなアプローチは、初級ソフトウェアエンジニアにとってフレームワークの内部動作を理解し、実際に適用してみる機会を提供し、興味深く有益な学習体験になり得る。

関連記事

1件のコメント

 
GN⁺ 2023-12-04
Hacker News のコメント

  • 関心のあるテーマの基礎的な理解のために、次の資料を勧める:

  • React に関する誤解と実際の動作方式についての説明:

    • 状態更新時、React は仮想 DOM ツリー全体ではなく、そのコンポーネントとその子だけを再構成する。
    • useMemo は再レンダリングを防がず、その役割を担うのは React.memo である。
    • React が "push-only" ではない理由は、更新をバッファリングするためである。
    • signals の利点は、DOM のどのプロパティを再レンダリングすべきかをフレームワークが把握していることを意味するが、これがリアクティビティを意味するわけではない。

  • Svelte に対する肯定的な評価と活用事例:

    • Svelte コンパイラは拡張性が高く、Svelte テンプレートを特別な方法で処理できる。
    • Svekyll（静的ブログツール Jekyll のクローン）を Svelte で構築した経験の共有。

  • リアクティブなフレームワークに対するさまざまな観点:

    • Solid のようなリアクティブフレームワークの紹介資料を提供。
    • solid-js のリアクティビティを理解するために Web レンダラー/フレームワークを書いた経験の共有。
    • React を直接実装してみる学習資料の推薦。

  • React のリアクティビティに関する質問と議論:

    • React を「リアクティブ」にできる方法についての質問。
    • これ以上の JS フレームワーク開発は控えるべきだという意見。

  • フロントエンドフレームワークの経験が豊富な人々に投げかけられた質問:

    • レンダリング作業に対する effect system をサポートするフレームワーク/ライブラリについての質問。