はじめに
普段はReactをよく使っていますが、Javascriptをもっと理解することができればもっと楽しいだろうなと感じています。
ReactもVueもAngularも原始はJavascriptなので、Javascript力をつけることで根本的にフロントエンドに強くなれるのかなと思います。
まずはTodoリストを作ります。
Javascriptは何をしている？
ブラウザはhtmlドキュメントを解析して、DOMツリーを構築します。
DOMツリーはその名の通り木構造で構成され、タグや文字列などは個々のNodeになります。
各Nodeはクラスのインスタンスとして表されます。例えば<body>タグはHTMLBodyElementのインスタンスです。
JavascriptはDOM APIを使うことにより、DOM操作を行うことができます。
やってみる
以下のようなhtmlドキュメントを用意します。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<form>
<input class="input_element" type="text" name="todo_input" />
<button type="submit" class="submit_button">Add</button>
</form>
<div id="todo_list_wrapper">
<ul class="todo_list"></ul>
</div>
</body>
<script src="sample.js"></script>
</html>
document.querySelectorAll("*")
↑ ブラウザのconsoleでDOMツリーのNodeを確認することができます。
目次
- APIを使い、DOMツリーの要素に対してアクセスする
- submit時の関数を作成する
- 特定のイベントをフックにして、2で作成した関数を発火させる
1. 要素へのアクセス
sample.js
const inputElement = document.querySelector('.input_element');
const submitButton = document.querySelector('.submit_button');
const todoList = document.querySelector('.todo_list');
取得されるDOM要素は以下のようになります。
2. submit時の関数の作成
sample.js
const handleSubmit = (event) => {
event.preventDefault();
const newItem = document.createElement('li');
const newItemText = document.createTextNode(inputElement.value);
newItem.appendChild(newItemText);
todoList.appendChild(newItem);
inputElement.value = "";
}
-
document.createElement('li')=> Todoリストは<ul>要素で構成されているため、そこに追加するための<li>要素を作成します。 -
<li>の中身(子要素)となるTextNodeを作成します。- inputに入力された文字列はvalueプロパティを参照すればいいため、
inputElement.valueで取得できます。
- inputに入力された文字列はvalueプロパティを参照すればいいため、
-
appendChildを使うことによって、newItemとnewItemTextを親子関係にします。 -
newItemTextを子要素にもつnewItemをulの子要素に追加すればいいため、appendChildを使ってtodoListの子要素にnewItemを追加します。 - 追加したら
inputを空にします。
↓ preventDefaultについて
3. フックで発火するようにする
sample.js
submitButton.addEventListener('click', handleSubmit);
addEventListenerでクリックイベントをフックにして、2で作成したhandleSubmitを発火させるようにします。