5日目のゴールと今日のテーマ
5日目のテーマは「配列を“リスト”として扱い、ちょっとしたメニューアプリの形にすること」です。
ここまでで、変数・条件分岐・関数・配列・for 文をやってきました。今日はそこに、
文字列の配列（テキストのリスト）
簡単なメニュー表示prompt を使った超シンプルなユーザー入力
を足して、「超ミニ・メニューアプリ」を作るところまで行きます。
ゴールはこうです。
文字列の配列を「選択肢のリスト」として扱える。
for 文でメニューをきれいに表示できる。prompt で入力を受け取り、条件分岐で処理を変えられる。
ここまで行けたら、超初級5日目としてかなりいい仕上がりです。
文字列の配列を「メニュー」として扱う
配列は「数字」だけじゃなく「文字列」も持てる
4日目では、点数などの「数値の配列」を扱いました。
配列は、数値だけでなく文字列も普通に入れられます。
例えば、「今日やることリスト」を配列で持つとこうなります。
let todos = ["洗濯", "買い物", "勉強"];
console.log(todos); // ["洗濯", "買い物", "勉強"]
もちろん、インデックスで取り出すこともできます。
console.log(todos[0]); // 洗濯
console.log(todos[1]); // 買い物
console.log(todos[2]); // 勉強
ここで意識してほしいのは、「配列＝リスト」という感覚です。
「選択肢の一覧」「メニュー」「やることリスト」などは、全部配列で表現できます。
メニューっぽく表示してみる
配列を「メニュー」として表示してみましょう。
let menus = ["カレー", "ラーメン", "サラダ"];
console.log("今日のメニュー候補：");
console.log("1: " + menus[0]);
console.log("2: " + menus[1]);
console.log("3: " + menus[2]);
実行すると、こんな感じになります。
今日のメニュー候補：
1: カレー
2: ラーメン
3: サラダ
ここで一つ気づいてほしいのは、「表示上の番号は 1 から始まっているけど、配列のインデックスは 0 から」ということです。
この「人間向けの番号」と「プログラムのインデックス」のズレを意識できると、一気にレベルが上がります。
for 文でメニュー表示を自動化する
手書きの 1, 2, 3 をやめる
さっきのコードは、要素が3つだから手書きでも何とかなりました。
でも、メニューが5個、10個になったら、毎回 console.log を増やすのは大変です。
そこで、for 文の出番です。
let menus = ["カレー", "ラーメン", "サラダ", "オムライス"];
console.log("今日のメニュー候補：");
for (let i = 0; i < menus.length; i = i + 1) {
let number = i + 1;
console.log(number + ": " + menus[i]);
}
実行すると、こうなります。
今日のメニュー候補：
1: カレー
2: ラーメン
3: サラダ
4: オムライス
ここでの重要ポイントは二つです。
表示用の番号は i + 1 にしている（インデックス 0 → 表示 1）。menus.length を使っているので、配列の要素数が増えてもコードを変えなくていい。
この「配列の長さに合わせて for 文を回す」というパターンは、
リスト表示の基本中の基本です。
prompt でユーザーから入力を受け取る
prompt の基本的な使い方
ブラウザの console だけでも、簡単な入力を受け取ることができます。
それが prompt です。
let name = prompt("あなたの名前を入力してください：");
console.log("こんにちは、" + name + " さん！");
これを実行すると、小さなダイアログが出て、文字を入力できます。
入力して OK を押すと、その文字列が name に入ります。
ここでのポイントは、
prompt(...) は「ユーザーが入力した文字列を返す関数」のように振る舞う。
何も入力せずにキャンセルすると、null が返ることもある（超初級では「空かもしれない」くらいの意識でOK）。
ということです。
数字を入力させるときの注意点
prompt は、入力されたものを「文字列」として返します。
例えば、こう書いたとします。
let input = prompt("数字を入力してください：");
console.log(input + 1);
ここで 5 と入力すると、結果は 51 になります。
これは、「文字列の 5 に 1 をつなげて 51 になっている」からです。
数値として扱いたいときは、Number(...) で変換します。
let input = prompt("数字を入力してください：");
let num = Number(input);
console.log(num + 1);
これで、5 と入力したときに 6 になります。
メニューから選択させるミニアプリを作る
仕様を決める
ここまでの要素を組み合わせて、「メニューから選択させるミニアプリ」を作ってみましょう。
仕様はこうです。
メニューの配列を用意する。
for 文でメニュー一覧を表示する。prompt で「何番を選ぶか」を入力させる。
入力された番号に応じて、「あなたが選んだのは〜です」と表示する。
範囲外の番号や変な入力なら、「正しい番号を選んでください」と表示する。
これを、少しずつ組み立てていきます。
メニュー表示部分を関数にする
まずは、メニューを表示する関数を作ります。
function printMenu(menus) {
console.log("メニュー一覧：");
for (let i = 0; i < menus.length; i = i + 1) {
let number = i + 1;
console.log(number + ": " + menus[i]);
}
}
使い方はこうです。
let menus = ["カレー", "ラーメン", "サラダ", "オムライス"];
printMenu(menus);
これで、メニュー表示の部分はいつでも再利用できる「道具」になりました。
入力を受け取って、選択を判定する
次に、「選ばれた番号に応じてメッセージを出す」部分を書きます。
let menus = ["カレー", "ラーメン", "サラダ", "オムライス"];
printMenu(menus);
let input = prompt("食べたいメニューの番号を入力してください：");
let choice = Number(input);
if (choice >= 1 && choice <= menus.length) {
let index = choice - 1;
let selected = menus[index];
console.log("あなたが選んだのは「" + selected + "」です。");
} else {
console.log("1 から " + menus.length + " の番号を入力してください。");
}
ここでの重要ポイントを、丁寧に分解します。
choice は「人間向けの番号」（1〜メニュー数）。index は「配列向けの番号」（0〜メニュー数-1）。
だから index = choice - 1; として変換している。if (choice >= 1 && choice <= menus.length) で、「有効な番号かどうか」をチェックしている。
この「人間向けの番号」と「配列のインデックス」の変換は、
メニュー系のアプリで必ず出てくるパターンです。
ちょっとだけ発展：ループで何度も選ばせる
1回で終わらせず、何度も選べるようにする
今のコードは、「1回選んだら終わり」です。
少しだけ発展させて、「やめるまで何度も選べる」ようにしてみましょう。
仕様はこうです。
メニューを表示する。
番号を入力させる。
0 が入力されたら終了。
1〜メニュー数なら、そのメニューを表示して、またメニューに戻る。
それ以外なら「正しい番号を入力してください」と表示して、またメニューに戻る。
これを while 文で書いてみます。
let menus = ["カレー", "ラーメン", "サラダ", "オムライス"];
while (true) {
printMenu(menus);
console.log("0: 終了");
let input = prompt("食べたいメニューの番号を入力してください（0で終了）：");
let choice = Number(input);
if (choice === 0) {
console.log("終了します。");
break;
}
if (choice >= 1 && choice <= menus.length) {
let index = choice - 1;
let selected = menus[index];
console.log("あなたが選んだのは「" + selected + "」です。");
} else {
console.log("1 から " + menus.length + " の番号、または 0 を入力してください。");
}
}
ここでの深掘りポイントは、
while (true) は「ずっと繰り返す」という意味。break; が実行されたときに、ループが終了する。
「終了条件」を if の中に書いて、break で抜ける、というパターン。
この「無限ループ＋break」は、
「ユーザーがやめるまで続ける」タイプの処理でよく使われます。
5日目のまとめと、明日へのつなぎ
今日やったことを、言葉で整理します。
文字列の配列を「メニュー」「リスト」として扱えるようになった。
for 文で「番号付きのメニュー表示」ができるようになった。prompt でユーザーから入力を受け取り、Number(...) で数値に変換する感覚をつかんだ。
人間向けの番号（1〜）と配列のインデックス（0〜）を変換するパターンを体験した。
条件分岐で「有効な番号かどうか」をチェックし、メッセージを出し分けられた。
while 文＋break で、「やめるまで何度も選べる」ミニメニューアプリを作れた。
明日（6日目）は、ここに「オブジェクト（名前付きの情報のセット）」を足していきます。
そうすると、「メニュー名だけ」ではなく、「値段」「カテゴリ」などを一緒に持てるようになり、
一気に「アプリのデータ構造」がそれっぽくなってきます。
最後に一つだけ、ちゃんと聞きたい。
今日の中で、「あ、これちょっと楽しいな」と感じたのはどこでしたか？
メニューが番号付きでズラッと出た瞬間か、入力した番号に応じてメッセージが変わった瞬間か。
その「楽しい」と感じたところが、あなたと「インタラクティブなプログラム」の接点です。
そこを大事にしながら、6日目に進んでいきましょう。
