💥「えっ…こんなに面白いの!?」たった数行で感動するJavaScript練習コード7選

プロコム開発チーム

こんにちは、Webエンジニアの海老氏です！

今回は、**誰でもすぐに試せる「JavaScriptの練習コード」**を紹介します。
しかも…全部 “ちょっと感動する” やつだけを厳選しました。

初心者でも「JavaScriptおもしろっ！」と感じられる内容ばかりなので、
プログラミングのモチベーションを爆上げしたいあなたにおすすめです🔥

Contents

1 ✨1. アラートで「自分の名前」を呼び出す
2 ✨2. おみくじメーカー（本当に出る）
3 ✨3. 自動で色が変わる背景
4 ✨4. ボタンを押すと「好きです」と告白される
5 ✨5. 今の日時を表示するだけでカッコイイ
6 ✨6. チャット風に入力が並ぶ！超簡易ログ
7 ✨7. マウスを追いかけるハート（ちょっと魔法）
8 🚀まとめ：楽しく練習するから身につく！

✨1. アラートで「自分の名前」を呼び出す

const name = prompt("あなたの名前は？");
alert(`${name}さん、JavaScriptの世界へようこそ！`);

✅ ポイント：promptとalertだけで「対話アプリっぽさ」を味わえる！
✅ 応用：条件分岐で「VIP扱い」などもできる！

✨2. おみくじメーカー（本当に出る）

const result = ["大吉", "中吉", "小吉", "凶", "大凶"];
const random = Math.floor(Math.random() * result.length);
alert(`🎴 今日の運勢：${result[random]} 🎴`);

✅ ポイント：配列＋Math.random()で、運試しアプリが完成！
✅ バズ狙い：SNSで「今日の運勢」を毎朝投稿しよう。

✨3. 自動で色が変わる背景

<body id="bg" style="transition: 1s;"></body>

<script>
setInterval(() => {
  document.getElementById("bg").style.backgroundColor =
    `hsl(${Math.random() * 360}, 70%, 80%)`;
}, 1000);
</script>

✅ ポイント：背景が毎秒ふんわり色変化 → おしゃれすぎて感動！
✅ 応用：時間帯によって色の系統を変えるなど

✨4. ボタンを押すと「好きです」と告白される

<button onclick="confess()">押してみて</button>

<script>
function confess() {
  alert("…好きです。");
}
</script>

✅ ポイント：イベントリスナーの基本が身につく！
✅ 応用：「10回押したら告白する」みたいなツンデレ演出も可！

✨5. 今の日時を表示するだけでカッコイイ

const now = new Date();
console.log(`📅 現在日時：${now.toLocaleString()}`);

✅ ポイント：Dateオブジェクトでリアルタイム表示
✅ 応用：「毎秒更新」や「カウントダウンタイマー」への応用も◎

✨6. チャット風に入力が並ぶ！超簡易ログ

const logs = [];

function chat() {
  const msg = prompt("発言をどうぞ：");
  logs.push(msg);
  console.clear();
  logs.forEach((l, i) => console.log(`${i + 1}: ${l}`));
}

✅ ポイント：配列×ループで簡易チャット風
✅ 応用：ログをlocalStorageに保存することで継続性アップ！

✨7. マウスを追いかけるハート（ちょっと魔法）

<style>
  .heart {
    position: fixed;
    font-size: 20px;
    pointer-events: none;
  }
</style>

<script>
document.addEventListener("mousemove", e => {
  const heart = document.createElement("div");
  heart.className = "heart";
  heart.style.left = `${e.clientX}px`;
  heart.style.top = `${e.clientY}px`;
  heart.textContent = "❤️";
  document.body.appendChild(heart);
  setTimeout(() => heart.remove(), 500);
});
</script>