カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

はじめに

自作仮想 DOM フレームワークでフォローボタンを実装してみよう!

本教材は React や Vue で採用されている仮想 DOM を JavaScript を使って、ご自身の手で一から仮想 DOM フレームワークを作り Twitter 風のフォローボタンを実装します。

仮想 DOM フレームワークを一から作成することで、 React や Vue の内部で何が行われているのかを理解することができます。また、JavaScript の基礎知識があれば実装できるので、「React や Vue を触ったことないけど興味がある」という方にもおすすめです。仮想 DOM フレームワークを作る過程でその魅力に触れてみましょう!

教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。 (JavaScript 以外での質問対応はできかねますのでご了承ください。)

そもそも DOM とは

Document Object Model の略で、HTML を JavaScript で操作するための仕組み(API)のことです。
これによりプログラムで文書構造、スタイル、内容を変更することができます。

例えば「id が app という要素に、<p>Hello World!</p> を追加する」といったように こここんな風変更したいが可能です。

javascript
12345
Copied!
const app = document.getElementById("app"); const p = document.createElement("p"); p.innerText = "Hello World!"; app.appendChild(p);

仮想 DOM と区別するために、HTML を直接操作する DOM のことを「リアル DOM」と呼ぶこともあります。本教材でも「リアル DOM」と呼び進めていくこととします。

仮想 DOM とは

リアル DOM を JavaScript のオブジェクトとして表現し、さらに変更箇所だけ差分検知し更新をすることを指します。
少し具体的に説明をします。

例えば下記のような HTML 要素があるとします。

html
1
Copied!
<p class="text">仮想DOMの学習完了!</p>

それをオブジェクトで表現をします。

javascript
123456789
Copied!
{ "tagName": "p", "attrs": { class: "text" }, "children": [ "仮想DOMの学習完了!" ] }

さらに差分のある分だけ更新するために下記のことを行っています。

  1. オブジェクトを 2 つ用意
  2. 片方のオブジェクトを JavaScript で操作
  3. Before と After のオブジェクトを比較する
  4. 差分があったところだけリアル DOM に反映する
  5. 反映されたリアル DOM をブラウザがレンダリング

vdom

最終的にはリアル DOM を操作してブラウザに反映することになるのですが、基本的にリアル DOM 操作の場合リアル DOM が変更されるたびにブラウザが HTML を解析してレンダリングをすることになるので表示されるまでに時間がかかってしまったりといわゆるレンダリングコストが高くなってしまいます。

さらに仮想 DOM の場合は見た目とロジックを分離することができたり、状態を管理することが簡単になるので WEB アプリケーションの開発がリアル DOM 操作するよりも遥かに楽になるというメリットがあります。

仮想 DOM フレームワークを実装する中で、仮想 DOM の利点を明確にし仮想 DOM の理解が必要な理由を探っていきましょう!

受講における必要条件

  • JavaScript の基礎知識

JavaScript を一度も触ったことがない方は、まずは Progate 等で学習することをおすすめします。

この教材の対象者

  • progate などの JavaScript の教材を見ながら簡単なサンプルアプリケーションを作ったことがある方
  • React を使ってサンプルアプリケーションを作ったことがある方
  • 仮想 DOM を理解したい方

本教材の対象 OS

  • MacOS

学ばないこと

本教材は JavaScript で仮想 DOM を操作をすることを一番の目的としており、jQuery や React、Vue の解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。

作成するアプリケーションのイメージをつかもう

仮想 DOM フレームワークを自作をし、最終的に下記のような Twitter 風フォローボタンを実装します。

Image from Gyazo

目次

0 章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1 章 jQuery で実装を見てみよう

jQuery での状態変更をします。またリアル DOM を操作して起きる問題とは何かを学びます。

2 章 React での実装を見てみよう

今度は React での状態変更の流れを掴みます。ここで仮想 DOM が必要な理由を学びましょう!

3 章 View を作ろう

この章から実際に仮想 DOM フレームワークを作ります。まずはブラウザにテキストを表示させます。

4 章 state を作ろう

アカウント一覧のデータを使って state の受け渡しができるようにします。

5 章 コントローラーを作ろう

コントローラーを実装して View と state を受け取れるようにします。

6 章 action 機能を実装しよう

フォローボタンを実装します。

現在のパート (0)
全パート (5)
みんなで助け合おう!
現在のパートのディスカッション 全0件