- 投稿日：2026/02/18
- 更新日：2026/02/21
第2部：プログラミングの基礎（第3回〜第6回）シリーズ：ゼロから作る！はじめてのおみくじアプリ関数とランダム —「何が出るかわからない」を作ろう
今回のゴール
関数を使ってコードを整理する方法と、Math.random() を使って「ランダムな結果」を作る方法を学びます。 最後には、ボタンを押すと「今日のラッキーフード」がランダムに表示されるミニアプリを完成させます。
はじめに
前回の第5回では、if を使って「条件によって動きを変える」書き方を学びましたね。
今回は、プログラミングの基礎編の最終回です。ここで学ぶ 「関数」「配列」「ランダム」 の3つは、次の第7回から始まるおみくじアプリ開発で、そのまま使うことになります。
つまり今回は、おみくじアプリに向けた「最後の準備」のような回です。ひとつずつ丁寧に進めていきましょう。
まずは「練習用ファイル」を作りましょう
今回は新しいコードの書き方をいくつも学びます。それぞれ、実際にコードを書いて「動いた！」を確認しながら進めたいので、最初に練習用のHTMLファイルを1つ用意しておきましょう。
作業フォルダの中に practice.html というファイルを作り、以下のコードをまるごとコピペして保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第6回 練習用</title> <style> body { font-family: sans-serif; padding: 30px; background-color: #f5f5f5; } #output { font-size: 20px; background-color: white; padding: 20px; border-radius: 8px; min-height: 40px; white-space: pre-line; } </style> </head> <body> <h2>練習用</h2> <div id="output">ここに結果が表示されます</div> <script> // ▼ ここから下を書き換えて練習します ▼ function show(text) { document.getElementById("output").textContent += text + "\n"; } function clear() { document.getElementById("output").textContent = ""; } clear(); show("準備OK！この行が見えていれば成功です"); </script> </body> </html>
ブラウザで practice.html を開いて、画面に 「準備OK！この行が見えていれば成功です」 と表示されていればOKです。（↓こんな感じです！！）
このファイルの中には、あらかじめ show() という便利な関数を用意してあります。show("表示したい文字") と書くだけで、画面に結果を表示してくれます。clear() は画面を一度まっさらにする関数です。
これから先のコード例は、この <script> の中の clear(); より下を書き換えて、保存 → ブラウザ更新、という流れで試していきます。これまでと同じ操作なので安心してくださいね。
💡 Tips
今回の練習では show() を使って画面に結果を表示していますが、実際の開発現場では console.log() という命令がよく使われます。これはブラウザの「開発者ツール」という画面に結果を表示する、プログラマがよく使う確認方法です。実際の現場ではこちらの方がよく使われます。興味がある方は、console.log() をhtmlファイルに追加して、Chromeなら F12 キー → 「Console」タブで見られるので、余裕があるときに覗いてみてください。今回の練習では show() で画面に表示するので、覚えなくても大丈夫です。
<script> // ▼ ここから下を書き換えて練習します ▼ function show(text) { document.getElementById("output").textContent += text + "\n"; //↓こんな感じでconsole.logを追加します。
console.log(text); } function clear() { document.getElementById("output").textContent = ""; } clear(); show("準備OK！この行が見えていれば成功です"); </script>
console画面に出力されていることがわかりますね！
1. 関数とは何か —「処理のまとまり」に名前をつける
プログラムを書いていると、「同じような処理を何度も書いているな……」と感じることが出てきます。
たとえば、「あいさつを表示する処理」をページのあちこちで使いたいとき、毎回同じコードをコピペするのは大変ですし、あとから修正するときも全箇所を直す必要があります。
そこで登場するのが 関数（かんすう） です。
関数とは、「何度も使う処理をひとまとめにして、名前をつけたもの」 です。
料理にたとえると、「カレーのレシピ」のようなものです。レシピに名前をつけて書き留めておけば、作りたいときにそのレシピを見ればいい。毎回ゼロから手順を考え直す必要はありませんよね。
2. 関数の書き方と呼び出し方
さっそく、関数の基本的な書き方を見てみましょう。
関数を「定義する」（レシピを書く）
練習用ファイルの clear(); より下を、以下のように書き換えてみてください。
clear(); function sayHello() { show("こんにちは！"); }function sayHello() { console.log("こんにちは！"); }
このコードが何をしているか説明しますね。
・function は「これから関数を作りますよ」という宣言です
・sayHello は関数の名前です（自分で好きな名前をつけられます）
・() のカッコと {} の波カッコで処理の中身を囲みます
・波カッコ {} の中に、実行したい処理を書きます
保存してブラウザを更新しても、画面には何も表示されないはずです。関数を定義しただけでは、まだ何も起きません。 レシピを書いただけで、まだ料理を始めていない状態です。
（↑今はこんな感じで何も表示されないのが正常です！！）
関数を「呼び出す」（レシピを実行する）
先ほどのコードの下に、1行追加してみてください。
clear();function sayHello() { show("こんにちは！");}sayHello();
関数名のあとに () をつけて書くと、関数の中に書いた処理が実行されます。これを「関数を呼び出す」と言います。保存してブラウザを更新すると、画面に「こんにちは！」と表示されるはずです。
（↑やった！表示されました！！）
何度でも呼び出せるのが関数のいいところです。
clear(); function sayHello() { show("こんにちは！"); } sayHello(); sayHello(); sayHello();
こう書けば、「こんにちは！」が3回表示されます。
（↑元気がいいですね！）
3. 引数と戻り値 — 関数に「材料」を渡し、「結果」を受け取る
関数はもっと便利に使えます。「材料を渡して、結果を受け取る」 ことができるのです。
引数（ひきすう）— 関数に渡す材料
練習用ファイルの clear(); より下を、以下のように書き換えてみてください。
function sayHelloTo(name) { console.log(name + "さん、こんにちは！"); } sayHelloTo("田中"); sayHelloTo("佐藤");clear(); function sayHelloTo(name) { show(name + "さん、こんにちは！"); } sayHelloTo("田中"); sayHelloTo("佐藤");
このコードの流れを見てみましょう。
・(name) の部分が 引数（ひきすう） です。関数に渡す「材料」のことです
・sayHelloTo("田中") と呼び出すと、name に "田中" が入ります
・結果、画面に "田中さん、こんにちは！" と表示されます
引数を変えるだけで、同じ関数からいろんな結果が得られる。これが関数の便利さです。
ちなみに、コピペしたコードをキレイに表示したいよ～とお悩みのあなた！
以下のようにコピペした部分もろとも選択して、
「Ctrl + K」の同時押しからの「Ctr＋F」の同時押しをすることで…
コードがキレイになりました！
戻り値（もどりち）— 関数が返してくれる結果
続けて、clear(); より下を以下に書き換えてみてください。
clear(); function add(a, b) { return a + b; } let result = add(3, 5); show(result);
・return は「この値を関数の外に返す」という命令です
・add(3, 5) を呼び出すと、関数の中で 3 + 5 が計算され、8 が返ってきます
・その返ってきた値（＝戻り値）を result に入れて使っています
画面に 8 と表示されていれば成功です。引数が「材料」なら、戻り値は「完成品」です。材料を渡して、完成品を受け取る。関数はこの流れで動いています。
💡 Tips
関数で処理を分けることは、実際の開発現場では「コードの整理整頓」と呼ばれるくらい基本中の基本です。現場のプログラマは、1つの関数に何百行もの処理を書くことを嫌います。「この関数は○○をする」「あの関数は△△をする」と、役割ごとに小さく分けるのが良いコードの鉄則です。今ここで「処理に名前をつけてまとめる」感覚をつかんでおくと、そのまま現場でも通用しますよ。
4. 配列（Array）— データをリストにまとめる
ここで、もうひとつ新しい道具を紹介します。配列（はいれつ） です。
これまで変数には1つの値しか入れられませんでしたよね。
let fruit1 = "りんご"; let fruit2 = "バナナ"; let fruit3 = "みかん";
3つだけならまだいいですが、10個、100個となると大変です。
配列は、複数のデータをひとつにまとめて入れておける「リスト」 です。
const fruits = ["りんご", "バナナ", "みかん"];
[]（角カッコ）の中に、カンマ , で区切ってデータを並べるだけです。これで fruits という1つの変数に、3つのデータがまとめて入りました。
配列の中身を取り出す
配列の中の1つ1つのデータには「番号」がついています。ただし、番号は 0 から始まる というのがポイントです。
const fruits = ["りんご", "バナナ", "みかん"]; show(fruits[0]); show(fruits[1]); show(fruits[2]);
番号（インデックス）：中身
0：りんご
1：バナナ
2：みかん
「0から始まる」のは最初ちょっと違和感があるかもしれませんが、プログラミングの世界ではこれが標準です。すぐ慣れますので、安心してください。
show(fruits.length);
.length をつけると、配列に入っているデータの個数がわかります。今回の場合は3つなので 3 と表示されます。
5. Math.random() と Math.floor() —「ランダム」を作る仕組み
さあ、ここからが今回のハイライトです。
「何が出るかわからない」を作るために、JavaScriptに用意されている2つの道具を使います。
Math.random() — ランダムな小数を作る
clear(); show(Math.random()); show(Math.random()); show(Math.random());
Math.random() は、実行するたびに 0以上1未満のランダムな小数 を返します。
画面に3つの数字が表示されたはずですが、たとえばこんな感じの値になります。
0.7281940173... 0.1534920847... 0.9382018453...
保存してブラウザを更新するたびに値が変わることも確認してみてください。ただ、このままでは 0.728... のような小数なので、ちょっと使いにくいですよね。
ここでイメージしてみてください。Math.random() は 「0から1の間のどこかを、毎回ランダムに指さす」 ようなものです。
0 |---------●-----------| 1 ↑ ここをランダムに指さす（例：0.728...）
Math.floor() — 小数を整数に切り捨てる
続けて、clear(); より下を以下に書き換えてみてください。
clear(); show(Math.floor(3.7)); show(Math.floor(0.99)); show(Math.floor(2.0));
画面に 3、0、2 と表示されるはずです。
Math.floor() は、小数点以下を切り捨てて、整数にする 関数です。「floor」は「床」という意味で、「数字を床まで落とす（切り捨てる）」とイメージするとわかりやすいです。
2つを組み合わせて「配列からランダムに1つ選ぶ」
ここが今回の一番大事なポイントです。この2つを組み合わせると、配列からランダムに1つ選ぶことができます。
clear(); より下を以下に書き換えてみてください。
clear(); const fruits = ["りんご", "バナナ", "みかん"]; let index = Math.floor(Math.random() * fruits.length); show(fruits[index]);
ブラウザを更新するたびに、「りんご」「バナナ」「みかん」のどれかがランダムに表示されるはずです。何度か更新して確かめてみてください。
（↑リロードするたびに、表示が変わる…！？）
「えっ、何が起きてるの？」と思うかもしれないので、1ステップずつ分解してみましょう。
ステップ①：fruits.length → 3 配列の長さは3つです。
ステップ②：Math.random() * 3 たとえば Math.random() が 0.728 を返したとすると、0.728 × 3 = 2.184 になります。
これで「0以上3未満」の範囲のランダムな小数が得られました。
ステップ③：Math.floor(2.184) → 2 小数を切り捨てて整数にすると 2 になります。
ステップ④：fruits[2] → "みかん" 番号2は「みかん」なので、「みかん」が選ばれます。
全体をまとめると、こういう流れです。
Math.random() → 0.728（ランダムな小数） × fruits.length(3) → 2.184（0以上3未満の小数） Math.floor() → 2（整数に切り捨て） fruits[2] → "みかん"
この仕組みなら、結果は必ず 0、1、2 のどれかになるので、配列のどの要素もまんべんなく選ばれます。配列の中身が何個に増えても、fruits.length が自動で個数を取得してくれるので、同じ書き方でOKです。
6. 実践：「今日のラッキーフード」ミニアプリを作ろう
ここまでの知識を全部つなげて、ミニアプリを作ります。ボタンを押すと「今日のラッキーフード」がランダムに表示される、というものです。
おみくじアプリとほぼ同じ構造なので、ここでしっかり体験しておきましょう。
ファイルを準備する
ここからは練習用ファイルとは別に、新しいファイルを作ります。作業フォルダの中に index.html という名前でファイルを作ってください。（すでに同名のファイルがある場合は、上書きしてOKです）
完成コード
以下のコードを index.html にまるごとコピペしてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>今日のラッキーフード</title> <style> body { font-family: sans-serif; text-align: center; padding: 40px; background-color: #fff8f0; } h1 { color: #e07b39; font-size: 24px; } #result { font-size: 32px; margin: 30px 0; min-height: 50px; color: #333; } button { font-size: 18px; padding: 12px 32px; background-color: #e07b39; color: white; border: none; border-radius: 8px; cursor: pointer; } button:hover { background-color: #c96a2f; } </style> </head> <body> <h1>🍽 今日のラッキーフード</h1> <p>ボタンを押して、今日のラッキーフードを占いましょう！</p> <div id="result">？？？</div> <button onclick="showLuckyFood()">占う！</button> <script> // ラッキーフードの一覧（配列） const foods = ["カレー", "ラーメン", "お寿司", "パスタ", "焼肉", "サラダ", "オムライス"]; // ランダムにフードを選んで表示する関数 function showLuckyFood() { let index = Math.floor(Math.random() * foods.length); let selectedFood = foods[index]; document.getElementById("result").textContent = "🍀 " + selectedFood + " 🍀"; } </script> </body> </html>
コードの解説
それぞれの部分が何をしているか、順番に見ていきましょう。
HTML部分（画面の構造）
<h1>🍽 今日のラッキーフード</h1> <p>ボタンを押して、今日のラッキーフードを占いましょう！</p> <div id="result">？？？</div> <button onclick="showLuckyFood()">占う！</button>
タイトル、説明文、結果を表示するエリア、そしてボタンを配置しています。ボタンがクリックされたとき、showLuckyFood() という関数が呼び出される仕組みです。この onclick は前回も登場しましたね。
CSS部分（見た目の調整）
body { font-family: sans-serif; text-align: center; padding: 40px; background-color: #fff8f0; }
背景を温かみのあるクリーム色にし、文字を中央揃えにしています。ボタンにもオレンジ色を設定して、押したくなるデザインにしました。
JavaScript部分（動きの仕組み）
const foods = ["カレー", "ラーメン", "お寿司", "パスタ", "焼肉", "サラダ", "オムライス"]; function showLuckyFood() { let index = Math.floor(Math.random() * foods.length); let selectedFood = foods[index]; document.getElementById("result").textContent = "🍀 " + selectedFood + " 🍀"; }
ここが今回学んだことの集大成です。
１．foods という配列に、7つのラッキーフード候補を用意
２．showLuckyFood 関数の中で、Math.random() と Math.floor() を使ってランダムに1つ選ぶ
３．選んだフードを、画面の id="result" の部分に表示する
document.getElementById("result").textContent = ... の部分は、第5回でも登場した「HTMLの要素を書き換える」方法ですね。
動かしてみよう
ファイルを保存したら、ブラウザで index.html を開いてみてください。「占う！」ボタンを何度か押して、ランダムにフードが変わることを確認しましょう。
押すたびに結果が変わるはずです。これが「配列 × ランダム × 関数」の組み合わせの力です。
ラーメン大好き♡！！
7. ミニチャレンジ
チャレンジ①：配列の中身を自分好みに変えてみよう
foods の配列を、自分の好きなものに入れ替えてみてください。
たとえば、好きな映画のタイトルにしてみたり……
const foods = ["千と千尋の神隠し", "トトロ", "もののけ姫", "ラピュタ", "ハウル"];
好きなお菓子にしてみたり……
const foods = ["ポッキー", "じゃがりこ", "チョコパイ", "たけのこの里", "ハッピーターン"];
配列の中身を変えるだけで、まったく違うアプリに早変わりします。数は何個でもOKです。3個でも10個でも、自動でランダムに選んでくれます。
チャレンジ②：ページのタイトルや色を変えてみよう
<h1> のテキストや、CSSの background-color を変えて、自分だけのオリジナルアプリにしてみましょう。
たとえば、ラッキーカラー占いにアレンジするなら……
<h1>🎨 今日のラッキーカラー</h1>
const foods = ["赤", "青", "黄", "緑", "紫", "オレンジ", "ピンク"];
変数名が foods のままなのはちょっとおかしいですが、動作には影響しません。気になる方は colors に変えてみてもいい練習になりますよ。
💡 現場Tips
今やったように「変数名を中身に合ったものに変える」のは、現場では リファクタリング と呼ばれる作業の一部です。動作はそのまま、コードの読みやすさを改善する。地味ですが、チームで開発するときにはとても重要な作業です。「この変数、何が入ってるんだろう？」と迷わない名前をつけるのが、良いプログラマの第一歩です。
今回のまとめ
今回は、おみくじアプリを作るための最後のピースとなる3つの概念を学びました。
・関数：処理をひとまとめにして名前をつけたもの。function 名前() { ... } で定義し、名前() で呼び出す
・引数と戻り値：関数に「材料」を渡し（引数）、「結果」を受け取る（戻り値）ことができる
・配列：複数のデータを ["A", "B", "C"] のようにリストでまとめたもの。番号は 0 から始まる
・Math.random() と Math.floor()：この2つを組み合わせることで、配列からランダムに1つ選べる
そして、これらを全部組み合わせて「今日のラッキーフード」ミニアプリを作りました。
ここまでできた方、おめでとうございます。第2部「プログラミングの基礎」がこれで完了です。HTML・CSS・JavaScriptの基本的な道具は、もうひと通り手元に揃いました。
次回の予告
いよいよ次回からは 第3部「おみくじアプリ開発」 に入ります。
第7回では、今回作ったラッキーフードアプリの構造をベースに、おみくじの画面デザインを組み立てていきます。「大吉」「中吉」「小吉」……あの定番のおみくじが、自分の手で動き始める瞬間です。
ここまでの6回で学んだことが、全部つながっていく感覚を味わえるはずです。楽しみにしていてください。
第7回：おみくじアプリを作ろう（前編）— 画面を組み立てる
