カウンターアプリの作成
本記事では、シンプルなカウンターアプリの作成手順を解説します。このアプリでは、カウントアップとカウントダウンの機能を実装します。JavaScriptを用いて、ボタンを押すことで数字が増減するインタラクティブな機能を追加します。
アプリの概要
最初に、カウンターアプリの基本的な構成と動作について説明します。
<!DOCTYPE html>
<html>
<head>
<title>カウンターアプリ</title>
</head>
<body>
<!-- 数字を表示させる部分 -->
<div id="display">0</div>
<!-- カウントダウンボタン -->
<button id="down">カウントダウン</button>
<!-- カウントアップボタン -->
<button id="up">カウントアップ</button>
<!-- JavaScriptを読み込む -->
<script src="counter.js"></script>
</body>
</html>
HTMLの準備
まずは、カウンターを表示するためのHTMLを設定します。カウント表示用の<div>要素を設け、ボタンを配置します。
<div id="display">0</div>
<button id="down">カウントダウン</button>
<button id="up">カウントアップ</button>
これで、カウント表示部分とカウントアップ、カウントダウンボタンができました。
JavaScriptの設定
次に、JavaScriptでカウントを制御します。
let count = 0;
const display = document.getElementById('display');
const upButton = document.getElementById('up');
const downButton = document.getElementById('down');
// カウントアップ機能
upButton.addEventListener('click', () => {
count++;
display.innerHTML = count;
});
// カウントダウン機能
downButton.addEventListener('click', () => {
count--;
display.innerHTML = count;
});
ここでは、countという変数に現在のカウント値を保持し、ボタンが押された時にその値を増減させて、表示を更新する処理を実装しています。
詳細な説明
次に、各ステップの詳細な説明を行います。
表示エリアの設定
const display = document.getElementById('display');
これで、カウントを表示するための<div>要素を取得します。
ボタンの設定
const upButton = document.getElementById('up');
const downButton = document.getElementById('down');
これで、カウントアップとカウントダウンのボタンを取得します。
カウントアップの処理
upButton.addEventListener('click', () => {
count++;
display.innerHTML = count;
});
カウントアップボタンがクリックされた時に、count変数の値を増やし、それを表示エリアに反映します。
カウントダウンの処理
downButton.addEventListener('click', () => {
count--;
display.innerHTML = count;
});
カウントダウンボタンがクリックされた時に、count変数の値を減らし、それを表示エリアに反映します。
動作確認
上記のコードをHTMLファイルとJavaScriptファイルに保存し、ブラウザで開いて動作を確認します。カウントアップとカウントダウンボタンを押してみて、正しくカウンターが動作することを確認してください。
★ おさらい - カウンターアプリの基本的な仕組み
┌────────────┐ ┌────────────┐
│ カウンター表示 │ │ カウント値 │
│ element │───→ │ 変数 │
└────────────┘ └────────────┘
↑ │
│ クリックイベント ↓
└────────────────────────→
最後に
これで、基本的なカウンターアプリの作成ができました。次のステップとして、デザインを工夫したり、機能を拡張したりして、さらに便利で見栄えの良いアプリに仕上げてみてください。
お読みいただき、ありがとうございました！
タイムスタンプ
1 00:00:00,740 --> 00:00:08,449 さてへと課題解説に行きましょうか
2 00:00:04,160 --> 00:00:14,749 これカウンターねアプリを作るという課題なんですけれども
3 00:00:08,449 --> 00:00:15,980 ちょっと上でも小さく出てますけどカウントアップするとこの数字が上がって23 c
4 00:00:14,749 --> 00:00:20,230 56鯱
5 00:00:15,980 --> 00:00:24,109 感嘆すると87654321ど
6 00:00:20,230 --> 00:00:28,100 0-1-8下がっていくわけですね
7 00:00:24,109 --> 00:00:33,469 で8このカウンターアプリを今回は
8 00:00:28,100 --> 00:00:39,530 作っていくと課題解説を大したいと思います
9 00:00:33,469 --> 00:00:44,070 えここまではね出来てますかね counter . html で基本的な ac の
10 00:00:39,530 --> 00:00:49,230 書いて一番でカウンターでこんな状態になっているとします
11 00:00:44,070 --> 00:00:54,280 所では8まずこのタウンとアプリね
12 00:00:49,229 --> 00:00:59,949 ここ持ちの表示部分これ大きくなってますけど今はちょっと文字の大きさは
13 00:00:54,280 --> 00:01:03,100 関係なくですね自分の id =ディスプ
14 00:00:59,950 --> 00:01:04,799 カウントとかしておきましょうか
15 00:01:03,100 --> 00:01:10,010 でスラッシュディ分
16 00:01:04,799 --> 00:01:13,599 こうするとここ表示のための箱がねできました
17 00:01:10,010 --> 00:01:19,750 この部分ですねこの部分がこれにあたります
18 00:01:13,599 --> 00:01:21,069 入っては続きましてこのカウントダウンと count up っていうねええええ
19 00:01:19,750 --> 00:01:25,269 もの
20 00:01:21,069 --> 00:01:33,619 このボタンを作ってましょうかこれはボタン
21 00:01:25,269 --> 00:01:36,099 パターンタグで id がダウンしときましょうかねでえっとカウントダウンカーン
22 00:01:33,620 --> 00:01:36,100 相談ん
23 00:01:36,500 --> 00:01:44,939 でスラッシュボタンっ
24 00:01:38,959 --> 00:01:48,799 こうできましてでもう一つはまたボタンためですねボタンの
25 00:01:44,939 --> 00:01:53,299 id コール今度はアップ
26 00:01:48,799 --> 00:01:58,319 でここは count up 民主ときましょうよ
27 00:01:53,299 --> 00:02:01,489 はいはいって今どこができているかをちょっと見てますね
28 00:01:58,319 --> 00:02:05,189 保存して更新ボタン
29 00:02:01,489 --> 00:02:11,849 カウントアップとダウンできますカウンターだよん
30 00:02:05,189 --> 00:02:13,629 でもまぁ当然ですねここで何もこのカウントディスクカウントという箇所には何も表示
31 00:02:11,849 --> 00:02:19,370 されません
32 00:02:13,629 --> 00:02:24,109 そうなんですではこれからですねここにカウントアップボタン押したら
33 00:02:19,370 --> 00:02:29,650 風が上がっていて簡単をしたら風が下がっていくという java スクリプトを書い
34 00:02:24,110 --> 00:02:30,900 てみましょうかねぇスクリプトをこの下に書いてみます
35 00:02:29,650 --> 00:02:39,840 えっ
36 00:02:30,900 --> 00:02:43,590 まず何をするかというとここねあの表示部分の設定をしたいなぁと思うんですけれども
37 00:02:39,840 --> 00:02:48,959 まあここの要素取り出して変数に入れる
38 00:02:43,590 --> 00:02:50,890 っすそうすることで javascript を使えるようになりますのでまずここを
39 00:02:48,959 --> 00:02:52,110 変数に入れるということを彼らしい
40 00:02:50,889 --> 00:02:57,039 しましょう
41 00:02:52,110 --> 00:03:01,780 8ねー変数名はカウント
42 00:02:57,039 --> 00:03:04,250 あ処理するディスプカウントでいいですねまあ javascript の変数の方は
43 00:03:01,780 --> 00:03:07,890 アンダーバーにしておきましょうか
44 00:03:04,250 --> 00:03:12,229 ね上のクラスメイト少し分けて
45 00:03:07,889 --> 00:03:19,589 a 棟ですねこれでディスプカーンと=
46 00:03:12,229 --> 00:03:25,039 ドキュメント度とけとエレメント場合 id ですよね
47 00:03:19,590 --> 00:03:26,770 ってここに書いてあるこの愛ディスプカウントっていう id から
48 00:03:25,039 --> 00:03:28,379 ディスプ
49 00:03:26,770 --> 00:03:32,189 をしたでありました
50 00:03:28,379 --> 00:03:34,359 カウントというところからこれで
51 00:03:32,189 --> 00:03:35,659 いいですねぇ
52 00:03:34,360 --> 00:03:38,940 いいでしょ
53 00:03:35,659 --> 00:03:42,599 横にもうちょっと広げましょうか
54 00:03:38,939 --> 00:03:46,859 1行の海や住吉これでどうでしょうか
55 00:03:42,599 --> 00:03:54,509 この上の部分九重見えないですけれども
56 00:03:46,860 --> 00:03:58,930 ディヴカウントの要素を取ることができているはずですでこのドキュメント.これで
57 00:03:54,509 --> 00:03:59,679 撮ってそれをディスプカウントという変数に入れました
58 00:03:58,930 --> 00:04:05,689 ああああああ
59 00:03:59,680 --> 00:04:10,010 これでねあのここに通じを表示する準備ができたわけですね
60 00:04:05,689 --> 00:04:14,659 じゃあ今度えっとこのボタンを押した時とか
61 00:04:10,009 --> 00:04:17,839 まあカウントアップボタンを押した時簡単をボタン押した時ね
62 00:04:14,659 --> 00:04:21,319 9多分になりますけれども
63 00:04:17,839 --> 00:04:24,509 こちらをまた変数に霊的必要があります
64 00:04:21,319 --> 00:04:30,959 バーのアップは
65 00:04:24,509 --> 00:04:32,379 えっとこっちですねドキュメントとゲットエレメント場合 id のカウンターぷ
66 00:04:30,959 --> 00:04:34,848 あっぷ
67 00:04:32,379 --> 00:04:37,649 勇者があっ
68 00:04:34,848 --> 00:04:44,339 これでアップという変数に入りました
69 00:04:37,649 --> 00:04:48,709 で今度じゃったバーンこれは同じにしてますけど id 見るとでこれでもいいんです
70 00:04:44,339 --> 00:04:48,709 8簡単ドキュメント
71 00:04:48,879 --> 00:04:54,899 ドドットゲットエレメント場合 id の
72 00:04:52,899 --> 00:04:56,718 ダウンって言う
73 00:04:54,899 --> 00:04:58,629 この変数
74 00:04:56,718 --> 00:05:00,069 から取ってきました
75 00:04:58,629 --> 00:05:04,050 はい
76 00:05:00,069 --> 00:05:04,050 これで億件じゃあこれ保存して
77 00:05:04,240 --> 00:05:11,650 でもまあまああの
78 00:05:07,149 --> 00:05:16,909 これがね表示されて今何も変わってないんですけれども
79 00:05:11,649 --> 00:05:19,128 もしまあ確かめたいとき例えばよくやるのアラートとかでね
80 00:05:16,910 --> 00:05:24,139 表示してもいいかもしれないですね
81 00:05:19,129 --> 00:05:30,000 っとまぁアップとかねダウンとか本当に撮れてるのかとかね
82 00:05:24,139 --> 00:05:32,819 例えばディスプカウントっていうのは this バンダーバーカうんとって変数は
83 00:05:30,000 --> 00:05:36,540 ここから取れているのか
84 00:05:32,819 --> 00:05:40,860 こうするとえっとここ
85 00:05:36,540 --> 00:05:45,439 リロードするとですねこの中アラートで出てくるじゃないですか
86 00:05:40,860 --> 00:05:50,689 オブジェク店主のディーブエレメントまあまあ撮れてんだなと
87 00:05:45,439 --> 00:05:56,509 ねっ詳細までは分からないですけれどもまあ動いてるなっていうのが分かるので
88 00:05:50,689 --> 00:06:00,959 まあいろんななんか試すときはこのアラートで一応試してみても見たメガネ
89 00:05:56,509 --> 00:06:08,039 初心者のうちはあのわかりやすいと思いますいいかもしれないですね
90 00:06:00,959 --> 00:06:11,069 はいでここまではとりあえずこのパーツを全て
91 00:06:08,040 --> 00:06:12,700 この変数に入れることができました
92 00:06:11,069 --> 00:06:16,269 ここね
93 00:06:12,699 --> 00:06:22,029 これで扱いやすくなっもう一つね
94 00:06:16,269 --> 00:06:23,579 ヒントのとこでもいいましたけれどもカウントアップしたりダウンしたりする時に初期
95 00:06:22,029 --> 00:06:28,059 値を
96 00:06:23,579 --> 00:06:29,430 8設定する人がありますねなのでカウント
97 00:06:28,060 --> 00:06:35,269 前
98 00:06:29,430 --> 00:06:37,040 カウントて変数をつくって初期値としゼロを入れといてあげるといいかなと
99 00:06:35,269 --> 00:06:43,969 思います
100 00:06:37,040 --> 00:06:47,180 そしたらすべての準備がたと思いましたのでいよいよですねじゃあアップした時に
101 00:06:43,970 --> 00:06:51,569 カウントが上がっていくという行動を変えてみましょう
102 00:06:47,180 --> 00:06:52,910 up .後イベントリスナー
103 00:06:51,569 --> 00:06:54,030 ですね
104 00:06:52,910 --> 00:06:57,139 で
105 00:06:54,029 --> 00:07:00,769 プリキュした時に
106 00:06:57,139 --> 00:07:05,660 中野パールアクションを実行しなさい
107 00:07:00,769 --> 00:07:07,139 ターンアクシオ学校学校中学校 enter こうやって書きましたよね
108 00:07:05,660 --> 00:07:12,780 で
109 00:07:07,139 --> 00:07:14,129 小アップをクリックした時にちゃんとファンクションが実行されてこれもアラートで見
110 00:07:12,779 --> 00:07:16,488 てみましょうか
111 00:07:14,129 --> 00:07:16,489 はいっ
112 00:07:16,889 --> 00:07:22,240 ぺて保存して
113 00:07:18,519 --> 00:07:29,198 でリロードしてカウンターを出てきました
114 00:07:22,240 --> 00:07:30,400 はいが実行されてアップをクリックするとまリスナーがきちんとですね働いているよう
115 00:07:29,199 --> 00:07:34,860 です
116 00:07:30,399 --> 00:07:40,000 ではでばこれで準備がと取る思いましたので
117 00:07:34,860 --> 00:07:45,819 クリックしたときに何するかというとこの変数に合うとね
118 00:07:40,000 --> 00:07:48,589 1を足していけばいいはでしょ count +=1
119 00:07:45,819 --> 00:07:51,079 にすれば
120 00:07:48,589 --> 00:07:53,819 はいじゃあ保存して
121 00:07:51,079 --> 00:07:57,029 デリーロードしてカウンター
122 00:07:53,819 --> 00:07:58,449 あれでないですよねそうです
123 00:07:57,029 --> 00:08:02,978 これは
124 00:07:58,449 --> 00:08:06,420 ここねディスプレイするためのこの箱がありますけれども
125 00:08:02,978 --> 00:08:10,769 ここに表しなきゃいけないですよねなので
126 00:08:06,420 --> 00:08:14,449 高校は8このインナー.美味しいんですよね
127 00:08:10,769 --> 00:08:19,968 このディスプカウントの陰などと石見るに
128 00:08:14,449 --> 00:08:22,720 入れてあげる必要がある this プーアンダバカウントとインナ
129 00:08:19,968 --> 00:08:24,180 html =
130 00:08:22,720 --> 00:08:26,630 カウント
131 00:08:24,180 --> 00:08:28,600 お題にです
132 00:08:26,629 --> 00:08:33,509 これでどうでしょうか
133 00:08:28,600 --> 00:08:37,590 リロードしてた歌をアウトはパプアタート o
134 00:08:33,509 --> 00:08:39,960 カウントがドンドンドンドンアップできているようです
135 00:08:37,590 --> 00:08:42,570 これ成功してますね
136 00:08:39,960 --> 00:08:43,700 誓じゃあ
137 00:08:42,570 --> 00:08:52,510 8
138 00:08:43,700 --> 00:08:52,509 今度ダウンこれは同じですねアドイベントリスナーでクリックしたときに
139 00:08:52,600 --> 00:09:03,220 ヘッドファンクションねファンクションが実行されますよ
140 00:08:56,828 --> 00:09:06,799 括弧括弧の中括弧でカウントはマイナス=
141 00:09:03,220 --> 00:09:10,920 11-ってことですよねで
142 00:09:06,799 --> 00:09:14,458 ここも同じちょっと状況に書いてますけどいいんです
143 00:09:10,919 --> 00:09:17,750 本当はねこれ重複次第でもっときれいに書けるかもしれないですけど
144 00:09:14,458 --> 00:09:21,639 初心者のうちはですねこういうふうに
145 00:09:17,750 --> 00:09:25,090 動けばいいんですでいんだ以上にパウンと
146 00:09:21,639 --> 00:09:31,569 となりますこれでどうでしょうか
147 00:09:25,090 --> 00:09:35,440 では見てみましたねリロードしてカウンターあっあっぷあっぷあったというじゃない
148 00:09:31,570 --> 00:09:37,870 ですかねアップしてますで次はだんだんだんだん
149 00:09:35,440 --> 00:09:40,720 をいいですね
150 00:09:37,870 --> 00:09:43,750 簡単パプダウダード
151 00:09:40,720 --> 00:09:48,209 はい by ガスにもなっちゃいますけど
152 00:09:43,750 --> 00:09:51,200 まあこれもいいでしょとにかく8カウントアップとダウンが
153 00:09:48,208 --> 00:09:57,289 ね実装することができました
154 00:09:51,200 --> 00:09:58,200 これだけの行動でねまあかけて結構良かったんじゃないかなと思います
155 00:09:57,289 --> 00:10:02,459 えっ
156 00:09:58,200 --> 00:10:06,509 あの面白いですよねちゃんとこういう風に書いて
157 00:10:02,460 --> 00:10:11,910 でその通りに動くっていうのはあの javascript ならではで
158 00:10:06,509 --> 00:10:13,629 なんかすぐ実行できるっていうねそれ結果が見えるのはすごく楽しいなと
159 00:10:11,909 --> 00:10:18,789 思いますね
160 00:10:13,629 --> 00:10:23,159 なので皆さんもねやり方が勝ったら今度はで作ってみようとか今できる範囲でいろいろ
161 00:10:18,789 --> 00:10:23,159 考えてみるといいかもしれないですね
162 00:10:23,610 --> 00:10:30,740 じゃあもう少しだけじゃあやってみましょうか今
163 00:10:27,679 --> 00:10:35,689 リロードするとですねこうなってるじゃないですか
164 00:10:30,740 --> 00:10:39,860 最初に0を出したいときはここに0を書いておいていいかもしれないですね
165 00:10:35,690 --> 00:10:40,400 0回解いてリロードして0 h 23
166 00:10:39,860 --> 00:10:41,759 を
167 00:10:40,399 --> 00:10:43,350 えっ
168 00:10:41,759 --> 00:10:47,129 そう
169 00:10:43,350 --> 00:10:48,190 ここに0って入れとけばいいです
170 00:10:47,129 --> 00:10:50,870 はい
171 00:10:48,190 --> 00:10:53,329 あとはそうですね
172 00:10:50,870 --> 00:10:57,259 [音楽]
173 00:10:53,328 --> 00:11:01,169 そうですねいろいろありますけどあんまりやり過ぎると良くないので
174 00:10:57,259 --> 00:11:07,610 まあここまでできれば最高かなと思います
175 00:11:01,169 --> 00:11:07,610 はいそれではえーっ課題のデモンストレーションを終わりにしましょう