Vue.jsを再入門する 2

前回記事

luca3104.hatenablog.com

設計

どんなアプリにするか簡易的な設計書を書きます。

前回定めた機能を満たすように作ります。

レスポンシブ対応がしやすいようにこのような形にしました。

機能一覧

追加

追加機能はアプリケーション上段で行います。
入力し、＋ボタン押下で追加します。

完了

完了機能はタスクセルの左側にある○を押下することで実現します。
今回完了を取り消す行為は仕様の範囲外としますが、気が向いたら実装します。

編集・削除

編集・削除機能はタスクセルの右側にあるペンを押下することで実現します。
ダイアログが発生し、テキストの編集ができます。
削除する場合は左下のボタン、完了する場合は編集後に右側のボタンを押下します。
テキストを全部削除した状態で完了を押した場合は削除します。

開発開始

今回、CSSフレームワークはBuefyを使ってみたいと思います。

github.com

過去にbootstrap-vueを使用していましたが、今回はお試しということで。

npm install buefy を実行し、完了後 src/main.js に以下を追記します。

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'

Vue.use(Buefy)

ベースを作る

アプリケーションのベースとなる部分を作ります。
components ディレクトリ以下に ToDo.vue というファイルを作成します。
中身は以下のようにします。

<template>
  <div class="todo">
  </div>
</template>

<script>
export default {
  name: 'ToDo'
}
</script>

<style scoped>

</style>

<div class="todo"></div> 内にHTMLを書いていきます。

入出力パーツを設置する

タスクを入力するパーツ、出力するパーツ(+チェックボックス)をコンポーネント内に設置します。
Buefyのドキュメントを読みながら実際に使うパーツを選定します。
入力はb-input、出力はb-checkboxをv-forでタスク分出力します。
コードは以下の通りです。

          <b-input
                minlength="1"
                maxlength="30"
                placeholder="タスクを入力してください"></b-input>
          <p class="control">
            <button
                class="button is-primary"
                v-on:click="addTodo()">＋</button>
          </p>
        </b-field>


        <section>
          <div
              class="field"
              v-for="task in tasks"
              v-bind:data="task"
              v-bind:key="task.text">
            <b-checkbox>
              {{ task.message }}
            </b-checkbox>
          </div>
        </section>

data内にtasksを定義し、出力確認用に二個くらい入れておきます。

export default {
  name: 'ToDo',
  data() {
    return {
      tasks: [
        { message: 'タスク１' },
        { message: 'タスク２' }
      ]
    }
  }
}

この状態でhttp://localhost:8080にアクセスし、以下のように表示されたらOKです。 　　

タスク追加機能

タスクを追加する機能を実装します。
イメージとしては

1. バインディングするmodelを作る
2. inputタグにv-modelを設定
3. addTaskメソッドを実装する
4. buttonタグにv-on:click="addTask()"でメソッドを呼び出す

です。　

まずはバインディングするmodelをdata内に定義します。
変数名はtaskTextとします。

  data() {
    return {
      taskText: '',
      tasks: [
        { message: 'タスク１' },
        { message: 'タスク２' }
      ]
    }
  }

次にinputタグにv-modelを設定します。
v-modelはバインディングのために使用します。
こうすることでinputタグ内で入力された値がリアルタイムでtaskText内に代入されます。
inputタグの部分は以下のようになります

          <b-input
                v-model="taskText"
                minlength="1"
                maxlength="30"
                placeholder="タスクを入力してください"></b-input>

次にタスクを追加するメソッドを実装します。
json文字列を定義し、tasksに追加します。
最後にtaskTextを空文字にするとinputタグ内の入力文字も消えます。 実装は以下のようになります。

  methods: {
    addTask() {
      var addData = { message : this.taskText }
      this.tasks.push(addData)
      this.taskText = ''
    }
  }

最後にbuttonタグにv-on:clickを設定し、押下時にaddTaskが呼び出されるようにします。

            <button
                class="button is-primary"
                v-on:click="addTask()">＋</button>

これでタスクの追加機能の実装は一旦終わりです。
実際に動かしてみると以下のようになります

これで入出力のパーツの設置が終了しました。

タスクを完了にする。

次にタスクを完了する処理を実装していきます。
以下のような構想で作ります

1. tasksのデータモデルにdoneを追加し、それぞれのタスクを判断できるようにする
2. b-checkboxにv-modelを設定し、task.doneがtrue<->falseで書き換わるようにする
3. doneになったときのcssを書く
4. doneになったときに、テキストにclass=doneをv-bindで設定する

まず、tasksのデータモデルにdoneを追加します。
addTaskを以下のように修正します。

    addTask() {
      var addData = { message : this.taskText, done: false }
      this.tasks.push(addData)
      this.taskText = ''
    }

次にb-checkbocxにv-model を設定します。

            <b-checkbox v-model="task.done">

これでtask.doneが動的に変更されます。

次にdoneになったときのcssを書きましょう。 styleタグ内に以下のcssを書きます。

  .done {
    text-decoration: line-through;
    color: grey;
  }

これでdoneになったときに打ち消し線がつき、テキストの色が灰色になるようになりました。

最後にタスクのテキストにv-bindするようにします。 現在のままだとテキストがタグで囲まれていないのでspanタグをつけ、そこにv-bindします。

              <span v-bind:class="{'done': task.done}">
                {{ task.message }}
              </span>

これでチェックボックスが操作されたときにタスクの完了/未完了が変更されるようになりました。

実際に動作確認してみましょう。

以上でタスクを完了する実装の終了です。

次回

次回はタスク一覧をlocal storageに保存するようにします。
時間があったら番外編でcssをいじっていこうと思います。

余談

iPadでメモを取るときにこのアプリを使用しています。
ノートがこれ一冊で完結できて、手書きの温もりの残るのでとてもおすすめです！

GoodNotes 4

• Time Base Technology Limited
• 仕事効率化
• ¥960
• 

(なぜかiPadから画像書き出ししても白紙なのでスクショで書き出してます…)