diff --git a/components/History.vue b/components/History.vue
index 1ad3acc..8636e1a 100644
--- a/components/History.vue
+++ b/components/History.vue
@@ -22,6 +22,25 @@ if (data != undefined) { // 取得済の場合のみ
 
 recordList.value = data
 
+async function showDeleteDialog(id: number): Promise<void> {
+  const userResponse: boolean = confirm("このデータを削除しますか");
+  if (userResponse == true) {
+    console.log('delete: id=' + id);
+    const asyncDataBtn = await useAsyncData(
+      `record`,
+      (): Promise<any> => {
+        const param = { 'id': id };
+        const paramStr = "?id=" + param['id'];
+        const localurl = "/api/deleteRecord" + paramStr
+        const response = $fetch(localurl);
+        return response;
+      }
+    );
+    location.reload()
+  }
+
+};
+
 </script>
 
 <template>
@@ -34,6 +53,7 @@ recordList.value = data
           <th>金額</th>
           <th>日付</th>
           <th>メモ</th>
+          <th>削除</th>
         </tr>
       </thead>
       <tbody>
@@ -43,6 +63,7 @@ recordList.value = data
           <td>{{ record.price }}</td>
           <td>{{ record.datetime }}</td>
           <td>{{ record.memo }}</td>
+          <td><button class="btn btn-secondary" @click="showDeleteDialog(record.id)">削除</button></td>
         </tr>
       </tbody>
     </table>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 40aad7b..e1ea45d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,7 @@ export default defineNuxtConfig({
   css: ["bootstrap/dist/css/bootstrap.min.css"],
   devtools: { enabled: true },
   routeRules: {
-    "/": { ssr: false },
+    "/": { ssr: true },
   },
   runtimeConfig: {
     public: { // 外部から取得するにはpublic が必要
diff --git a/server/api/deleteRecord.ts b/server/api/deleteRecord.ts
new file mode 100644
index 0000000..c35249a
--- /dev/null
+++ b/server/api/deleteRecord.ts
@@ -0,0 +1,11 @@
+export default defineEventHandler ( async (event) => {
+  const config = useRuntimeConfig()
+  const query = getQuery(event)
+  const url = config.public.mawinterApi + "/v2/record/" + query.id
+  const result = await $fetch(url,
+    {
+        method: "DELETE",
+    }
+  )
+  return result
+})
diff --git a/test/mock_server.py b/test/mock_server.py
index 360e1aa..fde037f 100644
--- a/test/mock_server.py
+++ b/test/mock_server.py
@@ -72,6 +72,11 @@ def do_POST(self):
         self.send_header('Content-type', 'application/json')
         self.end_headers()
 
+    def do_DELETE(self):
+        self.send_response(204)
+        self.send_header('Content-type', 'text/plain')
+        self.end_headers()
+
 def import_args():
     parser = argparse.ArgumentParser("mock server start")