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

JavaScript
スポンサーリンク

4日目のゴール

4日目のテーマもキーワードは同じ
「画面を書き換える」 ですが、今日はもう一段階進めて

「どのモードなのか」を画面に表示する
モードによって、出すメッセージを変える
画面の“複数の場所”を同時に書き換える

この感覚をつかむことをゴールにします。

1〜3日目は「1か所の文字」をいじってきました。
4日目は、「状態（モード）」という考え方を足して、
画面全体を“今の状態に合わせて”書き換える練習をします。

今日作るミニアプリのイメージ

「モード切り替え付きメッセージアプリ」

今日の題材は、こんなアプリです。

「通常モード」と「元気づけモード」を切り替えられる
今どのモードかを画面に表示する
同じボタンでも、モードによって出るメッセージが変わる

例えば、

通常モード → 「こんにちは」
元気づけモード → 「こんにちは！今日もいい感じ！」

のように、
「同じ“あいさつ”でも、モードによってテンションが変わる」
そんなイメージです。

土台となる HTML を用意する

モード表示・ボタン・メッセージ表示

まずは HTML から組み立てます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字を表示するアプリ 4日目</title>
</head>
<body>
    <h1>モード切り替えメッセージアプリ</h1>

    <p id="modeDisplay">現在のモード：通常モード</p>

    <button id="normalModeButton">通常モードにする</button>
    <button id="cheerModeButton">元気づけモードにする</button>

    <hr>

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

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

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

ここでの役割を整理します。

<p id="modeDisplay">
「今どのモードか」を表示する場所です。
JavaScript から書き換えて、「通常モード」「元気づけモード」を切り替えます。

normalModeButton と cheerModeButton
モードを切り替えるためのボタンです。
押されたら「現在のモード」を変えます。

helloButton と byeButton
3日目までと同じように、メッセージを出すボタンです。
ただし、今日は「モードによって中身が変わる」ようにします。

<p id="message">
実際のメッセージを表示する場所です。

JavaScript で「モード」という状態を持つ

変数で「今のモード」を覚えておく

app.js に、まずは基本の変数と要素取得を書きます。

const modeDisplayElement = document.getElementById("modeDisplay");
const normalModeButtonElement = document.getElementById("normalModeButton");
const cheerModeButtonElement = document.getElementById("cheerModeButton");

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

// 今のモードを表す変数
// "normal" または "cheer" のどちらかを入れる
let currentMode = "normal";
JavaScript

ここで重要なのは currentMode です。

let currentMode = "normal";
最初は「通常モード」からスタートすることにします。
この変数が、アプリの「今の状態」を表します。

この currentMode を見ながら、
どんなメッセージを出すかを決めていきます。

モードを切り替える処理を書く

モード変数と表示をセットで変える

まずは、「モード切り替えボタン」の動きを書きます。

function updateModeDisplay() {
    if (currentMode === "normal") {
        modeDisplayElement.textContent = "現在のモード：通常モード";
    } else if (currentMode === "cheer") {
        modeDisplayElement.textContent = "現在のモード：元気づけモード";
    }
}

normalModeButtonElement.addEventListener("click", function () {
    currentMode = "normal";
    updateModeDisplay();
});

cheerModeButtonElement.addEventListener("click", function () {
    currentMode = "cheer";
    updateModeDisplay();
});
JavaScript

ここでの流れを丁寧に追います。

currentMode
この変数が「今のモード」を覚えています。

updateModeDisplay()
この関数は、「currentMode に合わせて画面の表示を変える」役割です。
modeDisplayElement.textContent を書き換えています。

ボタンが押されたときは、

currentMode = "normal"; または "cheer"; で状態を変える
そのあと updateModeDisplay(); で画面の表示も変える

という2ステップになっています。

ここが今日の超重要ポイントです。

「状態（currentMode）を変える」
「状態に合わせて画面を書き換える」

この2つをセットで考えることが、
“アプリっぽさ”の土台になります。

モードによってメッセージを変える

同じボタンでも、モードで中身を変える

次に、「あいさつ」「別れのあいさつ」ボタンの動きを書きます。

まずは、メッセージを表示する共通関数を用意します。

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

そして、ボタンの処理をモード対応にします。

helloButtonElement.addEventListener("click", function () {
    if (currentMode === "normal") {
        setMessage("こんにちは。");
    } else if (currentMode === "cheer") {
        setMessage("こんにちは！今日もいい感じです！");
    }
});

byeButtonElement.addEventListener("click", function () {
    if (currentMode === "normal") {
        setMessage("さようなら。");
    } else if (currentMode === "cheer") {
        setMessage("さようなら！また元気に会いましょう！");
    }
});
JavaScript

ここでやっていることはシンプルです。

ボタンが押される
→ 今の currentMode を if でチェックする
→ モードに応じたメッセージを setMessage で表示する

つまり、

「どのボタンが押されたか」だけでなく
「今どのモードか」も見て、出すメッセージを決めている

ということです。

これが、「状態に応じて画面を書き換える」という考え方です。

4日目の app.js をまとめて見る

全体像を通して確認する

ここまでのコードを1つにまとめると、こうなります。

// モード表示
const modeDisplayElement = document.getElementById("modeDisplay");
const normalModeButtonElement = document.getElementById("normalModeButton");
const cheerModeButtonElement = document.getElementById("cheerModeButton");

// メッセージ表示
const messageElement = document.getElementById("message");
const helloButtonElement = document.getElementById("helloButton");
const byeButtonElement = document.getElementById("byeButton");

// 今のモード（"normal" または "cheer"）
let currentMode = "normal";

// モード表示を更新する関数
function updateModeDisplay() {
    if (currentMode === "normal") {
        modeDisplayElement.textContent = "現在のモード：通常モード";
    } else if (currentMode === "cheer") {
        modeDisplayElement.textContent = "現在のモード：元気づけモード";
    }
}

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

// モード切り替えボタン
normalModeButtonElement.addEventListener("click", function () {
    currentMode = "normal";
    updateModeDisplay();
});

cheerModeButtonElement.addEventListener("click", function () {
    currentMode = "cheer";
    updateModeDisplay();
});

// あいさつボタン
helloButtonElement.addEventListener("click", function () {
    if (currentMode === "normal") {
        setMessage("こんにちは。");
    } else if (currentMode === "cheer") {
        setMessage("こんにちは！今日もいい感じです！");
    }
});

// 別れのあいさつボタン
byeButtonElement.addEventListener("click", function () {
    if (currentMode === "normal") {
        setMessage("さようなら。");
    } else if (currentMode === "cheer") {
        setMessage("さようなら！また元気に会いましょう！");
    }
});

// 最初に一度、モード表示を正しくしておく
updateModeDisplay();
JavaScript

この状態で動かすと、

「通常モードにする」「元気づけモードにする」でモードが切り替わる
モード表示の文字も変わる
「あいさつ」「別れのあいさつ」ボタンの内容も、モードによって変わる

という、かなり“アプリっぽい”動きになります。

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

「状態」と「画面」はセットで考える

今日の一番大事なポイントは、これです。

画面に出ているものは「今の状態の結果」
状態は変数（currentMode）で表す
状態が変わったら、画面もそれに合わせて書き換える

具体的には、

let currentMode = "normal"; のように「状態」を変数で持つ
updateModeDisplay() のように「状態に応じて画面を更新する関数」を作る
ボタンの中では「状態を変える」「画面を更新する」をセットで呼ぶ

この考え方が身につくと、

「今はログインしているかどうか」
「今は編集モードか閲覧モードか」
「今は何ページ目か」

といった、現実のアプリに近いことも
同じパターンで考えられるようになります。

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

モードを自分で増やしてみる

例えば、こんなモードを足してみてください。

「ツンツンモード」
「敬語モード」

やることはシンプルです。

currentMode に "tsun" や "keigo" を追加する
updateModeDisplay にその表示を足す
helloButton / byeButton の中で、if を増やしてメッセージを足す

例えば、ツンツンモードなら

「べ、別にあいさつしたいわけじゃないんだからね。」

みたいなメッセージにしてもいい。

そうやって遊んでいるうちに、
「状態に応じて画面を書き換える」という感覚が
自然と体に染み込んでいきます。

4日目のまとめ

4日目で、あなたは

画面の“複数の場所”を書き換える
「今のモード」という状態を変数で持つ
状態に応じて、表示するメッセージを切り替える

という、「画面を書き換える」のもう一段深いところに入りました。

5日目以降は、
入力やモードを組み合わせて、
「ちょっとした自分専用ツール」に近づけていきます。

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