純粋な JavaScript だけで作る「ドラムキット」アプリ 🎵

はじめに

今回は HTML / CSS / JavaScript だけを使って、ブラウザ上で遊べる「ドラムキット」アプリを作ってみました。
キーボードを叩くと、対応するドラムの音が鳴るシンプルな仕組みですが、DOM 操作やイベント処理の理解にとても役立ちます。

完成イメージはこんな感じです：

• 画面に「A, S, D...」などのキーが並んでいる
• キーボードを押すと対応する音が鳴る
• 押したキーが光ったり大きくなったりする

以下は全体像です。

HTML: 基本の構造

まずは土台となる HTML です。

<div class="keys">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>
  <div data-key="83" class="key">
    <kbd>S</kbd>
    <span class="sound">hihat</span>
  </div>
  <div data-key="68" class="key">
    <kbd>D</kbd>
    <span class="sound">kick</span>
  </div>
  <!-- 以下省略 -->
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<!-- 以下省略 -->

ポイント：

data-key 属性に キーコード を設定する（例：65 → キーボードの A）

タグで音声ファイルを事前に読み込む

CSS: 見た目とアニメーション

ボタンの見た目と押したときのアニメーションを作ります。

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  background: rgba(0,0,0,0.4);
  color: white;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #ffc600;
}

ポイント：

.key でボタン風の見た目

.playing が付与された時に 拡大＆光るエフェクト

transition でアニメーションを自然に

JavaScript: 音を鳴らす仕組み

キーボード入力に応じて音を鳴らす部分です。

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  e.target.classList.remove('playing');
}

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  if (!audio) return;

  key.classList.add('playing');
  audio.currentTime = 0; // 連打してもすぐ鳴る
  audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

流れ：

キーボードを押す → keydown 発火

押されたキーに対応する を取得

音を再生し、.playing クラスを付与

アニメーション終了後、クラスを削除

改善ポイント

スマホ対応：タップで音を鳴らす

音源追加：自分の好きなドラムや効果音に変更

UI 改良：丸ボタンや背景をライブ会場風に

まとめ

このドラムアプリで学べること：

keydown イベントの扱い

data-* 属性で DOM とデータを紐付け

transitionend を使ったアニメーション制御

ぜひコピーして、自分だけのドラムキットを作ってみてください！ 🎶

GitHub でソースコードを見る

このドラムキットの 完全なソースコード は GitHub にあります。興味のある方は下記リンクからご覧ください。
https://github.com/Cyoukakitsu/JavaScript-30day/tree/main/01%20-%20JavaScript%20Drum%20Kit