Vue 公式チュートリアル 〜 データの一覧を表示する

• ホーム
• ブログ
• Firebase情報

Vue 公式チュートリアル　

〜　データの一覧を表示する

2022年2月24日

Vue 公式チュートリアル　〜　データの一覧を表示する

Vue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。

前回までのポイントは？

前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。

今回学ぶのは？

今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列（array）の中に入っているデータをまとめて表示するやり方です。

例題では、「todo（やる事）」の一覧を表示するという内容になっています。

<script>
// give each todo a unique id
let id = 0;

export default {
  data() {
    return {
      newTodo: "",
      todos: [
        { id: id++, text: "Learn HTML" },
        { id: id++, text: "Learn JavaScript" },
        { id: id++, text: "Learn Vue" },
      ],
    };
  },
  methods: {
    addTodo() {
      // ...
      this.newTodo = "";
    },
    removeTodo(todo) {
      // ...
    },
  },
};
</script>

<template>
  <input v-model="newTodo" @keyup.enter="addTodo" />
  <button @click="addTodo">Add Todo</button>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

変更前のコードで「やる事」の一覧を表示する部分は既に書かれています。

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
    <button @click="removeTodo(todo)">X</button>
  </li>
</ul>

の部分がその部分です。

その前に、「やる事」がどのようにプログラムの中でデータとして作られているかから解説します。

Javascript のプログラムのデータなので、「script」のタグの「data()」の中に書かれています。

data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
},

ここでは、二つの変数「newTodo」と「todos」の二つの変数が作られています。 この段階では、「newTodo」の方はまだ使っていないので、まずは「todos」の方から解説します。

やることのデータは、JSON (JavaScript Object Notation) の形になっています。 これは、複数のデータを「ひとまとめ」にする仕組みです。

{
    id: id,   // やることの🆔を入れます。（number: 数字のデータ）
    text: "", // やる事の中身を入れます。（string: 文字列のデータ）
}

これが、一つのやる事の基本です。Javascript では JSON のデータを表す場合は「{}」(中括弧)で囲みます。 その中で、それぞれのデータに「ラベル」をつけて、「:」の後に、その値（中身）を書きます。そのあとを「,」で区切ってデータを並べるという書き方になります。

この同じデータの塊をまとめてグループにしているのが配列（array）です。 配列（array）のデータは「[]」（大括弧）で囲みます。

[
  { id: id++, text: "Learn HTML" },
  { id: id++, text: "Learn JavaScript" },
  { id: id++, text: "Learn Vue" },
];

のようになります。「todos」の最初のデータは、この三つのデータになります。

「id」は、「export default {}」の外側で作られていて、最初の値は「0」になっています。 上の記述で、「id++」と書かれていますが、これは、「id」の今の値を使った後に、「1 を足す」という処理をする書き方です。

• 最初のデータの「id」の値は「0」です。その後で、変数「id」の値は１を加えて「1」になります
• 二番目のデータの「id」の値は「1」です。その後で、変数「id」の値は１を加えて「2」になります
• 三番目のデータの「id」の値は「2」です。その後で、変数「id」の値は１を加えて「3」になります

少し分かりにくい書き方ですが、このような書き方をすることで、「やる事」一つ一つに「他のやる事」と違う 🆔 を設定できるようになります。

また、「export default {}」の外側で作っている変数の値は、HTML からはアクセスする事はできません。Javascript のプログラムの中でだけ使える変数になります。

HTML の部分では、表示は

• 新しいやることを入力する入力フィールド
• 新しいやることを追加するためのボタン
• やる事の一覧の表示

この三つの表示を行うように書かれています。 入力フィールドとボタンは、これまで学習した事なので、わからない場合は前のステップをもう一度見てみてください。

今回の学習内容の配列（array）の一覧表示には「v-for」という書き方を使います。

• HTML: 「ul」のタグは箇条書きの部分を示すタグです
• HTML: 「li」箇条書きの各項目を書くのに使うタグです
• HTML: 「v-for="todo in todos" :key="todo.id"が繰り返して表示をする場合の書き方です

「todos」の配列のデータを「一つづつ」取り出して「todo」に入れるというような事をやっています。 その取り出した「todo」のデータを「{{todo.text}}」というやる事と、「やる事を削除するためのボタン"X"」を箇条書きの行に表示するようにしています。

「:key」は、やる事を区別するために「書かなければいけないデータ」なので、「id」のタグのデータを使っています。 これをデータがなくなるまで繰り返すのが「v-for」がやっていることです。

プログラミング言語では「for ループ」という繰り返しの書き方がありますが、それと似た書き方を Vue の HTML では書けるようにしています。

このステップの課題では、一覧の表示は既にできていますので、課題は：

• 新しいやる事を追加する処理
• 「X」ボタンが押された場合、その「やる事」を「todos」から削除する

この二つの処理を作って完成させるのが課題です。

変更後のコードは？

変更後のコードです。

<script>
// give each todo a unique id
let id = 0;

export default {
  data() {
    return {
      newTodo: "",
      todos: [
        { id: id++, text: "Learn HTML" },
        { id: id++, text: "Learn JavaScript" },
        { id: id++, text: "Learn Vue" },
      ],
    };
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo });
      this.newTodo = "";
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo);
    },
  },
};
</script>

<template>
  <input v-model="newTodo" @keyup.enter="addTodo" />
  <button @click="addTodo">Add Todo</button>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

やっている事は

• addTodo()
• removeTodo(todo)

の中身の実装です。処理を呼び出す部分は、既に「Add Todo」ボタンと、「X」ボタンに「@click」で書かれています。 また、新しいやる事の入力内容は、「newTodo」に入るように、「v-model」で記述されています。さらに、リターンキーが押された場合にも、新しい「やる事」を追加する処理が呼び出されるように、「@keyup.enter="addTodo"」が書かれています。

ここで新しいのは、

• 「@keyup.enter="addTodo"」
• 「@click="removeTodo(todo)」

です、「@keyup.enter」は既に説明していますが、「removeTod(todo)」は処理を呼び出す際に、「todo」をメソッド（関数）に渡しているのが新しい点です。

「addTodo()」では、入力フィールドに入力された「新しいやる事」である、「newTodo」を使って、新しいやる事の JSON を作って、配列（array）「todos」に追加しています。この書き方が

this.todos.push({ id: id++, text: this.newTodo });

です。追加したあとは、「newTodo」を空（「''」）にしています。データを入れたあとはこのデータは必要ないので、予期しない動作を防ぐ意味で、空にした方が「安全」なのでこのように書きます。

「removeTodo(todo)」は、少しかわった方法で「やる事」を削除しています。 要は、処理に渡された「todo」と同じものを削除しています。 このやり方はいろいろありますが、ここでの方法は、「渡された todo 以外のやる事」を別の配列（array）にして、それを新しい「todos」として使うという方法で、「削除」の機能を実現しています。 直接、削除するやり方もありますが、ここでは、Javascript に標準で用意されている処理「filter」を使ってやる方法を覚えてください。

this.todos.filter((t) => {
  return t !== todo;
});

です、これが「t !== todo」（t と todo）が同じでないものを抜き出すという処理です。「filter」の処理では、指定した配列（array）のデータを順番にみて、条件に合うデータを抜き出します。ここでは、まずこの書き方を覚えてください。 何回か使っているうちに基本的な使い方がわかると思います。

今回の応用は？

今回は、少し新しいことがたくさん出てきているので、応用編はお休みにします。 もう一度、今回のコードのおさらいをしてみてください。

• @click の書き方
• @keyup.enter の書き方
• v-model の使い方
• v-for の使い方
• メソッド（関数）にデータを渡すやり方
• filter の使い方
• 変数の使い方（export default {}の内側と外側で作る変数の違い）
• 「++」の演算子の使い方と動作の理解
• 箇条書きに使う HTML のタグの使い方（ul/li のタグ）

など、意外に盛りだくさんでした。

プログラミングらしくなってきましたが、学習する事も増えてきました。 ゆっくり時間をかけてこのステップを何回かやってみてください。

どの部分やよくわからないかを、何度も繰り返しながら「わからない部分をハッキリさせる」のが課題です。

まとめ

ステップ７では、やる事自体はシンプルで、コード上の課題は簡単ですが、何をどうやっているかを見ると新しいことが沢山出てきています。フロントエンドのフレームワークを通して Web 開発を学習するのは、効率の良いやり方ですが、HTML や Javascript の基本を学習していない場合には、新しい項目が沢山出てくる場合があります。

その場合は、先に進むことよりは、そのステップでやっている事をきちんと時間をかけて調べならが理解するのが大切です。 この連載では新しい部分を抜き出しているので必要に応じて調べてみてください。

次回は来週の月曜日（2022 年 2 月 28 日）にお届けします。

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.