- Day 8：switch文で「分岐の整理」を体験する
- switch / case / default の基本を押さえる
- 実践1：曜日判定を switch で書いてみる
- 実践2：メニュー選択を switch で書いてみる
- switch文を「練習用テンプレート」としてまとめる
- Day 8前半のまとめ
- Day 8：switch文（後半）で「使いこなす感覚」を身につける
- switch文の挙動をもう少し深く理解する
- 実践1：曜日判定を「入力付きミニアプリ」として作る
- 実践2：メニュー選択を「文字列＋入力チェック付き」で作る
- Day 8後半テンプレート：曜日判定＋メニュー選択の統合版
- Day 8後半のまとめ
- Day 8：switch文ミニ課題のゴールをイメージする
- switch / case / default をもう一度整理する
- ミニ課題の仕様を言葉で整理する
- Step 1：HTMLで「入力」と「結果表示」の枠を作る
- Step 2：JavaScriptで「ボタンが押されたら処理する」流れを作る
- Step 3：入力値をチェックしてから switch 文に渡す
- Step 4：switch 文で曜日ごとのメッセージを切り替える
- Step 5：完成版テンプレート
- Day 8ミニ課題のまとめ
Day 8：switch文で「分岐の整理」を体験する
Day 8では、これまで学んできた if / else if / else に続いて、switch 文による条件分岐を学びます。 特に「ひとつの値に対して、候補がたくさんあるとき」に、switch 文はコードをすっきり整理してくれます。
この前半では、
- switch / case / default の基本構文
- 曜日判定
- メニュー選択
を題材に、初心者向けにかみ砕いて、ステップバイステップで解説していきます。
switch / case / default の基本を押さえる
switch文の役割をイメージする
switch 文は、ひとつの値に対して「どのパターンに当てはまるか」を分けるための構文です。
日常のイメージで言うと、
- 「1ならラーメン、2ならカレー、3ならハンバーグ…それ以外は『メニューにありません』」
のような「番号に応じて処理を変える」場面にぴったりです。
基本構文を見てみる
switch (値) {
case パターン1:
// 値がパターン1のときの処理
break;
case パターン2:
// 値がパターン2のときの処理
break;
default:
// どのパターンにも当てはまらないときの処理
}
ここで登場するキーワードは3つです。
switch： 分岐の対象となる「値」を指定します。case： その値が特定のパターンに一致したときの処理を書きます。default： どのcaseにも一致しなかったときの処理を書きます。
break の意味をしっかり理解する
switch 文では、各 case の最後に break を書くのが基本です。
const value = 2;
switch (value) {
case 1:
console.log('value は 1 です');
break; // ここで switch 文を抜けます
case 2:
console.log('value は 2 です');
break;
default:
console.log('value は 1でも2でもありません');
}
なぜ break が必要なのか：
breakを書かないと、次の case に処理が「落ちていく」（fall-through）という挙動になります。- 初心者のうちは、意図しない動作を防ぐためにも「各 case の最後に breakを書く」と覚えておくと安全です。
実践1：曜日判定を switch で書いてみる
曜日を数値で表現する
まずは、曜日を数値で表現してみます。
- 0：日曜日
- 1：月曜日
- 2：火曜日
- 3：水曜日
- 4：木曜日
- 5：金曜日
- 6：土曜日
この「曜日番号」をもとに、switch 文でメッセージを表示していきます。
曜日判定の基本コード（コンソール版）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 前半：曜日判定（switch文）</title>
</head>
<body>
<h1>曜日判定（switch文の基本）</h1>
<p>コンソールを開いて、曜日判定の結果を確認してください。</p>
<script>
// 曜日を表す数値です（0〜6）
// ここを書き換えることで、いろいろな曜日を試せます
const dayNumber = 2; // 例：2 = 火曜日
console.log('曜日番号：', dayNumber);
// 曜日番号に応じてメッセージを表示します
switch (dayNumber) {
case 0:
console.log('今日は日曜日です。ゆっくり休みましょう。');
break; // ここで switch を抜けます
case 1:
console.log('今日は月曜日です。新しい週の始まりですね。');
break;
case 2:
console.log('今日は火曜日です。少しペースが乗ってくる頃です。');
break;
case 3:
console.log('今日は水曜日です。週の真ん中です。');
break;
case 4:
console.log('今日は木曜日です。もう少しで週末です。');
break;
case 5:
console.log('今日は金曜日です。週末目前です。');
break;
case 6:
console.log('今日は土曜日です。自由な時間を楽しみましょう。');
break;
default:
console.log('曜日番号が 0〜6 の範囲ではありません。');
}
</script>
</body>
</html>
重要ポイントの深掘り
switch (dayNumber)で、「dayNumber の値に応じて分岐する」と宣言しています。- 各
caseは「dayNumber がその値だったときの処理」を表します。 defaultは「どの case にも一致しなかったとき」の処理です。 ここでは「0〜6以外の値が入ってきた場合」のエラーメッセージとして使っています。- 各
caseの最後にbreakを書くことで、「その case の処理だけを実行して switch を抜ける」ようにしています。
if / else if と比較してみる
同じロジックを if / else if で書くと、次のようになります。
if (dayNumber === 0) {
console.log('今日は日曜日です。');
} else if (dayNumber === 1) {
console.log('今日は月曜日です。');
} else if (dayNumber === 2) {
console.log('今日は火曜日です。');
} else if (dayNumber === 3) {
console.log('今日は水曜日です。');
} else if (dayNumber === 4) {
console.log('今日は木曜日です。');
} else if (dayNumber === 5) {
console.log('今日は金曜日です。');
} else if (dayNumber === 6) {
console.log('今日は土曜日です。');
} else {
console.log('曜日番号が 0〜6 の範囲ではありません。');
}
違いを意識してほしい点：
if / else ifは「条件式」を毎回書きます（dayNumber === 0など）。switchは「ひとつの値（dayNumber）に対して、候補を並べる」形になります。 候補が多いときは、switchのほうが見通しが良くなることが多いです。
実践2：メニュー選択を switch で書いてみる
メニュー選択のイメージを言葉で整理する
次に、「ユーザーがメニュー番号を選ぶと、対応するメニュー名や説明を表示する」という例を考えます。
例として、次のようなメニューを用意します。
- 1：ラーメン
- 2：カレー
- 3：ハンバーグ
- 4：サラダ
- その他：メニューにありません
メニュー選択の基本コード（コンソール版）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 前半：メニュー選択（switch文）</title>
</head>
<body>
<h1>メニュー選択（switch文の練習）</h1>
<p>コンソールを開いて、メニュー判定の結果を確認してください。</p>
<script>
// ユーザーが選んだメニュー番号です
// ここを書き換えることで、いろいろなメニューを試せます
const menuNumber = 3; // 例：3 = ハンバーグ
console.log('選択されたメニュー番号：', menuNumber);
// メニュー番号に応じてメニュー名とメッセージを表示します
switch (menuNumber) {
case 1:
console.log('メニュー：ラーメン');
console.log('説明：あつあつのスープと麺をお楽しみください。');
break;
case 2:
console.log('メニュー：カレー');
console.log('説明：スパイスの効いたルーとご飯の組み合わせです。');
break;
case 3:
console.log('メニュー：ハンバーグ');
console.log('説明：ジューシーなお肉料理です。');
break;
case 4:
console.log('メニュー：サラダ');
console.log('説明：野菜たっぷりのヘルシーメニューです。');
break;
default:
console.log('選択された番号に対応するメニューはありません。');
}
</script>
</body>
</html>
ここで意識してほしいこと
switch (menuNumber)で、「menuNumber の値に応じてメニューを切り替える」構造になっています。- 各
caseの中で、メニュー名と説明をまとめて表示しています。 defaultは「メニューに存在しない番号が選ばれた場合」の処理です。
switch文を「練習用テンプレート」としてまとめる
曜日判定＋メニュー選択のテンプレート
Day 8前半の内容をまとめた「練習用テンプレート」を示します。 このテンプレートをベースに、値を変えたり case を増やしたりして遊ぶことで、switch 文の感覚が身についていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 前半：switch文テンプレート</title>
</head>
<body>
<h1>Day 8 前半：switch文の練習テンプレート</h1>
<p>コンソールを開いて、曜日判定とメニュー選択の結果を確認してください。</p>
<script>
// --- 曜日判定の例 ---
const dayNumber = 5; // 例：5 = 金曜日
console.log('--- 曜日判定 ---');
console.log('曜日番号：', dayNumber);
switch (dayNumber) {
case 0:
console.log('今日は日曜日です。ゆっくり休みましょう。');
break;
case 1:
console.log('今日は月曜日です。新しい週の始まりですね。');
break;
case 2:
console.log('今日は火曜日です。少しペースが乗ってくる頃です。');
break;
case 3:
console.log('今日は水曜日です。週の真ん中です。');
break;
case 4:
console.log('今日は木曜日です。もう少しで週末です。');
break;
case 5:
console.log('今日は金曜日です。週末目前です。');
break;
case 6:
console.log('今日は土曜日です。自由な時間を楽しみましょう。');
break;
default:
console.log('曜日番号が 0〜6 の範囲ではありません。');
}
// --- メニュー選択の例 ---
const menuNumber = 2; // 例：2 = カレー
console.log('--- メニュー選択 ---');
console.log('選択されたメニュー番号：', menuNumber);
switch (menuNumber) {
case 1:
console.log('メニュー：ラーメン');
console.log('説明：あつあつのスープと麺をお楽しみください。');
break;
case 2:
console.log('メニュー：カレー');
console.log('説明：スパイスの効いたルーとご飯の組み合わせです。');
break;
case 3:
console.log('メニュー：ハンバーグ');
console.log('説明：ジューシーなお肉料理です。');
break;
case 4:
console.log('メニュー：サラダ');
console.log('説明：野菜たっぷりのヘルシーメニューです。');
break;
default:
console.log('選択された番号に対応するメニューはありません。');
}
console.log('--- switch文テンプレートの処理が完了しました ---');
</script>
</body>
</html>
Day 8前半のまとめ
Day 8前半では、次のことを学びました。
switch/case/defaultの基本構文と役割breakを使って「その case だけを実行して抜ける」書き方- 曜日判定とメニュー選択を通して、「ひとつの値に対して複数の候補を並べる」場面で
switch文が読みやすくなること
ここまでのコードを自分で書き換えながら試してみると、 「if / else if だけでなく、switch も選択肢として使える」という感覚が少しずつ育っていきます。 case を増やしたり、メッセージを自分なりにアレンジしたりして、遊びながら慣れていくのがおすすめです。
Day 8：switch文（後半）で「使いこなす感覚」を身につける
Day 8後半では、前半で学んだ switch / case / default を、もう一歩踏み込んで使いこなしていきます。 単なる「書き方の知識」から一歩進んで、安全性・読みやすさ・拡張しやすさを意識した switch 文の書き方を体験していきます。
switch文の挙動をもう少し深く理解する
breakを書かないとどうなるか（fall-through）
前半では「各 case の最後に break を書きましょう」と説明しましたが、 後半では「書かなかった場合に何が起きるか」も確認しておきます。
const value = 1;
switch (value) {
case 1:
console.log('value は 1 です');
// break をあえて書かない
case 2:
console.log('value は 2 です');
break;
default:
console.log('value は 1でも2でもありません');
}
この場合の出力は次のようになります。
value は 1 ですvalue は 2 です
case 1 に入ったあと、break がないために そのまま次の case 2 の処理も実行されてしまう のがポイントです。 これを fall-through（フォールスルー） と呼びます。
初心者のうちは、意図しないフォールスルーを防ぐためにも、基本的に各 case の最後に breakを書くと覚えておくと安全です。
複数の値を「まとめて同じ処理」にしたいとき
フォールスルーは、意図的に使うと便利な場面もあります。 たとえば、「1と2と3は同じグループとして扱いたい」という場合です。
const level = 2;
switch (level) {
case 1:
case 2:
case 3:
console.log('レベル1〜3：初心者向けコンテンツです。');
break;
case 4:
case 5:
console.log('レベル4〜5：中級者向けコンテンツです。');
break;
default:
console.log('それ以外のレベル：上級者向けコンテンツです。');
}
ここでは、case 1・case 2・case 3 にそれぞれ break を書かず、 「1〜3のどれでも同じ処理に落ちていく」ようにしています。
文字列にも使える switch文
switch 文は、数値だけでなく 文字列にも使えます。
const command = 'start';
switch (command) {
case 'start':
console.log('処理を開始します。');
break;
case 'stop':
console.log('処理を停止します。');
break;
case 'pause':
console.log('処理を一時停止します。');
break;
default:
console.log('不明なコマンドです。');
}
曜日判定やメニュー選択でも、「文字列で扱ったほうが自然」な場面が出てきますので、 後半では文字列版の例も交えていきます。
実践1：曜日判定を「入力付きミニアプリ」として作る
前半では「変数に直接値を入れてコンソールに出す」形でしたが、 後半では ユーザー入力を使ったミニアプリとして、曜日判定を作っていきます。
Step 1：HTMLで入力欄と結果表示エリアを用意する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 後半：曜日判定アプリ（switch文）</title>
</head>
<body>
<h1>曜日判定アプリ（switch文）</h1>
<!-- 曜日番号の入力欄 -->
<div>
<label for="dayInput">曜日番号を入力してください（0〜6）：</label>
<input id="dayInput" type="number" min="0" max="6" />
<button id="dayJudgeButton">判定する</button>
</div>
<!-- 判定結果表示エリア -->
<div style="margin-top: 16px;">
<h2>判定結果</h2>
<p id="dayResultText">ここに曜日判定の結果が表示されます。</p>
</div>
<script>
// ここに JavaScript のロジックを書いていきます
</script>
</body>
</html>
Step 2：JavaScriptで「ボタンが押されたら判定する」流れを作る
<script>
// HTML要素を取得します
const dayInput = document.getElementById('dayInput'); // 曜日番号入力欄
const dayJudgeButton = document.getElementById('dayJudgeButton'); // 判定ボタン
const dayResultText = document.getElementById('dayResultText'); // 結果表示エリア
// 判定ボタンがクリックされたときの処理を登録します
dayJudgeButton.addEventListener('click', () => {
console.log('曜日判定ボタンがクリックされました。');
const inputValue = dayInput.value; // 入力値（文字列）
// 1. 空入力チェック
if (inputValue === '') {
dayResultText.textContent = '曜日番号が入力されていません。0〜6の値を入力してください。';
return;
}
// 2. 数値に変換
const dayNumber = Number(inputValue);
// 3. 数値チェック
if (Number.isNaN(dayNumber)) {
dayResultText.textContent = 'エラー：曜日番号は数値で入力してください。';
return;
}
// 4. 範囲チェック
if (dayNumber < 0 || dayNumber > 6) {
dayResultText.textContent = 'エラー：曜日番号は 0 以上 6 以下で入力してください。';
return;
}
// ここから switch 文による曜日判定です
let message; // 表示するメッセージ
switch (dayNumber) {
case 0:
message = '今日は日曜日です。ゆっくり休みましょう。';
break;
case 1:
message = '今日は月曜日です。新しい週の始まりですね。';
break;
case 2:
message = '今日は火曜日です。少しペースが乗ってくる頃です。';
break;
case 3:
message = '今日は水曜日です。週の真ん中です。';
break;
case 4:
message = '今日は木曜日です。もう少しで週末です。';
break;
case 5:
message = '今日は金曜日です。週末目前です。';
break;
case 6:
message = '今日は土曜日です。自由な時間を楽しみましょう。';
break;
default:
// ここには通常来ませんが、安全のために書いておきます
message = '予期しない曜日番号です。';
}
// 結果を画面に表示します
dayResultText.textContent = `入力された曜日番号：${dayNumber} / メッセージ：${message}`;
});
</script>
重要ポイントの深掘り
- switch 文の前に「入力チェック（空・数値・範囲）」を行うことで、おかしな値が入ってきたときの安全性を高めています。
messageという変数に結果をまとめてから表示することで、 「判定ロジック」と「表示ロジック」を分けて考えやすくしています。defaultは通常到達しませんが、「予期しない値が来たときの保険」として書いておくと安心です。
実践2：メニュー選択を「文字列＋入力チェック付き」で作る
次に、メニュー選択をもう少し実践寄りにして、文字列の switch 文と入力チェックを組み合わせてみます。
Step 1：HTMLでメニュー入力欄を用意する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 後半：メニュー選択アプリ（switch文）</title>
</head>
<body>
<h1>メニュー選択アプリ（switch文）</h1>
<!-- メニュー入力欄 -->
<div>
<label for="menuInput">メニューを入力してください（ramen / curry / hamburger / salad）：</label>
<input id="menuInput" type="text" />
<button id="menuJudgeButton">選択する</button>
</div>
<!-- 判定結果表示エリア -->
<div style="margin-top: 16px;">
<h2>選択結果</h2>
<p id="menuResultText">ここにメニュー選択の結果が表示されます。</p>
</div>
<script>
// ここに JavaScript のロジックを書いていきます
</script>
</body>
</html>
Step 2：JavaScriptで文字列の switch 文を使う
<script>
// HTML要素を取得します
const menuInput = document.getElementById('menuInput'); // メニュー入力欄
const menuJudgeButton = document.getElementById('menuJudgeButton'); // 選択ボタン
const menuResultText = document.getElementById('menuResultText'); // 結果表示エリア
// ボタンがクリックされたときの処理
menuJudgeButton.addEventListener('click', () => {
console.log('メニュー選択ボタンがクリックされました。');
const rawInput = menuInput.value; // 入力値（文字列）
// 1. 空入力チェック
if (rawInput === '') {
menuResultText.textContent = 'メニューが入力されていません。値を入力してください。';
return;
}
// 2. 前後の空白を取り除き、小文字に統一します（入力ゆれ対策）
const input = rawInput.trim().toLowerCase();
console.log('整形後の入力値：', input);
let menuName; // メニュー名
let description; // 説明
// 3. 文字列に対する switch 文
switch (input) {
case 'ramen':
menuName = 'ラーメン';
description = 'あつあつのスープと麺をお楽しみください。';
break;
case 'curry':
menuName = 'カレー';
description = 'スパイスの効いたルーとご飯の組み合わせです。';
break;
case 'hamburger':
menuName = 'ハンバーグ';
description = 'ジューシーなお肉料理です。';
break;
case 'salad':
menuName = 'サラダ';
description = '野菜たっぷりのヘルシーメニューです。';
break;
default:
menuResultText.textContent = '入力されたメニューは一覧にありません。ramen / curry / hamburger / salad のいずれかを入力してください。';
return;
}
// 4. 結果を表示します
menuResultText.textContent = `メニュー：${menuName} / 説明：${description}`;
});
</script>
重要ポイントの深掘り
trim().toLowerCase()で、入力の前後の空白を削除し、小文字に統一しています。 → これにより、「Ramen」「 ramen 」などの入力ゆれに強くなります。- switch 文は文字列にも使えるため、「コマンド」「メニュー名」「状態名」などを扱う場面で便利です。
defaultでは、「有効な選択肢」を明示してあげると、ユーザーにとって親切なメッセージになります。
Day 8後半テンプレート：曜日判定＋メニュー選択の統合版
最後に、Day 8後半の内容をひとつにまとめたテンプレートを示します。 このファイルを保存してブラウザで開くと、曜日判定アプリとメニュー選択アプリが両方動きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 後半：switch文実践テンプレート</title>
</head>
<body>
<h1>Day 8 後半：switch文実践テンプレート</h1>
<!-- 曜日判定アプリ -->
<section style="margin-bottom: 32px;">
<h2>曜日判定アプリ</h2>
<div>
<label for="dayInput">曜日番号を入力してください（0〜6）：</label>
<input id="dayInput" type="number" min="0" max="6" />
<button id="dayJudgeButton">判定する</button>
</div>
<div style="margin-top: 16px;">
<h3>判定結果</h3>
<p id="dayResultText">ここに曜日判定の結果が表示されます。</p>
</div>
</section>
<!-- メニュー選択アプリ -->
<section>
<h2>メニュー選択アプリ</h2>
<div>
<label for="menuInput">メニューを入力してください（ramen / curry / hamburger / salad）：</label>
<input id="menuInput" type="text" />
<button id="menuJudgeButton">選択する</button>
</div>
<div style="margin-top: 16px;">
<h3>選択結果</h3>
<p id="menuResultText">ここにメニュー選択の結果が表示されます。</p>
</div>
</section>
<script>
// --- 曜日判定アプリのロジック ---
const dayInput = document.getElementById('dayInput');
const dayJudgeButton = document.getElementById('dayJudgeButton');
const dayResultText = document.getElementById('dayResultText');
dayJudgeButton.addEventListener('click', () => {
const inputValue = dayInput.value;
if (inputValue === '') {
dayResultText.textContent = '曜日番号が入力されていません。0〜6の値を入力してください。';
return;
}
const dayNumber = Number(inputValue);
if (Number.isNaN(dayNumber)) {
dayResultText.textContent = 'エラー：曜日番号は数値で入力してください。';
return;
}
if (dayNumber < 0 || dayNumber > 6) {
dayResultText.textContent = 'エラー：曜日番号は 0 以上 6 以下で入力してください。';
return;
}
let message;
switch (dayNumber) {
case 0:
message = '今日は日曜日です。ゆっくり休みましょう。';
break;
case 1:
message = '今日は月曜日です。新しい週の始まりですね。';
break;
case 2:
message = '今日は火曜日です。少しペースが乗ってくる頃です。';
break;
case 3:
message = '今日は水曜日です。週の真ん中です。';
break;
case 4:
message = '今日は木曜日です。もう少しで週末です。';
break;
case 5:
message = '今日は金曜日です。週末目前です。';
break;
case 6:
message = '今日は土曜日です。自由な時間を楽しみましょう。';
break;
default:
message = '予期しない曜日番号です。';
}
dayResultText.textContent = `入力された曜日番号：${dayNumber} / メッセージ：${message}`;
});
// --- メニュー選択アプリのロジック ---
const menuInput = document.getElementById('menuInput');
const menuJudgeButton = document.getElementById('menuJudgeButton');
const menuResultText = document.getElementById('menuResultText');
menuJudgeButton.addEventListener('click', () => {
const rawInput = menuInput.value;
if (rawInput === '') {
menuResultText.textContent = 'メニューが入力されていません。値を入力してください。';
return;
}
const input = rawInput.trim().toLowerCase();
let menuName;
let description;
switch (input) {
case 'ramen':
menuName = 'ラーメン';
description = 'あつあつのスープと麺をお楽しみください。';
break;
case 'curry':
menuName = 'カレー';
description = 'スパイスの効いたルーとご飯の組み合わせです。';
break;
case 'hamburger':
menuName = 'ハンバーグ';
description = 'ジューシーなお肉料理です。';
break;
case 'salad':
menuName = 'サラダ';
description = '野菜たっぷりのヘルシーメニューです。';
break;
default:
menuResultText.textContent = '入力されたメニューは一覧にありません。ramen / curry / hamburger / salad のいずれかを入力してください。';
return;
}
menuResultText.textContent = `メニュー：${menuName} / 説明：${description}`;
});
</script>
</body>
</html>
Day 8後半のまとめ
Day 8後半では、次のことを確認しました。
switch文の fall-through（フォールスルー） と、その意図的な活用方法- 数値だけでなく 文字列にも使える switch 文 の書き方
- 曜日判定アプリとメニュー選択アプリを通して、 「入力チェック → switch で分岐 → メッセージ表示」という一連の流れを体験したこと
ここまでのコードを自分で書き換えながら試してみると、 「if / else if だけでなく、switch を使って分岐を整理する」という感覚が、かなりはっきりしてくるはずです。 メニューや曜日のパターンを増やしたり、メッセージを自分なりにアレンジしたりして、遊びながら慣れていくのがおすすめです。
Day 8：switch文ミニ課題のゴールをイメージする
Day 8のミニ課題では、「曜日によってメッセージを変更する」プログラムを作っていきます。 ここまで学んだ switch / case / default を使って、曜日ごとに違うメッセージを表示するミニアプリを完成させることが目標です。
- 月曜日なら「今週もがんばろう」
- 金曜日なら「もうすぐ週末」
- 日曜日なら「ゆっくり休もう」
といったように、「同じ仕組みで、曜日ごとに違うメッセージ」を切り替えるイメージです。
switch / case / default をもう一度整理する
switch文の基本構造
まずは、今回のミニ課題で使う switch 文の基本形を確認します。
switch (値) {
case パターン1:
// 値がパターン1のときの処理
break;
case パターン2:
// 値がパターン2のときの処理
break;
default:
// どのパターンにも当てはまらないときの処理
}
switch (値)：分岐の対象となる値を指定します。case パターン:：その値がパターンに一致したときの処理を書きます。default:：どのcaseにも一致しなかったときの処理を書きます。break：そのcaseの処理を終えたら、switch 文を抜けるためのキーワードです。
今回のミニ課題では、この構造を「曜日」に対して使っていきます。
ミニ課題の仕様を言葉で整理する
どんな動きをするプログラムにするか
今回作るミニ課題の仕様を、いったん日本語で整理します。
- ユーザーが「曜日番号」を入力する
- 0：日曜日
- 1：月曜日
- 2：火曜日
- 3：水曜日
- 4：木曜日
- 5：金曜日
- 6：土曜日
- プログラムが
switch文で曜日番号を判定する - 曜日ごとに違うメッセージを表示する
- 日曜日：ゆっくり休もう
- 月曜日：今週もがんばろう
- 火曜日：少しペースが乗ってくる頃
- 水曜日：週の真ん中、折り返し地点
- 木曜日：もう少しで週末
- 金曜日：週末目前
- 土曜日：自由な時間を楽しもう
- 0〜6以外の値が入力された場合は、エラーメッセージを表示する
この仕様を、HTML＋JavaScriptで実装していきます。
Step 1：HTMLで「入力」と「結果表示」の枠を作る
まずは、ブラウザに表示される画面を作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 ミニ課題：曜日メッセージアプリ</title>
</head>
<body>
<h1>曜日によってメッセージを変更するアプリ</h1>
<!-- 曜日番号の入力フォーム -->
<div>
<label for="dayInput">曜日番号を入力してください（0〜6）：</label>
<input id="dayInput" type="number" min="0" max="6" />
<button id="dayMessageButton">メッセージを表示</button>
</div>
<!-- メッセージ表示エリア -->
<div style="margin-top: 16px;">
<h2>メッセージ</h2>
<p id="dayMessageText">ここに曜日に応じたメッセージが表示されます。</p>
</div>
<!-- このあとに JavaScript を書きます -->
<script>
// ここにロジックを書いていきます
</script>
</body>
</html>
ここでのポイント
input要素にtype="number"を指定して、数値入力に特化したフィールドにしています。id="dayInput"・id="dayMessageButton"・id="dayMessageText"は、JavaScriptから要素を取得するための「名前」です。- ボタンを押したときに、曜日番号を読み取り、メッセージを表示する流れを作っていきます。
Step 2：JavaScriptで「ボタンが押されたら処理する」流れを作る
次に、JavaScriptでイベント処理を組み立てます。
<script>
// HTML要素を取得します
const dayInput = document.getElementById('dayInput'); // 曜日番号入力欄
const dayMessageButton = document.getElementById('dayMessageButton'); // メッセージ表示ボタン
const dayMessageText = document.getElementById('dayMessageText'); // メッセージ表示エリア
// ボタンがクリックされたときの処理を登録します
dayMessageButton.addEventListener('click', () => {
console.log('メッセージ表示ボタンがクリックされました。');
// 入力された値を取得します（文字列として取得されます）
const inputValue = dayInput.value;
console.log('入力された曜日番号（文字列）：', inputValue);
// このあと、inputValue を使って曜日判定とメッセージ表示を行います
});
</script>
ここで意識してほしいこと
document.getElementById(...)で、HTMLの要素をJavaScriptから操作できるようにしています。addEventListener('click', () => { ... })で、「ボタンがクリックされたときに実行する処理」を登録しています。- まだ判定はしていませんが、「イベントが起きたら処理をする」という基本の流れができています。
Step 3：入力値をチェックしてから switch 文に渡す
安全なプログラムを書くために、おかしな入力を先に弾くことが大切です。 ここでは次のチェックを行います。
- 入力が空でないか
- 数値に変換できるか
- 0〜6の範囲に収まっているか
<script>
dayMessageButton.addEventListener('click', () => {
const inputValue = dayInput.value;
// 1. 空入力チェック
if (inputValue === '') {
dayMessageText.textContent = '曜日番号が入力されていません。0〜6の値を入力してください。';
return; // ここで処理を終了します
}
// 2. 数値に変換します
const dayNumber = Number(inputValue);
// 3. 数値チェック
if (Number.isNaN(dayNumber)) {
dayMessageText.textContent = 'エラー：曜日番号は数値で入力してください。';
return;
}
// 4. 範囲チェック
if (dayNumber < 0 || dayNumber > 6) {
dayMessageText.textContent = 'エラー：曜日番号は 0 以上 6 以下で入力してください。';
return;
}
// ここまで来たら、dayNumber は「妥当な曜日番号」です
console.log('妥当な曜日番号として処理を続行します：', dayNumber);
});
</script>
重要ポイントの深掘り
inputValue === ''で「何も入力されていない」状態を検出しています。Number(inputValue)で文字列を数値に変換しています。Number.isNaN(dayNumber)で「数値に変換できなかった」状態を検出しています。dayNumber < 0 || dayNumber > 6で「範囲外」をまとめてチェックしています。return;を使って、エラー時にはそれ以上処理を進めないようにしています。
Step 4：switch 文で曜日ごとのメッセージを切り替える
ここからがミニ課題の本体です。 switch 文を使って、曜日番号に応じたメッセージを切り替えます。
<script>
dayMessageButton.addEventListener('click', () => {
const inputValue = dayInput.value;
if (inputValue === '') {
dayMessageText.textContent = '曜日番号が入力されていません。0〜6の値を入力してください。';
return;
}
const dayNumber = Number(inputValue);
if (Number.isNaN(dayNumber)) {
dayMessageText.textContent = 'エラー：曜日番号は数値で入力してください。';
return;
}
if (dayNumber < 0 || dayNumber > 6) {
dayMessageText.textContent = 'エラー：曜日番号は 0 以上 6 以下で入力してください。';
return;
}
// --- ここから switch 文によるメッセージ切り替え ---
let message; // 曜日に応じたメッセージを入れる変数です
switch (dayNumber) {
case 0:
message = '今日は日曜日です。ゆっくり休みましょう。';
break;
case 1:
message = '今日は月曜日です。今週もがんばりましょう。';
break;
case 2:
message = '今日は火曜日です。少しペースが乗ってくる頃ですね。';
break;
case 3:
message = '今日は水曜日です。週の真ん中、折り返し地点です。';
break;
case 4:
message = '今日は木曜日です。もう少しで週末です。';
break;
case 5:
message = '今日は金曜日です。週末目前です。もうひと踏ん張り。';
break;
case 6:
message = '今日は土曜日です。自由な時間を楽しみましょう。';
break;
default:
// 通常ここには来ませんが、安全のために書いておきます
message = '予期しない曜日番号です。';
}
// メッセージを画面に表示します
dayMessageText.textContent = message;
});
</script>
ここで意識してほしいこと
switch (dayNumber)で、「dayNumber の値に応じてメッセージを切り替える」構造になっています。- 各
caseの中で、曜日ごとのメッセージをmessageに代入しています。 defaultは「通常は到達しないはずの値」に対する保険として書いています。- 最後に
dayMessageText.textContent = message;で、結果を画面に表示しています。
Step 5：完成版テンプレート
ここまでの内容をひとつにまとめた「完成版テンプレート」です。 このコードをそのままHTMLファイルとして保存し、ブラウザで開くと、 曜日によってメッセージを変更するミニアプリが動きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 8 ミニ課題：曜日メッセージアプリ</title>
</head>
<body>
<h1>曜日によってメッセージを変更するアプリ</h1>
<!-- 曜日番号の入力フォーム -->
<div>
<label for="dayInput">曜日番号を入力してください（0〜6）：</label>
<input id="dayInput" type="number" min="0" max="6" />
<button id="dayMessageButton">メッセージを表示</button>
</div>
<!-- メッセージ表示エリア -->
<div style="margin-top: 16px;">
<h2>メッセージ</h2>
<p id="dayMessageText">ここに曜日に応じたメッセージが表示されます。</p>
</div>
<script>
// HTML要素を取得します
const dayInput = document.getElementById('dayInput'); // 曜日番号入力欄
const dayMessageButton = document.getElementById('dayMessageButton'); // メッセージ表示ボタン
const dayMessageText = document.getElementById('dayMessageText'); // メッセージ表示エリア
// ボタンがクリックされたときの処理
dayMessageButton.addEventListener('click', () => {
console.log('メッセージ表示ボタンがクリックされました。');
const inputValue = dayInput.value;
console.log('入力された曜日番号（文字列）：', inputValue);
// 1. 空入力チェック
if (inputValue === '') {
dayMessageText.textContent = '曜日番号が入力されていません。0〜6の値を入力してください。';
return;
}
// 2. 数値に変換
const dayNumber = Number(inputValue);
// 3. 数値チェック
if (Number.isNaN(dayNumber)) {
dayMessageText.textContent = 'エラー：曜日番号は数値で入力してください。';
return;
}
// 4. 範囲チェック
if (dayNumber < 0 || dayNumber > 6) {
dayMessageText.textContent = 'エラー：曜日番号は 0 以上 6 以下で入力してください。';
return;
}
// 5. switch 文で曜日ごとのメッセージを決定
let message;
switch (dayNumber) {
case 0:
message = '今日は日曜日です。ゆっくり休みましょう。';
break;
case 1:
message = '今日は月曜日です。今週もがんばりましょう。';
break;
case 2:
message = '今日は火曜日です。少しペースが乗ってくる頃ですね。';
break;
case 3:
message = '今日は水曜日です。週の真ん中、折り返し地点です。';
break;
case 4:
message = '今日は木曜日です。もう少しで週末です。';
break;
case 5:
message = '今日は金曜日です。週末目前です。もうひと踏ん張り。';
break;
case 6:
message = '今日は土曜日です。自由な時間を楽しみましょう。';
break;
default:
message = '予期しない曜日番号です。';
}
// 6. メッセージを画面に表示
dayMessageText.textContent = message;
console.log('曜日メッセージの表示処理が完了しました。');
});
</script>
</body>
</html>
Day 8ミニ課題のまとめ
このミニ課題を通して、次のことを体験しました。
switch/case/defaultを使って、「ひとつの値に対して複数のパターンを切り替える」書き方を実践したこと- 入力チェック（空・数値・範囲）を組み込むことで、安全性の高いミニアプリにしたこと
- 曜日ごとにメッセージを変えることで、「ロジックとメッセージの関係」をコードで表現する感覚をつかんだこと
メッセージの内容を自分なりにアレンジしたり、 「平日と休日で別のスタイルにする」「曜日ごとに色を変える」など、 少しずつ機能を足していくと、switch 文の使い方がさらに身についていきます。
