ボタンを押せない事が一目で分かる仕様〜counterプログラムを作って感じた事〜

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。前回投稿した記事と関連した内容になります。JavaScriptを使用して簡単なcounterプログラムを作った時に、ボタンを押せない事をどのように表現したら良いか疑問に思った為、トライしてみました。

JavaScriptでcounterプログラムを作ってみた

最初に作ったのが下記のような見た目のcounterプログラムになります。

コードの概要は以前の記事に記載しております。

今回、ボタンを押せない事が一目で分かるような仕様を作成してみました。

作成したコード

作成したコードで特に変更した点を記載致します。

1. 初期状態で+2ボタンを無効化
+2ボタンは初期状態では無効化されています。ユーザーが200回クリックするまで、ボタンは押せないように設定しています。この制約は、以下のコードで実現しています。

HTML
+2ボタンのHTMLコードには、disabled属性が設定されています。

<button
  type="button"
  class="button js-button"
  id="js-plus2-button"
  disabled
  title="200回クリックするまで押せません"
>
  +2
</button>

JavaScript
初期状態でボタンを無効化し、200回クリックするまで有効にしない内容をJavaScriptで実装しています。

(() => {
  const $counter = document.getElementById("js-counter");
  const $plus2Button = document.getElementById("js-plus2-button"); // idで+2ボタンを取得
  let clickCount = 0;
  let firstClick = true;

  // 初期状態で+2ボタンが正しく無効化されているか確認
  if (!$plus2Button) {
    console.error("Error: +2 button not found.");
    return; // ボタンが見つからない場合は処理を中断
  }

  const clickHandler = (e) => {
    const $targetButton = e.currentTarget;
    let currentCount = parseInt($counter.textContent);

    // 初めてクリックされたときにアラートを表示
    if (firstClick) {
      alert("100回まで高橋名人のように連打して!");
      firstClick = false;
    }

    clickCount++;

    // 200回目のクリック時に+2ボタンを有効化
    if (clickCount === 200) {
      alert("+2ボタンが押せるようになりました");
      $plus2Button.disabled = false; // +2ボタンを有効にする
    }

    // 特定のカウントに応じたアラート表示
    if (currentCount === 100) {
      alert("マインドフルネスできましたね");
    } else if (currentCount === 101) {
      alert("1000回まで押したら・・・");
    } else if (currentCount === 300 || currentCount === 301) {
      alert("負けないで、ほらそこにゴールは近づいてる");
    } else if (currentCount === 600 || currentCount === 601) {
      alert("揺れる思い、体中感じて");
    } else if (currentCount === 900 || currentCount === 901) {
      alert("桜並木のサライの空へ");
    } else if (currentCount === 1000 || currentCount === 1001) {
      alert("これが没頭ということですね。");
    }

    // ボタンに応じたカウント処理
    if ($targetButton.textContent === "+") {
      $counter.textContent = currentCount + 1;
    } else if ($targetButton.textContent === "-") {
      $counter.textContent = currentCount - 1;
    } else if ($targetButton.id === "js-plus2-button") {
      // クリック数が200回以上である場合のみ+2ボタンが動作
      if (clickCount >= 200) {
        $counter.textContent = currentCount + 2;
      } else {
        alert("200回クリックするまで押せません");
      }
    }
  };

  // querySelectorAllでボタンを取得し、イベントリスナーをバインド
  const buttons = document.querySelectorAll(".js-button");
  buttons.forEach((button) => {
    button.addEventListener("click", clickHandler);
  });
})();

2.視覚的な工夫
ボタンが押せない状態であることをユーザーに視覚的に知らせるために、CSSでボタンのスタイルを変更しています。具体的には、disabled属性が付いたボタンに対して、以下のスタイルを適用しています。

CSS

/* +2ボタンが無効（disabled）状態のスタイル */
.button:disabled {
  background-color: #ccc; /* 灰色にして視覚的に無効であることを示す */
  color: #666;            /* 文字色も変更 */
  cursor: not-allowed;   /* ポインタカーソルを変更 */
  opacity: 0.6;          /* ボタンの透明度を変更 */
}

/* ホバー時でもアクティブに見えないように */
.button:disabled:hover {
  opacity: 0.6;          /* ホバー時の透明度も変更 */
}

このように、ボタンが無効化されていることを視覚的にわかりやすくするために、ボタンの背景色を灰色にし、カーソルをnot-allowedに変更しました。また、ホバー時の効果も適用して、無効な状態であることがユーザーに一目で伝わるようにしています。

まとめ

今回のカウンターでは、特定の条件（200回のクリック）が満たされるまで「+2」ボタンを無効にし、ユーザーに視覚的に知らせる方法を取り入れました。このような小さな工夫を施すことで、ユーザーに楽しんでもらえるインタラクティブな体験を提供できます。今後も、ユーザーエクスペリエンス向上のためのアイデアを考えていきたいと思います。

最後までご覧いただき本当にありがとうございました！！