要件定義

投稿内容を作成、削除する
チェックボックスを付ける
作成ボタンを付ける

基本設定

まずは、以下のプログラムをコピペしてHTMLとVueを連携する準備をする。

▼HTMLファイル

<html lang="en">
<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>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="todo-list-sample">

    </div>

    <script src="main.js"></script>
</body>
</html>

▼JavaScriptファイル

const app = Vue.createApp({
    data() {
        return {
        }
    },
    methods: {
        
    },
})

app.mount('#todo-list-sample')

これでHTMLファイルとJavaScriptファイルを連携する準備は整った。

Form作成

次に、HTMLでTodoアプリのタスクを作成するためのタスクを作成するFormを作成する

<div id="todo-list-sample">
    <form>
        <input 
            v-model="newTodoText"
            id="new-todo"
            placeholder="E.g. Feed the cat"
        />
        <button>Add</button>
    </form>
</div>

入力フォームの内容とJavaScriptファイルを連携させるために以下の内容を記述する

const app = Vue.createApp({
    data() {
        return {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes'
                },
                {
                    id: 2,
                    title: 'Take out the trash'
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                },
            ],
        }
    },
    methods: {
        
    },
})

app.mount('#todo-list-sample')

上記のプログラムに記したtodosは投稿した内容を箇条書きにしてHTMLファイルに反映させるためである。

タスク作成の実装

次に、HTMLで作成したFormとJavaScriptを連携させるために、formタグに以下の内容を記述する。

<form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a Todo</label>
    <input 
        v-model="newTodoText"
        id="new-todo"
        placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
</form>

上記のHTMLプログラムのformタグにVuejsのv-onディレクティブを適用させることでブラウザで入力したデータをJavaScriptファイルに反映できる。データを作成するので、v-on属性はsubmit.preventを付ける。

v-on:submit.preventの後ろに=で書かれているaddNewTodoはTodoタスクを新規作成するための関数である。

以下のようにして関数addNewTodoの処理を実装する。

const app = Vue.createApp({
    data() {
        return {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes'
                },
                {
                    id: 2,
                    title: 'Take out the trash'
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                },
            ],
            nextTodoId: 4
        }
    },
    // 追加
    methods: {
        addNewTodo() {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newTodoText
            })
            this.newTodoText = ''
        }  
    },
})

app.mount('#todo-list-sample')

変数todosを見ると、idとtitleという2つの変数がある。新しくタスクを作成するには、タスクの数―idの値を増やしていかなければいけないので、新しくnextTodoIdを用意してtodosにあるタスクの数に1を足した値を代入する。

これでタスクを追加する機能を実装できた。

タスクの一覧を表示する・削除する

次に、JavaScriptファイルに書かれている変数todosのデータを反映させるために以下のプログラムを記述する

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <!---追加->
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>

v-forディレクティブを活用してJavaScripファイルに記されているtodosのデータを一つずつtodoに格納して出力する。

しかし、当然todo-item要素はHTML内にはないので、Vuejsの方で予め定義しておく必要がある

const app = Vue.createApp({
    data() {
        return {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes'
                },
                {
                    id: 2,
                    title: 'Take out the trash'
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                },
            ],
            nextTodoId: 4
        }
    },
    methods: {
        addNewTodo() {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newTodoText
            })
            this.newTodoText = ''
        }  
    },
})

app.component('todo-item', {
    template: `
        <li>
            {{ title }}
            <button @click="$emit('remove')">Remove</button>
        </li>
    `,
    props: ['title'],
    emits: ['remove'],
})

app.mount('#todo-list-sample')

▼追記したプログラム

app.component('todo-item', {
    template: `
        <li>
            {{ title }}
            <button @click="$emit('remove')">Remove</button>
        </li>
    `,
    props: ['title'],
    emits: ['remove'],
})

上記のプログラムで、Vueアプリケーションの定数appのメソッドcomponentで第一引数にtodo-itemを用意し、第二引数に第一引数で用意したtodo-itemのテンプレートを用意する。

このような処理を経て、HTMLにtodo-itemの要素をオリジナルで作成できる。

▼追加したHTMLファイル

<ul>
  <todo-item
    v-for="(todo, index) in todos"
    :key="todo.id"
    :title="todo.title"
    @remove="todos.splice(index, 1)"
  ></todo-item>
</ul>

作成したtodo-item要素に以下の要素を作成する。

v-forディレクティブでtodosからtodoを抽出する。その際に、変数indexでidをきちんと指定
v-bindディレクティブでkey属性でidを指定し、title属性でtitle
v-onディレクティブでリストtodosのメソッドspliceで対象のタスクを削除するボタン

これで非常に簡単なTodoアプリを作成できる。

完成形

▼HTMLファイル

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>

▼JavaScriptファイル

const app = Vue.createApp({
  data() {
    return {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'Take out the trash'
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    }
  },
  methods: {
    addNewTodo() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

app.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">Remove</button>
    </li>
  `,
  props: ['title'],
  emits: ['remove']
})

app.mount('#todo-list-example')