【JavaScript入門】タスクを表示しよう

本章では、ToDoリストのタスクを表示させます。

ToDoリストのタスクを表示させるために、配列でタスクデータを作ります。

そのデータを元にHTMLを生成し、それをDOMツリーに追加します。

DOMの操作をするために、template要素やappendChildの使い方を学びます。

ToDoリストを表示してみよう！

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

参考 ToDoアプリサンプルコードJavaScript入門

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「タスクを表示しよう」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

ページには「入力欄」と「全てのタスクを削除」というボタンが設置されています。

ここにタスクのリストを表示させていきましょう。

HTMLファイルの中を見てみよう

まずは、HTMLファイルの中を見てみましょう。

サンプルコードの「スタート」の「index.html」を開いてください。


<html>
  <head>
    <meta charset="utf-8">
    <title>ToDoリスト</title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h2 class="center">Todoリスト</h2>

      <div class="row">
        <div class="col s6 offset-s3 input-field">
          <form id="form">
            <label for="title">タスク</label>
            <input placeholder="お掃除..." type="text" class="validate" id="input">
          </form>

          <table id="tasks">
            <tbody id="tasks">
            </tbody>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="col s6 offset-s3">
          <button class="btn waves-effect waves-light" type="submit" name="action" id="deleteAll">
            全てのタスクを削除
            <i class="material-icons right">delete</i>
          </button>
        </div>
      </div>
    </div>
  </body>

  <template id="taskTemplate">
    <tr>
      <td class="left-align" style="width: 50px;">
        <label style="padding-top: 10px;">
          <input type="checkbox" />
          <span class="checkbox-span"></span>
        </label>
      </td>
    
      <td class="">
        <p class="name"></p>
      </td>
    
      <td class="right-align">
        <a class="btn-floating btn-small waves-effect waves-light delete">
          <i class="material-icons">delete</i>
        </a>
      </td>
    </tr>
  </template>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.5/es6-sham.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="index.js"></script>
</html>

HTMLタグの記述がありますね。

このファイルにはHTMLタグ以外にもCSS、JavaScriptのファイルが読み込まれています。

一つずつ見てみましょう。

CSSの読み込み

headタグの中に、CSSのファイルが読み込まれています。

CSSはlinkタグで記述し、href属性に読み込みたいファイルを指定します。

<head>
  <linkrel="stylesheet"href="http://fonts.googleapis.com/icon?family=Material+Icons">
  <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <linkrel="stylesheet"href="style.css">
</head>

属性	指定	読み込みたいCSSファイル
href	=	http://fonts.googleapis.com/icon?family=Material+Icons
href	=	https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
href	=	style.css

外部リンク

http で始まるファイルは外部のリンクからファイルを読み込んでいます。

CSSやJavaScriptは自分で作るファイル以外に、予め用意されている(実装されている)ファイルを読むときがあります。

これは既存のデザインや動きを自分のウェブサイトに取り込みたい時に使います。

本章では、マテリアルデザインというデザインのCSSを読み込んでいます。

これを読み込むことによって、自分でCSSをゼロから書かなくても既存のデザインを使うことができます。

例えば、次のようなHTMLを書くとボタンを表示することができます。

<a class="waves-effect waves-light btn">button</a>

JavaScriptの読み込み

次は、JavaScriptファイルの読み込みを見てみましょう。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.5/es6-sham.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="index.js"></script>

CSSと同じように、外部リンクのファイルが読まれています。

一番下には、本章で使うファイルを読み込んでいます。

<script src="index.js"></script>

これは、「スタート」フォルダの「index.js」です。

JavsScriptのコードはこのファイルに書いていきます。

タスクデータを作ろう

それでは、ToDoリストのタスクを表示させてみましょう。

タスクデータは配列のデータを使います。

サンプルコードの「スタート」の「index.js」を見てみましょう。

「タスクデータを作ろう」と記述がされています。

その真下に、次のように書いてください。

// タスクデータを作ろう
const tasks = [
  { id: 1, name: "部屋の後片付け" },
  { id: 2, name: "お買い物" },
]

配列の中に2つのオブジェクトがあります。

オブジェクトには、次のペアのデータが格納されています。

キー	値
id	一意の識別子
name	タスク名

「id」は、一意の識別子として使います。

「name」は、タスクの名前として使います。

タスクデータを表示させてみよう

それでは、作成した配列をタスクのリストとして表示させてみましょう。

ウェブページに新しい要素を追加するには、DOMを新しく作ってappendChildで追加しましたね。

【JavaScript入門】JavaScriptでDOMを操作してみよう – DOMの構造 –

しかし今回は、新しく template要素 というものを使ってみましょう。

template要素ってなに

template要素とは、HTMLをテンプレートとして保持できる仕組み です。

テンプレートとして使うことができるので、繰り返し同じHTMLを表示するときに有効です。

template要素の定義方法

template要素の定義方法は、<template>タグの中にテンプレートとして使いたいHTMLを記述します。

<template id="template">
  テンプレートで使い方HTMLを記述
</template>

次の例では、pタグをテンプレートとして定義しています。

<template id="template">
  <p>テンプレートです！</p>
</template>

template要素の使い方

template要素の使い方は、次のようなステップです。

template要素をコピーする
HTMLを取得する
DOMに追加する

一つずつ見てみましょう。

template要素を取得する

まずは、template要素を取得しましょう。

id属性から検索して取得します。

// template要素を取得する
const template = document.getElementById('template');

template要素をコピーする

次に、取得したtemplate要素をコピーしましょう。

DOMをコピーするには、cloneNode を使います。

// template要素を取得する
const template = document.getElementById('template');

// template要素をコピーする
const clone = template.content.cloneNode(true)

HTMLを取得する

次に、template要素の中にあるHTMLを取得します。

ここでは、pタグを取得します。

// template要素を取得する
const template = document.getElementById('template');

// template要素をコピーする
const clone = template.content.cloneNode(true)

// pタグを取得する
const p = clone.querySelector("p")

取得したpタグのテキストを変えてみましょう。

// pタグを取得する
const p = clone.querySelector("p")

p.textContent = "こんにちは！"

DOMに追加する

最後に、pタグをDOMに追加します。

// template要素を取得する
const template = document.getElementById('template');

// template要素の中身をコピーする
const clone = template.content.cloneNode(true)

// pタグを取得する
const p = clone.querySelector("p")
p.textContent = "こんにちは！"

// pタグをDOMに追加する
document.body.appendChild(p)

template要素の中身をDOMに追加することができました。

このように、template要素を使うことで任意のHTMLをテンプレートとして保持できます。

この機能を使って、ToDoリストのタスクをリストとして表示させてみましょう。

タスクデータをDOMに追加する

では、ToDoリストのタスクをリストとして表示させてみましょう。

まずは、template要素の中身を見てみましょう。

template要素を見てみよう

サンプルコードの「スタート」の「index.html」を見てみましょう。

「template要素を見てみよう」と記述がされています。

<!-- template要素を見てみよう -->
<template id="taskTemplate">
  <tr>
    <tdclass="left-align"style="width: 50px;">
      <labelstyle="padding-top: 10px;">
      <inputtype="checkbox"/>
      <spanclass="checkbox-span"></span>
      </label>
    </td>

    <tdclass="">
      <pclass="name"></p>
    </td>

    <tdclass="right-align">
      <aclass="btn-floating btn-small waves-effect waves-light delete">
      <iclass="material-icons">delete</i>
      </a>
    </td>
  </tr>
</template>

trタグというテーブルの行を表示させるためのHTMLを記述しています。

このtr要素をテンプレートとして複製し、リストを表示します。

タスクデータをDOMに追加しよう

サンプルコードの「スタート」の「index.js」を見てみましょう。

「タスクデータを作ろう」と記述がされています。

その真下に、次のように書いてください。

// タスクデータをDOMに追加しよう

// template要素を取得する
const template = document.getElementById('taskTemplate')

// DOMを追加するための要素を取得する
const tbody = document.getElementById("tasks")

// タスクデータを一つずつループさせる
tasks.forEach((t) => {
  // template要素をコピーする
  constclone = template.content.cloneNode(true)

  // HTMLを取得する
  consttr = clone.querySelector("tr")
  constname = clone.querySelector(".name")

  // trタグにid属性を追加する
  tr.setAttribute("id", t.id)

  // タスク名を変更する
  name.textContent = t.name

  // DOMに追加する
  tbody.appendChild(clone)
})

一つずつ見てみましょう。

ここでは、template要素を取得しています。

// template要素を取得する
const template = document.getElementById('taskTemplate')

次に、DOMの追加先としての要素を取得しています。

ここにタスクデータを追加します。

// DOMを追加するための要素を取得する
const tbody = document.getElementById("tasks")

次に、先ほど作成したタスクデータの配列をforEachでループさせています。

ループ内では、template要素をコピーしてテンプレートの中身を変えています。

そして、最終的にDOMに追加しています。

// タスクデータを一つずつループさせる
tasks.forEach((t) => {
  // template要素をコピーする
  constclone = template.content.cloneNode(true)

  // HTMLを取得する
  consttr = clone.querySelector("tr")
  constname = clone.querySelector(".name")

  // trタグにid属性を追加する
  tr.setAttribute("id", t.id)

  // タスク名を変更する
  name.textContent = t.name

  // DOMに追加する
  tbody.appendChild(clone)
})