JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう（後編）

2019.01.09

WEB

システム開発

前編（https://www.asobou.co.jp/blog/web/vuejs）では、Vue.jsの導入方法からToDoリストの作成、データの追加機能までを実装しました。
後編では、追加されたデータの削除/更新/完了/復元を実装し、機能を充実させてみたいと思います。

INDEX

データの削除/更新
データの完了/復元
さいごに

データの削除/更新

【１】データ識別のためにIDを追加する

listのIDとテキストを表示してみます。

<div id="app">
    <input type="text" v-model="addText" placeholder="ToDoを入力">
    <button v-on:click="addToDo()">追加</button><hr>

    <ul v-for="todo in list">
        <li>{{ todo.id }}:{{ todo.text }}</li>
    </ul>
</div>

追加するデータにIDを追加します。
IDの重複が起こらないよう、ユニークIDを追加します。

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list: [],
        uniqueKey: 0,
    },
    methods: {
        addToDo() {
            if (this.addText) {
                this.list.unshift({
                    'text': this.addText,
                    'id': ++this.uniqueKey
                });
                this.addText = '';  //入力値初期化
            }
        }
    }
});

実行結果（別サイトが開きます。）

http://jsfiddle.net/7obsce0j/2/

【２】削除メソッドを追加する

表示するリストの中に削除/更新ボタンを追加します。
ここでメソッドに【1】で追加したidを渡してあげます。
※v-onディレクティブは省略して「@」と記述することもできます。

<div id="app">
    <input type="text" v-model="addText" placeholder="ToDoを入力">
    <button v-on:click="addToDo()">追加</button>
    <hr>
    <ul v-for="todo in list">
        <li>{{ todo.id }}:{{ todo.text }}
            <button @click="deleteToDo(todo.id)">削除</button>
            <button @click="editToDo(todo.id)">更新</button>
        </li>
    </ul>
</div>

メソッド側で受け取ったidのデータを削除します。
サンプルでは削除ボタン押下後、最終確認アラートを出すようにしてみました。

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list: [],
        uniqueKey: 0,
    },
    methods: {
        deleteToDo(id) {
            var deleteIndex = '';
            var check = confirm('本当に削除しますか？');
            if (check === true) {    //アラートでOKが押下されたら
                this.list.some(function (value, index) {
                    if (value.id === id) {
                        deleteIndex = index;
                    }
                });
                this.list.splice(deleteIndex, 1);
            }
        },
    }
});

実行結果（別サイトが開きます。）

http://jsfiddle.net/c2h43fnw/

【３】更新メソッドを追加する

メソッド側で受け取ったidのデータを更新します。

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list: [],
        uniqueKey: 0,
    },
    methods: {
        editToDo(id) {
            var newText = window.prompt('以下内容で更新します。');
            if (newText === '') {
                alert('入力欄が空欄です。');
            } else if(newText !== null) {
                this.edit(id, newText);
            }
        },
        edit(id, text) {
            var editIndex = '';
            this.list.some(function (value, index) {
                if (value.id === id) {
                    editIndex = index;
                }
            });
            this.list[editIndex].text = text;
        }
    }
});

実行結果（別サイトが開きます。）

http://jsfiddle.net/k2uLgw40/

データの完了/復元

済、未済識別のために【1】と同様に、listにflagを追加します。
flagの切り替えにより済、未済の切り替えを行います。

【４】ステータス変更メソッドを追加する

削除/更新と同様にidをメソッドに送り、編集します。

<div id="app">
    <input type="text" v-model="addText" placeholder="ToDoを入力">
    <button v-on:click="addToDo()">追加</button>
    <hr>
    <table>
        <thead>
        <tr>
            <td>ID</td>
            <td>ToDo</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="todo in list" v-if="todo.flag === true">
            <td>
                {{ todo.id }}<br>
                <button @click="changeToDo(todo.id)">作業完了</button>
            </td>
            <td class="todo">{{ todo.text }}</td>
            <td>
                <button @click="deleteToDo(todo.id)">削除</button>
                <button @click="editToDo(todo.id)">更新</button>
            </td>
        </tr>
        <tr v-for="todo in list" v-if="todo.flag === false" class="completeTasks">
            <td>
                {{ todo.id }}<br>
                <button @click="changeToDo(todo.id)">戻す</button>
            </td>
            <td class="todo">{{ todo.text }}</td>
            <td>
                <button @click="deleteToDo(todo.id)">削除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

flagの切り替えを行います。

var app = new Vue({
    el: '#app',
    data: {
        addText: '',
        list: [],
        uniqueKey: 0,
    },
    methods: {
        edit(id, text) {
            var editIndex = '';
            this.list.some(function (value, index) {
                if (value.id === id) {
                    editIndex = index;
                }
            });
            this.list[editIndex].text = text;
        },
        changeToDo(id) {
            var changeIndex = '';
            this.list.some(function (value, index) {
                if (value.id === id) {
                    changeIndex = index;
                }
            });
            this.list[changeIndex].flag = this.change(changeIndex);
        },
        change(changeIndex) {
            if (this.list[changeIndex].flag === true) {
                return false;
            } else {
                return true;
            }
        }
    }
});

実行結果（別サイトが開きます。）

http://jsfiddle.net/1onxe8ds/

さいごに

二回に分けてToDoリストの実装をしてきました。
感覚的に実装が可能なため、フロントエンドの開発が初めての方でも、とっつきやすいかと思います。

これからVue.jsで開発してみようと思った方は、ぜひ公式ドキュメントを見ながら挑戦してみてください！

この記事を書いた人

ばねソリューション事業部システムエンジニア: 東京で2年半エンジニアとしての経験を積み、浜松にUターンの後、アーティスへ入社。
ソリューション事業部のWebエンジニアとして、システムの設計・開発・保守・運用からインフラまで幅広く従事している。
フルスタックエンジニア目指して現在も勉強の日々。車が好き。