JavaScriptで簡単カウンターアプリを作成する方法
プロローグ
JavaScriptを使って簡単なカウンターアプリを作成する方法を学びましょう。このガイドでは、特に初心者向けに基本的な概念から丁寧に説明しています。
設定と事前準備
まず、プロジェクトのファイルを作成しましょう。「counter.html」という名前のHTMLファイルを新規作成します。このファイルに基本的なHTML構造を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウンターアプリ</title>
</head>
<body>
<h1>カウンター</h1>
<!-- カウンターを表示するための元素 -->
<div id="counter">0</div>
<button id="countup">カウントアップ</button>
<button id="countdown">カウントダウン</button>
<script src="counter.js"></script>
</body>
</html>
次に、「counter.js」というJavaScriptファイルを同じディレクトリに作成します。このファイルに実際のカウンター機能を追加していきます。
JavaScriptでカウンターの基礎を理解
カウンターの初期値を設定して、その値をインクリメント（増加）やデクリメント（減少）する方法を見ていきましょう。
let counter = 0;
document.getElementById('countup').addEventListener('click', () => {
counter++;
updateDisplay();
});
document.getElementById('countdown').addEventListener('click', () => {
counter--;
updateDisplay();
});
function updateDisplay() {
document.getElementById('counter').innerText = counter;
}
変数の初期設定と操作
JavaScriptでは変数の初期設定が非常に重要です。以下のように「let」を使って変数を初期化し、それを操作することでカウンターを実現します。
let num = 0: // 初期値を0に設定
インクリメント（増加）とデクリメント（減少）の基本操作
num += 1; // numの値を1増加させる
num--; // numの値を1減少させる
コンソールでの確認とデバッグ
Google Chromeのデベロッパーツールを使って変数の操作を確認する方法も覚えておきましょう。右クリックで「検証」と選択し、「コンソール」タブを開くと、JavaScriptのコードを直接実行できます。
var num = 0;
num += 1; // 1になる
console.log(num); // コンソールに1と表示される
完成したカウンターアプリの機能
これまでのステップを踏んで、シンプルなカウンターアプリが完成しました。ボタンをクリックすると、カウントが増減し、表示される数値が変わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウンターアプリ</title>
<style>
#counter {
font-size: 2em;
margin: 20px;
}
</style>
</head>
<body>
<h1>カウンター</h1>
<div id="counter">0</div>
<button id="countup">カウントアップ</button>
<button id="countdown">カウントダウン</button>
<script>
let counter = 0;
document.getElementById('countup').addEventListener('click', () => {
counter++;
updateDisplay();
});
document.getElementById('countdown').addEventListener('click', () => {
counter--;
updateDisplay();
});
function updateDisplay() {
document.getElementById('counter').innerText = counter;
}
</script>
</body>
</html>
おわりに
カウンターアプリはJavaScriptの基本を学ぶのに最適なプロジェクトです。変数の初期化と操作、イベントリスナーの追加、そしてデベロッパーツールでのデバッグ方法を理解することができます。次のステップは、この知識をもとにしてより複雑なアプリケーションに挑戦することです。
ASCIIアートでの補足
+-----------------+
| カウンター: 0 |
+-----------------+
| [カウントアップ] |
| [カウントダウン] |
+-----------------+
変数の操作:
+---------+
| num = 0 |
| num+=1; | // インクリメント
| num--; | // デクリメント
+---------+
このブログ記事を参考にして、ぜひ自分でもカウンターアプリを作ってみてくださいね！
タイムスタンプ
1 00:00:01,300 --> 00:00:06,370 [音楽]
2 00:00:03,620 --> 00:00:06,370 me
3 00:00:06,700 --> 00:00:12,089 [音楽]
4 00:00:09,589 --> 00:00:17,550 さあ
5 00:00:12,089 --> 00:00:22,289 ないですね bar スプリットでポンたアプリ側でもステイ
6 00:00:17,550 --> 00:00:26,060 閉店的にいただったじゃバスケットスキルっ
7 00:00:22,289 --> 00:00:30,460 パウダーアプリを作成することも可能だ眠い
8 00:00:26,059 --> 00:00:34,359 どうものを作るかというとまあまあこんなアプリになります
9 00:00:30,460 --> 00:00:41,409 でええまあ count up
10 00:00:34,359 --> 00:00:43,479 をクリックすると上にマッサージ c 56しちゃす90と上がっていきます
11 00:00:41,409 --> 00:00:45,909 でカーンとダウン
12 00:00:43,479 --> 00:00:50,769 をクリックすると
13 00:00:45,909 --> 00:00:55,539 198-6をとどんどんどんどん下がっていくっていうようなアプリですね
14 00:00:50,770 --> 00:00:59,379 まあ簡単なカウンターアプリが江戸 javascript で作れるようになってい
15 00:00:55,539 --> 00:01:06,230 ますまあそれでもですねあなかなか
16 00:00:59,378 --> 00:01:11,659 ちょっと難しいと思いますので少しヒントのほうだしておきたいなと思います
17 00:01:06,230 --> 00:01:12,680 でえっとコンソールであの試していただきたいんですけれどもこれはとちょうどでもし
18 00:01:11,659 --> 00:01:20,039 ますね
19 00:01:12,680 --> 00:01:24,780 まああの数を足していく時っていうのは例えばなるゼロとまず最初に
20 00:01:20,040 --> 00:01:26,650 変数心ねえねえとバーって言うつけなきゃいけないですけれども
21 00:01:24,780 --> 00:01:30,070 ナム0
22 00:01:26,650 --> 00:01:31,730 っていうのをつけてや8まあ平素設定してあげて
23 00:01:30,069 --> 00:01:38,869 初期値で0
24 00:01:31,730 --> 00:01:41,450 にしてあげるでそこに出していくのはこの変数に+=1って書いてあげるとどんどん数
25 00:01:38,870 --> 00:01:44,930 が足されていきます
26 00:01:41,450 --> 00:01:48,560 これがまああのヒントになります
27 00:01:44,930 --> 00:01:52,600 はいではですね8ちょっと
28 00:01:48,560 --> 00:01:52,600 このデモンストレーションしてみましょうか
29 00:01:55,189 --> 00:02:03,259 いきましょう8カウンターアプリのね
30 00:01:59,780 --> 00:02:11,840 まずファイルを作ってください new file で
31 00:02:03,260 --> 00:02:13,920 8まず保存でカウンター度と html で大丈夫ですで html のタブでこの中
32 00:02:11,840 --> 00:02:19,030 に作ってください
33 00:02:13,919 --> 00:02:25,779 でですね8先ほどのとカウントアップとダウンロー
34 00:02:19,030 --> 00:02:29,810 ヒントですねちょっとじゃあこれまずは私はカウンター h 1でカウンターって入れ
35 00:02:25,780 --> 00:02:33,390 ておいてこれを
36 00:02:29,810 --> 00:02:36,659 java 助けるとのカウンター
37 00:02:33,389 --> 00:02:41,759 これ見てくださいはいこれできてますね
38 00:02:36,659 --> 00:02:45,699 コンソール google プロームにはコンソールというものがありまして
39 00:02:41,759 --> 00:02:49,639 まあ検証右クリックで検証から行けますね
40 00:02:45,699 --> 00:02:51,109 その中にエレメントが今出てますけどコンソール
41 00:02:49,639 --> 00:02:54,359 にしてください
42 00:02:51,110 --> 00:02:57,390 高精度 javascript たベースことができるんですね
43 00:02:54,360 --> 00:03:01,540 例えば a のさっき言ったような
44 00:02:57,389 --> 00:03:04,839 ちょっと変数をばなる=0
45 00:03:01,539 --> 00:03:07,989 ってこう書いてですねちょっとちっちゃいですね
46 00:03:04,840 --> 00:03:12,400 少し大きくして見てみると enter
47 00:03:07,989 --> 00:03:16,209 高精度正庵ディファイン取ってでありますけどこれで者バスけれどの
48 00:03:12,400 --> 00:03:21,560 試すことができると変数設定できました
49 00:03:16,209 --> 00:03:23,199 ってナムって塩ターンすると0が入ってますよねこれここが
50 00:03:21,560 --> 00:03:26,420 入ってきている数字
51 00:03:23,199 --> 00:03:31,929 次にじゃあ例えば
52 00:03:26,419 --> 00:03:31,929 そうですねえーと何か入れてみましょうか
53 00:03:32,250 --> 00:03:36,259 ナム
54 00:03:33,460 --> 00:03:37,310 +1コール
55 00:03:36,259 --> 00:03:41,359 5
56 00:03:37,310 --> 00:03:46,140 enter そうすると子ねで何分
57 00:03:41,360 --> 00:03:48,260 さらになる+1コール
58 00:03:46,139 --> 00:03:51,738 えーとじゃあな
59 00:03:48,259 --> 00:03:55,128 選んだすると10人になってますねそう
60 00:03:51,739 --> 00:04:02,120 変数最初0に設定して
61 00:03:55,128 --> 00:04:05,030 でそこに英語を足してさらにそれに灘を++=というものを使うと
62 00:04:02,120 --> 00:04:10,069 うまくいくんです
63 00:04:05,030 --> 00:04:18,858 今回のデモアプリに関してはこれ使えますのでよくこのね
64 00:04:10,068 --> 00:04:22,068 +とかそうそう5-もそうですよな6-以降ルーさんとかっていると
65 00:04:18,858 --> 00:04:25,279 急になってますねこういう書き方
66 00:04:22,069 --> 00:04:27,590 よく覚えておいてくださいそれではですね
67 00:04:25,279 --> 00:04:32,679 8頑張って
68 00:04:27,589 --> 00:04:32,679 カウンタープレイですね作ってみて下さい