JavaScript - クリックカウンターの作り方【初心者向け】

ボタンが押されたときに数を 1 ずつ変更しよう

今回は、クリックカウンターの作り方を紹介します。クリックカウンターは、ボタンが押されるたびに表示される数が変わるプロジェクトです。簡単な HTML と JavaScript コードで作ることができるので、初めての JavaScript 作品としておすすめです。

この記事を読むと分かること

document.querySelector()
変数 let
関数 function(){}
インクリメント演算子 ++
innerHTML
addEventListener()
アロー関数 =>{}

ユーザーの操作に応じて JavaScript を実行させる基本的な方法は知っていますか？document.querySelector() や addEventListener() について詳しく知りたい方は、こちらの記事から読むことをお勧めします。

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。

PyxofyPyxofy

クリックカウンターのサンプルプロジェクト

下のサンプルで、クリックカウンターの動きを試してみてください。

See the Pen JavaScript - Click Counter by Pyxofy (@pyxofy) on CodePen.

これから、基本編と応用編に分けてクリックカウンターを作っていきます。

【基本編】クリックで数を増やす
【応用編】クリックで数をリセットする

基本編では、ボタンをひとつだけ作ってクリックで数が増えるようにします。応用編では、数をリセットするためのボタンも追加しますよ。

【基本編】クリックで数を増やす方法

最初に紹介するのは、ボタンのクリックで数を 1 ずつ増やす方法です。クリックカウンターの基本となる考え方を、順を追って分かりやすく説明していきますね。

HTMLで数字とボタンを表示する

まず、HTML を書きます。クリックカウンターを作るときに必要なのは、数字を表示する要素と、クリックするボタン要素です。

<h1>0</h1>
<button>+</button>

ブラウザ上の表示

HTML を用意できたら、JavaScript を書いていきます。

要素を取得する

JavaScript で最初にすることは、要素の取得です。JavaScript で操作する HTML 要素を選び出して、変数に格納しましょう。

const number = document.querySelector('h1');
const plusButton = document.querySelector('button');

変数を宣言する

次に、クリックされた回数を数えるための変数を作ります。クリックのたびに変数の値が変化するので、const ではなく let で宣言します。最初の値は「 0 」です。

let count = 0;

変数については、こちらの記事をご覧ください。

JavaScript - 変数の基本 - var, let, const【初心者向け】

プログラミングを学習する際に、最初の段階で学んでおきたい基礎知識のひとつが、変数です。変数とは何か？なんのために使うのか？どうやって書くのか？など、初めて変数に触れる方の疑問に答えます。

PyxofyPyxofy

関数を定義する

続いて、関数を作ります。ボタンがクリックされたときに何をしたいかというと、「変数 count の値を 1 増やして、表示される数字を変更する」という処理です。これらの処理をまとめて関数で定義していきましょう。

function() {
  
  //ここに処理を書く
  // …
  
}

関数については、こちらの記事をご覧ください。

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

PyxofyPyxofy

変数の値を 1 増やす - `++`

最初にする処理は、変数 count の値を 1 増やすことです。クリックされるたびに変数の値を 1 ずつ増やすためには、++ を使います。++ は、「増加」を意味するインクリメント演算子です。これは、変数の値を 1 増やすときに使われます。10++ のように、数値に対して使うことはできません。

count の値を 1 増やすために、count ++ と書きましょう。

function() {
    count ++; // 変数の値を1増やす
}

表示される数字を変更する - `innerHTML`

次に、クリックされた回数を表示できるようにします。表示内容を変更するために使うのが、innerHTML です。innerHTML を使うと、要素の内容を取得することができます。また、代入演算子 = を使って値を代入することで、要素の内容を置き換えることができます。

1 ずつ増える count の値に置き換えて、表示される数字が変わるようにしましょう。

number は、数字を表示する <h1> 要素への参照です。
ドット . に続けて、innerHTML を書きます。
代入演算子 = のあとに、変数 count を書きます。

function() {
    count ++; 
    number.innerHTML = count; // 表示される数字を変更する
}

表示される数字を 1 ずつ変更する関数ができました。でも、関数を作っただけでは何も起こりません。ユーザーのクリックをきっかけにして、この関数が実行されるようにしていきますよ。

イベントリスナーを設定する

関数を実行するのは、ボタンがクリックされたときです。<button> 要素にイベントリスナーを設定しましょう。

plusButton は、<button> 要素への参照です。
ドット . に続けて、addEventListener() を書きます。
第１引数は、イベントの種類 'click' です。
第２引数は、実行したい関数です。

plusButton.addEventListener('click', function() {
    count ++; 
    number.innerHTML = count;
});

ボタンがクリックされたときに関数が実行されるようになりました。このコードで何も問題はないですが、実はもっと短く書くこともできます。どのように書くか見てみましょう。

アロー関数 - `=> {}`

上のコードでは、addEventListener() の第２引数に関数式（無名関数）を指定していますね。関数式は、よりシンプルに短い書き方をすることができます。それがアロー関数です。

addEventListener() の第２引数にアロー関数を書くと、下のようになります。

plusButton.addEventListener('click', () => {
    count ++; 
    number.innerHTML = count;
});

アロー関数を使うことで、function キーワードが不要になり、より簡潔になりましたね。でも、すべての場合で関数式をアロー関数に書き換えることができるわけではありません。この記事は初心者向けなので詳細は省きますが、引数の数によっても微妙に書き方は変わります。

完成コード - クリックで数を増やす

ボタンのクリックで数を 1 ずつ増やすコードが完成です。

//************************************
// ボタンのクリックで数を1ずつ増やすコード
//***********************************

const number = document.querySelector('h1');
const plusButton = document.querySelector('button');

let count = 0;

plusButton.addEventListener('click', () => {
    count ++; 
    number.innerHTML = count;
});

次のセクションでは、このコードを応用して、クリックで増えた数を 0 にリセットできるようにしていきますよ。

【応用編】クリックで数をリセットする方法

ここまで説明してきた内容が理解できていたら、数をリセットするコードを書くのも簡単です。ボタンのクリックで増えた数を 0 にリセットするためには、リセットボタンを作ってイベントリスナーを設定します。ここからは、コードの追加、変更点のみを説明していきますね。

HTML - ボタンを追加する

まず、HTML です。数をリセットするためのボタンを追加してください。<button> 要素が２つになるので、id をつけて区別できるようにしましょう。

<button id="increment">+</button>
<button id="reset">reset</button> <!-- リセットボタンを追加する -->

ブラウザ上の表示

JavaScript - イベントリスナーを設定する

次に、JavaScript です。<button> 要素は、それぞれ id で取得して変数に格納してください。

const plusButton = document.querySelector('#increment');
const resetButton = document.querySelector('#reset'); // リセットボタン要素を取得する

リセットボタンにもイベントリスナーを設定しましょう。リセットボタンがクリックされたときに実行するのは、「変数 count の値を 0 にして、表示される数字を変更する」という処理です。先ほど作った関数の count ++ の部分を、count = 0 に変更してください。

// リセットボタンにイベントリスナーを設定する
resetButton.addEventListener('click', () => {
    count = 0; 
    number.innerHTML = count;
});

完成コード - クリックで数をリセットする

ボタンのクリックで数を 1 ずつ増やしたり、0 にリセットできるクリックカウンターのコードが完成です。

//*************************
// クリックカウンターのコード
//************************

const number = document.querySelector('h1');
const plusButton = document.querySelector('#increment');
const resetButton = document.querySelector('#reset');

let count = 0;

plusButton.addEventListener('click', () => {
    count ++; 
    number.innerHTML = count;
});

resetButton.addEventListener('click', () => {
    count = 0; 
    number.innerHTML = count;
});

まとめ

今回は、JavaScript で作るクリックカウンターのコードを解説しました。

変数の値を 1 増やすインクリメント演算子 ++ や、要素の内容を置き換えることができる innerHTML を使うことで、表示する数字を変更することができましたね。必要な HTML 要素も少なく、実行する JavaScript コードも単純なので、プログラミング初心者の方でも作りやすいプロジェクトです。ぜひ作ってみてください。

最後まで読んでいただき、ありがとうございます。記事に関するコメントはこちらにお寄せください。Twitter @pyxofy・LinkedIn・Mastodon・Facebook

この記事をシェアしてくれると嬉しいです！