diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 5bccca9..9b1765e 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -38,7 +38,7 @@ const StockPage: React.FC = () => {
     }, []);
 
     /**
-     * APIからタスク一覧を取得する関数
+     * APIから在庫一覧を取得する関数
      * 取得したタスクをstate(tasks)に設定
      */
     const fetchStocks = async () => {
@@ -51,6 +51,19 @@ const StockPage: React.FC = () => {
         }
     };
 
+    /**
+       * 在庫を削除するハンドラー
+       * 指定されたIDのタスクをAPIを通じて削除
+       */
+    const handleDeleteStock = async (stockId: number) => {
+        try {
+            await stockApi.deleteStock(stockId);
+            fetchStocks(); // 削除後の買うもの一覧を再取得
+        } catch (error) {
+            console.error(`${STOCK_ERRORS.DELETE_FAILED}:`, error);
+        }
+    };
+
     /**
      * 文字列(ISO 8601形式)をyyyy/MM/ddに変換する関数
      */
@@ -160,6 +173,32 @@ const StockPage: React.FC = () => {
                         )}
                     </DialogContent>
                 </Dialog>
+
+                {/* タスク削除ダイアログ */}
+                <Dialog open={isDeleteOpen}
+                    onClose={handleCloseDelete}
+                    fullWidth
+                    maxWidth="sm"
+                    sx={{ overflow: "hidden" }}
+                >
+                    <DialogTitle>食材の削除</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
+                                <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                                <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                                {/* <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button> */}
+                                <Button variant="contained" color="error" onClick={() => {
+                                    handleDeleteStock(selectedRow.stockId);
+                                }}
+                                    style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+
+
             </>
         );
     };
@@ -178,20 +217,7 @@ const StockPage: React.FC = () => {
 
             {/* タスク削除ボタン */}
             <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
-            <Dialog open={isDeleteOpen}
-                onClose={handleCloseDelete}
-                fullWidth
-                maxWidth="sm"
-                sx={{ overflow: "hidden" }}
-            >
-                <DialogTitle>食材の削除</DialogTitle>
-                <DialogContent>
-                    <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
-                    <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                    <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                    <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
-                </DialogContent>
-            </Dialog>
+
 
             {/* 在庫一覧リスト */}
             {/* 乳製品 */}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 1477b83..a2a6967 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -140,7 +140,7 @@ export const toBuyApi = {
     const response = await fetch(`${API_BASE_URL}/api/tobuy/delete`, {
       method: 'DELETE',
       headers: getHeaders(),
-      body: JSON.stringify({tobuyId}),
+      body: JSON.stringify({ tobuyId }),
     });
 
     if (!response.ok) {
@@ -157,13 +157,13 @@ export const toBuyApi = {
   /**
    * 買うものリストの在庫登録（購入処理）
    */
-  buy: async (req: {tobuyId: number, price: number, expDate: string, buyDate: string, lastUpdate: string}): Promise<{ result: boolean }> => {
-    
+  buy: async (req: { tobuyId: number, price: number, expDate: string, buyDate: string, lastUpdate: string }): Promise<{ result: boolean }> => {
+
     console.log('req: ', req)
 
     req.buyDate = makeDateObject(req.buyDate)?.toISOString()?.substring(0, 10) || ''
     req.expDate = makeDateObject(req.expDate)?.toISOString()?.substring(0, 10) || ''
-    
+
     const response = await fetch(`${API_BASE_URL}/api/tobuy/buy`, {
       method: 'POST',
       headers: getHeaders(),
@@ -245,16 +245,87 @@ export const stockApi = {
     return response.json();
 
   },
+
+  /** 
+   * 在庫リストの編集 
+   */
+  updateStock: async (req: {stockId: number, amount: number, price: number, lastUpdate: string, buyDate: string, expDate: string}): Promise<{ result: boolean; message: string }> => {
+
+    
+
+    const response = await fetch(`${API_BASE_URL}/api/stocks/update`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(req),
+    });
+
+    if (!response.ok) {
+      throw new Error(STOCK_ERRORS.UPDATE_FAILED);
+    }
+
+    return response.json()
+
+    // return {
+    //   "result": true
+    // }
+  },
+
+  /**
+   * 在庫リストの削除
+   * @param id 削除対象の食材のID
+   */
+  deleteStock: async (stockId: number): Promise<{ result: boolean; message: string }> => {
+    const response = await fetch(`${API_BASE_URL}/api/stocks/delete`, {
+      method: 'DELETE',
+      headers: getHeaders(),
+      body: JSON.stringify({ stockId }),
+    });
+
+    console.log("API レスポンスステータス:", response.status);
+    console.log("API レスポンス本文:", await response.text());
+
+    if (!response.ok) {
+      throw new Error(STOCK_ERRORS.DELETE_FAILED);
+    }
+
+    return response.json()
+
+    // return {
+    //   "result": true
+    // }
+  },
+
 }
 
+const deleteStock = async (stockId: number): Promise<{ result: boolean; message: string }> => {
+  console.log("API の deleteStock メソッドが呼ばれました。stockId:", stockId);
+
+  const response = await fetch(`${API_BASE_URL}/api/stocks/delete`, {
+    method: "DELETE",
+    headers: getHeaders(),
+    body: JSON.stringify({ stockId }),
+  });
+
+  console.log("API レスポンスステータス:", response.status);
+  console.log("API レスポンス本文:", await response.text());
+
+  if (!response.ok) {
+    return { result: false, message: "削除に失敗しました。" };
+  }
+
+  // API のレスポンスから result と message を取得
+  const data = await response.json();
+  return { result: data.result, message: data.message };
+};
+
 
 function makeDateObject(dateStr: String) {
-    // 例: '2025/06/15' または '2025-06-15' を '2025-06-15' に変換
-    const parts = dateStr.split(/[-\/]/); // ハイフンかスラッシュで分割
-    if (parts.length === 3) {
-        return new Date(parts[0] + '-' + parts[1] + '-' + parts[2]);
-    }
-    return null; // 無効な日付の場合
+  // 例: '2025/06/15' または '2025-06-15' を '2025-06-15' に変換
+  const parts = dateStr.split(/[-\/]/); // ハイフンかスラッシュで分割
+  if (parts.length === 3) {
+    return new Date(parts[0] + '-' + parts[1] + '-' + parts[2]);
+  }
+  return null; // 無効な日付の場合
 }