// おみくじの結果リスト 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);

このコードはちゃんと動きます。前回の時点で動作確認もできていますね。

でも、ちょっとこのコードを眺めてみてください。if文の部分が、結構長くありませんか？　今は6種類ですが、もし「大凶」「超大吉」など結果を増やしたいと思ったら、そのたびに else if のブロックを書き足していく必要があります。

「動くけど、もう少しうまく書けそう」――そう感じたら、整理するチャンスです。

2. コードを整理しよう：リファクタリング入門

リファクタリングとは？

過去のTipsでちらっと出てきた言葉ですね。リファクタリングとは、「プログラムの動きは変えずに、コードの書き方を整理すること」です。

部屋の模様替えに似ています。住んでいる部屋は同じだけど、家具の配置を見直すともっと使いやすくなる。コードも同じで、動作は変えないまま、あとから読みやすく・変更しやすくできます。

大事なのは順番です。「まず動くものを作る → そのあときれいにする」。前回やったのが前半、今回やるのが後半です。最初から完璧なコードを書こうとする必要はありません。

何を整理するのか

今回整理したいのは、if文でバラバラに書かれている「結果ごとのデータ」です。

現状のコードでは、結果名は results 配列に、メッセージと色は if ... else if の中にあります。おみくじ1つぶんの情報が、コードのあちこちに散らばっている状態ですね。

これを1箇所にまとめて管理するのが、今回のリファクタリングのゴールです。

オブジェクト配列：データをまとめる書き方

前回までの配列は、こうでした。

const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];

これは「文字だけのリスト」です。ここにメッセージや色も一緒に持たせたい場合、こう書きます。（※今回のおみくじのように"データの種類が違うだけで処理は同じ"というパターンでは、学習がてら、このような書き方に挑戦するのによいです！）

const fortunes = [ { result: "大吉", message: "最高の運勢です！何をやってもうまくいく日！", color: "#DAA520" }, { result: "中吉", message: "なかなかいい感じ！積極的にいきましょう！", color: "#FF8C00" }, { result: "小吉", message: "小さな幸せが見つかる日です。", color: "#F4A460" }, { result: "吉", message: "穏やかな良い一日になりそうです。", color: "#66BB6A" }, { result: "末吉", message: "じわじわと運気が上がっていきますよ。", color: "#78909C" }, { result: "凶", message: "今日はのんびり過ごすのが吉かも。", color: "#5C6BC0" }, ];

{ } で囲まれた一つひとつがオブジェクトと呼ばれるもので、「名前つきのデータのまとまり」です。result、message、color のように、名前（キー）と値のペアでデータを持てます。

そのオブジェクトが配列の中にずらっと並んでいるので、「オブジェクト配列」と呼びます。配列の進化系だと思ってもらえればOKです。

取り出し方も簡単です。たとえば1番目（インデックス0）の情報を取り出すなら、こう書きます。

fortunes[0].result // → "大吉" fortunes[0].message // → "最高の運勢です！何をやってもうまくいく日！" fortunes[0].color // → "#DAA520"

配列の番号で「どのおみくじか」を選び、ドット（.）のあとに名前を書いて「そのおみくじのどの情報か」を指定する。これだけです。

script.js を書き換えよう

それでは実際に書き換えてみましょう。script.js の中身をまるごと以下のコードに置き換えてください。

script.js（リファクタリング後）

// おみくじのデータ（結果・メッセージ・色をまとめて管理） const fortunes = [ { result: "大吉", message: "最高の運勢です！何をやってもうまくいく日！", color: "#DAA520" }, { result: "中吉", message: "なかなかいい感じ！積極的にいきましょう！", color: "#FF8C00" }, { result: "小吉", message: "小さな幸せが見つかる日です。", color: "#F4A460" }, { result: "吉", message: "穏やかな良い一日になりそうです。", color: "#66BB6A" }, { result: "末吉", message: "じわじわと運気が上がっていきますよ。", color: "#78909C" }, { result: "凶", message: "今日はのんびり過ごすのが吉かも。", color: "#5C6BC0" }, ]; // おみくじを引く関数 function drawOmikuji() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * fortunes.length); const fortune = fortunes[index]; // 画面に結果を表示する const resultElement = document.querySelector(".result-text"); resultElement.textContent = fortune.result; resultElement.style.color = fortune.color; document.querySelector(".message-text").textContent = fortune.message; } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);

保存したら、ブラウザで開いて動作を確認してみてください。前回とまったく同じ動きをするはずです。結果がランダムに出て、メッセージが表示されて、色が変わる。見た目も動きも何も変わっていません。

でも、コードを見比べてみてください。

ビフォー・アフター

ビフォー（前回）：

・結果名は results 配列に
・メッセージと色は if ... else if で6回分岐
・おみくじ1つぶんの情報がコードのあちこちに散在
・関数の中身：約25行

アフター（今回）：

・結果名・メッセージ・色が fortunes 配列にまとまっている
・if文がまるごとなくなった
・関数の中身：約8行

動きは同じなのに、コードがぐっとスッキリしましたね。

なぜスッキリしたのか

ポイントは、「データ」と「処理」を分けたことです。

前回のコードでは、「大吉のときはこのメッセージでこの色」「中吉のときは…」というデータが、if文の中に処理と混ざって書かれていました。

今回のコードでは、データは fortunes 配列にまとめて、処理（関数の中身）は「ランダムに1つ選んで表示する」だけになっています。データと処理がきれいに分かれているので、読みやすくなったわけです。

💡 Tips
「動くコードをあとから整理し直す」のは、実際の開発現場でも日常的に行われることです。最初から完璧なコードを書ける人はいません。まず動くものを作って、そのあとで「もっとうまく書けないかな」と見直す。この繰り返しでコードの品質が上がっていきます。今回やった「if文の羅列をデータにまとめる」というのは、現場でもよく使われるリファクタリングのパターンです。

ここを変えてみよう！ミニチャレンジ①

リファクタリングの効果を体感してみましょう。おみくじに**「大凶」を追加**してみてください。

やることは1つだけ。fortunes 配列の末尾に、1行追加するだけです。

const fortunes = [ { result: "大吉", message: "最高の運勢です！何をやってもうまくいく日！", color: "#DAA520" }, { result: "中吉", message: "なかなかいい感じ！積極的にいきましょう！", color: "#FF8C00" }, { result: "小吉", message: "小さな幸せが見つかる日です。", color: "#F4A460" }, { result: "吉", message: "穏やかな良い一日になりそうです。", color: "#66BB6A" }, { result: "末吉", message: "じわじわと運気が上がっていきますよ。", color: "#78909C" }, { result: "凶", message: "今日はのんびり過ごすのが吉かも。", color: "#5C6BC0" }, { result: "大凶", message: "ここが底。あとは上がるだけ！", color: "#37474F" }, ];

これだけで「大凶」がおみくじの候補に加わります。関数の中身は一切変更していません。

もし前回のif文方式のままだったら、配列への追加に加えて else if のブロックも書き足す必要がありました。データを1箇所にまとめておくと、変更が1箇所で済む。これがリファクタリングの効果です。

追加できたら、ブラウザで何度かおみくじを引いて、「大凶」が出ることを確認してみてください。

3. アニメーション演出を追加しよう

コードが整理できたところで、次は見た目の仕上げに進みましょう。

今の状態だと、ボタンを押した瞬間に結果がパッと切り替わりますよね。これにふわっとフェードインする演出を加えて、アプリとしての体験を一段上げてみます。

transition とは？

使うのは、CSSの transition（トランジション）という機能です。

transition は、CSSのプロパティの値が変わったとき、その変化をなめらかにアニメーションさせる機能です。たとえば「透明 → 不透明」の変化に transition を設定すると、パッと切り替わるのではなく、じわっとフェードインするようになります。

実は、前回の style.css でもすでに1箇所使っています。

.draw-button { transition: background-color 0.3s; }

これは「ボタンの背景色が変わるとき、0.3秒かけてなめらかに変化させる」という指定でした。ボタンにマウスを乗せたときに色がすっと変わるのは、この transition のおかげです。今回は同じ仕組みを、結果表示のフェードインに使います。

style.css に追加する

style.css を開いて、.result-text と .message-text のスタイルを以下のように書き換えてください。

style.css（変更箇所）

.result-text { font-size: 48px; color: #5a4a3a; margin: 0; opacity: 0; transition: opacity 0.6s ease; } /* ===== メッセージ ===== */ .message-text { font-size: 16px; color: #8b7e6a; margin: 12px 0 0; opacity: 0; transition: opacity 0.6s ease; }

それぞれに2行追加しました。

opacity: 0 は「透明度を0（完全に透明）にする」という指定です。これで、最初は結果テキストもメッセージも見えない状態になります。

transition: opacity 0.6s ease は「opacity の値が変わったとき、0.6秒かけてなめらかに変化させてね」という指定です。ease は「最初と最後はゆっくり、中間は少し速く」という変化のリズムで、自然な印象になります。

次に、style.css の末尾に以下のスタイルを追加してください。

/* ===== フェードイン ===== */ .result-text.show, .message-text.show { opacity: 1; }

.show というクラスが付いたら opacity: 1（完全に表示）になる、というルールです。CSS側の準備はこれで完了です。

まとめると、仕組みはこうなっています。

・普段は opacity: 0（透明）
・.show クラスが付くと opacity: 1（表示）に変わる
・transition のおかげで、その変化が0.6秒かけてなめらかに起きる

あとは JavaScript 側で、適切なタイミングで .show クラスを付け外しするだけです。

script.js を書き換える

script.js の drawOmikuji 関数を、以下のように書き換えてください。

script.js（アニメーション対応版）

// おみくじのデータ（結果・メッセージ・色をまとめて管理） const fortunes = [ { result: "大吉", message: "最高の運勢です！何をやってもうまくいく日！", color: "#DAA520" }, { result: "中吉", message: "なかなかいい感じ！積極的にいきましょう！", color: "#FF8C00" }, { result: "小吉", message: "小さな幸せが見つかる日です。", color: "#F4A460" }, { result: "吉", message: "穏やかな良い一日になりそうです。", color: "#66BB6A" }, { result: "末吉", message: "じわじわと運気が上がっていきますよ。", color: "#78909C" }, { result: "凶", message: "今日はのんびり過ごすのが吉かも。", color: "#5C6BC0" }, ]; // 表示に使う要素を取得しておく const resultElement = document.querySelector(".result-text"); const messageElement = document.querySelector(".message-text"); // おみくじを引く関数 function drawOmikuji() { // いったん透明にする（前回の結果をフェードアウト） resultElement.classList.remove("show"); messageElement.classList.remove("show"); // 少し待ってから、新しい結果を表示する setTimeout(function() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * fortunes.length); const fortune = fortunes[index]; // テキストと色を書き換える resultElement.textContent = fortune.result; resultElement.style.color = fortune.color; messageElement.textContent = fortune.message; // ふわっと表示する（フェードイン） resultElement.classList.add("show"); messageElement.classList.add("show"); }, 300); } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);

新しく登場した要素を見ていきましょう。

classList.remove("show") / classList.add("show") は、HTML要素にクラスを付けたり外したりする命令です。remove("show") で .show クラスを外すと透明になり、add("show") で付けると表示される。CSSで設定した transition のおかげで、この変化がなめらかにアニメーションします。

setTimeout(function() { ... }, 300) は、「300ミリ秒（0.3秒）待ってから、中の処理を実行する」という関数です。なぜ待つ必要があるかというと、「透明にする → すぐ表示する」だとブラウザが変化を認識できず、アニメーションが起きないからです。いったん透明にして、少し間をおいてから表示することで、ちゃんとフェードイン効果が見えるようになります。

もう1つ、細かいポイントがあります。resultElement と messageElement を関数の外で取得するように変えました。前回は関数が呼ばれるたびに document.querySelector() で要素を探していましたが、ボタンを押すたびに毎回探し直す必要はありません。最初に一度取得して変数に入れておけば、あとはその変数を使い回せます。これも小さなリファクタリングの一つです。

動かしてみよう！

ファイルを保存して、ブラウザをリロードしてください。

「おみくじを引く」ボタンを押すと、結果がふわっと浮かび上がるように表示されるはずです。もう一度押すと、前の結果が消えて、新しい結果がまたふわっと現れます。

たった数行の追加ですが、印象がかなり変わりませんか？

ここを変えてみよう！ミニチャレンジ②

アニメーションの速さを変えてみましょう。

style.css の transition: opacity 0.6s ease; の 0.6s の部分を変えると、フェードインの速さが変わります。

0.3s にすると、素早くパッと出る1.2s にすると、ゆっくりじんわり出る

好みの速さを見つけてみてください。setTimeout の 300（ミリ秒）も合わせて調整すると、より自然なタイミングになります。

4. カスタマイズチャレンジ：自分だけのアプリにしよう

アニメーションまで入って、アプリとしてはもう十分な仕上がりです。

ここからは自由時間です。このアプリを「自分のもの」にしてみましょう。

いくつかアイデアを出しますので、気になったものを試してみてください。どれか1つだけでもいいですし、全部やっても、ここにないオリジナルのアイデアでもOKです。

🔧 チャレンジA：まったく別の占いに改造する

fortunes 配列の中身を書き換えるだけで、まったく違うアプリに生まれ変わります。

例：「今日のラッキーカラー占い」

const fortunes = [ { result: "🔴 レッド", message: "情熱的に行動するとうまくいく日！", color: "#e74c3c" }, { result: "🔵 ブルー", message: "冷静な判断ができそうです。", color: "#3498db" }, { result: "🟢 グリーン", message: "自然に触れるとリフレッシュ！", color: "#27ae60" }, { result: "🟡 イエロー", message: "笑顔が幸運を呼び込みます。", color: "#f1c40f" }, { result: "🟣 パープル", message: "直感を信じてみましょう。", color: "#8e44ad" }, ];

index.html の <h1> タグの中身も「今日のラッキーカラー」に変えれば、立派なオリジナルアプリです。

ラッキーカラーに限らず、「今日のラッキーフード」「今日の気分占い」「今日のおすすめ映画ジャンル」など、アイデア次第で何にでもできます。

🔧 チャレンジB：結果の種類を増やす

ミニチャレンジ①で「大凶」を追加したのと同じ要領で、好きなだけ結果を増やせます。

{ result: "超大吉", message: "奇跡が起きるかも！？", color: "#FF1493" },

fortunes 配列にオブジェクトを1行足すだけで完了。if文のときとの手軽さの違いを、改めて比べてみてください。

🔧 チャレンジC：見た目を自分好みに変える

style.css を書き換えると、アプリの雰囲気がガラッと変わります。

試してみると楽しいポイントとしては、body の background-color でページ全体の背景色を変えたり、.container の border の色でカードの枠線の色を変えたり、.title の color でタイトルの文字色を変えたり、.draw-button の background-color でボタンの色を変えたりできます。

色のコードは「カラーコード一覧」で検索すると、色見本のサイトがたくさん見つかります。好きな色の # から始まるコードをコピーして使ってみましょう。

💡 Tips

プログラマの世界では、アプリを最後まで完成させたという経験が、思った以上に大きな意味を持ちます。「途中まで作った」という人はたくさんいますが、「ちゃんと動くものを仕上げた」という人は、実はそれほど多くありません。企画 → 実装 → 仕上げ → 完成。この一連の流れを自分の手で経験したことは、小さなアプリであっても、この先の学習できっと自信になるはずです。

5. 完成コード全文

ここまでの変更をすべて反映した、最終版のコードを掲載します。途中で迷ったら、これを丸ごとコピーして使ってください。

<!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>

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; opacity: 0; transition: opacity 0.6s ease; } /* ===== メッセージ ===== */ .message-text { font-size: 16px; color: #8b7e6a; margin: 12px 0 0; opacity: 0; transition: opacity 0.6s ease; } /* ===== フェードイン ===== */ .result-text.show, .message-text.show { opacity: 1; } /* ===== ボタン ===== */ .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 fortunes = [ { result: "大吉", message: "最高の運勢です！何をやってもうまくいく日！", color: "#DAA520" }, { result: "中吉", message: "なかなかいい感じ！積極的にいきましょう！", color: "#FF8C00" }, { result: "小吉", message: "小さな幸せが見つかる日です。", color: "#F4A460" }, { result: "吉", message: "穏やかな良い一日になりそうです。", color: "#66BB6A" }, { result: "末吉", message: "じわじわと運気が上がっていきますよ。", color: "#78909C" }, { result: "凶", message: "今日はのんびり過ごすのが吉かも。", color: "#5C6BC0" }, ]; // 表示に使う要素を取得しておく const resultElement = document.querySelector(".result-text"); const messageElement = document.querySelector(".message-text"); // おみくじを引く関数 function drawOmikuji() { // いったん透明にする（前回の結果をフェードアウト） resultElement.classList.remove("show"); messageElement.classList.remove("show"); // 少し待ってから、新しい結果を表示する setTimeout(function() { // ランダムに1つ選ぶ const index = Math.floor(Math.random() * fortunes.length); const fortune = fortunes[index]; // テキストと色を書き換える resultElement.textContent = fortune.result; resultElement.style.color = fortune.color; messageElement.textContent = fortune.message; // ふわっと表示する（フェードイン） resultElement.classList.add("show"); messageElement.classList.add("show"); }, 300); } // ボタンがクリックされたら drawOmikuji を実行する document.querySelector(".draw-button").addEventListener("click", drawOmikuji);

6. シリーズ全体の振り返り

全9回、おつかれさまでした。ここで、第1回からの道のりを振り返ってみましょう。

第1部：環境構築（第1回・第2回）では、テキストエディタとブラウザを使った開発の流れを覚えました。「HTMLファイルを作って、ブラウザで開く」という基本の型を身につけた段階です。

第2部：プログラミングの基礎（第3回〜第6回）では、HTML・CSS・JavaScriptの基本を一つずつ学びました。ページに構造を作り、見た目を整え、動きを加える。変数、配列、関数、if文、イベントといったプログラミングの基本概念にも触れましたね。

第3部：おみくじアプリ開発（第7回〜第9回）では、学んだ知識を組み合わせて1つのアプリを作り上げました。第7回で画面を作り、第8回でロジックを組み、第9回でコードを整理して演出を加える。この「作る → 動かす → 磨く」の流れを、自分の手で最初から最後まで経験しました。

第1回の時点では、「HTMLって何？」というところからのスタートでした。それが今、HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きをつけ、さらにリファクタリングでコードを整理するところまでできています。これは間違いなく、大きな一歩です。

7. 次のステップへのヒント

このシリーズで学んだHTML・CSS・JavaScriptの基礎は、Web開発のあらゆる場面で土台になります。ここから先、どんな方向に進むかはあなた次第ですが、いくつかヒントだけ置いておきますね。

もっとJavaScriptを深めたいなら、「To-Doリスト」や「簡単なクイズアプリ」など、少しだけ規模の大きいものを作ってみるのがおすすめです。新しい文法を覚えるよりも、「作りたいものを作る中で必要な知識を調べる」というやり方が一番身につきやすいです。

Webサイト制作に興味があるなら、CSSをもう少し深掘りして、レスポンシブデザイン（スマホ対応のレイアウト）を学ぶと実用的なスキルになります。

他の人のコードを読むのもとても良い勉強法です。GitHubというサービスには、世界中の人が書いたコードが公開されています。最初は読めなくても大丈夫。「なんとなくこういうことをやっているんだな」と眺めるだけでも、少しずつ世界が広がっていきます。

どの道に進むにしても、「まず手を動かして、小さいものを作ってみる」というスタンスが一番の近道です。

今回のまとめ

・リファクタリングで、if文の羅列をオブジェクト配列に整理した。動きは変えずに、コードが読みやすく・変更しやすくなった
・オブジェクト配列は、「名前つきのデータのまとまり」を配列に並べたもの。データを1箇所にまとめて管理できる
・CSSの transition と opacity で、結果がふわっと表示されるフェードイン演出を実装した
・setTimeout で少し待ち時間を入れることで、アニメーションを自然に見せた
・classList.add / remove で、JavaScriptからCSSのクラスを付け外しして表示を制御した
・カスタマイズで、自分だけのオリジナルアプリに仕上げた

おわりに

全9回にわたるシリーズ、最後まで読んでくださりありがとうございました。

プログラミングは、最初の一歩が一番大変です。見慣れない記号、意味のわからない英単語、思ったとおりに動かないエラー。そういうものを一つひとつ乗り越えて、ここまで来ました。

あなたの手元には今、自分で作ったアプリがあります。それは、この先どんな技術を学ぶときにも、「自分にもできた」という確かな記憶として残るはずです。

ここがゴールではなく、ここがスタートラインです。でも、スタートラインに立てたこと自体が、とても大きなことだと思います。

この先も、ぜひ楽しみながらコードを書いていってください。

	新入生会員（無料）	応援会員（有料）
各種チャット機能
公式オフィスの利用
オンラインスペース（ovice）の利用
ノウハウ図書館などの会員向けサービス	一部機能制限あり	一部条件あり

【プログラミング入門第９回】最終回！！おみくじアプリを完成させよう

今回のゴール

1. 前回の完成コードを確認しよう