1日目のゴールと今日やること
1日目のテーマは
「入力 → 一覧表示 → 削除 → 条件分岐までを一つのミニアプリでつなげる」
ことです。
今日やるのは、超シンプルだけど“アプリっぽさ”がちゃんとあるもの：
- テキストを入力する
- 一覧に追加される
- いらないものは削除できる
- 条件によって表示内容を変える（条件分岐）
これを通して、
「配列」「DOM 操作」「条件分岐 if」を
自然に体で覚えていきます。
作るミニアプリのイメージ
どんなアプリか
イメージとしては、
「簡易メモアプリ」や「やることリスト」に近いです。
- テキストボックスにメモを入力
- 追加ボタンで一覧に追加
- 各メモの横に削除ボタン
- 何もないときは「データがありません」と表示
まずはこのレベルを目指します。
HTML の骨組みを作る
最低限の構造
<div>
<input type="text" id="itemInput" placeholder="メモを入力">
<button id="addButton">追加</button>
</div>
<div id="message"></div>
<div id="listArea"></div>
ここでの役割はこうです。
- itemInput：ユーザーが入力する場所
- addButton：一覧に追加するトリガー
- message：条件分岐でメッセージを出す場所
- listArea：一覧を表示する場所
まだ見た目は気にしなくて大丈夫です。
今日は「動き」に集中します。
JavaScript で「入力 → 配列に保存」を作る
データを入れておく“箱”を用意する
const items = [];
ここに、ユーザーが入力したテキストをどんどん入れていきます。
追加ボタンのクリックを拾う
const input = document.getElementById("itemInput");
const addButton = document.getElementById("addButton");
addButton.addEventListener("click", () => {
const text = input.value.trim();
if (text === "") {
alert("空では追加できません。");
return;
}
items.push(text);
input.value = "";
renderList();
});
深掘り：なぜ trim と空チェックが大事か
trim()は前後の空白を削る" "のような入力を「空」として扱える
これをしないと、
空白だけの“見えないデータ”がどんどん増えてしまいます。
フォーム系の処理では、ほぼ必須の習慣です。
一覧表示を「毎回描き直す」スタイルで作る
一覧を描画する関数を作る
const listArea = document.getElementById("listArea");
const message = document.getElementById("message");
function renderList() {
listArea.innerHTML = "";
if (items.length === 0) {
message.textContent = "データがありません。";
return;
} else {
message.textContent = "";
}
items.forEach((text, index) => {
const row = document.createElement("div");
row.textContent = text;
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.addEventListener("click", () => {
deleteItem(index);
});
row.appendChild(deleteButton);
listArea.appendChild(row);
});
}
深掘り：なぜ「毎回全部描き直す」のか
一見、無駄に見えるかもしれませんが、
初心者〜中級レベルではこのやり方が一番シンプルでバグりにくいです。
- items 配列が“真実”
- 画面はそれをそのまま描き直すだけ
という構造にすると、
「配列と画面がズレる」という事故が起きにくくなります。
削除機能を作る
配列から削除して、再描画する
function deleteItem(index) {
items.splice(index, 1);
renderList();
}
深掘り：splice の意味
items.splice(index, 1) は、
- index 番目から
- 1 個だけ削除する
という意味です。
配列の中身を直接書き換えるメソッドで、
「リストから消す」という操作と相性が良いです。
条件分岐でメッセージを切り替える
条件分岐の基本形
さっきの renderList の中に、
すでに条件分岐が入っています。
if (items.length === 0) {
message.textContent = "データがありません。";
return;
} else {
message.textContent = "";
}
ここでやっているのは、
- 配列が空なら → メッセージを表示
- 1件以上あるなら → メッセージを消す
という分岐です。
深掘り：条件分岐は「状態に応じて UI を変える」ためのもの
今回の状態は items.length（データ数）です。
- 0 件 → 何もない状態
- 1 件以上 → データがある状態
この“状態の違い”に応じて UI を変えるのが、
条件分岐の本質です。
1日目の完成コード（シンプル版）
JavaScript 全体
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;
}
items.push(text);
input.value = "";
renderList();
});
function renderList() {
listArea.innerHTML = "";
if (items.length === 0) {
message.textContent = "データがありません。";
return;
} else {
message.textContent = "";
}
items.forEach((text, index) => {
const row = document.createElement("div");
row.textContent = text;
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.addEventListener("click", () => {
deleteItem(index);
});
row.appendChild(deleteButton);
listArea.appendChild(row);
});
}
function deleteItem(index) {
items.splice(index, 1);
renderList();
}
// 初期表示
renderList();
今日いちばん深く理解してほしいこと
配列が「アプリの中のデータベース」になる
今回の items は、
あなたのミニアプリの“データベース”です。
- 追加 → push
- 削除 → splice
- 表示 → forEach で回す
この 3 つができると、
かなり多くの「一覧系アプリ」が作れるようになります。
画面は「配列の中身を映しているだけ」
- 配列を更新する
- 画面は毎回描き直す
この考え方は、
React や Vue などのフレームワークにもつながる
とても大事な感覚です。
2日目へのつなぎ
2日目からは、
- 1件ずつに ID を付ける
- 条件分岐を増やして「特定の文字を含むものだけ強調」
- 入力の種類を増やす（優先度など）
- コードを少し整理して関数化する
といった感じで、
このミニ総合アプリを“ちょっとずつ賢く”していきます。
今日の時点で、
もう「入力 → 一覧 → 削除 → 条件分岐」が
1つの流れとしてつながりました。
これはかなり大きな一歩です。
