【JavaScript入門】ブラウザだけで動くおみくじアプリを作る

章： 1章

技術タグ： JavaScript

今回作るもの

今回は、HTML・CSS・JavaScriptだけで動く、シンプルなおみくじアプリを作ります。

ボタンを押すと、次のような結果の中からランダムで1つ表示されます。

  • 大吉
  • 中吉
  • 小吉
  • 吉
  • 凶

まだPHPやデータベースは使いません。

まずは、ブラウザだけで動く小さなアプリを作りながら、JavaScriptの基本を体験していきます。

今回の主役は、次の3つです。

  • ボタンを押したら処理を動かす
  • 配列からランダムに結果を選ぶ
  • JavaScriptで画面の文字を書き換える

小さなアプリですが、Webアプリ開発の入口としてはかなり優秀な題材です。

想定読者

この記事は、次のような人向けです。

  • HTMLを書いたことがある
  • CSSで少し見た目を整えたことがある
  • JavaScriptはこれから学びたい
  • ボタンを押して画面が変わる仕組みを理解したい
  • Webアプリ開発の入口を体験したい

難しいフレームワークは使いません。

まずは素のHTML・CSS・JavaScriptだけで進めます。

今回必要なもの

今回必要なものは、かなり少ないです。

  • パソコン
  • VS Code
  • ブラウザ（Google Chrome推奨）
  • VS Code拡張機能「Live Server」

Live Serverを使うと、HTMLファイルをブラウザで簡単に開けます。

ファイルを保存した時にブラウザ側も確認しやすいので、最初の学習にはかなり便利です。

今回のゴール

今回のゴールは、以下です。

  • HTMLでおみくじ画面を作る
  • CSSで最低限の見た目を整える
  • JavaScriptでボタンのクリックを受け取る
  • 配列からランダムに結果を選ぶ
  • 選ばれた結果を画面に表示する

完成すると、ボタンを押すたびにおみくじ結果が変わるようになります。

ファイル構成

今回は、以下の3ファイルで作ります。

omikuji-app/
├─ index.html
├─ style.css
└─ script.js

それぞれの役割はこうです。

ファイル役割
index.html画面の骨組みを作る
style.css見た目を整える
script.jsボタンを押した時の動きを作る

HTML、CSS、JavaScriptの役割を分けることで、あとから見返しやすくなります。

まずはHTMLで画面を作る

最初に、画面の骨組みを作ります。

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">
  <script src="script.js" defer></script>
</head>
<body>
  <main class="omikuji">
    <h1 class="omikuji__title">おみくじアプリ</h1>

    <p id="result" class="omikuji__result">結果はここに表示されます</p>

    <button id="draw-button" class="omikuji__button" type="button">
      おみくじを引く
    </button>
  </main>

</body>
</html>

今回のHTMLで大事なのは、次の2つです。

<p id="result" class="omikuji__result">結果はここに表示されます</p>

ここは、おみくじの結果を表示する場所です。

<button id="draw-button" class="omikuji__button" type="button">
  おみくじを引く
</button>

ここは、おみくじを引くボタンです。

JavaScriptでは、この2つの要素を取得して操作します。

CSSで最低限の見た目を整える

次に、CSSで画面を少し整えます。

今回のCSSは、見た目を作り込むためではありません。

学習の主役はJavaScriptなので、CSSは最低限でOKです。

style.css を作成し、以下の内容を書きます。

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f5f5f5;
  color: #222222;
}

.omikuji {
  max-width: 480px;
  margin-inline: auto;
  padding-block: 64px;
  padding-inline: 24px;
  text-align: center;
}

.omikuji__title {
  margin-block-start: 0;
  margin-block-end: 24px;
  font-size: 32px;
}

.omikuji__result {
  margin-block-start: 0;
  margin-block-end: 24px;
  padding-block: 24px;
  padding-inline: 16px;
  border: 2px solid #222222;
  border-radius: 12px;
  background-color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

.omikuji__button {
  padding-block: 12px;
  padding-inline: 24px;
  border-width: 0;
  border-radius: 999px;
  background-color: #222222;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.omikuji__button:hover {
  opacity: 0.8;
}

今回は、以下ができていれば十分です。

  • 画面中央に配置する
  • 結果が見やすい
  • ボタンが押しやすい

CSSはあとからいくらでも調整できます。

まずは、JavaScriptで動かすことを優先します。

JavaScriptでボタンを取得する

ここからJavaScriptです。

JavaScriptでは、まずHTML上の要素を取得します。

今回取得したいのは、次の2つです。

  • 結果を表示する場所
  • おみくじを引くボタン

script.js を作成し、まずは以下を書きます。

const resultText = document.getElementById('result');
const drawButton = document.getElementById('draw-button');

document.getElementById() は、HTMLの id を使って要素を取得するための命令です。

今回は、HTML側で以下のように id を付けていました。

<p id="result" class="omikuji__result">結果はここに表示されます</p>
<button id="draw-button" class="omikuji__button" type="button">おみくじを引く</button>

つまり、JavaScript側ではこの2つをつかまえているわけです。

const resultText = document.getElementById('result');
const drawButton = document.getElementById('draw-button');

ここまでで、JavaScriptからHTMLを操作する準備ができました。

配列におみくじ結果を用意する

次に、おみくじの結果を配列で用意します。

配列とは、複数のデータをひとまとめにできる箱のようなものです。

const fortunes = ['大吉', '中吉', '小吉', '吉', '凶'];

この fortunes の中に、おみくじ結果が5つ入っています。

0番目：大吉
1番目：中吉
2番目：小吉
3番目：吉
4番目：凶

JavaScriptの配列は、最初の番号が 0 から始まります。

ここは最初少し違和感がありますが、かなり大事な基本です。

Math.random() でランダムに選ぶ

ランダム抽選には、JavaScriptの Math.random() を使います。

Math.random() は、0以上1未満のランダムな数を作る機能です。

ただし、そのままだと配列の番号としては使いにくいです。

そこで、次のように整数へ変換します。

const randomIndex = Math.floor(Math.random() * fortunes.length);

この処理の流れはこうです。

Math.random() でランダムな小数を作る
↓
fortunes.length で配列の数に合わせる
↓
Math.floor() で小数を切り捨てる
↓
配列の番号として使う

今回の配列は5個なので、randomIndex には 0 から 4 のどれかが入ります。

その番号を使って、配列から結果を取り出します。

const selectedFortune = fortunes[randomIndex];

ボタンを押したら結果を表示する

最後に、ボタンを押した時の処理を作ります。

script.js を以下の完成形にします。

const resultText = document.getElementById('result');
const drawButton = document.getElementById('draw-button');

const fortunes = ['大吉', '中吉', '小吉', '吉', '凶'];

/**
 * おみくじ結果をランダムに1つ選んで画面に表示する
 *
 * @returns {void}
 */
function drawFortune() {
  const randomIndex = Math.floor(Math.random() * fortunes.length);
  const selectedFortune = fortunes[randomIndex];

  resultText.textContent = selectedFortune;
}

drawButton.addEventListener('click', drawFortune);

流れはこうです。

ボタンを押す
↓
drawFortune() が実行される
↓
ランダムな番号を作る
↓
配列から結果を1つ取り出す
↓
textContent で画面の文字を書き換える

これで、ボタンを押すたびにおみくじ結果が変わるようになります。

今回の完成コード

最後に、今回の完成コードをまとめておきます。

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">
  <script src="script.js" defer></script>
</head>
<body>
  <main class="omikuji">
    <h1 class="omikuji__title">おみくじアプリ</h1>

    <p id="result" class="omikuji__result">結果はここに表示されます</p>

    <button id="draw-button" class="omikuji__button" type="button">
      おみくじを引く
    </button>
  </main>

</body>
</html>

style.css

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f5f5f5;
  color: #222222;
}

.omikuji {
  max-width: 480px;
  margin-inline: auto;
  padding-block: 64px;
  padding-inline: 24px;
  text-align: center;
}

.omikuji__title {
  margin-block-start: 0;
  margin-block-end: 24px;
  font-size: 32px;
}

.omikuji__result {
  margin-block-start: 0;
  margin-block-end: 24px;
  padding-block: 24px;
  padding-inline: 16px;
  border: 2px solid #222222;
  border-radius: 12px;
  background-color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

.omikuji__button {
  padding-block: 12px;
  padding-inline: 24px;
  border-width: 0;
  border-radius: 999px;
  background-color: #222222;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.omikuji__button:hover {
  opacity: 0.8;
}

script.js

const resultText = document.getElementById('result');
const drawButton = document.getElementById('draw-button');

const fortunes = ['大吉', '中吉', '小吉', '吉', '凶'];

/**
 * おみくじ結果をランダムに1つ選んで画面に表示する
 *
 * @returns {void}
 */
function drawFortune() {
  const randomIndex = Math.floor(Math.random() * fortunes.length);
  const selectedFortune = fortunes[randomIndex];

  resultText.textContent = selectedFortune;
}

drawButton.addEventListener('click', drawFortune);

Live Serverで確認する

ファイルを作成したら、VS CodeのLive Serverで index.html を開きます。

画面に「おみくじアプリ」と表示され、ボタンを押すたびに結果が変われば成功です。

もし動かない場合は、以下を確認してください。

  • script.js のファイル名が間違っていないか
  • index.html の <script src="script.js"></script> が正しいか
  • id="result" と id="draw-button" がHTMLにあるか
  • ブラウザのConsoleにエラーが出ていないか

次回以降、ブラウザの開発者ツールも使っていくので、Consoleを見る習慣も少しずつつけていきます。

今回学んだこと

今回は、HTML・CSS・JavaScriptだけで動くおみくじアプリを作りました。

学んだことは以下です。

  • HTMLは画面の骨組みを作る
  • CSSは見た目を整える
  • JavaScriptは画面の動きを作る
  • 配列には複数の値を入れられる
  • JavaScriptの配列は0番目から始まる
  • Math.random() でランダムな数を作れる
  • Math.floor() で小数を切り捨てられる
  • addEventListener() でクリック時の処理を登録できる
  • textContent で画面の文字を書き換えられる

小さなアプリですが、Webアプリ開発の基本がかなり詰まっています。

ただし、ここに大きな罠がある

今回のおみくじアプリは、ブラウザだけで動きます。

これは手軽で便利です。

しかし、ブラウザだけで動くということは、処理の中身もユーザー側にあるということです。

つまり、見る人が見れば、どんな処理でおみくじ結果を出しているのか確認できてしまいます。

さらに、ブラウザの開発者ツールを使えば、画面やJavaScriptの動きを一部書き換えることもできます。

もしこれが、ただのおみくじではなく、次のようなキャンペーンだったらどうでしょうか。

大吉が出たらギフト券プレゼント

このままでは少し危険です。

次回予告

次回は、今回作ったおみくじアプリを使って、ブラウザの開発者ツールを触ります。

そして、次の現実を体験します。

フロントエンド側の処理は、ユーザーに見える
フロントエンド側の処理は、改ざんされる可能性がある

次回のテーマは、以下です。

【DevTools入門】おみくじの結果を改ざんしてフロントエンドの限界を知る

作ったものを、あえて壊す。

ここからWeb開発の本質に入っていきます。

Web開発復習ノート一覧へ戻る