JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ

JavaScript
スポンサーリンク

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");
JavaScript

ここまでは、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();
});
JavaScript

ここで新しく出てきたものを、丁寧に説明します。

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();
});
JavaScript

ここでのポイントは 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;
});
JavaScript

ここでやっていることは、こうです。

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;
});
JavaScript

この状態で動かすと、

メッセージを入力して「追加」
→ 下に1行ずつ増えていく
「全部消す」
→ 初期状態に戻る

という、「履歴付きの表示アプリ」になります。

重要ポイントを深掘りする

「1件だけ」ではなく「何件も」扱う感覚

5日目で一番大事なのは、ここです。

今までは「1つの表示場所」を書き換えていた
今日は「表示場所の中に、行をどんどん足していく」ことをした
そのために、createElement と appendChild を使った

具体的には、この3ステップが超重要です。

新しい要素を作る

const p = document.createElement("p");
JavaScript

その要素の中身を設定する

p.textContent = text;
JavaScript

親要素に追加する

historyAreaElement.appendChild(p);
JavaScript

このパターンを覚えると、

ToDo リスト
チャットログ
検索結果一覧

など、「増えていくものを並べる UI」が
全部同じ考え方で作れるようになります。

もう一歩だけ：配列にためてから表示する考え方

「データ」と「表示」を分ける入り口

超初級編なので、ここは“チラ見せ”程度にしますが、
少しだけ「配列で持つ」話もしておきます。

もし、メッセージを JavaScript の中でも覚えておきたいなら、
こういう配列を用意できます。

const messages = [];
JavaScript

追加するときに、画面に出すだけでなく配列にも入れます。

messages.push(text);
JavaScript

そして、「画面を全部描き直す」関数を作ります。

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);
    }
}
JavaScript

こうしておくと、

データ（messages 配列）
表示（renderHistory で画面に出す）

を分けて考えられるようになります。

本格的にやるのは初級編のもう少し先ですが、
「データ」と「画面」は分けられる、という感覚だけ
頭の片隅に置いておいてください。

もし余裕があればやってみてほしいこと

ちょっとした“装飾”を足してみる

例えば、こんなアレンジができます。

メッセージの前に番号をつける（1件目、2件目…）
「追加した時間」も一緒に表示する
特定の文字が入っていたら、強調メッセージにする

時間を表示する例は、こんな感じです。

const now = new Date();
const timeText = now.toLocaleTimeString();
p.textContent = "[" + timeText + "] " + text;
JavaScript

やっていることは単純でも、
「自分のログが積み上がっていく」のは、かなり楽しいはずです。

5日目のまとめ

5日目で、あなたは

画面の中に「行」をどんどん追加する
createElement と appendChild で要素を増やす
「まだ何もない状態」と「1件以上ある状態」を状態変数で切り替える
「全部消す」で画面と状態をリセットする

という、「画面を書き換える」の“一覧表示バージョン”に踏み込みました。

6日目・7日目では、
ここまでの「入力」「モード」「履歴」を組み合わせて、
小さいけれどちゃんと“自分用のアプリ”と呼べる形に
近づけていきます。

前へ次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました