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

JavaScript
スポンサーリンク

3日目のゴール

3日目のテーマもキーワードは同じ
「画面を書き換える」 ですが、今日は

複数のボタンで違うメッセージを出す
同じ場所の文字を、状況に応じて切り替える
「同じ処理」を関数にまとめてスッキリ書く

ここまでを目指します。

1日目：決め打ちの文字を表示
2日目：入力した文字を表示
3日目：ボタンや状況によって「どの文字を出すか」を切り替える

このステップで、画面が「ただの表示」から
ちょっとした「会話相手」みたいになってきます。

2日目の形を軽く思い出す

入力した文字を表示するアプリ

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

HTML には、入力欄・ボタン・表示場所がある。

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

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

JavaScript では、こう書いていました。

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 にボタンを増やす

まずは HTML に、ボタンをいくつか追加してみます。

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

    <p id="message">ここにメッセージが表示されます。</p>

    <button id="helloButton">あいさつを表示</button>
    <button id="byeButton">別れのあいさつを表示</button>
    <button id="clearButton">消す</button>

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

ここでの役割はこうです。

<p id="message">
ここが「表示する場所」。1日目・2日目と同じです。

helloButton
押したら「こんにちは！」を表示したいボタン。

byeButton
押したら「さようなら！」を表示したいボタン。

clearButton
押したらメッセージを消したいボタン。

それぞれのボタンに動きをつける

まずは素直に書いてみる

app.js に、まずはストレートに書いてみます。

const messageElement = document.getElementById("message");
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");
const clearButtonElement = document.getElementById("clearButton");

helloButtonElement.addEventListener("click", function () {
    messageElement.textContent = "こんにちは！";
});

byeButtonElement.addEventListener("click", function () {
    messageElement.textContent = "さようなら！";
});

clearButtonElement.addEventListener("click", function () {
    messageElement.textContent = "";
});
JavaScript

ここでやっていることは、1日目とまったく同じです。

要素を getElementById でつかむ
addEventListener(“click”, function () { … }) でクリック時の動きを登録
中で textContent を書き換える

ただ、ボタンが1つから3つに増えただけです。

この時点で、すでにこういう動きになります。

「あいさつを表示」ボタン → 「こんにちは！」
「別れのあいさつを表示」ボタン → 「さようなら！」
「消す」ボタン → 何も表示されない（空文字）

同じ <p id="message"> を、
いろんなボタンから「取り合い」しているイメージです。

「同じパターン」を関数にまとめる

重複しているところに気づく

さっきのコードを、もう一度よく眺めてみます。

helloButtonElement.addEventListener("click", function () {
    messageElement.textContent = "こんにちは！";
});

byeButtonElement.addEventListener("click", function () {
    messageElement.textContent = "さようなら！";
});
JavaScript

どちらも

「クリックされたら messageElement.textContent に何かを入れる」

というパターンは同じで、
違うのは「入れている文字」だけです。

こういうときに使えるのが「関数（function）」です。

メッセージを変える処理を関数にする

関数で「名前のついた処理」にする

同じパターンを関数にまとめてみます。

function setMessage(text) {
    messageElement.textContent = text;
}
JavaScript

この関数は、

setMessage("こんにちは！"); と呼べば「こんにちは！」を表示し、
setMessage("さようなら！"); と呼べば「さようなら！」を表示します。

これを使って、ボタンの処理を書き直してみます。

const messageElement = document.getElementById("message");
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");
const clearButtonElement = document.getElementById("clearButton");

function setMessage(text) {
    messageElement.textContent = text;
}

helloButtonElement.addEventListener("click", function () {
    setMessage("こんにちは！");
});

byeButtonElement.addEventListener("click", function () {
    setMessage("さようなら！");
});

clearButtonElement.addEventListener("click", function () {
    setMessage("");
});
JavaScript

ここでの重要ポイントは、

「画面を書き換える」という処理に名前をつけた
→ setMessage という“自分専用の命令”を作った

ということです。

これができると、
「画面を書き換える」という行為が
コードの中で何度でも、短く・分かりやすく書けるようになります。

入力と組み合わせて「定型文＋入力」を表示する

2日目の input をもう一度使う

ここから、もう一歩だけ踏み込みます。

「入力した名前を使って、あいさつを表示する」
というパターンを作ってみましょう。

HTML を少しだけ変えます。

<p>名前を入力して、「名前つきあいさつ」ボタンを押してみましょう。</p>

<input id="nameInput" type="text" placeholder="名前を入力">
<button id="helloWithNameButton">名前つきあいさつ</button>

<p id="message">ここにメッセージが表示されます。</p>

JavaScript 側では、要素を増やします。

const messageElement = document.getElementById("message");
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");
const clearButtonElement = document.getElementById("clearButton");

const nameInputElement = document.getElementById("nameInput");
const helloWithNameButtonElement = document.getElementById("helloWithNameButton");

function setMessage(text) {
    messageElement.textContent = text;
}
JavaScript

そして、「名前つきあいさつ」の処理を書きます。

helloWithNameButtonElement.addEventListener("click", function () {
    const name = nameInputElement.value;

    if (name === "") {
        setMessage("名前が入力されていません。");
    } else {
        const text = "こんにちは、" + name + " さん！";
        setMessage(text);
    }

    nameInputElement.value = "";
});
JavaScript

ここでやっていることは、2日目の応用です。

入力欄から value で文字を取り出す
空かどうかを if で判定する
空ならエラーメッセージ
空でなければ「定型文＋入力された名前」を作る

"こんにちは、" + name + " さん！"
このように、文字列と変数を + でつなぐことで、
「入力された名前を含んだメッセージ」を作っています。

3日目の app.js を一度まとめて見る

全体像を通して眺める

ここまでの内容を、1つの app.js にまとめるとこうなります。

// 表示する場所
const messageElement = document.getElementById("message");

// ボタンたち
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");
const clearButtonElement = document.getElementById("clearButton");

// 名前入力と、そのボタン
const nameInputElement = document.getElementById("nameInput");
const helloWithNameButtonElement = document.getElementById("helloWithNameButton");

// メッセージを表示する共通の関数
function setMessage(text) {
    messageElement.textContent = text;
}

// シンプルなあいさつ
helloButtonElement.addEventListener("click", function () {
    setMessage("こんにちは！");
});

// 別れのあいさつ
byeButtonElement.addEventListener("click", function () {
    setMessage("さようなら！");
});

// メッセージを消す
clearButtonElement.addEventListener("click", function () {
    setMessage("");
});

// 名前つきのあいさつ
helloWithNameButtonElement.addEventListener("click", function () {
    const name = nameInputElement.value;

    if (name === "") {
        setMessage("名前が入力されていません。");
    } else {
        const text = "こんにちは、" + name + " さん！";
        setMessage(text);
    }

    nameInputElement.value = "";
});
JavaScript

ここまで来ると、

ボタンを押す
→ どのボタンかによって、違うメッセージが出る
→ 場合によっては、入力した文字も混ざる

という「ちょっとした会話アプリ」になっています。

3日目で絶対に押さえておきたいポイント

「同じ場所を、いろんなパターンで書き換える」

3日目の本質はここです。

画面の「表示場所」は1つでいい
でも、その場所に「どんな文字を出すか」は、状況によって変わる
その「書き換え」を、ボタンや入力と組み合わせてコントロールする

技術的には、次の3つが大事です。

同じ要素（messageElement）を、いろんなところから使い回す
「画面を書き換える処理」を関数（setMessage）にまとめる
文字列と変数を + でつないで、メッセージを組み立てる

この3つができると、
「画面を書き換える」が、ただの一発芸ではなく
「自分でコントロールできる道具」になってきます。

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

ボタンを自分で増やしてみる

例えば、こんなボタンを追加してみてください。

「お疲れさま」ボタン
「今日の日付を表示」ボタン

「お疲れさま」は、ただ setMessage に固定の文字を渡せばOKです。

「今日の日付」は、少しだけ新しいことを使います。

const todayButtonElement = document.getElementById("todayButton");

todayButtonElement.addEventListener("click", function () {
    const now = new Date();
    const text = "今日は " + now.toLocaleDateString() + " です。";
    setMessage(text);
});
JavaScript

ここまでやると、
もう立派に「自分で遊べる小さなアプリ」になっています。

3日目のまとめ

3日目で、あなたは

複数のボタンで、同じ場所の文字を切り替える
「画面を書き換える処理」を関数にまとめる
入力された文字を使って、メッセージを組み立てる

という、「画面を書き換える」の応用編に踏み込みました。

4日目以降は、
少しずつ「状態（今どのモードか）」を意識したり、
表示内容を増やしたりしながら、
“アプリっぽさ”をさらに育てていきます。

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