JavaScript - DOM入門 - 5. 読み込み処理の実装

5. 読み込み処理の実装

ローカルストレージにメモを保存することができるようになりました。完成まであと少しです。さいごにローカルストレージからのデータの読み込み処理を実装していきます。

既存の memo.html ファイルを編集して load ボタンを追加します。

<!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>
        <button type="button" id="resetBtn">reset</button>
        <button type="button" id="saveBtn">save</button>
        <button type="button" id="loadBtn">load</button>
    </form>
    <ul id="memoList">
    </ul>
    <script src="memo.js"></script>
</body>
</html>

プログラムの修正箇所は以下のとおりです。入力フォームに load ボタンを追加しています。

    <form>
        <input type="text" id="memoTxt">
        <button type="button" id="addBtn">add</button>
        <button type="button" id="resetBtn">reset</button>
        <button type="button" id="saveBtn">save</button>
        <button type="button" id="loadBtn">load</button>
    </form>

load ボタンの id 属性に loadBtn という値を指定しています。この loadBtn という id を指定して、後のJavaScriptプログラムから load ボタンにアクセスします。以降はJavaScriptを記述して load ボタンをクリックしたときに、ローカルストレージからデータを読み込むようにプログラミングしていきます。

JavaScriptプログラムの実装

それでは memo.js ファイルを編集して load ボタンクリック時の処理を実装してみましょう。

const loadBtn = document.querySelector("#loadBtn");
loadBtn.onclick = () => {
    const resetBtn = document.querySelector("#resetBtn");
    resetBtn.click();
    const keys = Object.keys(localStorage).sort();
    for (const key of keys) {
        const value = localStorage.getItem(key);
        const memoItem = document.createElement("li");
        memoItem.innerText = value;
        const memoList = document.querySelector("#memoList");
        memoList.appendChild(memoItem);
    }
}
// ...既存のコードは省略

load ボタンのクリック時の処理を実装しています。これまでの同じように先頭部分では、document.querySelectorload ボタンの参照を取得して、onClick プロパティに関数を追加することで、クリック時のイベントハンドラを定義しています。

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

    const resetBtn = document.querySelector("#resetBtn");
    resetBtn.click();
    const keys = Object.keys(localStorage).sort();
    for (const key of keys) {
        const value = localStorage.getItem(key);
        const memoItem = document.createElement("li");
        memoItem.innerText = value;
        const memoList = document.querySelector("#memoList");
        memoList.appendChild(memoItem);
    }

ここではまず先頭の2行目までを見てみましょう。

    const resetBtn = document.querySelector("#resetBtn");
    resetBtn.click();

何をしているかコードから読み取れるでしょうか。ここでは document.querySelector を使って reset ボタンの参照を取得しています。そのあと変数 resetBtn に対して click メソッドを呼び出しています。これは reset ボタンをマウスでクリックするのと同じように動作します。reset ボタンをクリックすると 以前に実装したとおり、リスト(<ul>)の子要素( <li> )がすべて削除されます。

ローカルストレージからデータを読み込む前に表示中のリストをクリアしています。

コードの続きを見てみましょう。

    const keys = Object.keys(localStorage).sort();

少しむずかしいプログラムが出てきました。ここではローカルストレージからキーの一覧をソートして取得しています。 Object.keys(localStorage) の部分でローカルストレージに登録済みのキーの一覧(配列)を取得できます。ただし並び順が不透明なので配列に対して sort メソッドを呼び出して、キーの昇順で並べ替えています。

Object.keys は引数に指定したオブジェクトのキーの一覧を返します。

つづいて for 文のループ処理を見てみましょう。

    for (const key of keys) {
        const value = localStorage.getItem(key);
        const memoItem = document.createElement("li");
        memoItem.innerText = value;
        const memoList = document.querySelector("#memoList");
        memoList.appendChild(memoItem);
    }

ここでは for 文を使って取得したキーの一覧を一つずつ取り出して処理しています。

JavaScriptの for...of 文は ES2015 で追加された比較的あたらしい構文です。配列の要素を順に処理できます。

for 文のループの中では localStorage.getItem(key) と記述して、ローカルストレージからキーを指定して、キーに紐づく値を取得しています。

        const value = localStorage.getItem(key);

ここで取得した値(変数 value)を次のように <li> タグのボディに指定して、画面のリスト(<ul>)に追加しています。

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

いずれも見慣れた操作です。document.createElement はあらたにHTMLタグを生成するメソッドです。ここでは <li> タグを生成しています。次の memoItem.innerText = value; のコードで <li> タグのボディ(タグの中身)にローカルストレージから取得した値を設定しています。

最後の2行では document.querySelector でリスト <ul> にアクセスて、memoList.appendChild<ul> タグの子要素として <li> タグを追加しています。

動作確認

JavaScriptプログラムの作成も完了したので、さいごに動作確認をしておきましょう。ブラウザで memo.html ファイルを開いた状態で開発者ツールを開くとローカルストレージの状態を確認できます。

以前の操作が完了していれば Memo 1Memo2 の2つのメモを確認できます。

次に画面から load ボタンをクリックしてみましょう。そうするとリストが復元されて、次のような画面が表示されるでしょう。

おつかれさまでした。以上でメモアプリ開発は完了です。小さなアプリケーションですが、メモを追加して、保存したり削除したり、様々な機能が実装されています。

まとめ

さいごに、これまでに作成してきた memo.js ファイルを載せておきます。

const loadBtn = document.querySelector("#loadBtn");
loadBtn.onclick = () => {
    const resetBtn = document.querySelector("#resetBtn");
    resetBtn.click();
    const keys = Object.keys(localStorage).sort();
    for (const key of keys) {
        const value = localStorage.getItem(key);
        const memoItem = document.createElement("li");
        memoItem.innerText = value;
        const memoList = document.querySelector("#memoList");
        memoList.appendChild(memoItem);
    }
}

const saveBtn = document.querySelector("#saveBtn");
saveBtn.onclick = () => {
    localStorage.clear();
    const memoList = document.querySelector("#memoList");
    const memoItems = memoList.children;
    for (let i = 0; i < memoItems.length; i++) {
        const key = i;
        const value = memoItems[i].innerText;
        localStorage.setItem(key, value);
    }
}

const resetBtn = document.querySelector("#resetBtn");
resetBtn.onclick = () => {
    const memoList = document.querySelector("#memoList");
    while (memoList.firstChild) {
        memoList.removeChild(memoList.firstChild);
    }
}

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 = "";
}

本講座の目的はメモアプリ開発の作業を通じて、DOMプログラミングに慣れることでした。学習してきたように document.querySelector を使えばHTMLの任意の要素にアクセスできます。また引数にはセレクタを指定できるので、今回のように id 指定を行う以外にも class 指定やタグ名による指定もサポートされています。

セレクタによって複数の要素が返却される場合は document.querySelectorAll を使います。

あらたにHTML要素を追加するときには document.createElement を使います。作成したHTML要素は、既存のHTML要素に対して appendChild メソッドを呼び出すことで追加できます。同様に既存のHTML要素を削除する場合は removeChild メソッドを使います。

DOMプログラミング自体はHTML要素を操作することなので、上記の方法を覚えておくだけでも、多くのことが実現できるようになります。また今回は取り上げませんでしたが、既存のHTML要素に属性を追加することも可能です。たとえば style 属性を操作すれば、文字の色を変えたり、余白を調整したり、CSSの機能を追加することもできます。

DOMプログラミングの輪郭が掴めたら次はjQueryに挑戦してみると良いでしょう。jQueryはDOMプログラミングの持つ本質的な課題(メソッド名が長くタイピングする量が多い。。)をエレガントに解決してくれます。その快適さにきっと驚くはずです🍵