【TypeScript × Nuxt.js】練習がてら超簡易ToDoアプリ作りました【入門】

TypeScirptの基本構文を一通り学習したのでNuxt.jsと組み合わせて超簡易ToDoアプリを作りました。

また今回Composition-APIにも挑戦しました。

開発環境

• macOS Catalina 10.15.7
• @nuxt/cli v2.14.7
• npm 6.9.0
• node v10.16.0
• TypeScript 4.1.3
• @nuxtjs/composition-api 0.20.2

完成物

index.vue

<template>
  <div class="container">
    <h1>Nuxt-ToDo-App</h1>
    <br />
    <h3>
      <form @submit.prevent="addTask()">
        Add Task : <input v-model="task" type="text" />
      </form>
      <br /><br />
      <table>
        <tbody>
          <tr v-for="(task, index) in tasks" :key="task.id">
            <td :class="{ done: task.isDone }">{{ task.name }}</td>
            <td
              v-if="task.isDone"
              class="pointer"
              @click="task.isDone = !task.isDone"
            >
              [済]
            </td>
            <td v-else class="pointer" @click="task.isDone = !task.isDone">
              [未]
            </td>
            <td class="pointer" @click="removeTask(index)">[x]</td>
            <br />
            <br />
          </tr>
        </tbody>
      </table>
    </h3>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from '@nuxtjs/composition-api'

interface Task {
  name: string
  isDone: boolean
}

export default defineComponent({
  setup() {
    const state = reactive({
      task: '',
      tasks: [] as Task[],
    })

    const addTask = () => {
      const taskObj: Task = { name: state.task, isDone: false }
      state.tasks.push(taskObj)
      state.task = ''
    }

    const removeTask = (index: number) => {
      state.tasks.splice(index, 1)
    }

    return {
      ...toRefs(state),
      addTask,
      removeTask,
    }
  },
})
</script>

<style>
.container {
  text-align: center;
}

table {
  margin: 0 auto;
}

.done {
  text-decoration: line-through 3px;
}

.pointer {
  cursor: pointer;
}
</style>

---

TypeScript × Nuxt.js × compositon-API の記事は今はまだ少なめですよね

何か良い教材があれば良いのですが・・・