JavaScript play groundで遊ぼう！初心者向け10選

はじめに
●JavaScriptプレイグラウンドとは
●プレイグラウンドの作成方法
●初心者向けサンプルコード10選
●カスタマイズの方法と注意点
まとめ

はじめに

この記事を読めば、JavaScript play groundの作り方や使い方が分かるようになります。

初心者向けの10個のサンプルコードを紹介し、自分でプレイグラウンドを作成し、カスタマイズする方法を学びましょう！

●JavaScriptプレイグラウンドとは

JavaScriptプレイグラウンドは、JavaScriptを練習するための環境で、実際にコードを書いて動作を確認しながら学習できます。

この記事では、初心者にも分かりやすい方法でプレイグラウンドを作成し、実践例を通してJavaScriptの基本を学んでいきます。

●プレイグラウンドの作成方法

プレイグラウンドを作成するには、HTMLファイル、JavaScriptファイル、CSSファイルの3つを準備します。

○HTMLファイルの準備

HTMLファイルは、ウェブページの構造を定義するものです。

シンプルなHTMLファイルの例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptプレイグラウンド</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ここにコンテンツを記述 -->
  <script src="script.js"></script>
</body>
</html>

○JavaScriptファイルの準備

JavaScriptファイルは、ウェブページに動的な機能を追加するためのものです。

例えば、下記のコードでは、ページが読み込まれたときにアラートが表示されます。

// ページが読み込まれたときにアラートを表示
window.onload = function() {
  alert("ページが読み込まれました！");
};

○CSSファイルの準備

CSSファイルは、ウェブページのデザインを定義するものです。

例えば、下記のコードでは、背景色を薄いグレーに設定しています。

body {
  background-color: #f0f0f0;
}

●初心者向けサンプルコード10選

ここでは、初心者向けのJavaScriptサンプルコードを10個紹介します。

これらのコードをプレイグラウンドで試してみましょう。

○サンプルコード1：アラート表示

このコードでは、ボタンをクリックするとアラートが表示される機能を実現しています。

具体的には、HTML内のボタン要素に対してクリックイベントリスナーを設定し、クリックされた際にアラートを表示しています。

HTML部分

<button id="alertButton">アラートを表示</button>

JavaScript部分

// アラートボタンを取得
const alertButton = document.getElementById('alertButton');

// アラートボタンにクリックイベントを設定
alertButton.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

○サンプルコード2：ボタンクリックで画像切り替え

このコードでは、ボタンをクリックすると画像が切り替わる機能を実現しています。

具体的には、画像のURLを配列に格納し、クリックイベントが発生した際に画像のsrc属性を順番に切り替えることで実現しています。

HTML部分

<img id="image" src="image1.jpg" alt="画像1">
<button id="switchImageButton">画像切り替え</button>

JavaScript部分

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

// 画像のURLを配列に格納
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

// 画像切り替えボタンにクリックイベントを設定
switchImageButton.addEventListener('click', function() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  image.src = images[currentIndex];
});

○サンプルコード3：マウスオーバーでテキスト変更

このコードでは、マウスが要素に乗ったときにテキストが変わる機能を実現しています。

具体的には、マウスオーバーイベントとマウスアウトイベントを使って、要素のinnerTextを変更しています。

HTML部分

<div id="hoverArea">マウスを乗せてください</div>

JavaScript部分

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

// マウスオーバーイベントを設定
hoverArea.addEventListener('mouseover', function() {
  hoverArea.innerText = 'マウスが乗っています';
});

// マウスアウトイベントを設定
hoverArea.addEventListener('mouseout', function() {
  hoverArea.innerText = 'マウスを乗せてください';
});

○サンプルコード4：ドロップダウンメニューの作成

このコードでは、ドロップダウンメニューを作成する方法を紹介しています。

この例では、メニューボタンをクリックすると、メニュー項目が表示され、再度クリックすると非表示になる機能を実装しています。

HTML部分

<button id="menuButton">メニュー</button>
<ul id="menuItems" style="display:none;">
  <li>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</li>
</ul>

JavaScript部分

const menuButton = document.getElementById('menuButton');
const menuItems = document.getElementById('menuItems');

// メニューボタンにクリックイベントを設定
menuButton.addEventListener('click', function() {
  if (menuItems.style.display === 'none') {
    menuItems.style.display = 'block';
  } else {
    menuItems.style.display = 'none';
  }
});

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

このコードでは、スライドショーを実現する方法を紹介しています。

この例では、指定された間隔で画像を自動的に切り替える機能を実装しています。

HTML部分

<div id="slideshow">
  <img src="image1.jpg" alt="画像1" class="active">
  <img src="image2.jpg" alt="画像2">
  <img src="image3.jpg" alt="画像3">
</div>

JavaScript部分

const images = document.querySelectorAll('#slideshow img');
let currentIndex = 0;

function switchImage() {
  images[currentIndex].classList.remove('active');
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  images[currentIndex].classList.add('active');
}

// 3秒ごとに画像を切り替える
setInterval(switchImage, 3000);

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

このコードでは、タブ切り替え機能を実現する方法を紹介しています。

この例では、タブをクリックすると、対応するコンテンツが表示され、他のコンテンツは非表示になる機能を実装しています。

HTML部分

<div class="tabs">
  <button class="tab-button active" data-target="content1">タブ1</button>
  <button class="tab-button" data-target="content2">タブ2</button>
  <button class="tab-button" data-target="content3">タブ3</button>
</div>
<div class="contents">
  <div id="content1" class="tab-content active">コンテンツ1</div>
  <div id="content2" class="tab-content">コンテンツ2</div>
  <div id="content3" class="tab-content">コンテンツ3</div>
</div>

JavaScript部分

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

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    const target = button.getAttribute('data-target');

    // タブのアクティブ状態を更新
    tabButtons.forEach(b => b.classList.remove('active'));
    button.classList.add('active');

    // コンテンツの表示・非表示を切り替え
    tabContents.forEach(content => {
      if (content.id === target) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });
  });
});

○サンプルコード7：フォーム入力チェック

このコードでは、フォームの入力チェック機能を実装する方法を紹介しています。

この例では、フォームの内容が適切かどうかをチェックし、適切でない場合はエラーメッセージを表示する機能を実装しています。

HTML部分

<form id="form" novalidate>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" required>
  <span class="error-message"></span>
  <br>
  <button type="submit">送信</button>
</form>

JavaScript部分

const form = document.getElementById('form');
const email = document.getElementById('email');
const errorMessage = document.querySelector('.error-message');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  if (!email.validity.valid) {
    errorMessage.textContent = '有効なメールアドレスを入力してください。';
  } else {
    errorMessage.textContent = '';
    // ここでフォームの送信処理を行う
  }
});

○サンプルコード8：時計表示

このコードでは、リアルタイムの時刻を表示する機能を実装する方法を紹介しています。

この例では、1秒ごとに時刻が更新されるデジタル時計を作成しています。

HTML部分

<div id="clock"></div>

JavaScript部分

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

function updateTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const currentTime = `${hours}:${minutes}:${seconds}`;

  clock.textContent = currentTime;
}

setInterval(updateTime, 1000);
updateTime();

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

このコードでは、アコーディオンメニューを作成する方法を紹介しています。

この例では、メニューのタイトルをクリックすることで、対応するコンテンツが展開・収縮する機能を実装しています。

HTML部分

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">メニュー1</div>
    <div class="accordion-content">コンテンツ1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">メニュー2</div>
    <div class="accordion-content">コンテンツ2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">メニュー3</div>
    <div class="accordion-content">コンテンツ3</div>
  </div>
</div>

JavaScript部分

const accordionTitles = document.querySelectorAll('.accordion-title');

accordionTitles.forEach(title => {
  title.addEventListener('click', () => {
    const content = title.nextElementSibling;
    content.classList.toggle('active');
  });
});

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

このコードでは、モーダルウィンドウを表示・非表示にする機能を実装する方法を紹介しています。

この例では、ボタンをクリックすることでモーダルウィンドウが表示され、閉じるボタンや背景をクリックすることで非表示になる機能を実装しています。

HTML部分

<button id="open-modal">モーダルを開く</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="close-modal" class="close-button">&times;</span>
    <p>モーダルのコンテンツ</p>
  </div>
</div>

JavaScript部分

const openModal = document.getElementById('open-modal');
const closeModal = document.getElementById('close-modal');
const modal = document.getElementById('modal');

openModal.addEventListener('click', () => {
  modal.classList.add('active');
});

closeModal.addEventListener('click', () => {
  modal.classList.remove('active');
});

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.remove('active');
  }
});