JavaScriptの埋め込みを完全ガイド！初心者でも簡単に学べる10のステップ

はじめに
●JavaScript埋め込みとは
●JavaScript埋め込みの基本
- ○HTMLへの埋め込み方法
- ○外部ファイルの読み込み
●実践的なサンプルコード10選
まとめ

はじめに

JavaScriptの埋め込みは、Webサイトにインタラクティブな機能を追加するための重要な技術です。

本記事では、初心者の方々にも理解しやすいよう、実践的なサンプルコードを交えながら、JavaScript埋め込みの基本から応用まで詳しく解説していきます。

●JavaScript埋め込みとは

JavaScriptの埋め込みとは、HTMLページにJavaScriptコードを組み込むことで、動的な要素をWebサイトに追加する手法です。

ボタンクリック時の動作やアニメーション効果など、ユーザーとの対話性を高めるための様々な機能を実現できます。

●JavaScript埋め込みの基本

JavaScriptの埋め込みの基本を理解することは、動的なWebページを作成する上で非常に重要です。

ここでは、JavaScriptをHTMLに埋め込む主な方法について詳しく解説します。

初心者の方々も、この基本的な概念をしっかりと把握することで、より複雑な機能の実装に向けて着実に進歩することができるでしょう。

○HTMLへの埋め込み方法

JavaScriptコードをHTMLに埋め込むには、<script>タグを使用します。

このタグは通常、<head>タグ内や<body>タグ内に配置されます。

<!DOCTYPE html>
<html>
<head>
  <script>
    // ここにJavaScriptコードを記述します
  </script>
</head>
<body>
  <!-- ページの内容がここに入ります -->
</body>
</html>

この構造を使用することで、JavaScriptコードをHTML内に直接記述できます。

○外部ファイルの読み込み

JavaScriptコードが長くなる場合や、複数のページで同じコードを使用したい場合は、外部ファイルにコードを記述し、それを読み込む方法が効果的です。

次のように記述します。

<!DOCTYPE html>
<html>
<head>
  <script src="スクリプト.js"></script>
</head>
<body>
  <!-- ページの内容がここに入ります -->
</body>
</html>

この方法を採用することで、コードの管理が容易になり、ページの読み込み速度も向上する可能性があります。

●実践的なサンプルコード10選

ここからは、JavaScript埋め込みの実践的な使用例を10個紹介します。

各サンプルコードは、初心者の方でも理解しやすいよう、詳細な説明を加えています。

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

このサンプルでは、ボタンをクリックするとアラートメッセージが表示されます。

<!DOCTYPE html>
<html>
<head>
  <script>
    function showAlert() {
      alert("こんにちは、みなさん！");
    }
  </script>
</head>
<body>
  <button onclick="showAlert()">ここをクリック</button>
</body>
</html>

このコードでは、showAlert関数を定義し、ボタンのonclick属性でその関数を呼び出しています。

ボタンがクリックされると、アラートが表示されます。

○サンプルコード2：ボタンクリックでテキスト変更

次は、ボタンをクリックすると特定の要素のテキストが変更されるサンプルです。

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeText() {
      document.getElementById("target").innerHTML = "こんにちは、みなさん！";
    }
  </script>
</head>
<body>
  <p id="target">ここに文章が表示されます。</p>
  <button onclick="changeText()">ここをクリック</button>
</body>
</html>

このコードでは、changeText関数がgetElementByIdメソッドを使用して特定の要素を選択し、そのinnerHTMLプロパティを変更しています。

○サンプルコード3：画像の切り替え

このサンプルでは、画像をクリックすると別の画像に切り替わります。

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeImage() {
      var img = document.getElementById("myImage");
      img.src = img.src.endsWith("image1.jpg") ? "image2.jpg" : "image1.jpg";
    }
  </script>
</head>
<body>
  <img id="myImage" src="image1.jpg" alt="サンプル画像" onclick="changeImage()">
</body>
</html>

この例では、changeImage関数が画像のsrc属性を確認し、条件に応じて別の画像ファイルに切り替えています。

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

フォームの入力をJavaScriptでチェックする例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkForm() {
      var input = document.getElementById("myInput");
      if (input.value.length < 5) {
        alert("5文字以上で入力してください。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkForm()">
    <input id="myInput" type="text">
    <button type="submit">送信</button>
  </form>
</body>
</html>

このコードでは、checkForm関数がフォームの送信時に呼び出され、入力内容をチェックしています。

条件を満たさない場合は、アラートを表示してフォームの送信を中止します。

○サンプルコード5：マウスオーバーで画像拡大

次は、マウスを画像に重ねると画像が拡大するサンプルです。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myImage {
      width: 200px;
      height: auto;
      transition: all 0.5s;
    }
    #myImage:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <img id="myImage" src="sample.jpg" alt="サンプル画像">
</body>
</html>

このサンプルでは、CSSのtransitionプロパティとtransformプロパティを使用して、滑らかな拡大効果を実現しています。

○サンプルコード6：ドロップダウンメニュー

ドロップダウンメニューの実装例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button>メニュー</button>
    <div class="dropdown-content">
      <p><a href="#">オプション1</a></p>
      <p><a href="#">オプション2</a></p>
      <p><a href="#">オプション3</a></p>
    </div>
  </div>
</body>
</html>

このサンプルでは、CSSを使用してドロップダウンメニューの動作を実現しています。

JavaScriptを使用せずに、:hover疑似クラスでメニューの表示を制御しています。

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

自動的に画像が切り替わるスライドショーの例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .slideshow img {
      width: 100%;
      height: auto;
      position: absolute;
      opacity: 0;
      transition: opacity 1s;
    }
    .slideshow img.active {
      opacity: 1;
    }
  </style>
  <script>
    window.addEventListener("DOMContentLoaded", function () {
      var images = document.querySelectorAll(".slideshow img");
      var currentIndex = 0;
      images[currentIndex].classList.add("active");

      setInterval(function () {
        images[currentIndex].classList.remove("active");
        currentIndex = (currentIndex + 1) % images.length;
        images[currentIndex].classList.add("active");
      }, 3000);
    });
  </script>
</head>
<body>
  <div class="slideshow">
    <img src="image1.jpg" alt="画像1" class="active">
    <img src="image2.jpg" alt="画像2">
    <img src="image3.jpg" alt="画像3">
  </div>
</body>
</html>

このコードでは、setInterval関数を使用して定期的に画像を切り替えています。

CSSのトランジション効果により、滑らかな切り替えが実現されています。

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

モーダルウィンドウの実装例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
  <script>
    function showModal() {
      document.getElementById("myModal").style.display = "block";
    }
    function closeModal() {
      document.getElementById("myModal").style.display = "none";
    }
  </script>
</head>
<body>
  <button onclick="showModal()">モーダルを開く</button>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <p>モーダルウィンドウの内容です</p>
    </div>
  </div>
</body>
</html>

このサンプルでは、JavaScriptを使用してモーダルウィンドウの表示・非表示を制御しています。

CSSでモーダルウィンドウのスタイルを定義しています。

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

アコーディオンメニューは、WebサイトやアプリケーションでよくみられるUIパターンです。

クリックすると展開する形式のメニューで、限られたスペースに多くの情報を効率的に表示できます。

ここでは、シンプルなアコーディオンメニューの実装例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .accordion {
      background-color: #eee;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
    }
    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }
  </style>
  <script>
    function toggleAccordion(button) {
      button.classList.toggle("active");
      var panel = button.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>
</head>
<body>
  <button class="accordion" onclick="toggleAccordion(this)">セクション1</button>
  <div class="panel">
    <p>セクション1の内容です</p>
  </div>
  <button class="accordion" onclick="toggleAccordion(this)">セクション2</button>
  <div class="panel">
    <p>セクション2の内容です</p>
  </div>
  <button class="accordion" onclick="toggleAccordion(this)">セクション3</button>
  <div class="panel">
    <p>セクション3の内容です</p>
  </div>
</body>
</html>

このコードでは、toggleAccordion関数を使用して、クリックされたセクションの表示・非表示を切り替えています。

CSSでアコーディオンのスタイルを定義しており、JavaScriptと組み合わせることで動的な挙動を実現しています。

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

タブ切り替えは、複数のコンテンツを同一ページ内で効率的に表示するための優れたUIパターンです。

ユーザーが簡単に異なるコンテンツセクション間を移動できるようになります。

ここでは、基本的なタブ切り替えの実装例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .tab {
      overflow: hidden;
      background-color: #f1f1f1;
    }
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    .tab button:hover {
      background-color: #ddd;
    }
    .tab button.active {
      background-color: #ccc;
    }
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border-top: none;
    }
  </style>
  <script>
    function openTab(event, tabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(tabName).style.display = "block";
      event.currentTarget.className += " active";
    }
  </script>
</head>
<body>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Tab1')">タブ1</button>
    <button class="tablinks" onclick="openTab(event, 'Tab2')">タブ2</button>
    <button class="tablinks" onclick="openTab(event, 'Tab3')">タブ3</button>
  </div>
  <div id="Tab1" class="tabcontent">
    <h3>タブ1</h3>
    <p>タブ1の内容がここに表示されます。</p>
  </div>
  <div id="Tab2" class="tabcontent">
    <h3>タブ2</h3>
    <p>タブ2の内容がここに表示されます。</p>
  </div>
  <div id="Tab3" class="tabcontent">
    <h3>タブ3</h3>
    <p>タブ3の内容がここに表示されます。</p>
  </div>
</body>
</html>

このコードでは、openTab関数を使用してタブの切り替えを管理しています。

各タブボタンをクリックすると、対応するコンテンツが表示され、他のコンテンツは非表示になります。

CSSを使用してタブのスタイルを整え、視覚的な一貫性を保っています。