diff --git a/team_product/src/public/app.js b/team_product/src/public/app.js
index 91e0dfb..528c567 100644
--- a/team_product/src/public/app.js
+++ b/team_product/src/public/app.js
@@ -4,7 +4,7 @@
* このコードはブラウザ上で動作します。
* ログはブラウザのF12（開発者ツール）に表示されます。
*
- * 現在の機能: Create（追加）、Read（一覧表示）
+ * 現在の機能: Create（追加）、Read（一覧表示）、Update（編集）
*/
// =====================================================
@@ -52,27 +52,27 @@ async function loadItems() {
* アイテムを追加
*
* IPO:
- * - Input: テキストボックスのタイトル
+ * - Input: テキストボックスのname
* - Process: サーバーにPOSTリクエスト → DB保存
* - Output: 一覧を再読み込み
*/
async function addItem() {
- const title = titleInput.value.trim()
+ const name = titleInput.value.trim()
// 入力チェック（Client側のバリデーション）
- if (!title) {
- alert('タイトルを入力してください')
+ if (!name) {
+ alert('nameを入力してください')
return
}
- console.log('[CLIENT] アイテムを追加:', title)
+ console.log('[CLIENT] アイテムを追加:', name)
try {
// サーバーにPOSTリクエスト
const response = await fetch('/api/items', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ title })
+ body: JSON.stringify({ title: name })
})
if (!response.ok) {
@@ -94,9 +94,47 @@ async function addItem() {
}
// =====================================================
-// ここに新しい機能（Delete, Updateなど）を追加していこう！
+// Update機能
// =====================================================
+/**
+ * アイテム名（name）を更新
+ *
+ * IPO:
+ * - Input: 編集ボタン押下後に入力されたname
+ * - Process: PUTリクエストでServerへ編集要求 → DB更新
+ * - Output: 更新後一覧を再描画
+ */
+async function updateItem(id, nameInput) {
+ const name = nameInput.value.trim()
+
+ if (!name) {
+ alert('nameを入力してください')
+ return
+ }
+
+ console.log('[CLIENT] アイテムを更新:', id, name)
+
+ try {
+ const response = await fetch(`/api/items/${id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ name })
+ })
+
+ if (!response.ok) {
+ const error = await response.json()
+ throw new Error(error.error)
+ }
+
+ await loadItems()
+ console.log('[CLIENT] 更新完了')
+ } catch (error) {
+ console.error('[CLIENT] エラー:', error)
+ alert('更新に失敗しました: ' + error.message)
+ }
+}
+
// =====================================================
// 画面描画関数
// =====================================================
@@ -115,22 +153,43 @@ function renderItems(items) {
items.forEach(item => {
const li = document.createElement('li')
li.className = 'item'
- li.innerHTML = `
- ${escapeHtml(item.title)}
- `
+
+ const nameText = document.createElement('span')
+ nameText.className = 'item-title'
+ nameText.textContent = item.title
+
+ const actions = document.createElement('div')
+ actions.className = 'item-actions'
+
+ const editButton = document.createElement('button')
+ editButton.className = 'item-button edit-button'
+ editButton.textContent = '編集'
+ editButton.addEventListener('click', () => {
+ const nameInput = document.createElement('input')
+ nameInput.type = 'text'
+ nameInput.className = 'edit-input'
+ nameInput.value = item.title
+
+ const doneButton = document.createElement('button')
+ doneButton.className = 'item-button done-button'
+ doneButton.textContent = '完了'
+ doneButton.addEventListener('click', () => {
+ updateItem(item.id, nameInput)
+ })
+
+ actions.innerHTML = ''
+ li.replaceChild(nameInput, nameText)
+ actions.appendChild(doneButton)
+ nameInput.focus()
+ })
+
+ actions.appendChild(editButton)
+ li.appendChild(nameText)
+ li.appendChild(actions)
itemList.appendChild(li)
})
}
-/**
- * HTMLエスケープ（XSS対策）
- */
-function escapeHtml(text) {
- const div = document.createElement('div')
- div.textContent = text
- return div.innerHTML
-}
-
// =====================================================
// イベントリスナー
// =====================================================
diff --git a/team_product/src/public/index.html b/team_product/src/public/index.html
index 5b52dc6..358c487 100644
--- a/team_product/src/public/index.html
+++ b/team_product/src/public/index.html
@@ -19,7 +19,7 @@ Base App
@@ -32,7 +32,7 @@ アイテム一覧
- アイテムがありません。上のフォームから追加してください。
+ データがありません。上のフォームから追加してください。
diff --git a/team_product/src/public/style.css b/team_product/src/public/style.css
index 203a4e8..a6bab48 100644
--- a/team_product/src/public/style.css
+++ b/team_product/src/public/style.css
@@ -110,6 +110,50 @@ header .subtitle {
.item-title {
font-size: 1rem;
color: #2c3e50;
+ flex: 1;
+}
+
+.item-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.item-button {
+ padding: 8px 12px;
+ border: none;
+ border-radius: 6px;
+ color: white;
+ cursor: pointer;
+ font-size: 0.85rem;
+}
+
+.edit-button {
+ background-color: #7f8c8d;
+}
+
+.edit-button:hover {
+ background-color: #6c7a7d;
+}
+
+.done-button {
+ background-color: #27ae60;
+}
+
+.done-button:hover {
+ background-color: #219150;
+}
+
+.edit-input {
+ flex: 1;
+ padding: 8px 10px;
+ border: 2px solid #ddd;
+ border-radius: 6px;
+ font-size: 1rem;
+}
+
+.edit-input:focus {
+ outline: none;
+ border-color: #3498db;
}
/* 空メッセージ */
diff --git a/team_product/src/server.js b/team_product/src/server.js
index f9d2a84..e4b4222 100644
--- a/team_product/src/server.js
+++ b/team_product/src/server.js
@@ -4,7 +4,7 @@
* このファイルはサーバー側の処理を担当します。
* ログはVSCodeのターミナルに表示されます。
*
- * 現在の機能: Create（追加）、Read（一覧表示）
+ * 現在の機能: Create（追加）、Read（一覧表示）、Update（編集）
*/
const express = require('express')
@@ -78,9 +78,40 @@ app.post('/api/items', async (req, res) => {
}
})
-// =====================================================
-// ここに新しいAPI（Delete, Updateなど）を追加していこう！
-// =====================================================
+/**
+ * PUT /api/items/:id - アイテム編集
+ *
+ * IPO:
+ * - Input: クライアントからidとnameを受け取る
+ * - Process: 対象idのtitleをDB上で更新
+ * - Output: 更新したアイテムをJSONで返す
+ */
+app.put('/api/items/:id', async (req, res) => {
+ try {
+ const id = Number(req.params.id)
+ const { name, title } = req.body
+ const nextName = (name ?? title ?? '').trim()
+
+ if (!Number.isInteger(id) || id <= 0) {
+ return res.status(400).json({ error: '不正なidです' })
+ }
+
+ if (!nextName) {
+ return res.status(400).json({ error: 'nameを入力してください' })
+ }
+
+ const item = await prisma.item.update({
+ where: { id },
+ data: { title: nextName }
+ })
+
+ console.log('[SERVER] アイテムを更新:', item)
+ res.json(item)
+ } catch (error) {
+ console.error('[SERVER] エラー:', error)
+ res.status(500).json({ error: 'アイテム更新に失敗しました' })
+ }
+})
// =====================================================
// サーバー起動