JavaScript | DOM | 追加処理の実装

2. 追加処理の実装

つづいてメモの追加処理を実装します。まずはさきほど作成したHTMLファイル memo.html を確認しておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memo App</title>
</head>
<body>
    <h3>Memo App</h3>
    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="addBtn">add</button>
    </form>
    <ul id="memoList">
        <li>Memo 1</li>
    </ul>
    <script src="memo.js"></script>
</body>
</html>

ここでは memo.html ファイルへの変更はありません。ここで注意したいのは画面に表示している入力フォームの部分です。

    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="addBtn">add</button>
    </form>

上記のコードではテキストボックスとボタンを定義しています。テキストボックスの id 属性には memoTxt を指定していて、同様にボタンの id 属性には addBtn と指定しています。これから学習するDOMプログラミングではこの id 属性に指定した値がとても大事になります。id 属性に指定する値は、Webページ上で一意である必要があります。一意とは「重複がない」という意味ですので、たとえば、以下のように記述してしまうと良くありません。

    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="memoTxt">add</button>
    </form>

上記の場合、両方とも memoTxt という値になっているので id 属性の使い方として正しくありません。まずは id 属性には一意な値を割り振るという点を理解しておいてください。

次にメモの表示部分、リスト形式で表示している部分も確認しておきましょう。

    <ul id="memoList">
        <li>Memo 1</li>
    </ul>

ここでも <ul> タグに id="memoList" を付与しています。id 属性は任意のタグに付与できるので、後のJavaScriptコードからアクセスしたい要素に指定しておくと便利です。

<ul> タグについても補足しておきましょう。<ul> タグはリスト（箇条書き）を出力するためのものです。<ul> タグは子要素として <li> タグを複数定義できます。今回のメモアプリでは、テキストボックスにメモを入力して、add ボタンをクリックしたときに、この <ul> タグの中に <li> タグを追加するようにプログラミングします。

JavaScriptプログラムの実装

それでは add ボタンクリック時の処理をJavaScriptで実装してみましょう。 memo.js ファイルを次のように修正します。

const addBtn = document.querySelector("#addBtn");
addBtn.onclick = () => {
    const memoTxt = document.querySelector("#memoTxt");
    const memoItem = document.createElement("li");
    memoItem.innerText = memoTxt.value;
    const memoList = document.querySelector("#memoList");
    memoList.appendChild(memoItem);
    memoTxt.value = "";
}

既存のコードは削除して、あらたに上記のコードを追加します。

このプログラムでは document.querySelector を使って add ボタンオブジェクトを取得してます。

const addBtn = document.querySelector("#addBtn");

querySelector メソッドは引数にセレクタを指定します。これはCSSのセレクタと同様で、id指定でアクセスするときは先頭に # を指定します。上記のように実装することで変数 addBtn には <button type="button" id="memoTxt">add</button> オブジェクトの参照が代入されます。

残りのコードも見てみましょう。

addBtn.onclick = () => {
    const memoTxt = document.querySelector("#memoTxt");
    const memoItem = document.createElement("li");
    memoItem.innerText = memoTxt.value;
    const memoList = document.querySelector("#memoList");
    memoList.appendChild(memoItem);
    memoTxt.value = "";
}

ここでは addBtn 変数の onClick プロパティに関数を代入しています。このようにonClick プロパティに関数を代入することで、ボタンクリック時の処理として動作します。

addBtn.onclick = () => {
    // addボタンクリック時の処理
}

() => {} の部分は無名関数を定義しています。このような表記法はアロー関数などと呼ばれます。

次にボタンクリック時の処理を見てみましょう。

    const memoTxt = document.querySelector("#memoTxt");
    const memoItem = document.createElement("li");
    memoItem.innerText = memoTxt.value;
    const memoList = document.querySelector("#memoList");
    memoList.appendChild(memoItem);
    memoTxt.value = "";

まず先頭の部分では document.querySelector を使ってテキストボックスの参照を取得しています。

    const memoTxt = document.querySelector("#memoTxt");

querySelector メソッドの引数には # で始まるセレクタを指定しているので、id指定でHTML要素にアクセスしています。そのため変数 memoTxt には <input type="text" id="memoTxt"> オブジェクトの参照が代入されます。

プログラムの続きを見てみましょう。

    const memoItem = document.createElement("li");
    memoItem.innerText = memoTxt.value;

上記のコードでは document.createElement を使って、新たに <li> タグを生成しています。このようにcreateElement メソッドを使うことで任意のHTML要素を生成できます。

このとき <li> タグのボディ（タグの中身）に、テキストボックスの値を追加するために以下のコードを追加しています。

    memoItem.innerText = memoTxt.value;

変数 memoTxt はテキストボックスを参照しているので memoTxt.value とすることで、<input> タグの value 属性にアクセスできます。つまり、テキストボックスに入力された値を取得できます。

また変数 memoItem は、作成したばかりの <li> タグを参照しています。<li> タグのボディにテキストを追加したいので memoItem.innerText プロパティにアクセスしています。

処理の最期の部分も確認しておきましょう。

    const memoList = document.querySelector("#memoList");
    memoList.appendChild(memoItem);
    memoTxt.value = "";

ここでも document.querySelector を使ってid指定でHTML要素を取得しています。引数には #memoList としているので、変数 memoList には <ul> オブジェクトの参照が代入されます。

次に変数 memoList に対して、先ほど作成した memoItem 変数を子要素として追加しています。

    memoList.appendChild(memoItem);

appendChild メソッドは名前の示すとおり、HTML要素に子要素を追加するためのメソッドです。この場合、変数 memoList は <ul> タグを参照しているので、<ul> タグに <li> タグを追加するという意味になります。

最後の一文も見ておきましょう。

    memoTxt.value = "";

ここではテキストボックスを参照している変数memoTxt の value プロパティに空文字を代入しています。これにより、画面のテキストボックスの入力は空の状態になります。

動作確認

それではブラウザを使ってプログラムの動作を確認してみましょう。表示された画面のテキストボックスに Memo 2 とタイプして add ボタンをクリックすると次のように表示されるでしょう。

上記のようにテキストボックスに入力した値が、リストに追加されるようになります。またメモは複数入力できるので、テキストボックスにメモを入力して、add ボタンをクリックすればたくさんメモを残すことができます。

ただし、画面をリロードすると、登録したメモはすべてクリアされてしまいます。データを永続化させる方法についてはまた後ほど考えることにします。次はメモアプリのデータを削除する方法について学習していきましょう。