- 投稿日：2026/02/21
今回のゴール
第7回で作ったおみくじの画面に、JavaScriptで「おみくじを引く動き」を組み込んで、実際に動くアプリにします。
前回まではきれいな見た目を作りましたが、ボタンを押しても何も起きない状態でしたよね。今回はここに JavaScript を書き加えて、ボタンを押すとランダムに結果が出る――あの「おみくじ」の体験を実現します。
第2部（第3回〜第6回）で学んだ配列・ランダム・関数・if文のすべてが登場するので、知識の総まとめにもなります。「あ、これ前にやったやつだ！」という瞬間をぜひ楽しんでください。
まずは前回までのおさらい
手を動かす前に、今回のカギになる知識をさっと復習しておきましょう。
配列（第６回で学びましたね）
const fruits = ["りんご", "バナナ", "みかん"];
複数のデータをひとまとめにして入れておける箱のようなものでした。
ランダムな数を作る（第6回で学びました）
const index = Math.floor(Math.random() * 配列の長さ);
Math.random() で 0〜1 未満の小数を作り、Math.floor() で小数点以下を切り捨てて整数にする。これで「配列の中からランダムに1つ選ぶ」番号が手に入ります。
関数（第４回で学びました）
function sayHello() { console.log("こんにちは！"); }
「やりたい処理をひとまとめにして、好きなタイミングで呼び出せる仕組み」でしたね。
if文（第５回で学びました）
if (条件) { // 条件に合うときの処理 } else { // 合わないときの処理 }
条件によって処理を分岐させるための構文です。
これらを全部組み合わせると、おみくじアプリのロジックが完成します。ここまで学んできた内容だけで作れるというのが、今回のポイントです。
第7回で作ったファイルを確認しよう
まずは前回作ったファイルを開いてください。フォルダの中に index.html と style.css の2つがあるはずです。
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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="title">おみくじ</h1> <div class="result-area"> <p class="result-text">ここに結果が出ます</p> </div> <button class="draw-button">おみくじを引く</button> </div> </body> </html>
style.css は前回作ったものがそのまま残っているはずです。今回はCSSファイルには基本的に触れず、JavaScriptのファイルを新しく作ることに集中します。
HTMLファイル、CSSファイル、そして今回作るJavaScriptファイル。この3つがそれぞれの役割を持って連携する――これがWeb開発の基本的な形です。
ステップ1：JavaScriptファイルを作ってHTMLに読み込む
まずは、JavaScriptを書くためのファイルを新しく作りましょう。
index.html と style.css が入っているのと同じフォルダに、script.js という名前の新しいファイルを作成してください。中身はまだ空っぽで大丈夫です。
次に、index.html を開いて、この script.js を読み込む記述を追加します。</body> タグの直前に、以下の1行を追加してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>おみくじアプリ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="title">おみくじ</h1> <div class="result-area"> <p class="result-text">ここに結果が出ます</p> </div> <button class="draw-button">おみくじを引く</button> </div> <script src="script.js"></script> </body> </html>
追加したのは <script src="script.js"></script> の1行です。
第7回で <link rel="stylesheet" href="style.css"> と書いてCSSファイルを読み込んだのと同じ考え方ですね。今度は <script> タグで、JavaScriptファイルを読み込んでいます。
CSSは <head> の中に書きましたが、JavaScriptは </body> の直前に書くのが基本です。これは、HTMLの要素がすべて読み込まれたあとにJavaScriptを実行するためです。順番が逆だと、まだ画面にない要素を操作しようとしてエラーになることがあります。
この時点ではまだ画面に変化はありません。でも大丈夫、一歩ずつ進めていきましょう。
ステップ2：おみくじの結果を配列で用意する
それでは script.js を開いて、JavaScriptを書いていきましょう。まずは、おみくじの結果一覧を配列で定義します。
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];
第6回で学んだ配列ですね。おみくじで出る結果を、文字列の配列としてまとめて入れています。ここに入っている6つの中から、毎回ランダムに1つが選ばれる仕組みを作っていきます。
ステップ3：ボタンを押したら結果を表示する関数を作る
次に、「おみくじを引く」ボタンが押されたときに実行される関数を作ります。
script.js に以下のコードを追加してください（さっき書いた配列の下に続けます）。
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * results.length); const myResult = results[index]; // 画面に結果を表示する document.querySelector(".result-text").textContent = myResult; }
ここで何をしているか、順番に見ていきましょう。
Math.floor(Math.random() * results.length) は、第6回で練習した「配列からランダムに1つ選ぶ」パターンそのものです。results.length は配列の要素数（今回は6）なので、0〜5のどれかの数字がランダムに生成されます。
results[index] で、その番号に対応する結果（"大吉" や "凶" など）を取り出しています。
document.querySelector(".result-text") は、HTMLの中から class="result-text" がついた要素を探してくる命令です。そこに .textContent = myResult とすることで、表示されているテキストを書き換えています。
💡 document.querySelector() について
これは「HTMLの中から、指定したセレクタに合う最初の要素を見つけてくる」ための命令です。第7回のCSSで .result-text { ... } のように書いたのを覚えていますか？ あのCSSセレクタと同じ書き方で、JavaScriptからも要素を探せるのです。クラス名で探すときは .クラス名、タグ名で探すときはそのまま タグ名 と書きます。
ステップ4：ボタンと関数をつなげる
関数は作りましたが、まだボタンと結びついていません。ボタンが押されたときに drawOmikuji() が実行されるように、イベントリスナー（「○○が起きたら△△を実行してね」という設定）を追加しましょう。
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * results.length); const myResult = results[index]; // 画面に結果を表示する document.querySelector(".result-text").textContent = myResult; } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);
最後の1行が新しい部分です。
document.querySelector(".draw-button") で、HTMLの中にある「おみくじを引く」ボタンを探しています。そこに .addEventListener("click", drawOmikuji) をつけることで、「クリックされたら drawOmikuji 関数を実行してね」という設定をしています。
ひとつ注意点があります。drawOmikuji() と丸カッコ付きではなく、drawOmikuji とカッコなしで書いているところです。カッコを付けると「今すぐ実行」になってしまい、クリックを待たずに動いてしまいます。ここでは「この関数を、あとでクリックされたときに呼んでね」と登録しているだけなので、カッコは付けません。
動かしてみよう！
ファイルを保存して、ブラウザで index.html を開いてみてください（すでに開いている場合はページをリロードします）。
「おみくじを引く」ボタンを押してみてください。
「ここに結果が出ます」だった部分が「大吉」や「凶」などに変わりましたか？ 何度か押すと、ランダムに違う結果が出るはずです。
おめでとうございます！ おみくじが動きました！
まだ見た目はシンプルですが、「ボタンを押す → ランダムに結果が選ばれる → 画面に表示される」という、アプリとしての核になる部分がもう完成しています。ここまでできたのは大きな一歩です。
💡 Tips
今やったように「まず最小限の機能だけ作って、動くことを確認する」というのは、実際の開発現場でも鉄則です。プロの現場では「スモールステップで作って、こまめに動作確認」が基本中の基本。一気に全部作ってから一気にテストすると、うまく動かなかったときにどこが原因なのか分からなくなります。「少し書く → 動かす → 少し書く → 動かす」のリズムを、ぜひこの先も大事にしてください。
ステップ5：メッセージ表示用の要素をHTMLに追加する
おみくじが動くようになったので、ここからは体験をもっとリッチにしていきましょう。結果に合わせて、ひとことメッセージを表示する機能を追加します。
ただ、今のHTMLにはメッセージを表示する場所がありません。まずは index.html に要素を1つ追加しましょう。
index.html の result-area の中に、メッセージ用の <p> タグを追加します。
<div class="result-area"> <p class="result-text">ここに結果が出ます</p> <p class="message-text"></p> </div>
class="message-text" という空の <p> タグを追加しました。最初は何も表示されませんが、JavaScriptからここにメッセージを書き込みます。
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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="title">おみくじ</h1> <div class="result-area"> <p class="result-text">ここに結果が出ます</p> <p class="message-text"></p> </div> <button class="draw-button">おみくじを引く</button> </div> <script src="script.js"></script> </body> </html>
CSSも少し調整しよう
ここで1つ、CSSの調整が必要です。前回作った .result-area には display: flex という設定が入っていたのを覚えていますか？ この設定のままだと、中の要素が横並びになってしまいます。結果テキストとメッセージを縦に並べたいので、並ぶ方向を変える指定を追加しましょう。
style.css の .result-area のブロックを、以下のように書き換えてください。
/* ===== 結果表示エリア ===== */ .result-area { background-color: #fff8f0; border: 1px solid #e0d5c1; border-radius: 8px; padding: 30px 20px; margin-bottom: 30px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
変更したのは2か所です。
flex-direction: column を追加しました。display: flex は第7回で「中の要素を整列させる」ために使いましたが、初期状態では横並びです。flex-direction: column を加えると、縦方向に並ぶようになります。これで結果テキストとメッセージが上下に配置されます。
min-height を 60px から 120px に変更しました。結果とメッセージの2行が入るので、少し高さに余裕を持たせています。
あわせて、おみくじの結果が大きく目立つように .result-text のスタイルも調整しましょう。
.result-text { font-size: 48px; color: #5a4a3a; margin: 0; }
font-size を 20px から 48px に変更しました。おみくじの結果は画面の主役なので、大きく表示するとグッとアプリらしくなります。
最後に、メッセージ用のスタイルを style.css の末尾に追加してください。
/* ===== メッセージ ===== */ .message-text { font-size: 17px; color: #8b7e6a; margin: 12px 0 0; }
メッセージは結果の補足なので、控えめなサイズと落ち着いた色にしています。
ステップ6：結果に応じてメッセージを変える
HTMLの準備ができたので、JavaScriptに戻りましょう。ここで使うのが、第4回で学んだ if文 です。
script.js の drawOmikuji 関数を、以下のように書き換えてください。
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * results.length); const myResult = results[index]; // 画面に結果を表示する document.querySelector(".result-text").textContent = myResult; // 結果に応じてメッセージを変える let messageText = ""; if (myResult === "大吉") { messageText = "最高の運勢です！何をやってもうまくいく日！"; } else if (myResult === "中吉") { messageText = "なかなかいい感じ！積極的にいきましょう！"; } else if (myResult === "小吉") { messageText = "小さな幸せが見つかる日です。"; } else if (myResult === "吉") { messageText = "穏やかな良い一日になりそうです。"; } else if (myResult === "末吉") { messageText = "じわじわと運気が上がっていきますよ。"; } else if (myResult === "凶") { messageText = "今日はのんびり過ごすのが吉かも。"; } document.querySelector(".message-text").textContent = messageText; } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);
if ... else if ... else if ... で、結果ごとに表示するメッセージを分岐させています。第4回では「点数が80点以上なら〜」という例で練習しましたが、今度は「文字列が一致するかどうか」で分岐しているのがポイントです。やっていることの構造は同じですね。
let messageText = "" の let は、あとから値を書き換えるための変数宣言です。const は一度決めたら変えられませんが、let は上書きできます。if文の中で値を代入し直すので、ここでは let を使っています。
保存してブラウザをリロードし、何度かボタンを押してみてください。結果に応じて下のメッセージも変わるようになったはずです。
ステップ7：結果に応じて色を変える
最後の仕上げです。大吉なら金色、凶なら青色…というふうに、結果に応じてテキストの色も変えてみましょう。if文の中に、色を変えるコードを追加します。
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * results.length); const myResult = results[index]; // 画面に結果を表示する const resultElement = document.querySelector(".result-text"); resultElement.textContent = myResult; // 結果に応じてメッセージと色を変える let messageText = ""; let resultColor = ""; if (myResult === "大吉") { messageText = "最高の運勢です！何をやってもうまくいく日！"; resultColor = "#DAA520"; } else if (myResult === "中吉") { messageText = "なかなかいい感じ！積極的にいきましょう！"; resultColor = "#FF8C00"; } else if (myResult === "小吉") { messageText = "小さな幸せが見つかる日です。"; resultColor = "#F4A460"; } else if (myResult === "吉") { messageText = "穏やかな良い一日になりそうです。"; resultColor = "#66BB6A"; } else if (myResult === "末吉") { messageText = "じわじわと運気が上がっていきますよ。"; resultColor = "#78909C"; } else if (myResult === "凶") { messageText = "今日はのんびり過ごすのが吉かも。"; resultColor = "#5C6BC0"; } document.querySelector(".message-text").textContent = messageText; resultElement.style.color = resultColor; } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);
追加・変更したポイントを見ていきましょう。
const resultElement = document.querySelector(".result-text") で、結果表示の要素を変数に入れています。同じ要素に対して「テキストを変える」「色を変える」と複数回操作するので、変数にまとめておくとスッキリ書けます。
resultElement.style.color = resultColor で、テキストの色をJavaScriptから変更しています。CSSで color: red; と書くのと同じことを、JavaScriptで動的にやっているわけです。
色のコードについて — #DAA520 のような値はカラーコードと呼ばれるもので、色を16進数で表現しています。今回使っている色の対応は以下のとおりです。
結果 色のイメージ カラーコード
大吉 金色（ゴールド）#DAA520
中吉 濃いオレンジ #FF8C00
小吉 やわらかいオレンジ #F4A460
吉 緑 #66BB6A
末吉 グレー#78909C
凶 青紫 #5C6BC0
動かしてみよう！
保存してブラウザをリロードし、何度もボタンを押してみてください。結果ごとに文字の色が変わるようになったはずです。大吉の金色が出ると、ちょっとうれしくなりませんか？
完成コード全体
ここまでのコードをすべてまとめたものを掲載します。もし途中で迷ったら、これを丸ごとコピーして使ってください。
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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="title">おみくじ</h1> <div class="result-area"> <p class="result-text">ここに結果が出ます</p> <p class="message-text"></p> </div> <button class="draw-button">おみくじを引く</button> </div> <script src="script.js"></script> </body> </html>
style.css
/* ===== 全体の設定 ===== */ body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #fdf5e6; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; } /* ===== カード全体 ===== */ .container { text-align: center; background-color: #fffef9; padding: 40px 50px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 2px solid #c1272d; max-width: 360px; width: 90%; } /* ===== タイトル ===== */ .title { color: #c1272d; font-size: 32px; margin-bottom: 30px; letter-spacing: 8px; } /* ===== 結果表示エリア ===== */ .result-area { background-color: #fff8f0; border: 1px solid #e0d5c1; border-radius: 8px; padding: 30px 20px; margin-bottom: 30px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .result-text { font-size: 48px; color: #5a4a3a; margin: 0; } /* ===== メッセージ ===== */ .message-text { font-size: 16px; color: #8b7e6a; margin: 12px 0 0; } /* ===== ボタン ===== */ .draw-button { background-color: #c1272d; color: #fff; border: none; padding: 14px 40px; font-size: 18px; border-radius: 8px; cursor: pointer; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: 2px; transition: background-color 0.3s; } .draw-button:hover { background-color: #a01f24; }
script.js
// おみくじの結果リスト const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * results.length); const myResult = results[index]; // 画面に結果を表示する const resultElement = document.querySelector(".result-text"); resultElement.textContent = myResult; // 結果に応じてメッセージと色を変える let messageText = ""; let resultColor = ""; if (myResult === "大吉") { messageText = "最高の運勢です！何をやってもうまくいく日！"; resultColor = "#DAA520"; } else if (myResult === "中吉") { messageText = "なかなかいい感じ！積極的にいきましょう！"; resultColor = "#FF8C00"; } else if (myResult === "小吉") { messageText = "小さな幸せが見つかる日です。"; resultColor = "#F4A460"; } else if (myResult === "吉") { messageText = "穏やかな良い一日になりそうです。"; resultColor = "#66BB6A"; } else if (myResult === "末吉") { messageText = "じわじわと運気が上がっていきますよ。"; resultColor = "#78909C"; } else if (myResult === "凶") { messageText = "今日はのんびり過ごすのが吉かも。"; resultColor = "#5C6BC0"; } document.querySelector(".message-text").textContent = messageText; resultElement.style.color = resultColor; } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);
ここを変えてみよう！ ミニチャレンジ
動くようになったところで、少し遊んでみましょう。
チャレンジ①：おみくじの結果を増やしてみよう
配列 results に、自分のオリジナルの結果を追加してみてください。
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶", "超大吉", "大凶"];
結果を増やしたら、その結果に対応する else if のブロックも追加するのを忘れずに。
} else if (myResult === "超大吉") { messageText = "奇跡の運勢！宝くじを買うべきかも！？"; resultColor = "#FF1744"; } else if (myResult === "大凶") { messageText = "厄落としに甘いものでも食べましょう。"; resultColor = "#37474F"; }
配列に要素を追加するだけでランダム選択の対象が増えるのが、配列のいいところです。results.length が自動的に新しい要素数を反映してくれるので、ランダム選択のコードを変える必要がありません。
チャレンジ②：色やメッセージを自分好みに変えてみよう
カラーコードやメッセージの文面は、好きなように変更できます。「自分だけのおみくじ」にカスタマイズしてみてください。
カラーコードを探すときは、ブラウザで「カラーコード 一覧」と検索すると、色見本のサイトがたくさん見つかります。好きな色の # から始まるコードをコピーして使ってみましょう。
💡Tips
今回、結果ごとに色やメッセージを if ... else if で分岐させましたが、実務ではこのような「データと表示の対応」が増えてくると、もっとスマートな書き方をすることもあります（オブジェクトでまとめて管理するなど）。ただ、if文での分岐はあらゆるプログラミングの基本なので、まずはこの書き方をしっかり使えるようになることが大切です。リファクタリング（コードをきれいに整理すること）は、動くものを作ったあとでいくらでもできますから。
今回のまとめ
今回やったことを整理しましょう。
おみくじの結果を配列で定義した（第5回の知識）ランダムに1つ選ぶロジックを書いた（第6回の知識）ボタンクリック時に実行される関数を作った（第6回の知識）document.querySelector() でHTMLの要素を取得して、テキストや色をJavaScriptから書き換えた結果に応じて表示を変えるif文を使った（第4回の知識）HTML・CSS・JavaScriptの3つのファイルを連携させてアプリを動かした
第2部で学んできた知識がすべてつながって、1つのアプリとして動き出しました。「配列」「ランダム」「関数」「if文」――それぞれバラバラに練習していたものが、こうやって組み合わさると、ちゃんとしたアプリケーションになるんですね。
ここまで来られたこと、自信を持ってください。
次回予告
次回の第9回（最終回）では、おみくじアプリの見た目をさらに磨いて完成させます。
結果が出るときにアニメーションをつけたり、デザインを整えたりして、人に見せたくなるようなアプリに仕上げていきます。このシリーズの締めくくりとして、「自分で作った」と胸を張れる作品にしましょう。
お楽しみに！
