【WEBアプリ】ストップウォッチアプリ

てと

2023年2月6日 00:41

第３回は、ストップウォッチアプリを作っていきます。

今回作成するのは、再生ボタン・一時停止ボタン・リセットボタンの機能を備えた簡単なストップウォッチアプリです。

1. 初期データのダウンロード

① 以下のURLにアクセス

https://drive.google.com/drive/folders/1BVQqkWrx4nIhZA8WTFfHLWgX2JjgJ2CY?usp=sharing

② ストップウォッチアプリ　教材.zip　をダウンロード

③ ダウンロードにあるZipファイルを解凍。

【Zipファイルの解凍方法】
Macの場合、Zipファイルをダブルクリック
Windows の場合、わからない場合は、以下のサイトを見る

④

の「基本的なはじめ方」を参考に準備する。

2. 数字のカウントアップ

① 必要なテキスト・ボタンの配置

② 開始ボタンで数字を変更

onclick や function がわからない人は、

の「 ② ボタンを押したらアラート」を見よう。

document.getElementById、がわからない人は、第１回の

の「 ④ 増えていく、numberをテキストに反映させる。 」を参考にしよう。

③ １秒ごとにカウントする

startTimer()の関数名を、countUpSecond()に変更しよう。
それとは別に、startTimer()という関数をもう1度作ろう。

スクリーンショットの見方

・コードの追加は、赤色
・すでに書いた場所の変更は緑色
・コンソールなどの見て確認するだけのものは水色

【setIntervalとは】
setInterval(〇〇〇, ××);
もしくは
setInterval("〇〇〇()", ××);

と書いて、関数〇〇〇()を××ミリ秒ごとに呼び出すことを意味する。

ミリ秒…1/1000秒のこと。

つまり、1000ミリ秒（＝ 1秒）ごとに、関数 countUpSecond() が呼び出されて、カウントが１増えて表示されている。

3. ストップボタンを押せるようにしよう

① 「一時停止」と名前が変わるようにしよう

まず、開始ボタンにidをつけよう。

そして、開始ボタンが押されたタイミングで、ボタン文字が変わるようにしよう。

ボタンのテキストの変更は、textContentを使うよ。

実行結果
（開始ボタンを押すと、一時停止と表示される。**まだ、数字は一時停止しない。**）

② もう１回押したら、開始に戻るようにしよう

ここで、フラグ変数を使っていく。

フラグ変数とは

false (「偽」という意味)、true (「真実」という意味)　のどちらかで常に表される。

例えば、「成人しているか、いないか」「好きかどうか」など、「はい」か「いいえ」で答えられる項目を保存しておくのに使う。

タイマーが今動いているかどうかを表す変数、timerIsActiveを定義するよ。

一番最初に、画面が読み込まれた時は、タイマーは動いていないから、最初はfalse(偽)に設定しておく。

!の特徴

aという変数に、trueもしくは、falseが入っている時、

!a はaとは逆のことを表すよ。

a がtrueのとき、!a は、false
a がfalseのとき、!aは、true

変数で習った、=の意味を思い出そう。

【代入と値一致の違い】
数学では、a = b は、aとbの値が等しいことを表すが、
プログラミングでは、aにbを代入（入れ込む）することを表す。

a ← b のイメージ

つまり、

は、

timerIsActiveがtrueの時（タイマーが動いてる時）、
timerIsActiveをfalseにする。

timerIsActiveがfalseの時（タイマーが動いていない時）、
timerIsActiveをtrueにする。

ことを表している。

といっても、難しいので、

Consoleを使って確認してみよう。

実行結果
（consoleにボタンを押すごとに、trueとfalseが表示される。
**数字が止まらなかったり、早くなったりするのは気にしないで問題ない**。）

ここで、timerIsActive がfalseだったら、開始と表示して、trueだったら、一時停止と表示しよう。

実行結果
（開始ボタンを押すと、「一時停止」になり、もう１度押すと、「開始」に戻る）
**（数字が速くなったり、止まらないのは気にしなくて問題ない）**

③ コードを省略して書こう。

実は、コードが長くなってしまうと読みにくいため、いくつか省略してかけるので、変更してみよう。

second++は、
second = second + 1　を表す。
１足したい時や、１引きたい時だけ使える。

second = second - 1　の省略は、second--となる。

変数名 == true、は == true の部分を省略できるよ。

if(変数名 == false){
の時は、
if(!変数名){
と書くことができる

④ わからなくならないようにコメントを残そう

コメントとは、どのコードが何を書いてるかがわからなくならないように残すメモのこと。

実行結果には全く影響がない。

⑤ 実際に一時停止するようにしよう

さっき書いた、setInterval（一定時間ごとの関数呼び出し）に名前をつけよう。
名前の付け方は、変数に代入するのと同じやり方だよ。

【変数って何？】
変数とは、数字や文字を保管しておくもの。
let number = 0;
のように書く。
numberという人が、0という数字を持ってるイメージ。

文字や数字だけじゃなくて、setIntervalなどの関数も保存しておける。

ついでに、setIntervalをする場所を変えよう。

そして、一時停止するときに、timerを停止しよう。

clear Intervaltとは
カッコ内に入ったタイマーを初期化すること。停止させる。

タイマーには、予め名前をつけておく必要がある。

今回は、タイマーの名前をtimerにしているが、なんでも支障はない。

4. 秒ではなく、分や時も表示しよう。

今の段階では、1分を過ぎたとしても、80 秒などと表示される。

そこで、表示するときに、分や時も表示していく。

① 分などを入れる場所を作ろう

Spanタグとは

囲んだ要素を強調するなどのデザイン微調整によく利用されるタグです。具体的には個別にテキストのフォント調整、文字色・背景色の変更を施すのによく利用します。

pタグの中でも使用することができるタグ。

② 時分秒を計算しよう

secondという変数とtimeという名前に変えよう。

秒や分、時を入れておける変数を作ろう。

秒から時や分を求めるのは簡単。

1時間 = 3600秒
1分 = 60秒
なので、これを使って計算していく。

Math.floorは切り捨て。
/ はプログラミグで÷の意味。
% はプログラミングであまりの意味

時…timeを3600で割って切り捨て
分…timeから時(hour)分秒すうを引いてから、60で割って切り捨て
秒…timeを60で割ったあまり

と計算できる。

なぜか、うまく表示されない。

これは、表示するdocument.getElementByIdをしっかり書いていないから。

5. リセットボタンが動くようにしよう

【TRY】　リセットボタンを押したら、リセットしよう。

1. リセットボタンが押されたら、resetTimer()という関数を呼び出す。
2. resetTimerの中で、time を０にする。
3. hourやsecondなども計算し直す。
4. 文字として反映させる。

※できるだけ、解答を見ずにやってみよう。

【解答】　リセットボタンが動くようにしよう

6. デザインを整えよう

【TRY】　ストットアプリと同じようにデザインを整えよう。

0. 全体を中央ぞろえにしよう
1. 0 時 0 分 0 秒の文字大きさは、80px
2. 開始・一時停止ボタンは青背景
3. リセットボタンは赤背景
4. ボタンは白文字で文字の大きさは、30px
5. ボタンは横幅200pxで縦幅60px
6. ボタンは背景色以外classを使って書こう
7. ボタンの背景色と、0 時 0 分 0 秒の文字は、idを使って書こう

わからなかったら、前回のスロットアプリの
5. デザインを調整しよう をみよう

【解答】　デザインを整えよう

7. 完成

これで完成です。
お疲れ様でした。

8. 解答データ