【Nuxt3】ちょっとしたタスク管理アプリを作ってみる(削除編)

# サンプルイメージ

<b>前回記事↓</b>につづいて、今回は<b>Delete(削除)</b>の機能を作ってみたいと思います。

https://qiita.com/SKY-HaYaTo/items/3132c19fcfe677ef8903

<b>サンプルファイルはこちら↓</b>

https://github.com/SKY-HaYaTo/nuxt-crud-sample.git

## 【画面の操作手順】
<b>①一覧画面の削除対象<font color="red">(赤枠の箇所)</font>の右端にある<font color="red">削除ボタン</font>をクリックします</b>
![vue8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/33ee51f8-b412-13b0-9e81-e3fb4855988a.png)

<b>②削除画面で内容を確認したら、<font color="red">削除するボタン</font>をクリックします。</b>
![vue9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/008da86c-c5cb-a8df-d835-69306ef5577c.png)

※<font color="red">**削除ボタン**</font>を押下する前のデータベースの中身です。
![pg1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/f0d732f2-f236-67b1-0df8-47f41c86d964.png)

<b>削除して一覧画面に戻ると対象のデータが削除されます。</b>
![vue10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/f926a149-165a-d4e1-c53f-045bdab2d9b9.png)

※データベースも対象のデータが削除されていることがわかります。
![pg2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/38e18de5-c933-6729-55b5-df339d6c8731.png)

# 画面側(delete.vue)のコード

### ①ちょっとした工夫ポイント`$roter.push`
削除画面から一覧画面に遷移できるように<b>一覧に戻るボタン</b>を設置し。
`$router`オブジェクトで戻り先のURLを指定しています。

```delete.vue
<button type="button" @click="$router.push('/')" class="bg-green-500 text-white font-bold rounded-lg px-4 py-4 mt-4">一覧に戻る</button>
```

### ②ちょっとした工夫ポイント`Tailwind CSS`
<b>ボタン感の間隔をちょっとだけスペースを空ける</b>ために`mt`プロパティを付与しています。

::: note info
`mt`プロパティとは？
オブジェクトの外側の余白のことを指します。
```
mt-(size) ←← margin-topのこと
mr-(size) ←← margin-rightのこと
```
```
(実際の書き方の例)
mt-4 ←← 上部の余白を空ける
mr-4 ←← 右側の余白を空ける
```

:::

全体のコードはこちら↓

```delete.vue
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute();

const taskId = route.query.id as number;
const { data:task,error } = await useAsyncData('taskDelete',()=>$fetch(`/api/selectTargetItem?id=${taskId}`));
console.log("取得した削除対象のデータは、" + task);

const handleDeleteData = async(e:Event)=>{
    await useFetch('/api/delete',{
        method:'POST',
        body:{
            id:taskId,
        }
    })
}

</script>
<template>
    <div>
        <div class="flex items-center justify-center">
            <table class="border border-gray-500">
                <thead>
                    <tr>
                        <th class="border border-gray-500 px-4 py-4">ID</th>
                        <th class="border border-gray-500 px-4 py-4">タスク名</th>
                        <th class="border border-gray-500 px-4 py-4">進捗</th>
                        <th class="border border-gray-500 px-4 py-4">更新日時</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-500 px-4 py-4">{{task.id}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.task}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.completed}}</td>
                        <td class="border border-gray-500 px-4 py-4">{{task.created_at}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <form @submit.prevent="handleDeleteData" class="flex justify-center">
            <input type="hidden" v-model="task.id" id="taskId"/>
            <div>
                <button type="submit" class="bg-red-500 text-white font-bold px-4 py-4 rounded-lg mt-4 mr-4">削除する</button>
                <button type="button" @click="$router.push('/')" class="bg-green-500 text-white font-bold rounded-lg px-4 py-4 mt-4">一覧に戻る</button>
            </div>
        </form>
    </div>
</template>
```


# サーバ側(delete.ts)のコード

ORMマッパー`Prisma`からデータベースアクセスする前に、`task id`を`Number型`に変換しています。

```server/api/delete.ts
        await prisma.task.delete({
            where:{
                id:Number(body["id"]),
            }
        })
```

全体のコードはこちら↓

```server/api/delete.ts
import { PrismaClient } from "@prisma/client";

interface RequestBody{
    id:number
}

export default defineEventHandler(async(event)=>{
    const prisma = new PrismaClient();
    const body:RequestBody = await readBody(event);
    let deleteFlag:boolean = false;
    console.log("削除対象のタスクIDは、" + JSON.stringify(body))
    console.log("削除対象のタスクIDは、" + body["id"])
    
    try{
        await prisma.task.delete({
            where:{
                id:Number(body["id"]),
            }
        })
        console.log("削除完了しました。");
        deleteFlag = true;
        return deleteFlag;
    }catch(error){
        console.log("削除失敗しました。");
        return deleteFlag;
    }
    
})


```

以上です。

# 参考にした記事

https://zenn.dev/code_diver/articles/94f6d7903fc81b

https://zenn.dev/yohei_watanabe/books/c0b573713734b9/viewer/72c4f8