【TODOリスト 第2回】画面を作る

前回より、TODOリストを作っています。

yushi-dev.hatenablog.com

今回は、簡単な画面と、作成・完了の最低限の機能を作ります。

完成品はこちら。

簡単なリスト表示と追加機能

https://github.com/nek0meshi/todo-list/pull/2

  一番下の行のテキストフィールドにタイトルを入力し、「タスクを追加する」のボタンをクリックすると、行が作成されます。

リストの初期値としてダミーデータを用意しています。

const DUMMY_LIST = [
  {
    id: 1,
    name: 'タスク1',
    status: 0, // 0: 未完了, 1: 完了
  },
  {
    id: 2,
    name: 'タスク2',
    status: 0, // 0: 未完了, 1: 完了
  },
  {
    id: 3,
    name: 'タスク3',
    status: 0, // 0: 未完了, 1: 完了
  },
];

...
  data () {
    return {
      list: DUMMY_LIST,
      ...
    }
  },

IDを振りますが、とりあえずリストのIDの最大値 + 1としています。
最終的には、バックエンドで振ります。
（ロジックがおかしかったので、下記は別のPRで修正済みのもの）

  computed: {
    nextId () {
      return Math.max(...this.list.map(l => l.id)) + 1
    },
  },

画面配置は、flexboxを使っています。

.list {
  display: flex;
  flex-direction: column;
  ...
}

完了ボタンの追加

https://github.com/nek0meshi/todo-list/pull/3

完了ボタンが動くようにしました。

完了ロジックとしては、リストの項目のstatusを完了(STATUS_DONE)に変更するだけです。

Vue2では、objectのpropertyを直接更新してもリアクティブに評価されなかったと思うのですが、Vue3では動くようになったようです...？

要確認。

    complete(id) {
      this.list.find(l => l.id === id).status = STATUS_DONE;
    }

ステータスが未完了のものだけ表示するようにします。

    listToShow () {
      return this.list.filter(l => l.status === STATUS_TODO);
    }

まとめ

普段あまりCSSを書かないので、簡単なものながらとても楽しく。

今回で、作成〜完了という画面の最低限の機能を作りました。

次回以降は、バックエンド〜繋ぎこみ〜機能追加と進んでいく予定です。

次回はバックエンド（Golang）に手を付ける予定です。