AIと一緒に学ぶJavaScript基礎⑤ ミニアプリ制作～カウンターアプリを完成させよう～

こんにちは！
フロントエンドエンジニアのあまんちゅです。

AIと一緒に学ぶJavaScript基礎、いよいよ最終回です！

ここまでの記事はこちらです↓

• 第1弾：JavaScriptってどんな言語？ ～まずは触ってみるところから～
• 第2弾：変数とは？～データを保存して使う仕組みを理解する～
• 第3弾：条件分岐と繰り返し ～「もし○○なら」と「何回もやる」～
• 第4弾：関数とイベント ～「処理をまとめる」から「ボタンで動かす」まで～

今回は、これまで学んだ内容を組み合わせて、
「ミニアプリ：カウンター」
を作っていきます。

今日作るもの：カウンター

ボタンを押すと数値が増えたり減ったり、リセットできたりするカウンターを作成します。

• +1 で増える
• -1 で減る
• Reset で0に戻す

まずは完成形のHTML

今回はHTMLとJavaScriptを分けて書く前提で進めます。
まずはHTMLを用意します👇

<div class="counter">
	<p id="num">0</p>
	<div class="buttons">
		<button id="minus">-1</button>
		<button id="plus">+1</button>
		<button id="reset">Reset</button>
	</div>
</div>

#numが数字表示、
#plus / #minus / #reset
が操作ボタンです。

JavaScript：状態（count）を作る

前回の「簡易版カウンター」と同じく、まずはcount（状態）を用意します。

let count = 0;

カウンターの動きは、

• 状態（count）を更新する
• 画面（#num）に反映する

の繰り返しです。

表示更新を関数にする

ボタンごとに毎回 textContent を書くと、同じ処理が増えてしまいます。
そこで、表示更新だけを関数にして使い回すようにします。

const num = document.querySelector("#num");
function render() {
	num.textContent = count;
}

このrender()を呼ぶだけで、画面表示を最新のcountにできます。

イベントをつなぐ（クリックでcountを更新）

次に、各ボタンを取得してクリックイベントを登録します👇

const plusBtn = document.querySelector("#plus");
const minusBtn = document.querySelector("#minus");
const resetBtn = document.querySelector("#reset");
plusBtn.addEventListener("click", () => {
	count = count + 1;
	render();
});
minusBtn.addEventListener("click", () => {
	count = count - 1;
	render();
});
resetBtn.addEventListener("click", () => {
	count = 0;
	render();
});

これで、クリック → count更新 → render()で表示更新、という流れが完成です。

最初の表示もrender()でそろえる

ページを開いた直後も、念のため表示をそろえておきます👇

render();

これで完成！…なのですが、最後に「ミニアプリっぽさ」を少し足してみます。

発展：0未満にならないようにする（条件分岐）

第三弾でやった条件分岐を使って、0未満にならないようにしてみます。
マイナスボタンの処理を次のように変更します👇

minusBtn.addEventListener("click", () => {
	if (count > 0) {
		count = count - 1; render();
	}
});

0のときは何も起きないので、挙動が少しだけアプリっぽくなります。

最終コード

ここまでのJavaScriptをまとめるとこうなります👇

let count = 0;
const num = document.querySelector("#num");
const plusBtn = document.querySelector("#plus");
const minusBtn = document.querySelector("#minus");
const resetBtn = document.querySelector("#reset");

function render() {
    num.textContent = count;
}
plusBtn.addEventListener("click", () => {
    count = count + 1;
    render();
});
minusBtn.addEventListener("click", () => {
    if (count > 0) {
        count = count - 1;
        render();
    }
});
resetBtn.addEventListener("click", () => {
    count = 0;
    render();
});

render();

See the Pen
Javascript-Basic5-button by Tomomi Aman (@aman21030)
on CodePen.

今回のまとめ

• カウンターは、「今の数字」をcountとして持ち、更新するだけで作れる
• 同じ処理（表示更新）は関数にしてまとめるとスッキリする
• イベント → 状態更新 → 表示更新、が基本の流れ
• 条件分岐（if）を足すと、よりアプリらしい挙動になる

基礎の積み重ねで、カウンターアプリを完成させることができました！

Try（練習）

よかったら、ここから少しだけ改造して練習してみてください👇

✅ Try1：+10ボタンを追加してみる

HTMLにボタンを追加して、クリックしたら count = count + 10 になるようにしてみてください。

✅ Try2：上限を作る（ifで制御）

例えば100以上にならないようにする、など上限を作ってみてください。
ヒント：if (count < 100) の形で判定できます。

振り返り：この5回で積み上がったこと

• 第1弾：コンソールでJSを動かした
• 第2弾：変数でデータを持てるようになった
• 第3弾：条件分岐と繰り返しでロジックが書けるようになった
• 第4弾：関数・DOM・イベントで「画面を動かす」入口に立った
• 最終回：組み合わせて、ミニアプリを完成させた

小さくても「自分の手で作って動かした」経験は、次の学習にとても効果的かと思います。

おまけ

AIとの併走メモ🏃‍♀️💨

最終回も、AIに構成などの相談に乗ってもらいました。
ただ、最終的に動かして確認するのは自分なので、

• 「どの変数が状態なのか？」
• 「どのタイミングで表示を更新しているのか？」
• 「render()を呼ばないと何が起きるのか？」

など、動作の流れを説明できるかを意識しながら進めました。

ここから先は、下記のようなことにも挑戦し「できること」を増やしていけると良さそうだな、と思っています。

• 配列・オブジェクトをもう少し深掘り
• フォーム入力（input）とイベント
• 非同期（fetch / API）
• React / Vue などのフレームワーク（DOM操作の考え方が活きる）

このシリーズのサムネイル

実は、このシリーズのサムネイルの女の子は、回を重ねるごとにどんどん自信をつけていっています。良かったら、過去記事も読んでみてくださいね！