教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本教材は React や Vue で採用されている仮想 DOM を JavaScript を使って、ご自身の手で一から仮想 DOM フレームワークを作り Twitter 風のフォローボタンを実装します。
仮想 DOM フレームワークを一から作成することで、 React や Vue の内部で何が行われているのかを理解することができます。また、JavaScript の基礎知識があれば実装できるので、「React や Vue を触ったことないけど興味がある」という方にもおすすめです。仮想 DOM フレームワークを作る過程でその魅力に触れてみましょう!
教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。 (JavaScript 以外での質問対応はできかねますのでご了承ください。)
Document Object Model の略で、HTML を JavaScript で操作するための仕組み(API)のことです。
これによりプログラムで文書構造、スタイル、内容を変更することができます。
例えば「id が app という要素に、<p>Hello World!</p>
を追加する」といったように ここをこんな風に変更したいが可能です。
javascript12345 Copied!const app = document.getElementById("app");
const p = document.createElement("p");
p.innerText = "Hello World!";
app.appendChild(p);
仮想 DOM と区別するために、HTML を直接操作する DOM のことを「リアル DOM」と呼ぶこともあります。本教材でも「リアル DOM」と呼び進めていくこととします。
リアル DOM を JavaScript のオブジェクトとして表現し、さらに変更箇所だけ差分検知し更新をすることを指します。
少し具体的に説明をします。
例えば下記のような HTML 要素があるとします。
html1 Copied!<p class="text">仮想DOMの学習完了!</p>
それをオブジェクトで表現をします。
javascript123456789 Copied!{
"tagName": "p",
"attrs": {
class: "text"
},
"children": [
"仮想DOMの学習完了!"
]
}
さらに差分のある分だけ更新するために下記のことを行っています。
最終的にはリアル DOM を操作してブラウザに反映することになるのですが、基本的にリアル DOM 操作の場合リアル DOM が変更されるたびにブラウザが HTML を解析してレンダリングをすることになるので表示されるまでに時間がかかってしまったりといわゆるレンダリングコストが高くなってしまいます。
さらに仮想 DOM の場合は見た目とロジックを分離することができたり、状態を管理することが簡単になるので WEB アプリケーションの開発がリアル DOM 操作するよりも遥かに楽になるというメリットがあります。
仮想 DOM フレームワークを実装する中で、仮想 DOM の利点を明確にし仮想 DOM の理解が必要な理由を探っていきましょう!
JavaScript を一度も触ったことがない方は、まずは Progate 等で学習することをおすすめします。
本教材は JavaScript で仮想 DOM を操作をすることを一番の目的としており、jQuery や React、Vue の解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。
仮想 DOM フレームワークを自作をし、最終的に下記のような Twitter 風フォローボタンを実装します。
本教材を進める上での環境を整えたり、設計を解説していきます。
jQuery での状態変更をします。またリアル DOM を操作して起きる問題とは何かを学びます。
今度は React での状態変更の流れを掴みます。ここで仮想 DOM が必要な理由を学びましょう!
この章から実際に仮想 DOM フレームワークを作ります。まずはブラウザにテキストを表示させます。
アカウント一覧のデータを使って state の受け渡しができるようにします。
コントローラーを実装して View と state を受け取れるようにします。
フォローボタンを実装します。