JavaScriptのフレームワークとして人気のVue.jsですが、JavaScriptの初学者が導入しようと思うとjQueryと比べても少しハードルが高いと感じる人もいるのではないでしょうか。ただ、うまく使うことでちょっとしたアプリケーションも簡単に作成することができるのもVue.jsの魅力です。今回はVue.jsの基本的な部分をToDoリストを作成していく中で学んでみたいと思います。今回は主に2つのキーワードがあります。それは「配列処理」と「v-model」です。どちらもVue.jsを使う上では重要な知識でもあり、実務でも使う場面が多々ありますので、ぜひどちらも覚えておきたいですね。

それでは早速作成してみたいと思います。まずはJavaScriptでVue.jsのコードを書いていきます。今回はVue.jsのライブラリをCDNなどで読み込む形での前提となります。その場合には新たにVueインスタンスを作成し、対象となる要素を指定するところまで進めてみます。

【JavaScript（Vue）】

const vueModel = new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: [],
    isError: false
  },
  methods: {
    addTask() {
      if (this.newTask !== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
        this.isError = false;
      } else {
        this.isError = true;
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
});

続いてdataオプションとmethodsオプションに追記していきます。今回はToDoリストの作成ということでそれぞれ下記のようなイメージをしておくとわかりやすいですね。

dataはVue.jsの中で扱う変数の集合になります。ToDoリストの要件の中で必要となる情報を保持できるようにします。今回の場合にはタスクの情報が扱うデータになります。そしてmethodsはVue.jsの中で実行する処理になりますので、タスクの追加や削除ができるように処理を追加していきます。上記では、追加タスクは1つしかないので文字列で、登録済みタスクは複数存在できるようにするので配列で、エラーの有無は2択しかないのでbooleanの値をデフォルトで設定しておきます。

そしてもう1点重要なものがあります。それは配列操作のメソッドです。今回はタスクの追加と削除を配列操作で行います。具体的にどういった形で処理が必要かを理解した上で、最適なメソッドを選択できるようにしておくことが重要です。今回は下記のような配列メソッドを採用しました。

タスクの追加：配列に値を追加する→Array.push(value);
タスクの削除：配列にある特定の値を削除する→Array.splice(index, count);

配列処理についてはこちらの記事「JavaScriptで配列を扱う時によく使うメソッド＃6【配列の値を追加・削除する】」や「JavaScriptで配列を扱う時によく使うメソッド＃7【配列の値を切り取る・値を差し替える・配列を合体する】」もぜひ参考にしてみてください。

続いてHTMLを見ていきます。今回はPugで記述しているのでわかりにくいかもしれませんが、大きくはタスクの入力と表示という2つのエリアを用意しています。入力エリアにはタスクの名前を登録できるインプット要素を、表示エリアには、タスク名と削除ボタンをループ処理で表示させていきます。

【Pug】※一部抜粋

div#app
  div.input
    input(type="text" placeholder="タスクを入力" v-model="newTask")
    button(@click="addTask()").
      タスクを追加
    span(v-if="isError").error.
      ※タスクが空欄です
div.output
  ul.task-list
    li(v-for="(task, index) in tasks" :key="index" class="task-item")
      button(@click="removeTask(index)").
        完了
      span.
        {{ task }}

jQueryなどではDOMの操作をするためにid属性なんかをたくさん使っていましたが、Vue.jsの場合にはメソッドをテンプレート上に直接指定できるのでDOM を操作することは少なくなります。またここではもう一つ重要な機能である「v-model」を理解しておく必要があります。v-modelはinputなどのフォーム要素の入力した値とdataを紐づける機能で、フォームの値を簡単に変数として扱うことができます。

双方向バインディングと呼ばれる特性で、入力値に変更があればすぐに変数側の値も更新されます。ToDoリストであれば、入力したタスク名がそのまま変数に格納できるので、すぐに一覧表示が可能となっています。もちろん削除するときも変数内の配列の値ごと削除するので、内容に応じたHTMLが展開させることができます。あとはそれぞれmethodsで定義した、タスク追加と削除の処理をHTML上でイベントによって呼び出せるようにしておきます。

最後はCSSです、これに関しては適宜デザインに合わせて調整するようにしましょう。特段変わったことはないかと思います。タスクの削除時にアニメーションを入れるなどしても面白いかもしれませんね。

【Sass（SASS）】※一部抜粋

.input
  display: flex
  align-items: center
  flex-wrap: wrap
  padding: 16px
  input[type="text"]
    padding: 8px
    margin: 0 8px 0 0
    min-width: 160px
  button
    padding: 5px
    margin: 0 8px 0 0
  .error
    font-weight: bold
    color: red
.output
  padding: 0 16px
  li
    padding: 16px 0
    border-top: 1px solid #ddd
    span
      padding: 0 0 0 8px

これでVue.jsを使ったとてもシンプルなToDoリストアプリが出来上がりました。今回作成したサンプルはこちらになります。よければご参考に。

See the Pen
todolist_on_vue by designsupply (@designsupply)
on CodePen.

Vue.jsでは様々な便利機能が用意されていますが、初めて学ぼうとなると少し大変かもしれませんが、今回のようなToDoリストを作成するといったわかりやすいテーマがあれば、理解も早まるのではないでしょうか。まだそんなに勉強したことが無いという方はぜひ今回紹介しているような簡単なアプリケーションを作成してみてもいいかもしれませんね。