JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 おみくじ編

Web APP JavaScript
スポンサーリンク
スポンサーリンク

1日目のゴールと全体像

おみくじアプリ 1日目のテーマは 「ボタンを押したらランダムに結果が表示されるシンプルなおみくじを作りながら、HTMLとJavaScriptの連携・DOM操作・イベント処理・基本文法を体で覚えること」 です。

1日目で目指す完成イメージは、とてもシンプルです。

  • 画面に「おみくじを引く」ボタンがある
  • ボタンを押すと「大吉」「中吉」「小吉」「凶」などがランダムに表示される
  • 結果は毎回変わる

この小さなアプリの中に、 JavaScriptの基礎がぎゅっと詰まっています。

HTMLとJavaScriptの役割を整理する

まずは役割分担をはっきりさせましょう。

  • HTML：画面の骨格（ボタン・結果表示エリア）
  • CSS：見た目（文字サイズ・余白など）
  • JavaScript：動き（ランダムに結果を選ぶ・表示する）

おみくじアプリでは、 「ボタン」と「結果表示エリア」をHTMLで作り、 JavaScriptで「ボタンが押されたら結果を表示する」という動きをつけます。

1日目のHTMLテンプレートを作る

まずは最低限の画面を用意します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじアプリ 1日目</title>
</head>
<body>
  <h2>おみくじ</h2>

  <!-- ボタン -->
  <button id="omikujiBtn">おみくじを引く</button>

  <!-- 結果表示エリア -->
  <p id="result"></p>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>
</body>
</html>

ここで押さえておきたいポイント

  • id="omikujiBtn" と id="result" がとても重要です → JavaScriptからこの2つの要素を操作します（DOM操作）。
  • <script src="script.js"></script> で外部のJavaScriptファイルを読み込みます → 実際のアプリ開発では、HTMLとJavaScriptを分けるのが基本です。

DOM操作の基本：要素を「つかむ」

JavaScriptでHTMLの要素を操作するには、 まずその要素を「つかむ」必要があります。

// script.js

// ボタン要素を取得
const omikujiBtn = document.getElementById("omikujiBtn");

// 結果表示エリアを取得
const result = document.getElementById("result");
JavaScript

深掘りポイント

  • document は「今表示しているHTML全体」を表すオブジェクトです。
  • getElementById("omikujiBtn") は「idがomikujiBtnの要素を探してくる」命令です。
  • 取得した要素を const で変数に入れておくことで、あとから何度でも使えます。

DOM操作の第一歩は、 「HTMLの要素をJavaScriptでつかむ」 ことです。

イベント処理の基本：ボタンが押されたら動く

次に、「ボタンが押されたら何かする」という動きをつけます。 これが イベント処理 です。

// ボタンがクリックされたときの処理を登録
omikujiBtn.addEventListener("click", function() {
  console.log("ボタンが押されました！");
});
JavaScript

深掘りポイント

  • addEventListener("click", ...) は「クリックされたときに実行する処理」を登録する命令です。
  • function() { ... } の中に「クリックされたらやること」を書きます。
  • まずは console.log() で「押されたこと」を確認するのが定番の練習です。

イベント処理は、 「ユーザーの操作に反応する」ための仕組み です。

ランダムにおみくじの結果を選ぶ

おみくじの「結果」を配列で用意します。

// おみくじの候補一覧
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];
JavaScript

この中からランダムに1つ選びます。

function getRandomResult() {
  // 0 〜 results.length - 1 のランダムな整数を作る
  const index = Math.floor(Math.random() * results.length);

  // 配列からそのインデックスの要素を取り出す
  return results[index];
}
JavaScript

深掘りポイント

  • Math.random() は 0以上1未満のランダムな小数を返します。
  • Math.random() * results.length で「0〜配列の長さ未満」の小数を作ります。
  • Math.floor() で小数点以下を切り捨てて整数にします。
  • 配列のインデックスは 0 から始まるので、 0〜length-1 の範囲の整数が必要になります。

ここで、 「ランダムな数値を作る → 配列からランダムに取り出す」 というよく使うパターンを体で覚えておくと、 ゲーム系・占い系のアプリで大活躍します。

ランダム結果を画面に表示する（DOM操作）

ボタンが押されたら、

  1. ランダムに結果を選ぶ
  2. 結果表示エリアに文字を表示する

という流れを作ります。

omikujiBtn.addEventListener("click", function() {
  // ランダムな結果を取得
  const randomResult = getRandomResult();

  // 結果表示エリアのテキストを書き換える
  result.textContent = `今日の運勢は「${randomResult}」です`;
});
JavaScript

深掘りポイント

  • .textContent は「その要素の中の文字」を書き換えるプロパティです。
  • 文字列の中で ${randomResult} と書いているのは「テンプレートリテラル」という書き方です。
    • バッククォート（\）で囲んだ文字列の中に${変数}` と書くと、 その変数の値が埋め込まれます。
  • DOM操作の基本は 「要素をつかむ → プロパティを書き換える」 という流れです。

1日目の完成コード（HTML＋JavaScript）

HTML（index.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじアプリ 1日目</title>
</head>
<body>
  <h2>おみくじ</h2>

  <!-- おみくじボタン -->
  <button id="omikujiBtn">おみくじを引く</button>

  <!-- 結果表示エリア -->
  <p id="result"></p>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js）

// ボタンと結果表示エリアの要素を取得
const omikujiBtn = document.getElementById("omikujiBtn");
const result = document.getElementById("result");

// おみくじの結果候補一覧
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];

// ランダムに結果を1つ選ぶ関数
function getRandomResult() {
  // 0〜results.length-1 のランダムな整数を作る
  const index = Math.floor(Math.random() * results.length);

  // 配列からそのインデックスの要素を取り出す
  return results[index];
}

// ボタンがクリックされたときの処理
omikujiBtn.addEventListener("click", function() {
  // ランダムな結果を取得
  const randomResult = getRandomResult();

  // 結果表示エリアのテキストを書き換える
  result.textContent = `今日の運勢は「${randomResult}」です`;
});
JavaScript

1日目で本当に掴んでほしいこと

● JavaScriptは「HTMLを動かすための言語」

  • HTMLだけでは「静的なページ」
  • JavaScriptを組み合わせることで「動くアプリ」になる

おみくじアプリは、 「ボタンを押したら結果が変わる」 という最小の「動き」を体験するための題材です。

● DOM操作は「画面を書き換える力」

  • document.getElementById() で要素をつかむ
  • .textContent で文字を変える

この2つだけでも、 「ボタンを押したら結果が変わるアプリ」 が作れます。

● イベント処理は「ユーザーの操作に反応する仕組み」

  • addEventListener("click", ...) で「クリックされたときの処理」を登録する
  • 関数の中に「やりたいこと」を書く

これができれば、 ボタン・入力欄・チェックボックスなど、 さまざまなUIに「動き」をつけられます。

● ランダム処理はゲーム・占い系アプリの基本

  • Math.random() と Math.floor()
  • 配列からランダムに取り出す

このパターンは、 おみくじ・サイコロ・カードゲームなど、 楽しいアプリを作るときに何度も使います。

次のステップ

2日目では、このシンプルなおみくじを少し育てて、

  • 結果ごとにメッセージを変える
  • CSSで見た目を整える
  • 結果に色をつける（大吉は金色など）

といった「ちょっとリッチなおみくじ」にしていきます。

次へ
1234567
スポンサーリンク
タイトルとURLをコピーしました