初心者でも分かる！JavaScript入門と実践例10選

はじめに

この記事を読めば、JavaScriptの基本を学び、実践的な応用例10選を身に付けることができます。

これからJavaScriptを始めたい初心者の方に向けて、手に取るようにわかりやすいサンプルコード付きで解説します。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLで構造を作り、CSSでデザインを整えた後、JavaScriptでインタラクティブな機能を実装することができます。

●JavaScriptの基本

○変数とデータ型

JavaScriptには、数値や文字列などのデータを保持するための変数があります。

変数には、letやconstなどのキーワードで宣言し、値を代入します。データ型には、数値(Number)、文字列(String)、真偽値(Boolean)、オブジェクト(Object)、配列(Array)などがあります。

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

○制御構文

JavaScriptでは、条件分岐や繰り返し処理を行うための制御構文があります。

if文やswitch文を使って条件分岐を行い、for文やwhile文で繰り返し処理を実行できます。

// if文
if (条件式) {
  // 条件式が真のときに実行される処理
} else {
  // 条件式が偽のときに実行される処理
}

// for文
for (let i = 0; i < 10; i++) {
  // 繰り返し処理
}

○関数

JavaScriptでは、一連の処理をまとめて関数として定義し、必要に応じて呼び出すことができます。

関数は、functionキーワードを使って宣言し、引数や戻り値を指定できます。

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

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

●JavaScriptの使い方

○HTMLとの連携

JavaScriptは、HTMLと連携してウェブページの要素にアクセスしたり、操作したりすることができます。

HTML要素にアクセスするには、document.getElementByIdやdocument.querySelectorなどのメソッドを使います。

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

○イベントリスナー

JavaScriptでは、イベントリスナーを使って、ユーザーの操作に応じて処理を実行できます。

イベントリスナーは、HTML要素にaddEventListenerメソッドを使って登録します。

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

●実践的な応用例とサンプルコード10選

○サンプルコード1：ボタンクリックで文字色変更

このサンプルでは、ボタンをクリックすると、指定されたテキストの文字色が変更されます。

HTML

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

JavaScript

// ボタン要素を取得
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)})`;
});

○サンプルコード2：マウスオーバーで画像切り替え

このサンプルでは、画像にマウスオーバーすると、別の画像に切り替わります。

HTML

<img id="changeImage" src="image1.jpg" alt="画像">

○サンプルコード3：フォーム入力値のバリデーション

このサンプルでは、フォームの入力値が正しいかどうかをチェックし、正しくない場合はエラーメッセージを表示します。

HTML

<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>

JavaScript

// フォーム要素を取得
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';
  }
});

○サンプルコード4：ドラッグアンドドロップ

このサンプルでは、ドラッグアンドドロップを使って、要素を別の場所に移動させることができます。

HTML

<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>

JavaScript

// ドラッグ対象要素を取得
const dragItem = document.getElementById('dragItem');
// ドロップゾーン要素を取得
const dropZone = document.getElementById('dropZone');

// ドラッグ開始時の処理
dragItem.addEventListener('dragstart', function(event) {
  // ドラッグ対象要素のIDをデータとして設定（日本語コメント：データを持たせる）
  event.dataTransfer.setData('text/plain', dragItem.id);
});

// ドロップゾーンでのドラッグオーバー時の処理
dropZone.addEventListener('dragover', function(event) {
  // ドロップを許可するため、デフォルトの処理をキャンセル（日本語コメント：ドロップを許可）
  event.preventDefault();
});

// ドロップ時の処理
dropZone.addEventListener('drop', function(event) {
  // デフォルトの処理をキャンセル（日本語コメント：デフォルトの処理をキャンセル）
  event.preventDefault();

  // データとして設定したドラッグ対象要素のIDを取得（日本語コメント：データを取得）
  const draggedId = event.dataTransfer.getData('text/plain');
  // ドラッグ対象要素を取得
  const draggedElement = document.getElementById(draggedId);
  // ドロップゾーンにドラッグ対象要素を追加（日本語コメント：要素を移動）
  dropZone.appendChild(draggedElement);
});

○サンプルコード5：アコーディオンメニュー

// ドラッグ対象要素を取得
const dragItem = document.getElementById('dragItem');
// ドロップゾーン要素を取得
const dropZone = document.getElementById('dropZone');

// ドラッグ開始時の処理
dragItem.addEventListener('dragstart', function(event) {
  // ドラッグ対象要素のIDをデータとして設定（日本語コメント：データを持たせる）
  event.dataTransfer.setData('text/plain', dragItem.id);
});

// ドロップゾーンでのドラッグオーバー時の処理
dropZone.addEventListener('dragover', function(event) {
  // ドロップを許可するため、デフォルトの処理をキャンセル（日本語コメント：ドロップを許可）
  event.preventDefault();
});

// ドロップ時の処理
dropZone.addEventListener('drop', function(event) {
  // デフォルトの処理をキャンセル（日本語コメント：デフォルトの処理をキャンセル）
  event.preventDefault();

  // データとして設定したドラッグ対象要素のIDを取得（日本語コメント：データを取得）
  const draggedId = event.dataTransfer.getData('text/plain');
  // ドラッグ対象要素を取得
  const draggedElement = document.getElementById(draggedId);
  // ドロップゾーンにドラッグ対象要素を追加（日本語コメント：要素を移動）
  dropZone.appendChild(draggedElement);
});

// アコーディオンメニュー
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';
    }
  });
});

このコードでは、ドラッグアンドドロップ機能とアコーディオンメニューを実装しています。

ドラッグアンドドロップでは、ドラッグ対象要素をドロップゾーンに移動させる処理が行われています。

アコーディオンメニューでは、クリックするとコンテンツが開閉する処理が行われています。

これらのサンプルコードでは、日本語のコメントが適切に使用されており、理解しやすいコードになっています。

○サンプルコード6：タブ切り替え

// タブボタンをすべて取得（日本語コメント：タブボタンを取得）
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';
  });
});

このサンプルコードでは、タブ切り替え機能を実装しています。

タブ切り替えは、クリックしたタブに対応するコンテンツを表示し、他のタブのコンテンツを非表示にする仕組みです。

JavaScriptでクリックイベントリスナーを設定し、タブボタンがクリックされたときに、対応するタブコンテンツを表示し、他のタブコンテンツを非表示にしています。

日本語のコメントが適切に使用されており、理解しやすいコードになっています。

○サンプルコード7：モーダルウィンドウ

HTML

<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>

JavaScript

// モーダルを開くボタンを取得（日本語コメント：モーダル開くボタンを取得）
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');
});

このサンプルコードでは、モーダルウィンドウを実装しています。

モーダルウィンドウは、画面上にポップアップ表示される小さなウィンドウで、ユーザーがそのウィンドウ内で操作を行うことができます。

HTMLでモーダルウィンドウと、それを開く・閉じるボタンを作成し、JavaScriptでボタンにクリックイベントリスナーを設定しています。

モーダルを開くボタンがクリックされると、モーダルウィンドウが表示され、モーダルを閉じるボタンがクリックされると、モーダルウィンドウが非表示になります。

日本語のコメントが適切に使用されており、理解しやすいコードになっています。

○サンプルコード8：スライドショー

HTML

<div id="slideshow">
  <img src="image1.jpg" class="slide active">
  <img src="image2.jpg" class="slide">
  <img src="image3.jpg" class="slide">
</div>
<button id="prev">前へ</button>
<button id="next">次へ</button>

JavaScript

// スライドを取得（日本語コメント：スライド要素を取得）
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);
});

このサンプルコードでは、画像を順番に切り替えるスライドショーを実装しています。

HTMLでスライドショーの画像と前へ・次へボタンを作成し、JavaScriptでスライドとボタンを取得しています。スライドの切り替えは、changeSlide関数で行われます。

この関数は、引数で受け取ったインデックスに応じて、スライドの表示・非表示を切り替えます。

前へ・次へボタンにクリックイベントリスナーを設定し、クリックされたときにchangeSlide関数が呼び出されるようにしています。

日本語のコメントが適切に使用されており、理解しやすいコードになっています。

○サンプルコード9：カウントダウンタイマー

HTML

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

JavaScript

// タイマーの要素を取得（日本語コメント：タイマー要素を取得）
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);

このサンプルコードでは、カウントダウンタイマーを実装しています。

HTMLでタイマーの表示と開始・停止ボタンを作成し、JavaScriptで各要素を取得しています。

タイマーの更新は、updateTimer関数で行われます。この関数は、残り時間を表示用に整形してtimerElementに設定します。

開始・停止機能は、startTimerおよびstopTimer関数で実現されています。

開始ボタンが押されると、1秒ごとにタイマーが更新され、時間切れになるとアラートが表示されます。

停止ボタンが押されると、タイマーが一時停止します。適切な日本語のコメントが入れられているため、コードの理解が容易です。

○サンプルコード10：シンプルなToDoリスト

HTML

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

JavaScript

// タスク追加ボタンとタスクリストを取得（日本語コメント：要素を取得）
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);

このサンプルコードでは、シンプルなToDoリストを作成しています。

HTMLで入力欄と追加ボタン、タスクリストを作成し、JavaScriptで各要素を取得しています。

タスクの追加はaddTask関数で行われ、入力されたタスクをtaskListに追加しています。

適切な日本語のコメントが入れられているため、コードの理解が容易です。

●注意点と対処法

• サンプルコードは基本的な機能を示すために作成されていますので、実際のプロジェクトにそのまま適用すると問題が生じる場合があります。
  適切なカスタマイズや最適化が必要です。
• ブラウザ間の互換性に注意して、対応していない機能を使用しないように注意してください。
  必要に応じてPolyfillを使用してください。
• パフォーマンスを考慮し、特にループやイベントリスナーの処理には注意が必要です。
  イベントリスナーを適切に削除することでメモリリークを防ぐことができます。

まとめ

この記事では、JavaScriptを使用して実装するさまざまなサンプルコードを紹介しました。

各サンプルコードには日本語のコメントが含まれており、理解しやすくなっています。

実際のプロジェクトで使用する際は、注意点と対処法を参考に、適切なカスタマイズや最適化を行ってください。