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

2018.09.28

WEB

システム開発

今回は、JavaScriptフレームワークの「Vue.js」を用いて、簡単なToDoリストを2回に分けて実装していきます。
HTMLファイルにVue.jsを読み込ませるだけで導入が可能ですので、実際にコードを書いてみて感覚をつかんでいただけたらと思います。

前編では導入方法からリストの作成、追加までを解説していきます。

INDEX

Vue.jsとは？
【1】Vue.jsを導入する
【2】データを表示してみる
【3】入力内容を表示してみる
【4】配列をループで表示してみる
【5】配列にデータを追加してみる
さいごに

Vue.jsとは？

Vue.jsとは、簡単かつ感覚的に実装可能なJavascriptフレームワークのひとつです。

Vueはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。 Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。はじめに―Vue.js

Vue.jsのメリット

双方向データバインディングに重点を置いているため、シンプルでわかりやすい
学習コストが低い
他のフレームワークと組み合わせて使いやすい

他のフレームワークとの比較

他の有名なJavascriptフレームワークとの比較について公式ドキュメントにて紹介されています。

では、基本構造から、実際にVue.jsを使ってみます。

【1】Vue.jsを導入する

index.htmlに以下のコードを記述することで導入完了です。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

【2】データを表示してみる

index.htmlに{{ データの名前 }}と記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ToDo List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>

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

contents.jsにVueのインスタンスを作成します。

var app = new Vue({
    el: '#app',
    data: {
        message: 'vue.jsでtodoリストを実装してみよう',
    },
});

以上でindex.htmlにアクセスすれば「vue.jsでtodoリストを実装してみよう」と表示されます。

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

http://jsfiddle.net/g5oxa381/2/

【3】入力内容を表示してみる

Vue.jsのフォーム入力バインディングを用いて、入力内容を表示してみます。

<div id="app">
    <input type="text" v-model="message"><br>
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: '',
    },
});

以上でフォームに入力された文字が表示されます。

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

http://jsfiddle.net/phL7wam2/1/

【4】配列をループで表示してみる

ulタグにv-forディレクティブを用いてlist配列の内容を表示してみます。

<div id="app">
    <ul v-for="(todo,index) in list">
        <li>{{ index + 1 }}:{{ todo.text }}</li>
    </ul>
</div>

var app = new Vue({
    el: '#app',
    data: {
        list:[
            {text: 'Vue.jsを導入する'},
            {text: 'データを表示してみる'},
            {text: '入力内容を表示してみる'},
            {text: '配列を表示してみる'},
            {text: '配列にデータを追加する'},
        ],
    },
});

以上でlist配列のtextがすべて表示されます。

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

http://jsfiddle.net/1cuL5qjo/

【5】配列にデータを追加してみる

buttonにv-onディレクティブを用いてaddToDoメソッドを実行します。

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

    <ul v-for="(todo,index) in list">
        <li>{{ index + 1 }}:{{ todo.text }}</li>
    </ul>
</div>

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

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

http://jsfiddle.net/654dhsz0/

さらに、addTextが空欄の場合、追加を実行しないようにしたいと思います。

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

以上でフォームに入力した値が、ボタン押下でリストに追加されるようになりました。

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

http://jsfiddle.net/9L58k0xq/

さいごに

いかがでしたでしょうか。
次回はタスクの更新削除やタスクの完了機能を追加し、ToDoリストをより便利にしていきたいと思います。

Vue.jsの詳しい使い方は、公式ドキュメントにて解説されています。

この記事を書いた人

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