2日目のゴールと今日やること
2日目のテーマは
「昨日作ったミニ総合アプリを“オブジェクト管理”と“少し賢い条件分岐”でレベルアップさせる」ことです。
1日目は「文字列の配列」で
入力 → 一覧 → 削除 → 条件分岐（件数ゼロのときのメッセージ）
までをつなげました。
2日目はここに
「ID 付きのオブジェクト管理」と
「特定条件での見た目の変化」
を加えていきます。
配列の中身を「文字列」から「オブジェクト」に変える
なぜオブジェクトにするのか
昨日は配列の中身がただの文字列でした。
const items = ["牛乳を買う", "メールを送る"];
これでも動きますが、
「ID」や「優先度」など、
情報を増やしたくなった瞬間に苦しくなります。
そこで、
一件一件をオブジェクトとして扱います。
const items = [
{ id: 1, text: "牛乳を買う", priority: "高" },
{ id: 2, text: "メールを送る", priority: "低" }
];
こうすると、
「表示は text」「削除は id」「条件分岐は priority」
のように、役割を分けて扱えるようになります。
ID を自動採番して登録する
ID カウンターを用意する
まず、ID を発行するためのカウンターを用意します。
let nextId = 1;
const items = [];
追加時にオブジェクトとして push します。
addButton.addEventListener("click", () => {
const text = input.value.trim();
if (text === "") {
alert("空では追加できません。");
return;
}
const newItem = {
id: nextId,
text: text
};
items.push(newItem);
nextId += 1;
input.value = "";
renderList();
});
ここで重要なのは
「配列の index ではなく、id で管理する」
という発想です。
index は削除するとズレますが、
id は一度決めたら変わりません。
一覧表示を「オブジェクト前提」に書き換える
renderList をオブジェクト対応にする
function renderList() {
listArea.innerHTML = "";
if (items.length === 0) {
message.textContent = "データがありません。";
return;
} else {
message.textContent = "";
}
items.forEach((item) => {
const row = document.createElement("div");
row.textContent = item.text;
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.addEventListener("click", () => {
deleteItem(item.id);
});
row.appendChild(deleteButton);
listArea.appendChild(row);
});
}
ここでのポイントは
「削除ボタンには index ではなく item.id を渡す」
というところです。
削除処理を「id ベース」にする
filter を使って削除する
function deleteItem(id) {
const newItems = items.filter((item) => item.id !== id);
items.length = 0;
newItems.forEach((i) => items.push(i));
renderList();
}
filter は
「条件に合うものだけを残した新しい配列を作る」
メソッドです。
ここでは
「id が一致しないものだけ残す」
つまり「指定した id のものだけ消す」
という使い方をしています。
配列を直接上書きせず、
一度 newItems に作り直してから
元の items を入れ替える形にしているのは、
「参照を保ったまま中身だけ変える」ためです。
条件分岐で「特定の文字を含む行を強調」してみる
例：「重要」という文字が入っていたら強調表示
入力テキストに「重要」という文字が含まれていたら、
その行の背景色を変える、という条件分岐を入れてみます。
items.forEach((item) => {
const row = document.createElement("div");
row.textContent = item.text;
if (item.text.includes("重要")) {
row.style.backgroundColor = "#ffe4e1";
}
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.addEventListener("click", () => {
deleteItem(item.id);
});
row.appendChild(deleteButton);
listArea.appendChild(row);
});
ここで使っているincludes("重要") は
「その文字列に“重要”という文字が含まれているか」
を true / false で返すメソッドです。
この true / false を if 文の条件に使うことで、
「条件に合う行だけ見た目を変える」
という UI が作れます。
条件分岐の考え方を整理する
状態に応じて「どう振る舞うか」を決める
今日出てきた条件分岐は大きく二つです。
一つ目は「件数による分岐」。
if (items.length === 0) {
message.textContent = "データがありません。";
} else {
message.textContent = "";
}
二つ目は「内容による分岐」。
if (item.text.includes("重要")) {
row.style.backgroundColor = "#ffe4e1";
}
どちらもやっていることは同じで、
「状態を見て、UI の振る舞いを変える」
ということです。
if 文は
「アプリの性格を決めるスイッチ」
だと思ってください。
2日目の完成コード（要点をまとめた形）
JavaScript 全体
let nextId = 1;
const items = [];
const input = document.getElementById("itemInput");
const addButton = document.getElementById("addButton");
const listArea = document.getElementById("listArea");
const message = document.getElementById("message");
addButton.addEventListener("click", () => {
const text = input.value.trim();
if (text === "") {
alert("空では追加できません。");
return;
}
const newItem = {
id: nextId,
text: text
};
items.push(newItem);
nextId += 1;
input.value = "";
renderList();
});
function renderList() {
listArea.innerHTML = "";
if (items.length === 0) {
message.textContent = "データがありません。";
return;
} else {
message.textContent = "";
}
items.forEach((item) => {
const row = document.createElement("div");
row.textContent = item.text;
if (item.text.includes("重要")) {
row.style.backgroundColor = "#ffe4e1";
}
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.addEventListener("click", () => {
deleteItem(item.id);
});
row.appendChild(deleteButton);
listArea.appendChild(row);
});
}
function deleteItem(id) {
const newItems = items.filter((item) => item.id !== id);
items.length = 0;
newItems.forEach((i) => items.push(i));
renderList();
}
renderList();
今日いちばん深く理解してほしいこと
オブジェクト配列にすることで、
「一件一件に意味のある情報を持たせられる」
ようになりました。
ID で削除し、
text で表示し、
条件分岐で見た目を変える。
この三つがつながると、
アプリは一気に「自分で設計している感覚」に近づきます。
明日はここからさらに、
「入力項目を増やす」「条件分岐を複数組み合わせる」
といった方向に進めていきます。
