初心者でも分かる！JavaScript入門とサンプルコード実践例10選

// 変数宣言と代入
let number = 10;      // 数値
const message = 'こんにちは'; // 文字列
let flag = true;      // 真偽値

// if文
if (条件式) {
} else {
}

// for文
for (let i = 0; i < 10; i++) {
}

// 関数宣言
function 関数名(引数1, 引数2) {
  return 戻り値;
}

// 関数呼び出し
関数名(引数1, 引数2);

// HTML要素の取得
const element = document.getElementById('elementId');

// クリックイベントのリスナーを登録
element.addEventListener('click', function() {
});

<button id="changeColorButton">色を変更</button>
<p id="text">このテキストの色が変わります。</p>

const button = document.getElementById('changeColorButton');
const text = document.getElementById('text');

button.addEventListener('click', function() {
  text.style.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
});

const image = document.getElementById('changeImage');

const originalSrc = image.src;

image.addEventListener('mouseover', function() {
  image.src = 'image2.jpg';
});

image.addEventListener('mouseout', function() {
  image.src = originalSrc;
});

<form id="form">
  <label for="email">メールアドレス:</label>
  <input type="text" id="email" name="email">
  <span id="emailError" style="display:none; color:red;">正しいメールアドレスを入力してください。</span>
  <br>
  <button type="submit">送信</button>
</form>

const form = document.getElementById('form');
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');

form.addEventListener('submit', function(event) {
  if (!emailInput.value.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/)) {
    emailError.style.display = 'inline';
    event.preventDefault();
  } else {
    emailError.style.display = 'none';
  }
});

<div id="dragItem" draggable="true" style="width:100px;height:100px;background-color:blue;"></div>
<div id="dropZone" style="width:200px;height:200px;border:1px solid;"></div>

const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');

dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', dragItem.id);
});

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();

  const draggedId = event.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(draggedId);
  dropZone.appendChild(draggedElement);
});

<div class="accordion">
  <div class="accordion-header">メニュー1</div>
  <div class="accordion-content">
    <p>メニュー1の内容がここに表示されます。</p>
  </div>
  <div class="accordion-header">メニュー2</div>
  <div class="accordion-content">
    <p>メニュー2の内容がここに表示されます。</p>
  </div>
  <div class="accordion-header">メニュー3</div>
  <div class="accordion-content">
    <p>メニュー3の内容がここに表示されますし、ここがポイントです。</p>
  </div>
</div>

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const content = header.nextElementSibling;

    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
});

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-button">タブ1</button>
    <button class="tab-button">タブ2</button>
    <button class="tab-button">タブ3</button>
  </div>
  <div class="tab-contents">
    <div class="tab-content">タブ1の内容</div>
    <div class="tab-content">タブ2の内容</div>
    <div class="tab-content">タブ3の内容</div>
  </div>
</div>

const tabButtons = document.querySelectorAll('.tab-button');

const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    tabContents.forEach(content => {
      content.style.display = 'none';
    });

    tabContents[index].style.display = 'block';
  });
});

<button id="open-modal">モーダルを開く</button>
<div id="modal" class="hidden">
  <div id="modal-content">
    <h2>モーダルウィンドウのタイトル</h2>
    <p>モーダルウィンドウの内容</p>
    <button id="close-modal">閉じる</button>
  </div>
</div>

const openModalButton = document.getElementById('open-modal');

const modal = document.getElementById('modal');

const closeModalButton = document.getElementById('close-modal');

openModalButton.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.add('hidden');
});

<div id="slideshow">
  <img src="image1.jpg" class="slide active" alt="スライド1">
  <img src="image2.jpg" class="slide" alt="スライド2">
  <img src="image3.jpg" class="slide" alt="スライド3">
</div>
<button id="prev">前へ</button>
<button id="next">次へ</button>

const slides = document.querySelectorAll('.slide');

const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');

let currentIndex = 0;

function changeSlide(index) {
  slides[currentIndex].classList.remove('active');
  slides[index].classList.add('active');
  currentIndex = index;
}

prevButton.addEventListener('click', () => {
  const newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
  changeSlide(newIndex);
});
nextButton.addEventListener('click', () => {
  const newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
  changeSlide(newIndex);
});

setInterval(() => {
  const newIndex = (currentIndex + 1) % slides.length;
  changeSlide(newIndex);
}, 3000);

<p id="timer">カウントダウンタイマー：00:00</p>
<button id="start">開始</button>
<button id="stop">停止</button>

const timerElement = document.getElementById('timer');

const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');

let timeLeft = 60; // 秒
let timerId = null;

function updateTimer() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  timerElement.textContent = `カウントダウンタイマー：${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

function startTimer() {
  if (timerId) return;
  timerId = setInterval(() => {
    timeLeft--;
    updateTimer();
    if (timeLeft <= 0) {
      clearInterval(timerId);
      timerId = null;
      alert('時間切れです！');
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId);
  timerId = null;
}

startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);

<input id="inputTask" type="text" placeholder="タスクを入力">
<button id="addTask">タスク追加</button>
<ul id="taskList"></ul>

const addTaskButton = document.getElementById('addTask');
const inputTask = document.getElementById('inputTask');
const taskList = document.getElementById('taskList');

function addTask() {
  const task = inputTask.value;
  if (!task) return;

  const listItem = document.createElement('li');
  listItem.textContent = task;
  taskList.appendChild(listItem);

  inputTask.value = '';
}

addTaskButton.addEventListener('click', addTask);

inputTask.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTask();
  }
});