JavaScriptコードをHTMLに直接記述する7つの方法

JavaScriptをHTMLに直接記述するとは？
●scriptタグを使った直接記述
●イベントハンドラとしての直接記述
●JavaScriptの直接記述でよくあるエラーと対処法
- ○scriptタグの位置による実行タイミングのエラー
- ○グローバル変数の競合によるエラー
●JavaScriptの直接記述の応用例
まとめ

JavaScriptをHTMLに直接記述するとは？

今回は、JavaScriptをHTMLに直接記述する方法について解説していきたいと思います。

JavaScriptは、Webページに動的な機能を追加するための強力なプログラミング言語です。

通常、JavaScriptのコードは外部ファイルに記述し、HTMLから読み込むことが一般的ですが、HTMLに直接JavaScriptのコードを記述することも可能なんです。

○JavaScriptとHTMLの関係性

JavaScriptとHTMLは、密接な関係にあります。

HTMLがWebページの構造を定義するのに対し、JavaScriptはWebページの動作を制御します。

HTMLの中でJavaScriptを使用することで、次のようなことができます。

・フォームの入力値のチェックや、動的なフォームの生成
・ボタンクリックなどのユーザーアクションに応じた処理の実行
・Ajaxを使ったサーバーとの非同期通信
・アニメーションやエフェクトの実装

このように、JavaScriptを活用することで、よりインタラクティブで動的なWebページを作成することができるのです。

○直接記述のメリットとデメリット

では、JavaScriptをHTMLに直接記述するメリットとデメリットについて見ていきましょう。

【メリット】
・外部ファイルを読み込む必要がないため、ページの読み込み速度が向上する
・コードとHTMLが1つのファイルにまとまるため、管理がシンプルになる
・小規模なスクリプトには適している

【デメリット】
・コードとHTMLが混在するため、コードの可読性が低下する
・同じスクリプトを複数のページで使い回しにくい
・大規模なスクリプトを記述すると、HTMLファイルが肥大化する

このように、直接記述にはメリットとデメリットがあります。適材適所で使い分けることが重要ですね。

○サンプルコード1：基本的な記述例

それでは実際に、JavaScriptをHTMLに直接記述する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptの直接記述例</title>
</head>
<body>
  <h1>JavaScriptの直接記述</h1>

  <script>
    // JavaScriptのコードをここに記述する
    console.log("Hello, World!");

    function greet(name) {
      alert("こんにちは、" + name + "さん！");
    }
  </script>

  <button onclick="greet('太郎')">あいさつ</button>
</body>
</html>

このコードを実行すると、次のような結果になります。

ページが読み込まれると、コンソールに “Hello, World!” と出力される
「あいさつ」ボタンをクリックすると、”こんにちは、太郎さん！” というアラートが表示される

このように、<script>タグの中にJavaScriptのコードを直接記述することで、HTMLにJavaScriptの機能を組み込むことができます。

●scriptタグを使った直接記述

さて、JavaScriptをHTMLに直接記述する方法の中で最もポピュラーなのが、<script>タグを使う方法です。

○scriptタグの使い方

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

<script>タグは、<head>タグまたは<body>タグの中に配置することができます。

<script>タグには、次のような属性を指定することができます。

src：外部のJavaScriptファイルのURLを指定する
type：スクリプトのタイプを指定する（デフォルトは”text/javascript”）
async：非同期でスクリプトを実行するかどうかを指定する
defer：スクリプトの実行をページの解析が完了するまで延期するかどうかを指定する

○サンプルコード2：scriptタグを使った例

それでは、<script>タグを使ってJavaScriptのコードを直接記述する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>scriptタグの例</title>
  <script>
    // ページが読み込まれたときに実行される
    window.onload = function() {
      console.log("ページが読み込まれました");
    };
  </script>
</head>
<body>
  <h1>scriptタグの例</h1>

  <script>
    // ボタンがクリックされたときに実行される
    function handleClick() {
      alert("ボタンがクリックされました");
    }
  </script>

  <button onclick="handleClick()">クリック</button>
</body>
</html>

このコードを実行すると、次のような結果になります。

ページが読み込まれると、コンソールに “ページが読み込まれました” と出力される
“クリック”ボタンをクリックすると、”ボタンがクリックされました” というアラートが表示される

○async属性とdefer属性の違い

<script>タグには、async属性とdefer属性という2つの属性があります。

この属性は、スクリプトの読み込みと実行のタイミングを制御するために使用されます。

async属性：スクリプトを非同期で読み込み、読み込みが完了次第すぐに実行する
defer属性：スクリプトを非同期で読み込むが、ページの解析が完了するまで実行を延期する

async属性は、スクリプトの実行順序を保証しません。一方、defer属性は、スクリプトの実行順序を保証します。

○サンプルコード3：async属性とdefer属性の使用例

それでは、async属性とdefer属性の使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>async属性とdefer属性の例</title>
  <script src="script1.js" async></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <h1>async属性とdefer属性の例</h1>

  <script>
    console.log("インラインスクリプト");
  </script>
</body>
</html>

// script1.js
console.log("script1.js");

// script2.js
console.log("script2.js");

このコードを実行すると、次のような結果になります。

“インラインスクリプト” が出力される
“script1.js” が出力される（タイミングは不定）
“script2.js” が出力される（ページの解析後）

このように、async属性とdefer属性を使い分けることで、スクリプトの読み込みと実行のタイミングを制御することができます。

●イベントハンドラとしての直接記述

JavaScriptをHTMLに直接記述する方法として、もう1つ重要なのがイベントハンドラとしての記述方法です。

○イベントハンドラの概要

イベントハンドラとは、HTMLの要素で発生するイベント（クリック、フォーム送信、キー入力など）に対して、JavaScriptの関数を紐付ける仕組みのことを指します。

イベントハンドラを使うことで、ユーザーの操作に応じてJavaScriptの処理を実行することができます。

これにより、Webページにインタラクティブ性を持たせることができるのです。

それでは、具体的なイベントハンドラの使用例を見ていきましょう。

○サンプルコード4：クリックイベントハンドラの例

クリックイベントは、ユーザーがHTML要素をクリックしたときに発生するイベントです。

ここでは、ボタンのクリックイベントにJavaScriptの関数を紐付ける例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>クリックイベントハンドラの例</title>
</head>
<body>
  <h1>クリックイベントハンドラの例</h1>

  <button onclick="handleClick()">クリックしてね</button>

  <script>
    function handleClick() {
      alert("ボタンがクリックされました！");
    }
  </script>
</body>
</html>

このコードを実行すると、「クリックしてね」というボタンが表示され、そのボタンをクリックすると、「ボタンがクリックされました！」というアラートが表示されます。

ここでポイントなのが、<button>タグのonclick属性に、handleClick()という関数を指定している部分です。

これで、ボタンがクリックされたときにhandleClick()関数が実行されるようになっています。

○サンプルコード5：フォーム送信イベントハンドラの例

フォーム送信イベントは、フォームが送信されたときに発生するイベントです。

ここでは、フォームの送信イベントにJavaScriptの関数を紐付ける例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信イベントハンドラの例</title>
</head>
<body>
  <h1>フォーム送信イベントハンドラの例</h1>

  <form onsubmit="handleSubmit(event)">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">送信</button>
  </form>

  <script>
    function handleSubmit(event) {
      event.preventDefault(); // デフォルトの送信動作をキャンセル
      const name = document.getElementById("name").value;
      alert(`こんにちは、${name}さん！`);
    }
  </script>
</body>
</html>

このコードを実行すると、名前を入力するテキストフィールドと送信ボタンが表示されます。

名前を入力して送信ボタンを押すと、handleSubmit()関数が実行され、アラートで「こんにちは、〇〇さん！」と表示されます。

ここでは、<form>タグのonsubmit属性にhandleSubmit(event)関数を指定しています。

これにより、フォームが送信されたときにhandleSubmit()関数が実行されます。

また、handleSubmit()関数の中でevent.preventDefault()を呼び出しています。

これは、フォームのデフォルトの送信動作をキャンセルするためのものです。

これで、JavaScriptの処理を実行した後に、ページが遷移しないようにしています。

○サンプルコード6：キー入力イベントハンドラの例

キー入力イベントは、ユーザーがキーボードを操作したときに発生するイベントです。

テキストフィールドのキー入力イベントにJavaScriptの関数を紐付ける例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>キー入力イベントハンドラの例</title>
</head>
<body>
  <h1>キー入力イベントハンドラの例</h1>

  <label for="message">メッセージ:</label>
  <input type="text" id="message" name="message" onkeyup="handleKeyUp()">

  <p id="preview"></p>

  <script>
    function handleKeyUp() {
      const message = document.getElementById("message").value;
      document.getElementById("preview").textContent = message;
    }
  </script>
</body>
</html>

このコードを実行すると、メッセージを入力するテキストフィールドが表示され、そのすぐ下にプレビューが表示されます。

テキストフィールドに入力すると、リアルタイムでプレビューが更新されます。

ここでは、<input>タグのonkeyup属性にhandleKeyUp()関数を指定しています。

これで、テキストフィールドでキーが離されるたびにhandleKeyUp()関数が実行されます。

handleKeyUp()関数の中では、テキストフィールドの値を取得し、プレビュー用の<p>タグに設定しています。

このような形で、リアルタイムでプレビューが更新される仕組みになっています。

○サンプルコード7：マウスオーバーイベントハンドラの例

マウスオーバーイベントは、ユーザーがマウスカーソルをHTML要素の上に重ねたときに発生するイベントです。

画像のマウスオーバーイベントにJavaScriptの関数を紐付ける例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>マウスオーバーイベントハンドラの例</title>
  <style>
    .thumbnail {
      width: 200px;
      height: 200px;
      object-fit: cover;
      cursor: pointer;
    }
    .fullsize {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 9999;
    }
    .fullsize img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 90%;
      max-height: 90%;
    }
  </style>
</head>
<body>
  <h1>マウスオーバーイベントハンドラの例</h1>

  <img class="thumbnail" src="thumbnail.jpg" alt="サムネイル画像" onmouseover="showFullSize()" onmouseout="hideFullSize()">

  <div class="fullsize">
    <img src="fullsize.jpg" alt="フルサイズ画像">
  </div>

  <script>
    function showFullSize() {
      document.querySelector(".fullsize").style.display = "block";
    }

    function hideFullSize() {
      document.querySelector(".fullsize").style.display = "none";
    }
  </script>
</body>
</html>

このコードを実行すると、サムネイル画像が表示され、その画像にマウスカーソルを重ねると、フルサイズの画像がオーバーレイ表示されます。

マウスカーソルを外すと、フルサイズの画像が非表示になります。

ここでは、<img>タグのonmouseover属性にshowFullSize()関数を、onmouseout属性にhideFullSize()関数を指定しています。

これで、マウスカーソルが画像の上に重なったときにshowFullSize()関数が実行され、フルサイズの画像が表示されます。

マウスカーソルが画像から外れたときにはhideFullSize()関数が実行され、フルサイズの画像が非表示になります。

●JavaScriptの直接記述でよくあるエラーと対処法

JavaScriptをHTMLに直接記述する際には、いくつかの注意点があります。

ここでは、よくあるエラーとその対処法について解説していきたいと思います。

○scriptタグの位置による実行タイミングのエラー

JavaScriptのコードを<script>タグで直接記述する場合、<script>タグの位置によって実行タイミングが異なることがあります。

例えば、次のようなコードを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>scriptタグの位置によるエラー</title>
  <script>
    // DOMの読み込みが完了する前に実行される
    document.getElementById("message").textContent = "Hello, World!";
  </script>
</head>
<body>
  <h1>scriptタグの位置によるエラー</h1>
  <p id="message"></p>
</body>
</html>

このコードを実行すると、次のようなエラーが発生します。

Uncaught TypeError: Cannot set properties of null (setting 'textContent')

エラーメッセージから、document.getElementById("message")がnullを返していることがわかります。

これは、<script>タグが<head>タグ内にあるため、DOMの読み込みが完了する前にJavaScriptのコードが実行されてしまうためです。

この問題を解決するには、次のように<script>タグを<body>タグの最後に移動します。

<!DOCTYPE html>
<html>
<head>
  <title>scriptタグの位置によるエラー</title>
</head>
<body>
  <h1>scriptタグの位置によるエラー</h1>
  <p id="message"></p>

  <script>
    // DOMの読み込みが完了した後に実行される
    document.getElementById("message").textContent = "Hello, World!";
  </script>
</body>
</html>

こうすることで、DOMの読み込みが完了した後にJavaScriptのコードが実行されるようになり、エラーが解消されます。

<script>タグの位置に気をつけることは、JavaScriptのコードを直接記述する際の重要なポイントの1つです。

DOMの読み込みが完了してから操作したい要素にアクセスするようにしましょう。

○グローバル変数の競合によるエラー

JavaScriptのコードを直接記述する際には、グローバルスコープで変数や関数を定義することがあります。

しかし、複数のスクリプトでグローバル変数や関数を定義すると、競合が発生する可能性があります。

例えば、次のようなコードを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>グローバル変数の競合によるエラー</title>
  <script>
    // スクリプト1
    var message = "Hello, World!";

    function showMessage() {
      alert(message);
    }
  </script>
  <script>
    // スクリプト2
    var message = "こんにちは、世界！";

    function showMessage() {
      console.log(message);
    }
  </script>
</head>
<body>
  <h1>グローバル変数の競合によるエラー</h1>
  <button onclick="showMessage()">メッセージを表示</button>
</body>
</html>

このコードでは、2つのスクリプトがそれぞれmessage変数とshowMessage()関数を定義しています。

しかし、2つ目のスクリプトで定義されたmessage変数とshowMessage()関数が、1つ目のスクリプトで定義されたものを上書きしてしまっています。

その結果、「メッセージを表示」ボタンをクリックすると、console.log(message)が実行され、アラートが表示されない問題が発生します。

この問題を解決するには、次のように即時関数（IIFE）を使ってスクリプトをカプセル化します。

<!DOCTYPE html>
<html>
<head>
  <title>グローバル変数の競合によるエラー</title>
  <script>
    // スクリプト1
    (function() {
      var message = "Hello, World!";

      function showMessage() {
        alert(message);
      }

      // グローバルスコープに関数を公開
      window.showMessage = showMessage;
    })();
  </script>
  <script>
    // スクリプト2
    (function() {
      var message = "こんにちは、世界！";

      function showMessage() {
        console.log(message);
      }
    })();
  </script>
</head>
<body>
  <h1>グローバル変数の競合によるエラー</h1>
  <button onclick="showMessage()">メッセージを表示</button>
</body>
</html>

即時関数を使うことで、各スクリプトのスコープが分離され、グローバル変数や関数の競合を防ぐことができます。

グローバルスコープに公開する必要がある関数は、windowオブジェクトのプロパティとして明示的に公開します。

こうすることで、「メッセージを表示」ボタンをクリックすると、alert(message)が実行され、アラートが表示されるようになります。

●JavaScriptの直接記述の応用例

さて、ここまでJavaScriptをHTMLに直接記述する基本的な方法について解説してきました。

それでは、直接記述を応用したサンプルコードを見ていきましょう。

JavaScriptの直接記述は、Webサイトにインタラクティブな機能を追加するために非常に便利です。

ここでは、よくある応用例をいくつか紹介したいと思います。

○サンプルコード8：動的なフォームのバリデーション

フォームのバリデーションは、ユーザーが入力した値が正しいかどうかを検証するために使用されます。

ここでは、JavaScriptを使って動的にフォームのバリデーションを行う例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>動的なフォームのバリデーション</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <h1>動的なフォームのバリデーション</h1>

  <form id="myForm" onsubmit="return validateForm()">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name" required>
    <span id="nameError" class="error"></span><br>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>
    <span id="emailError" class="error"></span><br>

    <label for="password">パスワード：</label>
    <input type="password" id="password" name="password" required>
    <span id="passwordError" class="error"></span><br>

    <input type="submit" value="送信">
  </form>

  <script>
    function validateForm() {
      let isValid = true;

      // 名前の検証
      const nameInput = document.getElementById("name");
      const nameError = document.getElementById("nameError");
      if (nameInput.value.trim() === "") {
        nameError.textContent = "名前を入力してください";
        isValid = false;
      } else {
        nameError.textContent = "";
      }

      // メールアドレスの検証
      const emailInput = document.getElementById("email");
      const emailError = document.getElementById("emailError");
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "正しいメールアドレスを入力してください";
        isValid = false;
      } else {
        emailError.textContent = "";
      }

      // パスワードの検証
      const passwordInput = document.getElementById("password");
      const passwordError = document.getElementById("passwordError");
      if (passwordInput.value.length < 6) {
        passwordError.textContent = "パスワードは6文字以上で入力してください";
        isValid = false;
      } else {
        passwordError.textContent = "";
      }

      return isValid;
    }
  </script>
</body>
</html>

このコードを実行すると、フォームが表示され、名前、メールアドレス、パスワードを入力するフィールドがあります。送信ボタンを押すと、validateForm()関数が呼び出されます。

validateForm()関数では、各フィールドの値を検証し、エラーメッセージを表示します。

名前が空の場合、メールアドレスが正しい形式でない場合、パスワードが6文字未満の場合にエラーメッセージが表示されます。

エラーがある場合はisValidフラグをfalseに設定し、フォームの送信を防ぎます。

エラーがない場合は、フォームが送信されます。

このように、JavaScriptを使ってフォームのバリデーションを動的に行うことで、ユーザーにリアルタイムでフィードバックを提供し、入力ミスを防ぐことができます。

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

アコーディオンメニューは、クリックすると内容が展開・折りたたみされるメニューです。

ここでは、JavaScriptを使ってアコーディオンメニューを実装する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>アコーディオンメニューの実装</title>
  <style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1>アコーディオンメニューの実装</h1>

  <button class="accordion">セクション 1</button>
  <div class="panel">
    <p>セクション 1 の内容が表示されます。</p>
  </div>

  <button class="accordion">セクション 2</button>
  <div class="panel">
    <p>セクション 2 の内容が表示されます。</p>
  </div>

  <button class="accordion">セクション 3</button>
  <div class="panel">
    <p>セクション 3 の内容が表示されます。</p>
  </div>

  <script>
    const accordions = document.getElementsByClassName("accordion");

    for (let i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function() {
        this.classList.toggle("active");
        const panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
  </script>
</body>
</html>

このコードを実行すると、3つのセクションを持つアコーディオンメニューが表示されます。

各セクションのボタンをクリックすると、対応する内容が展開・折りたたみされます。

JavaScriptでは、getElementsByClassName()を使ってaccordionクラスを持つ要素を取得し、クリックイベントのリスナーを追加しています。

クリックされたセクションのボタンにactiveクラスをトグルし、次の兄弟要素（内容を持つpanelクラスの要素）の表示・非表示を切り替えています。

このように、JavaScriptを使ってアコーディオンメニューを実装することで、コンテンツを整理し、ユーザーが必要な情報にアクセスしやすくなります。

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

タブ切り替えUIは、複数のコンテンツを1つのページに表示し、タブをクリックすることで表示するコンテンツを切り替えるインターフェースです。

JavaScriptを使ってタブ切り替えUIを実装する例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <title>タブ切り替えUIの実装</title>
  <style>
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
  </style>
</head>
<body>
  <h1>タブ切り替えUIの実装</h1>

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

  <script>
    function openTab(evt, tabName) {
      const tabcontent = document.getElementsByClassName("tabcontent");
      for (let i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }

      const tablinks = document.getElementsByClassName("tablinks");
      for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>
</body>
</html>

このコードを実行すると、3つのタブを持つタブ切り替えUIが表示されます。

タブをクリックすると、対応するコンテンツが表示されます。

JavaScriptでは、openTab()関数を定義し、クリックされたタブに応じて表示するコンテンツを切り替えています。

まず、getElementsByClassName()を使ってtabcontentクラスを持つ要素（コンテンツ）をすべて非表示にします。

次に、tablinksクラスを持つ要素（タブ）からactiveクラスを削除し、クリックされたタブにactiveクラスを追加します。

最後に、getElementById()を使ってクリックされたタブに対応するコンテンツを表示します。

○サンプルコード11：スライドショーの実装

スライドショーは、複数の画像を一定の間隔で切り替えて表示するUIです。

JavaScriptを使ってスライドショーを実装する例を見ながら考えていきましょう。

<!DOCTYPE html>
<html>
<head>
  <title>スライドショーの実装</title>
  <style>
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }

    .slide {
      display: none;
    }

    .slide img {
      width: 100%;
    }

    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>
  <h1>スライドショーの実装</h1>

  <div class="slideshow-container">
    <div class="slide">
      <img src="image1.jpg" alt="画像1">
    </div>

    <div class="slide">
      <img src="image2.jpg" alt="画像2">
    </div>

    <div class="slide">
      <img src="image3.jpg" alt="画像3">
    </div>

    <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
    <a class="next" onclick="changeSlide(1)">&#10095;</a>
  </div>

  <script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function changeSlide(n) {
      showSlides(slideIndex += n);
    }

    function showSlides(n) {
      const slides = document.getElementsByClassName("slide");

      if (n > slides.length) {
        slideIndex = 1;
      }

      if (n < 1) {
        slideIndex = slides.length;
      }

      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }

      slides[slideIndex - 1].style.display = "block";
    }
  </script>
</body>
</html>

このコードを実行すると、スライドショーが表示され、矢印をクリックすることで画像が切り替わります。

JavaScriptでは、showSlides()関数を定義し、現在表示されている画像のインデックスに基づいて表示する画像を切り替えています。

矢印をクリックすると、changeSlide()関数が呼び出され、slideIndexの値を増減させることで、表示する画像を切り替えます。

showSlides()関数では、getElementsByClassName()を使ってslideクラスを持つ要素（画像）をすべて取得します。

現在のslideIndexの値に基づいて、表示する画像を決定します。

slideIndexが画像の枚数を超えた場合は最初の画像に戻り、slideIndexが1未満の場合は最後の画像に移動します。