簡単なアプリケーションを作ってみよう（おみくじアプリ）

これまでの章では、JavaScriptの基礎から、HTML要素の操作まで、幅広く学んできました。この章では、いよいよ学んだことを活かして、簡単なアプリケーションを作ってみましょう。手を動かして、実際に動くものを作ることで、プログラミングの楽しさを実感できるはずです。

この章では、以下の3つのアプリケーションを作ります。

おみくじアプリ
タイマーアプリ
TODOリスト

どれもブラウザ上で動く、シンプルなアプリケーションです。一つずつ、丁寧に解説していくので、一緒に作ってみましょう。

おみくじアプリ作成

おみくじアプリは、ボタンをクリックすると、ランダムな結果（大吉、中吉、小吉など）を表示するアプリケーションです。実際におみくじを引くような、ワクワク感を味わえるようにしましょう。

完成イメージ

まずは、完成イメージを見てみましょう。

おみくじアプリのスクリーンショット

このような、シンプルなアプリケーションを作ります。「おみくじを引く」ボタンをクリックすると、結果が表示エリアに表示されます。

HTMLの作成

まずは、HTMLでおみくじアプリの骨組みを作成します。index.htmlの<body>タグの中身を、以下のように書き換えてください。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 超入門</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>おみくじアプリ</h1>
    <button id="drawButton">おみくじを引く</button>
    <div id="resultArea">ここに結果が表示されます</div>

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

<h1>タグでおみくじアプリの見出しを表示しています。
<button>タグで「おみくじを引く」ボタンを作成しています。id="drawButton"で、後からJavaScriptで操作できるように、drawButtonというIDを付けています。
<div>タグで結果を表示するエリアを作成しています。id="resultArea"で、resultAreaというIDを付けています。

CSSで見た目を整える

次に、CSSで見た目を整えましょう。style.cssに以下の内容を書き込んでください。

css

body {
  font-family: sans-serif;
  text-align: center;
}

#drawButton {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f06;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#resultArea {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

これで、ボタンが赤色になり、結果が大きく太字で表示されるようになります。

JavaScriptで動きをつける

最後に、JavaScriptでおみくじの動きをつけましょう。script.jsに以下の内容を書き込んでください。

javascript

// 1. ボタン要素を取得する
const drawButton = document.getElementById("drawButton");

// 2. 結果表示エリアの要素を取得する
const resultArea = document.getElementById("resultArea");

// 3. おみくじの結果の配列
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶", "大凶"];

// 4. ボタンがクリックされたときの処理
drawButton.addEventListener("click", () => {
  // 5. ランダムな結果を取得する
  const randomIndex = Math.floor(Math.random() * results.length);
  const result = results[randomIndex];

  // 6. 結果を表示する
  resultArea.textContent = result;
});

このコードでは、

document.getElementById("drawButton")で、drawButtonというIDを持つボタン要素を取得しています。
document.getElementById("resultArea")で、resultAreaというIDを持つ結果表示エリアの要素を取得しています。
resultsという配列に、おみくじの結果を格納しています。
drawButton.addEventListener("click", ...)で、ボタンがクリックされたときの処理を登録しています。
Math.random()で0以上1未満のランダムな数を生成し、Math.floor()で小数点以下を切り捨てて、resultsの配列の長さを掛けることで、ランダムなインデックスを生成しています。そのインデックスを使ってresultsから結果を取得しています。
resultArea.textContentで、結果表示エリアに結果を表示しています。

動作確認

index.htmlをブラウザで開き、「おみくじを引く」ボタンをクリックしてみましょう。結果表示エリアに「大吉」「中吉」「小吉」などの結果がランダムに表示されれば成功です！

おみくじアプリの動作イメージ

クリックするたびに結果が変わることを確認してみてください。