メインコンテンツまでスキップ

プロジェクト

これまで学んできた知識を利用して、はじめての Web アプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。

おみくじ

今日の運勢をランダムで表示するアプリです。

ルール

  • 20%の確率で 大吉 と表示し、文字色を赤色にします
  • 50%の確率で と表示し、文字色を黒色にします
  • 30%の確率で と表示し、文字色を青色にします

ヒント

  • Math.random 関数は、呼び出すたびに変わる 0 以上 1 未満の一様乱数を返します。
document.write(Math.random()); // 0.8924949384481442
  • 発生させた乱数を変数に保存しておきましょう。この乱数は [0, 1) の一様分布に従うので、例えば [0, 0.2) に含まれる確率は 20% になります。
const r = Math.random();
if (r < 0.2) {
// 20%の確率で実行される
} else if (条件式2) {
// 50%の確率で実行される
} else {
// 30%の確率で実行される
}
  • クリックするためのボタンと、テキストを表示して色を変えるための div 要素の両方を JavaScript から取得してみましょう。
index.html
<button id="omikuji-button" type="button">おみくじを引く</button>
<div id="result"></div>
script.js
const omikujiButton = document.getElementById("omikuji-button");
const result = document.getElementById("result");

function omikuji() {
result.textContent = "結果";
}
omikujiButton.onclick = omikuji;

解答例

ストップウォッチ

シンプルなストップウォッチです。おみくじの課題より難易度が高いです。

ルール

  • スタート ボタンをクリックすると、時刻の数え上げが開始されます
  • 1 秒ごとに表示される数値が更新されます

ヒント

  • setInterval 関数引数をふたつ (func, delay)とり、funcとしての関数delay は整数です。setInterval は、 func に指定された関数delay ミリ秒の間隔で定期的に実行します。
function greet() {
document.write("<p>Hello World</p>");
}

setInterval(greet, 1000);

このコードを実行すると、1 秒ずつ画面に <p>Hello World</p> が書き加えられていきます。

  • ボタン要素がクリックされたら setInterval 関数を実行し、タイマーを開始しましょう。
function start() {
setInterval(関数名, 1000);
}

const startButton = document.getElementById("start-button");
startButton.onclick = start;
  • 時刻は常に JavaScript変数として保持しておくと扱いやすくなります。
let time = 0;

function tick() {
time += 1;
}
  • (発展) ストップボタンを作りたい場合は、 setInterval 関数戻り値を利用しましょう。 setInterval戻り値は整数で、clearInterval にこの渡すと、動作中のタイマーを解除することができます。
let timerId;

function start() {
timerId = setInterval(関数名, 1000);
}

function stop() {
clearInterval(timerId);
}

const startButton = document.getElementById("start-button");
const stopButton = document.getElementById("stop-button");
startButton.onclick = start;
stopButton.onclick = stop;

解答例