プログラミングに挑戦しよう！

独学でWebアプリが作れる！
初心者におすすめの動画学習サービス

詳細はこちら

JavaScript初心者向け｜ボタンで夕食メニューをランダム表示する簡単ミニアプリの作り方

プログラミング学習

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

「JavaScriptで何か作ってみたい」「配列やイベント処理を実践的に学びたい」という方にぴったりの内容です。HTML/CSSの基礎を理解している方なら、すぐに動かせるコードになっています。

実際のコード付きで、基本文法の使い方を丁寧に説明していくので、JavaScript初心者の練習としてもおすすめです。

この記事は、HTML/CSS の基本を理解している人を対象にしています。
（HTMLやCSSの基礎が不安な方は、Udemyなどの入門講座から始めるのがおすすめです）

📚 「Udemyってなに？」という方はこちら
👉 独学でWebアプリが作れる！初心者におすすめのUdemy講座と学習のコツ

✅ 【デモあり】夕食献立アプリを実際に使ってみよう

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

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

今日の夕食は

✅ 【実践解説】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：ボタンを押したときの動きを作る

JavaScriptのコードは、基本的に</body>タグの直前に書くか、外部ファイルとして読み込みます。

外部ファイルを使う場合は、HTMLの</body>直前に次のように記述します。

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

もしHTMLファイル内に直接JavaScriptを書く場合は、src="..."の部分を削除して、<script>タグと</script>タグの間にコードを記述します。

以下は、今回のアプリの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];
});

このコードでは、配列menusにメニューの一覧を用意し、
ランダムなインデックスを計算してメニューを表示しています。

また、クリックイベントで新しいメニューをランダムに表示する仕組みです。

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];

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

📚 Math.random について詳しく知りたい方はこちら
👉 【JavaScript入門】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説

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 が新しく生成されるので、表示されるメニューが毎回変わるという仕組みです。

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

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

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

// 関数定義
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がグッと身近に感じられたかと思います。

「もっと本格的にJavaScriptを学んでみたい」
「Webアプリを自分で作れるようになりたい」

そんなふうに感じた方は、私が実際に受講したUdemyの講座もぜひチェックしてみてください👇

📘【世界で90万人が受講】Web Developer Bootcamp（日本語版）

※このリンクは広告です（アフィリエイトリンク）

Udemyで講座を見る

この講座では、

  • HTML / CSS の基本
  • JavaScript の基礎〜応用
  • Node.js や Express を使った本格的なWebアプリの作り方

まで幅広く学ぶことができます。

💸 セール情報
Udemyでは毎月のようにセールが開催されていて、90％オフになることも！
購入するなら、セール期間が断然おトクです。ぜひタイミングを見てチェックしてみてください。

✅ 関連リンク

📚 Udemyについて詳しく知りたい方はこちら
👉 独学でWebアプリが作れる！初心者におすすめのUdemy講座と学習のコツ

🍜 今回作ったアプリをバージョンアップ！条件分岐なども使ってます
👉 プログラミング独学で「外食メニュー提案アプリ」を作ってみた

🔴 もう少し簡単な勉強から始めたい方はこちら
👉 【JavaScript入門】ボタンをクリックして文字を変える方法をやさしく解説

タイトルとURLをコピーしました