PR

夕食メニューをランダム表示！JavaScriptで作る簡単ミニアプリ

2025.06.09
【広告】

JavaScriptを勉強中の方へ。この記事では、配列、乱数（Math.random）、クリックイベント（addEventListener）を使って、「今日の夕食メニューをランダムで決めるミニアプリ」の作り方を解説します。

すぐに動くサンプルコードを試しながら、配列やイベント処理などのJavaScript基本文法を実践的に学べます。

初心者の方にもわかりやすいように、コード例を丁寧に解説しているので、JavaScriptの練習として最適です。

夕食献立アプリを実際に使ってみよう

下のミニアプリでは、夕食メニューがランダムに表示されます。
ページを再読み込みすると、毎回違うメニューが自動で選ばれます。

また、「チェンジ！」ボタンを押すと、ランダムに別の献立候補が表示される仕組みです。
気に入ったメニューが出るまで、何度でも試してみてください！

今日の夕食は

【実践解説】HTML/CSS/JavaScriptでランダム献立アプリを作ろう

それでは、実際にコードを書いて夕食献立アプリを作ってみましょう。
HTML・CSS・JavaScript を使って、「配列の使い方」や「ランダムな値の生成」など、JavaScriptの基本的なテクニックを学ぶことができます。

「ボタンを押すとランダムな献立が表示される」という小さな機能にも、Webアプリを動かすための大切な要素が詰まっています。

HTML：表示エリアとチェンジボタンを用意する

<div class="randomMenu">
  <p>
    今日の夕食は<br /><span id="displayMenu" class="displayMenu"></span>
  </p>
  <button id="changeBtn" class="changeBtn">チェンジ！</button>
</div>

上記のHTMLでは、「表示エリア」と「ボタン」を用意しています。
<span id="displayMenu">の部分にランダムなメニューが表示され、<button id="changeBtn">をクリックすると別のメニューに切り替わるしくみです。

1つの要素に id と class の両方を指定しているのは、JavaScriptで操作するために id を使い、CSSでスタイルをあてるために class を使うというのが一般的な使い方だからです。

CSS：見た目をきれいに整える

.randomMenu {
  max-width: 600px;
  width: 100%;
  margin: 30px auto;
  padding: 30px 0;
  text-align: center;
  border: 1px solid #ccc;
}
.randomMenu p {
  font-size: 1.5em;
}
.displayMenu {
  display: block;
  margin: 20px;
  font-size: 1.5em;
}
.changeBtn {
  color: #ffffff;
  background-color: #ff0000;
  padding: 10px 20px;
  font-size: 1.1em;
  cursor: pointer;
}
.changeBtn:hover {
  background-color: #cc0000;
}

CSSがなくてもアプリは動きますが、デフォルトの見た目では味気なく、使いづらい印象になります。
そこで、画面全体の中央寄せや余白の調整、文字サイズや色の設定など、最低限のスタイルを加えて見た目を整えています。

このスタイルはあくまで一例です。
ご自身の好みに合わせて色やサイズ、余白などを自由にカスタマイズしてみてください。

JavaScript：ボタンを押したときの動きを作る

Webサイトを作る際、JavaScriptのコードは主に2つの方法でHTMLに読み込ませます。

1. 外部ファイルとして読み込む方法

この方法が一般的で、おすすめの方法です。

JavaScriptのコードを「app.js」などの別のファイルに保存します。HTMLファイルには、そのファイルを読み込むためのタグを、</body>の直前に書くだけです。

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

このようにすることで、HTMLとJavaScriptの役割が分かれ、コードがスッキリして管理しやすくなります。

2. HTMLファイルに直接書く方法

少しだけJavaScriptを使いたい場合に便利な方法です。

srcの部分をなくして、<script>と</script>の間にJavaScriptのコードを直接書き込みます。

<script> // ここにJavaScriptのコードを書く </script>

どちらの方法でも、スクリプトタグは</body>の直前に置くのが一般的です。こうすることで、ページの内容がすべて読み込まれた後にJavaScriptが実行されるため、表示速度が速くなり、エラーも起きにくくなります。

以下は、今回のアプリのJavaScriptコード例です。

const menus = [
  'カレーライス',
  'ハンバーグ',
  'トンカツ',
  'パスタ',
  'から揚げ',
  '肉じゃが',
  'オムライス',
];
const displayMenu = document.querySelector('#displayMenu');
const changeBtn = document.querySelector('#changeBtn');

// ページ読み込み時にメニューをランダム表示
const index = Math.floor(Math.random() * menus.length);
displayMenu.textContent = menus[index];

// チェンジボタンがクリックされたらメニューをランダムに切り替える
changeBtn.addEventListener('click', () => {
  const index = Math.floor(Math.random() * menus.length);
  displayMenu.textContent = menus[index];
});

このコードは、いくつかの料理名をまとめたリストから、毎回ランダムで一つを選んで表示するためのものです。

ページを開いた時と、「チェンジ」ボタンを押した時に、料理のリストの中からサイコロを振るようにメニューをランダムに選び直して表示しています。

JavaScriptの配列を使ってメニューを一覧にしよう

const menus = [
  'カレーライス',
  'ハンバーグ',
  'トンカツ',
  'パスタ',
  'から揚げ',
  '肉じゃが',
  'オムライス',
];

こちらは menus という名前の配列です。

配列は複数のデータをまとめて管理できる便利な仕組みで、
メニューは自由に書き換えたり、増やしたり減らしたりできます。

配列全体は [ ]（角かっこ）で囲み、
それぞれの要素は ,（カンマ）で区切ります。

例えば、配列の中の2番目のメニューを取り出すには menus[1] と書きます。

JavaScriptの配列は番号が0から始まるため、
menus[1] は2番目の「ハンバーグ」を指します。

querySelectorでHTML要素を取得する方法

const displayMenu = document.querySelector('#displayMenu');
const changeBtn = document.querySelector('#changeBtn');

このプログラムでは、
id="displayMenu" の部分にメニューを表示し、
id="changeBtn" のボタンをクリックするとメニューが変わります。

そのため、JavaScriptでこの2つの要素を取得しています。

querySelector を使うと、指定したCSSセレクターに合う最初の要素を取得できます。

取得した要素は変わらないので、
const（定数）として変数に代入しています。

ページ読み込み時にメニューを表示するには？

const index = Math.floor(Math.random() * menus.length);
displayMenu.textContent = menus[index];

このコードは、ページを開いたときに最初に表示されるメニューを決めています。

  • Math.random() は「0以上1未満」のランダムな小数を返します。
  • menus.length は、配列 menus の要素数（この例では7）を表します。
  • Math.floor() は、小数点以下を切り捨てて整数にするメソッドです。

たとえば、Math.random() の結果が 0.4 だった場合：

0.4 × 7 = 2.8 → Math.floor(2.8) = 2

つまり、index は 2 になり、menus[2]（トンカツ）が表示されます。

別の例で Math.random() が 0.9 なら、6.3 → 6 なので menus[6]（オムライス）が表示されます。

displayMenu.textContent = menus[index];

この一行で、指定されたメニューが画面に表示されます。

【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説
JavaScript初心者向けに「Math.random()」の使い方をやさしく解説。0以上1未満のランダムな小数の生成から、整数のランダム抽選まで基本を丁寧に紹介。
dev.himadeshow.com
2025.06.07

addEventListenerでボタンをクリックできるようにしよう

changeBtn.addEventListener('click', () => {
  const index = Math.floor(Math.random() * menus.length);
  displayMenu.textContent = menus[index];
});

このコードは、changeBtn をクリックしたときの動きを定義しています。

  • addEventListener('click', …) は、「クリックされたときにこれを実行してね」という命令です。
  • 実行する中身は、初期表示とほとんど同じで、新しいメニューをランダムに表示する処理です。

処理の流れは次の通りです。

  1. Math.random() で「0以上1未満」の小数をランダムに生成
  2. それに menus.length（配列の要素数）を掛ける
  3. Math.floor() で小数点以下を切り捨てて整数に
  4. その index を使って menus[index] の値を取得
  5. 取得したメニューを displayMenu.textContent に表示

ボタンを押すたびに index が新しく生成されるので、表示されるメニューが毎回変わるという仕組みです。

【JavaScript】ボタンをクリックして文字を変える方法をやさしく解説
ボタンを押すと文字が変わる。JavaScriptの超基本を初心者向けにやさしく紹介。すぐに試せるサンプル付き！
dev.himadeshow.com
2025.05.30

関数にまとめてコードを見やすくしよう

ここまででアプリとしてはすでに完成していますが、おまけとして「関数」を使ってコードを整理する方法を紹介します。

初期表示の処理と、ボタンクリック時の処理は同じ内容なので、共通の処理を関数としてまとめるのが一般的です。

// 関数定義
function selectMenu() {
  const index = Math.floor(Math.random() * menus.length);
  displayMenu.textContent = menus[index];
}

このように selectMenu という関数を定義しておきます。

中身はこれまでと同じで、メニューの中からランダムにひとつを選び、それを画面に表示する処理です。

定義した関数は、次のように使いたい場面で呼び出して使います。

// ページ読み込み時にメニューをランダム表示
selectMenu();

// チェンジボタンがクリックされたらメニューをランダムに切り替える
changeBtn.addEventListener('click', selectMenu);

selectMenu(); のように かっこ（()）をつけると、その場ですぐに関数が実行されます。

addEventListener('click', selectMenu); のように かっこをつけないと、「クリックされたら実行するよ」という意味になります。

関数はコードをスッキリさせてくれる便利なしくみですが、最初は難しく感じるかもしれません。

初心者のうちは無理に使う必要はありません。少しずつ慣れていきましょう。

【JavaScript】functionを使った関数定義をアロー関数に変える方法
JavaScriptの関数定義を、従来のfunction構文からアロー関数に書き換える方法を紹介します。同じ意味で使えるシンプルな書き換え例なので、備忘録としてもおすすめです。
dev.himadeshow.com
2025.07.31

【広告】
タイトルとURLをコピーしました