teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Todoリスト タスクを削除した後のID番号が連番になるようにしたい。

編集履歴

質問編集履歴

3

実現したい機能について、読む人が理解できるように書き直しました。

2020/07/06 16:08

投稿

gorinesia
gorinesia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  Todoリストを作成しています。
6
6
 
7
- IDについてお伺いしたいです
7
+ IDについてお伺いしたいです。
8
8
 
9
9
  タスクを削除した後のID番号が連番になるようにしたいです。
10
10
 

2

実現したい機能について、読む人が理解できるように書き直しました。

2020/07/06 16:08

投稿

gorinesia
gorinesia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,14 @@
12
12
 
13
13
 
14
14
 
15
+ まず、何行かタスクを追加します。
16
+
17
+ ID:0,1,2,3となっています。
18
+
19
+ ID:1のタスクを削除した場合、ID:0,2,3となります。
20
+
21
+ これはIDが振り直されていない状態です。
22
+
15
23
 
16
24
 
17
25
  **現状**
@@ -30,9 +38,9 @@
30
38
 
31
39
  0 aaaaaa
32
40
 
33
- 1 bbbbbb
34
-
35
- 2 cccccc　←この行のタスクを消した場合
41
+ 1 bbbbbb ←ID:1の行のタスクを消した場合
42
+
43
+ 2 cccccc　
36
44
 
37
45
  3 dddddd　
38
46
 
@@ -44,9 +52,9 @@
44
52
 
45
53
  0 aaaaaa
46
54
 
47
- 1 cccccc　
55
+ 2 cccccc　
48
-
56
+
49
- 3 dddddd　←IDは振り直されない
57
+ 3 dddddd　←IDは振り直されない,　そのまま ID: 0,2,3 となる
50
58
 
51
59
 
52
60
 
@@ -54,6 +62,14 @@
54
62
 
55
63
 
56
64
 
65
+ 次に、実現したい挙動です。
66
+
67
+ ID:0,1,2,3となっています。
68
+
69
+ ID:1のタスクを削除した場合、ID:0, 2, 3ではなく、ID:0,1,2となり、IDが新しく振り直されています。
70
+
71
+ この挙動を実現したいです。
72
+
57
73
 
58
74
 
59
75
  **実現したい挙動**
@@ -74,7 +90,7 @@
74
90
 
75
91
  0 aaaaaa
76
92
 
77
- 1 bbbbbb ←この行のタスクを消した場合
93
+ 1 bbbbbb ←ID:1の行のタスクを消した場合
78
94
 
79
95
  2 cccccc
80
96
 
@@ -88,7 +104,7 @@
88
104
 
89
105
  0 aaaaaa
90
106
 
91
- 1 cccccc　←新しいIDが振り直されている
107
+ 1 cccccc　←改めてIDが振り直され、ID: 0,2,3 ではなく、 ID: 0,1,2 となる
92
108
 
93
109
  2 dddddd
94
110
 
@@ -100,8 +116,6 @@
100
116
 
101
117
 
102
118
 
103
- となるように、タスク削除後にもう一度IDが振り直される状態を目指しています。
104
-
105
119
 
106
120
 
107
121
 

1

実現したい機能について、読む人が理解できるように書き直しました。

2020/07/06 16:07

投稿

gorinesia
gorinesia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -4,12 +4,16 @@
4
4
 
5
5
  Todoリストを作成しています。
6
6
 
7
+ IDについてお伺いしたいです
8
+
7
9
  タスクを削除した後のID番号が連番になるようにしたいです。
8
10
 
9
11
  (フィルタリングしても、idは元々のidが割り振られているままの状態が前提です。)
10
12
 
11
13
 
12
14
 
15
+
16
+
13
17
  **現状**
14
18
 
15
19
 
@@ -46,73 +50,387 @@
46
50
 
47
51
 
48
52
 
53
+ ```
54
+
55
+
56
+
57
+
58
+
49
- タスク追加後
59
+ **実現したい挙動**
60
+
61
+
62
+
63
+ ```
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+ 削除前
50
72
 
51
73
  ID コメント 状態
52
74
 
75
+ 0 aaaaaa
76
+
77
+ 1 bbbbbb ←この行のタスクを消した場合
78
+
79
+ 2 cccccc
80
+
81
+ 3 dddddd
82
+
83
+
84
+
85
+ 削除後
86
+
87
+ ID コメント 状態
88
+
53
89
  0 aaaaaa
54
90
 
91
+ 1 cccccc　←新しいIDが振り直されている
92
+
55
- 1 bbbbbb
93
+ 2 dddddd
56
-
57
- 3 cccccc
94
+
58
-
59
- 4 eeeeee　←IDはどんどん増えていく
95
+
96
+
97
+
60
98
 
61
99
  ```
62
100
 
63
101
 
64
102
 
65
-
103
+ となるように、タスク削除後にもう一度IDが振り直される状態を目指しています。
104
+
105
+
106
+
107
+
108
+
66
-
109
+ ### 該当のソースコード
110
+
111
+
112
+
113
+ ```HTML
114
+
115
+
116
+
117
+ <!DOCTYPE html>
118
+
119
+ <html lang="ja">
120
+
121
+
122
+
67
- **実現したい挙動**
123
+ <head>
124
+
68
-
125
+ <meta charset="UTF-8">
126
+
69
-
127
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
128
+
129
+ <title>ToDoリスト</title>
130
+
131
+ </head>
132
+
133
+
134
+
135
+ <body>
136
+
137
+ <h1>ToDoリスト</h1>
138
+
139
+
140
+
141
+ <form name="radioform">
142
+
143
+ <label for="radio-all-select"><input type="radio" name="radio1" value="all" id="radio-all-select" checked>すべて</label>
144
+
145
+ <label for="radio-woking-select"><input type="radio" name="radio1" value="working" id="radio-woking-select">作業中</label>
146
+
147
+ <label for="radio-done-select"><input type="radio" name="radio1" value="done" id="radio-done-select">完了</label>
148
+
149
+ </form>
150
+
151
+
152
+
153
+ <table>
154
+
155
+ <thead>
156
+
157
+ <tr>
158
+
159
+ <th>ID</th>
160
+
161
+ <th>コメント</th>
162
+
163
+ <th>状態</th>
164
+
165
+ </tr>
166
+
167
+ </thead>
168
+
169
+ <tbody id="todo-body"></tbody>
170
+
171
+ </table>
172
+
173
+
174
+
175
+ <h2>新規タスクの追加</h2>
176
+
177
+ <label for="input-todo-box">ToDoリスト</label>
178
+
179
+ <input id="input-todo-box" type="text">
180
+
181
+ <button id="add-button">追加</button>
182
+
183
+
184
+
185
+ <script src='main.js'></script>
186
+
187
+ </body>
188
+
189
+
190
+
191
+ </html>
70
192
 
71
193
  ```
72
194
 
73
195
 
74
196
 
75
-
76
-
77
-
78
-
79
- 削除前
80
-
81
- ID コメント 状態
82
-
83
- 0 aaaaaa
84
-
85
- 1 bbbbbb ←この行のタスクを消した場合
86
-
87
- 2 cccccc
88
-
89
- 3 dddddd
90
-
91
-
92
-
93
- 削除後
94
-
95
- ID コメント 状態
96
-
97
- 0 aaaaaa
98
-
99
- 1 cccccc　←新しいIDが振り直されている
100
-
101
- 2 dddddd
102
-
103
-
104
-
105
- タスク追加後
106
-
107
- ID コメント 状態
108
-
109
- 0 aaaaaa
110
-
111
- 1 cccccc
112
-
113
- 2 dddddd
114
-
115
- 3 eeeeee　←新たに追加したタスクには連番でIDが振られている
197
+ ```JavaScript
198
+
199
+
200
+
201
+ // 入力したTodoタスクの一覧を保持する配列を定義する
202
+
203
+ // IDのための変数を用意する
204
+
205
+ const todos = [];
206
+
207
+ let nextId = 0;
208
+
209
+
210
+
211
+ // HTMLのID値を使って以下のDOM要素を取得する
212
+
213
+ // 入力ボックス
214
+
215
+ // 追加ボタン
216
+
217
+ // Todoリストを一覧表示するためのtbody
218
+
219
+ // ラジオボタン
220
+
221
+ const inputBox = document.getElementById('input-todo-box');
222
+
223
+ const addButton = document.getElementById('add-button');
224
+
225
+ const tableBody = document.getElementById('todo-body');
226
+
227
+ const radioButton = document.getElementsByName('radio1');
228
+
229
+
230
+
231
+ // 「追加」ボタンがクリックされたときの処理を実装する //
232
+
233
+ addButton.addEventListener('click', () => {
234
+
235
+ const todo = {id: nextId++, comment: inputBox.value, status: '作業中' }
236
+
237
+ inputBox.focus();
238
+
239
+
240
+
241
+
242
+
243
+ // 空文字が入力されたときの処理
244
+
245
+ if (inputBox.value === '') {
246
+
247
+ alert('タスクを入力してください！');
248
+
249
+ return;
250
+
251
+ }
252
+
253
+ //todoがtrueの場合の処理
254
+
255
+ if (todo) {
256
+
257
+ todos.push(todo);
258
+
259
+ inputBox.value = '';
260
+
261
+ showTodos(todos);
262
+
263
+ filterTodos();
264
+
265
+ }
266
+
267
+ });
268
+
269
+
270
+
271
+
272
+
273
+ // 「todos」の中身を一覧表示するための関数を用意する //
274
+
275
+ const showTodos = (todos) => {
276
+
277
+ tableBody.textContent = '';
278
+
279
+
280
+
281
+ // 値を１つずつ取り出し、繰り返し処理を実行
282
+
283
+ todos.forEach((todo) => {
284
+
285
+
286
+
287
+ // tbody要素に追加するためのtr要素を作成し、子要素としてtrを追加 //
288
+
289
+ const tableRecord = document.createElement('tr');
290
+
291
+ tableBody.appendChild(tableRecord);
292
+
293
+
294
+
295
+ // tr要素に追加するためのtd要素をそれぞれ作成する //
296
+
297
+ const tableId = document.createElement('th');
298
+
299
+ const tableComment = document.createElement('td');
300
+
301
+ const tableStatus = document.createElement('td');
302
+
303
+ const tableAction = document.createElement('td');
304
+
305
+
306
+
307
+ // 要素の中身のテキストを表示するため、オブジェクトの要素から取得する //
308
+
309
+ tableId.textContent = todo.id;
310
+
311
+ tableComment.textContent = todo.comment;
312
+
313
+
314
+
315
+ // td要素をtr要素の子要素として追加する //
316
+
317
+ tableRecord.appendChild(tableId);
318
+
319
+ tableRecord.appendChild(tableComment);
320
+
321
+ tableRecord.appendChild(tableStatus);
322
+
323
+ tableRecord.appendChild(tableAction);
324
+
325
+
326
+
327
+ tableStatus.appendChild(createStatusButton(todo));
328
+
329
+ tableAction.appendChild(createDeleteButton(tableRecord, todo.id));
330
+
331
+ });
332
+
333
+ };
334
+
335
+
336
+
337
+ //「状態機能」を管理するボタンを生成する関数
338
+
339
+ const createStatusButton = (todo) => {
340
+
341
+ const statusButton = document.createElement('button');
342
+
343
+ statusButton.textContent = todo.status;
344
+
345
+ statusButton.addEventListener('click', () => {
346
+
347
+ if (todo.status === '作業中') {
348
+
349
+ todo.status = '完了';
350
+
351
+ filterTodos()
352
+
353
+ } else {
354
+
355
+ todo.status = '作業中';
356
+
357
+ filterTodos();
358
+
359
+ }
360
+
361
+ });
362
+
363
+ return statusButton;
364
+
365
+ };
366
+
367
+
368
+
369
+ //「削除機能」を管理するボタンを生成する関数
370
+
371
+ const createDeleteButton = (tableRecord, id) => {
372
+
373
+ let index = tableRecord.rowIndex - 1;
374
+
375
+ const deleteButton = document.createElement('button');
376
+
377
+ deleteButton.textContent = '削除';
378
+
379
+ deleteButton.addEventListener('click', () => {
380
+
381
+ const targetIndex = todos.findIndex(todo => {
382
+
383
+ return todo.id === id;
384
+
385
+ });
386
+
387
+ todos.splice(targetIndex, 1);
388
+
389
+ filterTodos();
390
+
391
+ });
392
+
393
+ return deleteButton;
394
+
395
+ };
396
+
397
+
398
+
399
+ // 表示・非表示の機能を管理する関数
400
+
401
+ const filterTodos = () => {
402
+
403
+ if (radioButtonAll.checked) {
404
+
405
+ return showTodos(todos);
406
+
407
+ } else if (radioButtonWorking.checked) {
408
+
409
+ const doingTodos = todos.filter(todo => {return todo.status === '作業中'});
410
+
411
+ return showTodos(doingTodos);
412
+
413
+ } else if (radioButtonDone.checked) {
414
+
415
+ const doneTodos = todos.filter(todo => {return todo.status === '完了'});
416
+
417
+ return showTodos(doneTodos);
418
+
419
+ }
420
+
421
+ };
422
+
423
+
424
+
425
+ radioButton.forEach((e, number) => {
426
+
427
+ radioButton[number].addEventListener('click', () => {
428
+
429
+ filterTodos();
430
+
431
+ });
432
+
433
+ });
116
434
 
117
435
 
118
436
 
@@ -120,344 +438,6 @@
120
438
 
121
439
 
122
440
 
123
- となるように、タスク削除後にもう一度IDが振り直される状態を目指しています。
124
-
125
-
126
-
127
-
128
-
129
- ### 該当のソースコード
130
-
131
-
132
-
133
- ```HTML
134
-
135
-
136
-
137
- <!DOCTYPE html>
138
-
139
- <html lang="ja">
140
-
141
-
142
-
143
- <head>
144
-
145
- <meta charset="UTF-8">
146
-
147
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
148
-
149
- <title>ToDoリスト</title>
150
-
151
- </head>
152
-
153
-
154
-
155
- <body>
156
-
157
- <h1>ToDoリスト</h1>
158
-
159
-
160
-
161
- <form name="radioform">
162
-
163
- <label for="radio-all-select"><input type="radio" name="radio1" value="all" id="radio-all-select" checked>すべて</label>
164
-
165
- <label for="radio-woking-select"><input type="radio" name="radio1" value="working" id="radio-woking-select">作業中</label>
166
-
167
- <label for="radio-done-select"><input type="radio" name="radio1" value="done" id="radio-done-select">完了</label>
168
-
169
- </form>
170
-
171
-
172
-
173
- <table>
174
-
175
- <thead>
176
-
177
- <tr>
178
-
179
- <th>ID</th>
180
-
181
- <th>コメント</th>
182
-
183
- <th>状態</th>
184
-
185
- </tr>
186
-
187
- </thead>
188
-
189
- <tbody id="todo-body"></tbody>
190
-
191
- </table>
192
-
193
-
194
-
195
- <h2>新規タスクの追加</h2>
196
-
197
- <label for="input-todo-box">ToDoリスト</label>
198
-
199
- <input id="input-todo-box" type="text">
200
-
201
- <button id="add-button">追加</button>
202
-
203
-
204
-
205
- <script src='main.js'></script>
206
-
207
- </body>
208
-
209
-
210
-
211
- </html>
212
-
213
- ```
214
-
215
-
216
-
217
- ```JavaScript
218
-
219
-
220
-
221
- // 入力したTodoタスクの一覧を保持する配列を定義する
222
-
223
- // IDのための変数を用意する
224
-
225
- const todos = [];
226
-
227
- let nextId = 0;
228
-
229
-
230
-
231
- // HTMLのID値を使って以下のDOM要素を取得する
232
-
233
- // 入力ボックス
234
-
235
- // 追加ボタン
236
-
237
- // Todoリストを一覧表示するためのtbody
238
-
239
- // ラジオボタン
240
-
241
- const inputBox = document.getElementById('input-todo-box');
242
-
243
- const addButton = document.getElementById('add-button');
244
-
245
- const tableBody = document.getElementById('todo-body');
246
-
247
- const radioButton = document.getElementsByName('radio1');
248
-
249
-
250
-
251
- // 「追加」ボタンがクリックされたときの処理を実装する //
252
-
253
- addButton.addEventListener('click', () => {
254
-
255
- const todo = {id: nextId++, comment: inputBox.value, status: '作業中' }
256
-
257
- inputBox.focus();
258
-
259
-
260
-
261
-
262
-
263
- // 空文字が入力されたときの処理
264
-
265
- if (inputBox.value === '') {
266
-
267
- alert('タスクを入力してください！');
268
-
269
- return;
270
-
271
- }
272
-
273
- //todoがtrueの場合の処理
274
-
275
- if (todo) {
276
-
277
- todos.push(todo);
278
-
279
- inputBox.value = '';
280
-
281
- showTodos(todos);
282
-
283
- filterTodos();
284
-
285
- }
286
-
287
- });
288
-
289
-
290
-
291
-
292
-
293
- // 「todos」の中身を一覧表示するための関数を用意する //
294
-
295
- const showTodos = (todos) => {
296
-
297
- tableBody.textContent = '';
298
-
299
-
300
-
301
- // 値を１つずつ取り出し、繰り返し処理を実行
302
-
303
- todos.forEach((todo) => {
304
-
305
-
306
-
307
- // tbody要素に追加するためのtr要素を作成し、子要素としてtrを追加 //
308
-
309
- const tableRecord = document.createElement('tr');
310
-
311
- tableBody.appendChild(tableRecord);
312
-
313
-
314
-
315
- // tr要素に追加するためのtd要素をそれぞれ作成する //
316
-
317
- const tableId = document.createElement('th');
318
-
319
- const tableComment = document.createElement('td');
320
-
321
- const tableStatus = document.createElement('td');
322
-
323
- const tableAction = document.createElement('td');
324
-
325
-
326
-
327
- // 要素の中身のテキストを表示するため、オブジェクトの要素から取得する //
328
-
329
- tableId.textContent = todo.id;
330
-
331
- tableComment.textContent = todo.comment;
332
-
333
-
334
-
335
- // td要素をtr要素の子要素として追加する //
336
-
337
- tableRecord.appendChild(tableId);
338
-
339
- tableRecord.appendChild(tableComment);
340
-
341
- tableRecord.appendChild(tableStatus);
342
-
343
- tableRecord.appendChild(tableAction);
344
-
345
-
346
-
347
- tableStatus.appendChild(createStatusButton(todo));
348
-
349
- tableAction.appendChild(createDeleteButton(tableRecord, todo.id));
350
-
351
- });
352
-
353
- };
354
-
355
-
356
-
357
- //「状態機能」を管理するボタンを生成する関数
358
-
359
- const createStatusButton = (todo) => {
360
-
361
- const statusButton = document.createElement('button');
362
-
363
- statusButton.textContent = todo.status;
364
-
365
- statusButton.addEventListener('click', () => {
366
-
367
- if (todo.status === '作業中') {
368
-
369
- todo.status = '完了';
370
-
371
- filterTodos()
372
-
373
- } else {
374
-
375
- todo.status = '作業中';
376
-
377
- filterTodos();
378
-
379
- }
380
-
381
- });
382
-
383
- return statusButton;
384
-
385
- };
386
-
387
-
388
-
389
- //「削除機能」を管理するボタンを生成する関数
390
-
391
- const createDeleteButton = (tableRecord, id) => {
392
-
393
- let index = tableRecord.rowIndex - 1;
394
-
395
- const deleteButton = document.createElement('button');
396
-
397
- deleteButton.textContent = '削除';
398
-
399
- deleteButton.addEventListener('click', () => {
400
-
401
- const targetIndex = todos.findIndex(todo => {
402
-
403
- return todo.id === id;
404
-
405
- });
406
-
407
- todos.splice(targetIndex, 1);
408
-
409
- filterTodos();
410
-
411
- });
412
-
413
- return deleteButton;
414
-
415
- };
416
-
417
-
418
-
419
- // 表示・非表示の機能を管理する関数
420
-
421
- const filterTodos = () => {
422
-
423
- if (radioButtonAll.checked) {
424
-
425
- return showTodos(todos);
426
-
427
- } else if (radioButtonWorking.checked) {
428
-
429
- const doingTodos = todos.filter(todo => {return todo.status === '作業中'});
430
-
431
- return showTodos(doingTodos);
432
-
433
- } else if (radioButtonDone.checked) {
434
-
435
- const doneTodos = todos.filter(todo => {return todo.status === '完了'});
436
-
437
- return showTodos(doneTodos);
438
-
439
- }
440
-
441
- };
442
-
443
-
444
-
445
- radioButton.forEach((e, number) => {
446
-
447
- radioButton[number].addEventListener('click', () => {
448
-
449
- filterTodos();
450
-
451
- });
452
-
453
- });
454
-
455
-
456
-
457
- ```
458
-
459
-
460
-
461
441
  ### 発生している問題
462
442
 
463
443