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

JavaScript
スポンサーリンク

2日目のゴール

2日目のテーマも
「画面を書き換える」 ですが、今日は一歩進めて

自分が入力した文字を画面に出す
同じ場所の文字を、何度でも書き換える
「どのタイミングで」「どんな文字を」出すかを自分で決める

この感覚をつかむことがゴールです。

1日目は「決め打ちの文字」を出しました。
2日目は「ユーザーが入力した文字」を出します。
ここから一気に“アプリ感”が増します。

1日目の復習からスタートする

まずは「ボタンで文字が変わる」形を思い出す

1日目の完成形は、ざっくり言うとこうでした。

HTML に「表示する場所」と「ボタン」がある。
JavaScript でその要素をつかむ。
ボタンがクリックされたときに textContent を書き換える。

コードで書くと、こんな感じでした。

<p id="message">ここに文字が表示されます。</p>
<button id="changeButton">文字を変える</button>

const messageElement = document.getElementById("message");
const buttonElement = document.getElementById("changeButton");

buttonElement.addEventListener("click", function () {
    messageElement.textContent = "ボタンが押されました！";
});
JavaScript

今日は、この「書き換えの仕組み」はそのままにして、
「どんな文字を入れるか」を、入力欄から持ってくるようにします。

入力欄を追加してみる

HTML に input を足す

まずは HTML に「文字を入力する場所」を追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字を表示するアプリ 2日目</title>
</head>
<body>
    <h1>文字を表示するアプリ</h1>

    <p>下の入力欄に文字を入れて、「表示する」ボタンを押してみましょう。</p>

    <input id="textInput" type="text" placeholder="ここに文字を入力">
    <button id="showButton">表示する</button>

    <p id="message">ここに文字が表示されます。</p>

    <script src="app.js"></script>
</body>
</html>

ここで新しく出てきたのは <input> です。

<input id="textInput" type="text" ...>
ここが「ユーザーが文字を入力する場所」です。
id="textInput" をつけているので、JavaScript からつかめます。

<button id="showButton">表示する</button>
このボタンを押したときに、
入力欄の文字を <p id="message"> に表示します。

入力欄の「中身」を JavaScript から読む

value プロパティを覚える

1日目は「要素の中の文字」を textContent で扱いました。
2日目は「入力欄の中の文字」を value で扱います。

まずは app.js に、要素をつかむコードを書きます。

const messageElement = document.getElementById("message");
const inputElement = document.getElementById("textInput");
const showButtonElement = document.getElementById("showButton");
JavaScript

次に、「ボタンが押されたとき」の処理を書きます。

showButtonElement.addEventListener("click", function () {
    const text = inputElement.value;
    messageElement.textContent = text;
});
JavaScript

ここでの流れを、ゆっくり分解します。

inputElement.value
入力欄（input）の「中に入力されている文字」を表します。
ユーザーがキーボードで打った内容が、そのままここに入っています。

const text = inputElement.value;
その文字を text という変数にいったん入れています。
こうすることで、「今扱っているのは“入力された文字”だ」と意識しやすくなります。

messageElement.textContent = text;
1日目と同じように、表示用の <p> の文字を書き換えています。
ただし、今回は固定の文字ではなく、
さっき読み取った text をそのまま入れています。

結果として、

入力欄に「こんにちは」と打つ
「表示する」ボタンを押す
→ <p id="message"> に「こんにちは」と表示される

という動きになります。

入力後に入力欄をクリアしてみる

小さな「気配り」をコードにする

今のままでも動きとしては正しいですが、
ボタンを押したあとも入力欄に文字が残っています。

「表示したら入力欄は空にしたいな」と思ったら、
それも JavaScript で書けます。

showButtonElement.addEventListener("click", function () {
    const text = inputElement.value;

    messageElement.textContent = text;

    inputElement.value = "";
});
JavaScript

inputElement.value = "";
これで「入力欄の中身を空文字にする」という意味になります。

こういう「ちょっとした気配り」を
コードで表現できるようになると、
アプリが一気に“自分のもの”になっていきます。

何も入力されていないときのメッセージ

条件分岐で「場合分け」する

次に、「何も入力されていないとき」の扱いを考えます。

今のコードだと、
空のままボタンを押すと、表示も空になります。

それでもいいのですが、
「何も入力されていません」と表示した方が親切です。

そこで、if 文を使って場合分けします。

showButtonElement.addEventListener("click", function () {
    const text = inputElement.value;

    if (text === "") {
        messageElement.textContent = "何も入力されていません。文字を入力してください。";
    } else {
        messageElement.textContent = text;
    }

    inputElement.value = "";
});
JavaScript

ここでのポイントは if (text === "") です。

text === ""
「text が空文字かどうか」をチェックしています。
入力欄に何も入っていないとき、value は空文字になります。

空だったら「何も入力されていません」と表示する。
空でなければ、そのまま表示する。

この「場合によって表示を変える」というのが、
アプリらしさの第一歩です。

2日目の app.js をまとめる

完成形をもう一度通して見る

2日目のゴールとして、app.js はこんな形になっていれば十分です。

// 表示する場所の要素をつかむ
const messageElement = document.getElementById("message");

// 入力欄の要素をつかむ
const inputElement = document.getElementById("textInput");

// ボタンの要素をつかむ
const showButtonElement = document.getElementById("showButton");

// ボタンがクリックされたときの動きを登録する
showButtonElement.addEventListener("click", function () {
    // 入力欄の中身（文字）を取り出す
    const text = inputElement.value;

    // 何も入力されていない場合と、そうでない場合で分ける
    if (text === "") {
        messageElement.textContent = "何も入力されていません。文字を入力してください。";
    } else {
        // 入力された文字をそのまま表示する
        messageElement.textContent = text;
    }

    // 入力欄を空にする（次の入力のため）
    inputElement.value = "";
});
JavaScript

HTML はこうです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字を表示するアプリ 2日目</title>
</head>
<body>
    <h1>文字を表示するアプリ</h1>

    <p>下の入力欄に文字を入れて、「表示する」ボタンを押してみましょう。</p>

    <input id="textInput" type="text" placeholder="ここに文字を入力">
    <button id="showButton">表示する</button>

    <p id="message">ここに文字が表示されます。</p>

    <script src="app.js"></script>
</body>
</html>

これで、

自分で文字を入力する
ボタンを押す
→ 画面の文字がその内容に変わる

という「双方向のやりとり」が成立します。

重要ポイントを深掘りしておく

textContent と value の違い

2日目で絶対に整理しておきたいのは、この2つです。

要素.textContent
段落（p）、見出し（h1〜h6）、div など
「タグの中に書かれている文字」を扱うときに使う。
画面に“表示されている文字”そのもの。

input.value
入力欄（input）の中に「ユーザーが入力した文字」を扱うときに使う。
画面には枠として表示されていて、その中身が value。

どちらも「文字」ですが、
どこから取ってくるかが違います。

表示用の要素 → textContent
入力用の要素 → value

この対応がスッと出てくるようになると、
JavaScript で「画面と会話する」感覚が一気に楽になります。

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

ちょっとしたアレンジで“自分のアプリ”にする

2日目の範囲だけでも、いろいろ遊べます。

入力した文字の前に「あなたの入力: 」をつけて表示する
空のときのメッセージを、自分の言葉に変えてみる
ボタンを押したときに、console.log でも入力内容を出してみる

例えば、こんな感じです。

if (text === "") {
    messageElement.textContent = "何も入力されていません。";
} else {
    messageElement.textContent = "あなたの入力: " + text;
}
JavaScript

やっていることは単純でも、
「自分の言葉で画面が反応する」だけで、
かなり楽しくなってきます。

2日目のまとめ

2日目で、あなたは

入力欄（input）を使う
value で入力された文字を取り出す
textContent で表示用の要素を書き換える
if 文で「空かどうか」を判定して表示を変える

という、「画面を書き換える」もう一段階先の形を手に入れました。

3日目以降は、
複数のボタンで違うメッセージを出したり、
入力内容を少し加工してから表示したりと、
“アプリらしさ”をさらに足していきます。

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