JSが全然書けないので、取り敢えず30日間続けてみた（1日目）

✅ 今日学んだこと

• イベントリスナー（addEventListener）の書き方
• setTimeout()・setInterval() を使った時間操作
• Math.random() を使ったランダム処理
• 配列とループ（for / forEach）
• 条件分岐（if / else）
• 関数の基本と return の使い方
• FizzBuzzの実装

---

1. ボタンクリックで文字を変える

<p id="message">ここが変わります</p>
<button onclick="buttonClick()">クリックしてね</button>

<script>
  function buttonClick() {
    const message = document.getElementById("message");
    message.textContent = "こんにちは！";
    message.style.color = "blue";
  }
</script>

---

2. 3秒後にアラートを出す

function alertTime() {
  setTimeout(function () {
    alert("3秒経ちました！");
  }, 3000);
}

---

3. 配列の中身をコンソールに表示

const array = ["りんご", "バナナ", "ぶどう"];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

---

4. 偶数・奇数を判定して表示

const number = 12;

if (number % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

---

5. ランダムな数（1〜10）を表示

const randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(randomNumber);

---

6. オブジェクトに名前と年齢を入れて表示

const person = { name: "なみ", age: 20 };
console.log(person.name);
console.log(person.age);

---

7. 現在の日時を表示する

const time = new Date();
console.log(time);

---

8. ボタンクリックの回数をカウントする

<button id="button">クリック</button>
<p id="countDisplay">0回クリックされました</p>

<script>
  let count = 0;
  const button = document.getElementById("button");
  const display = document.getElementById("countDisplay");

  button.addEventListener("click", function () {
    count++;
    display.textContent = `${count} 回クリックされました`;
  });
</script>

---

9. 5秒ごとに「ポーン！」と表示

<p id="poon"></p>

<script>
  const poon = document.getElementById("poon");

  function displayPoon() {
    poon.textContent = "ポーン!";
    console.log("ポーン!");
  }

  setInterval(displayPoon, 5000);
</script>

---

10. 入力した文字をリアルタイムで表示

<input id="form">
<p id="text"></p>

<script>
  const form = document.getElementById("form");
  const text = document.getElementById("text");

  form.addEventListener("input", function () {
    text.textContent = form.value;
  });
</script>

---

11. 3の倍数を表示する

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    console.log(i);
  }
}

---

12. FizzBuzzを表示する

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else {
    console.log(i);
  }
}

---

13. 関数で2つの数の合計を返す

const a = 5;
const b = 3;

function addNumbers() {
  return a + b;
}

console.log(addNumbers()); // 結果：8

---

明日もがんばります！🔥