5日目のゴール
5日目のテーマもキーワードは同じ
「画面を書き換える」 ですが、今日は
入力した内容を「履歴」として残す
新しい内容が来るたびに、画面を“追記”していく
「1か所」ではなく「一覧」を書き換える
この感覚をつかむことをゴールにします。
1〜4日目は「1つの場所の文字」を入れ替えてきました。
5日目は、「どんどん増えていく情報」を画面に並べていく
“ログ表示”のようなことをやってみます。
今日作るミニアプリのイメージ
「メッセージ履歴アプリ」
今日の題材は、こんなアプリです。
入力欄に文字を入れて「追加」ボタンを押す
下に「今まで追加したメッセージ」が順番に並んでいく
「全部消す」ボタンで履歴をリセットできる
チャットアプリの「自分だけ版」みたいなイメージです。
これができると、「一瞬で消える表示」ではなく
「積み重なっていく表示」を扱えるようになります。
土台となる HTML を用意する
入力欄・ボタン・履歴表示エリア
まずは HTML から組み立てます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字を表示するアプリ 5日目</title>
</head>
<body>
<h1>メッセージ履歴アプリ</h1>
<p>メッセージを入力して「追加」ボタンを押すと、下に履歴として追加されます。</p>
<input id="messageInput" type="text" placeholder="メッセージを入力">
<button id="addButton">追加</button>
<button id="clearButton">全部消す</button>
<h2>メッセージ履歴</h2>
<div id="historyArea">
<p>まだメッセージはありません。</p>
</div>
<script src="app.js"></script>
</body>
</html>
ここでの役割を整理します。
messageInput
ユーザーがメッセージを入力する場所です。
addButton
押すと、入力されたメッセージが履歴に追加されます。
clearButton
押すと、履歴を全部消します。
historyArea
履歴を表示する「箱」です。
この中に <p>...</p> をどんどん追加していきます。
JavaScript で要素をつかむ
まずは「触れるようにする」ところから
app.js に、まずは要素取得を書きます。
const messageInputElement = document.getElementById("messageInput");
const addButtonElement = document.getElementById("addButton");
const clearButtonElement = document.getElementById("clearButton");
const historyAreaElement = document.getElementById("historyArea");
ここまでは、1〜4日目と同じパターンです。
次に、「履歴をどう持つか」を決めます。
今日は、画面に直接追加していく方法と、
配列にためてから画面に出す方法の“入り口”を両方見ます。
まずはシンプルに「画面に直接追加する」方法から始めます。
履歴に「1件追加する」処理を書く
新しい p 要素を作って、historyArea に足す
「追加」ボタンが押されたときの処理を書きます。
addButtonElement.addEventListener("click", function () {
const text = messageInputElement.value;
if (text === "") {
alert("メッセージが空です。何か入力してください。");
return;
}
const p = document.createElement("p");
p.textContent = text;
historyAreaElement.appendChild(p);
messageInputElement.value = "";
messageInputElement.focus();
});
ここで新しく出てきたものを、丁寧に説明します。
document.createElement("p")
新しい <p> 要素を JavaScript で作ります。
まだ画面には出ていません。「生まれたてのタグ」です。
p.textContent = text;
その <p> の中身の文字を設定します。
ここに、入力されたメッセージを入れています。
historyAreaElement.appendChild(p);historyArea の「一番下の子ども」として、今作った <p> を追加します。
これで、画面上にも新しい行として表示されます。
この3ステップが、
「画面に新しい行を追加する」基本パターンです。
最初の「まだメッセージはありません」を消す
最初だけのメッセージをどう扱うか
HTML の中で、最初にこう書いていました。
<div id="historyArea">
<p>まだメッセージはありません。</p>
</div>
最初の1件目を追加したときには、
この「まだメッセージはありません。」は消したいですよね。
やり方はいくつかありますが、
超初級編では「最初に一度だけ中身を空にする」方法を使います。
let hasAnyMessage = false;
addButtonElement.addEventListener("click", function () {
const text = messageInputElement.value;
if (text === "") {
alert("メッセージが空です。何か入力してください。");
return;
}
if (!hasAnyMessage) {
historyAreaElement.textContent = "";
hasAnyMessage = true;
}
const p = document.createElement("p");
p.textContent = text;
historyAreaElement.appendChild(p);
messageInputElement.value = "";
messageInputElement.focus();
});
ここでのポイントは hasAnyMessage です。
let hasAnyMessage = false;
最初は「まだ1件もメッセージがない」状態です。
最初の1件を追加するときだけ、
historyAreaElement.textContent = ""; で中身を全部消すhasAnyMessage = true; にして、「もう消したよ」と覚えておく
2件目以降は hasAnyMessage が true なので、
最初のメッセージを消す処理はスキップされます。
これは、4日目でやった「状態を変数で持つ」の応用です。
「全部消す」ボタンの処理を書く
画面と状態をリセットする
次に、「全部消す」ボタンの動きを書きます。
clearButtonElement.addEventListener("click", function () {
historyAreaElement.textContent = "";
historyAreaElement.innerHTML = "<p>まだメッセージはありません。</p>";
hasAnyMessage = false;
});
ここでやっていることは、こうです。
historyAreaElement.textContent = "";
いったん中身を全部消します。
historyAreaElement.innerHTML = "<p>まだメッセージはありません。</p>";
HTML として、最初のメッセージを入れ直します。
（innerHTML は「中身を HTML として扱う」プロパティです）
hasAnyMessage = false;
状態も「まだメッセージがない」に戻します。
これで、「全部消す」を押すたびに
アプリが“初期状態”に戻るようになります。
5日目の app.js をまとめて見る
全体像を通して確認する
ここまでのコードを1つにまとめると、こうなります。
const messageInputElement = document.getElementById("messageInput");
const addButtonElement = document.getElementById("addButton");
const clearButtonElement = document.getElementById("clearButton");
const historyAreaElement = document.getElementById("historyArea");
let hasAnyMessage = false;
addButtonElement.addEventListener("click", function () {
const text = messageInputElement.value;
if (text === "") {
alert("メッセージが空です。何か入力してください。");
return;
}
if (!hasAnyMessage) {
historyAreaElement.textContent = "";
hasAnyMessage = true;
}
const p = document.createElement("p");
p.textContent = text;
historyAreaElement.appendChild(p);
messageInputElement.value = "";
messageInputElement.focus();
});
clearButtonElement.addEventListener("click", function () {
historyAreaElement.textContent = "";
historyAreaElement.innerHTML = "<p>まだメッセージはありません。</p>";
hasAnyMessage = false;
});
この状態で動かすと、
メッセージを入力して「追加」
→ 下に1行ずつ増えていく
「全部消す」
→ 初期状態に戻る
という、「履歴付きの表示アプリ」になります。
重要ポイントを深掘りする
「1件だけ」ではなく「何件も」扱う感覚
5日目で一番大事なのは、ここです。
今までは「1つの表示場所」を書き換えていた
今日は「表示場所の中に、行をどんどん足していく」ことをした
そのために、createElement と appendChild を使った
具体的には、この3ステップが超重要です。
新しい要素を作る
const p = document.createElement("p");
その要素の中身を設定する
p.textContent = text;
親要素に追加する
historyAreaElement.appendChild(p);
このパターンを覚えると、
ToDo リスト
チャットログ
検索結果一覧
など、「増えていくものを並べる UI」が
全部同じ考え方で作れるようになります。
もう一歩だけ：配列にためてから表示する考え方
「データ」と「表示」を分ける入り口
超初級編なので、ここは“チラ見せ”程度にしますが、
少しだけ「配列で持つ」話もしておきます。
もし、メッセージを JavaScript の中でも覚えておきたいなら、
こういう配列を用意できます。
const messages = [];
追加するときに、画面に出すだけでなく配列にも入れます。
messages.push(text);
そして、「画面を全部描き直す」関数を作ります。
function renderHistory() {
if (messages.length === 0) {
historyAreaElement.innerHTML = "<p>まだメッセージはありません。</p>";
return;
}
historyAreaElement.textContent = "";
for (let i = 0; i < messages.length; i++) {
const p = document.createElement("p");
p.textContent = messages[i];
historyAreaElement.appendChild(p);
}
}
こうしておくと、
データ（messages 配列）
表示（renderHistory で画面に出す）
を分けて考えられるようになります。
本格的にやるのは初級編のもう少し先ですが、
「データ」と「画面」は分けられる、という感覚だけ
頭の片隅に置いておいてください。
もし余裕があればやってみてほしいこと
ちょっとした“装飾”を足してみる
例えば、こんなアレンジができます。
メッセージの前に番号をつける（1件目、2件目…）
「追加した時間」も一緒に表示する
特定の文字が入っていたら、強調メッセージにする
時間を表示する例は、こんな感じです。
const now = new Date();
const timeText = now.toLocaleTimeString();
p.textContent = "[" + timeText + "] " + text;
やっていることは単純でも、
「自分のログが積み上がっていく」のは、かなり楽しいはずです。
5日目のまとめ
5日目で、あなたは
画面の中に「行」をどんどん追加する
createElement と appendChild で要素を増やす
「まだ何もない状態」と「1件以上ある状態」を状態変数で切り替える
「全部消す」で画面と状態をリセットする
という、「画面を書き換える」の“一覧表示バージョン”に踏み込みました。
6日目・7日目では、
ここまでの「入力」「モード」「履歴」を組み合わせて、
小さいけれどちゃんと“自分用のアプリ”と呼べる形に
近づけていきます。
