JavaScript初心者が楽しく学べる！マウス・キーボードで動く簡単Webアプリ5選

プロコム開発チーム

Contents

0.1 はじめに

1 1. 画像の拡大・縮小ビューア
2 2. キーボードでキャラクターを動かす
3 3. 画像ギャラリー（サムネイル切替）
4 4. フォーム入力文字数カウンター
5 5. ストップウォッチ
- 5.1 まとめ

はじめに

JavaScriptは「クリックしたら動く」だけではありません。
マウスやキーボードのイベントを使えば、自分で操作できるインタラクティブな作品が簡単に作れます。
今回は、初心者でも楽しみながら作れる5つのアプリ例を紹介します。

1. 画像の拡大・縮小ビューア

マウスホイールで画像を拡大縮小できます。

<img id="photo" src="https://placekitten.com/300/200" alt="ネコ" style="transition: transform 0.2s;">

<script>
let scale = 1;
const img = document.getElementById('photo');

img.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.001;
  scale = Math.min(Math.max(.5, scale), 3); // 0.5〜3倍
  img.style.transform = `scale(${scale})`;
});
</script>

ポイント

wheelイベントでマウスホイールの動きを取得
CSSのtransform: scale()で拡大縮小

2. キーボードでキャラクターを動かす

矢印キーで四角を移動できます。

<div id="player" style="width:50px;height:50px;background:red;position:absolute;top:100px;left:100px;"></div>

<script>
const player = document.getElementById('player');
let x = 100, y = 100;

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') y -= 10;
  if (e.key === 'ArrowDown') y += 10;
  if (e.key === 'ArrowLeft') x -= 10;
  if (e.key === 'ArrowRight') x += 10;
  player.style.left = x + 'px';
  player.style.top = y + 'px';
});
</script>

ポイント

keydownイベントでキー入力を判定
style.left / style.topで位置変更

3. 画像ギャラリー（サムネイル切替）

サムネイルをクリックするとメイン画像が変わります。

<img id="mainImage" src="https://placekitten.com/400/300" alt="main">
<div>
  <img src="https://placekitten.com/200/150" onclick="changeImage(this.src)">
  <img src="https://placekitten.com/201/150" onclick="changeImage(this.src)">
</div>

<script>
function changeImage(src) {
  document.getElementById('mainImage').src = src;
}
</script>

ポイント

onclick属性で簡単に関数呼び出し
画像のsrcを切り替えるだけで完成

4. フォーム入力文字数カウンター

リアルタイムで入力文字数を表示します。

<textarea id="text" rows="4" cols="30"></textarea>
<p>文字数: <span id="count">0</span></p>

<script>
const textArea = document.getElementById('text');
const count = document.getElementById('count');

textArea.addEventListener('input', () => {
  count.textContent = textArea.value.length;
});
</script>

ポイント

inputイベントでリアルタイムに取得
.value.lengthで文字数を数える

5. ストップウォッチ

スタート・ストップ・リセットできる簡単ストップウォッチ。

<p id="time">0.00</p>
<button onclick="start()">スタート</button>
<button onclick="stop()">ストップ</button>
<button onclick="reset()">リセット</button>

<script>
let startTime, timer;
function start() {
  startTime = Date.now() - (timer ? parseFloat(document.getElementById('time').textContent) * 1000 : 0);
  timer = setInterval(() => {
    document.getElementById('time').textContent = ((Date.now() - startTime) / 1000).toFixed(2);
  }, 10);
}
function stop() { clearInterval(timer); timer = null; }
function reset() {
  clearInterval(timer); timer = null;
  document.getElementById('time').textContent = "0.00";
}
</script>