init

src/App.vue

@@ -1,47 +1,10 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
   <main>
-    <TheWelcome />
+    <HelloWorld msg="TO DO LIST" />
   </main>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

src/components/ClickCounter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const count = ref<number>(0)
+const countMessage = computed( () => '回数: ' + count.value )
+</script>
+
+<template>
+    <div>
+        <div>{{ countMessage }}</div>
+        <button @click="count++">クリック</button>
+        <button @click="count = 0">リセット</button>
+    </div>
+</template>
+
+<style></style>

src/components/HelloWorld.vue

@@ -1,40 +1,18 @@
 <script setup lang="ts">
+import ItemList from './ItemList.vue'
+
 defineProps<{
   msg: string
 }>()
 </script>
 
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
+  <div>
+    <h1>{{ msg }}</h1>
+    <ItemList />
   </div>
 </template>
 
 <style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
 </style>

src/components/ItemList.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface TaskItem {
+    name: string
+    isCompleted: boolean
+}
+
+const taskItems = ref<TaskItem[]>([
+    { name: '化学実験', isCompleted: false }, 
+    { name: '物理学演習', isCompleted: true }
+])
+const newTaskItemName = ref('')
+
+const addTaskItem = () => {
+    if(newTaskItemName.value === '') {
+        return
+    }
+    taskItems.value.push({ name: newTaskItemName.value, isCompleted: true })
+    newTaskItemName.value = ''
+}
+</script>
+
+<template>
+    <div>Task List</div>
+    <div>
+        <h4>NOT YET</h4>
+        <ul>
+            <template v-for="(taskItem, index) in taskItems" :key="taskItem.name">
+                <li v-if="!taskItem.isCompleted">
+                    <div>タスク: {{ taskItem.name }}</div>
+                    <div>ステータス: {{ taskItem.isCompleted }}</div>
+                    <label>
+                        完了したか？
+                        <input v-model="taskItems[index].isCompleted" type="checkbox" />
+                    </label>
+                </li>
+            </template>
+        </ul>
+    </div>
+    <div>
+        <h4>COMPLETED</h4>
+        <ul>
+            <template v-for="(taskItem, index) in taskItems" :key="taskItem.name">
+                <li v-if="taskItem.isCompleted">
+                    <div>タスク: {{ taskItem.name }}</div>
+                    <div>ステータス: {{ taskItem.isCompleted }}</div>
+                    <label>
+                        完了したか？
+                        <input v-model="taskItems[index].isCompleted" type="checkbox" />
+                    </label>
+                </li>
+            </template>
+        </ul>
+    </div>
+
+    <div>
+        <label>
+            新規タスク
+            <input v-model="newTaskItemName" type="text" />
+        </label>
+        <button @click="addTaskItem">追加</button>
+    </div>
+
+</template>
+
+<style></style>