JavaScriptで拡張子を活用する方法12選！初心者でも簡単にできる方法を紹介

はじめに
●JavaScript拡張子とは
- ○拡張子の基本
●JavaScript拡張子の使い方
●JavaScript拡張子の応用例
●カスタマイズ例
- ○サンプルコード11：ファイルの読み込みのカスタマイズ
- ○サンプルコード12：画像スライダーのカスタマイズ
まとめ

はじめに

この記事を読めば、JavaScriptの拡張子を活用して様々なWebページの機能を実装することができるようになります。

初心者でも簡単にできる方法を徹底解説し、サンプルコードや注意点、カスタマイズ方法を含む10の応用例をご紹介します。

●JavaScript拡張子とは

JavaScriptの拡張子とは、主に「.js」というファイル形式で表されるJavaScriptのコードが格納されたファイルを指します。

これらのファイルを利用することで、Webページに動的な機能を追加したり、見た目を変更したりすることができます。

○拡張子の基本

JavaScriptの拡張子は「.js」ですが、これはJavaScriptのコードが含まれるファイルのことを指すだけで、実際にWebページで利用する際には、HTMLファイル内で読み込む必要があります。

HTMLファイル内でJavaScriptファイルを読み込む方法は、<script>タグを使って下記のように記述します。

<!DOCTYPE html>
<html>
<head>
  <script src="example.js"></script>
</head>
<body>
  ...
</body>
</html>

●JavaScript拡張子の使い方

JavaScriptの拡張子を活用することで、さまざまな機能をWebページに追加できます。

次に、初心者でも簡単に試せるサンプルコードをいくつか紹介します。

○サンプルコード1：ファイルの読み込み

HTMLファイル内でJavaScriptファイルを読み込む方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <script src="example.js"></script>
</head>
<body>
  ...
</body>
</html>

この例では、example.jsという名前のJavaScriptファイルがHTMLファイルと同じディレクトリにあることを想定しています。

src属性には、読み込むファイルのパスを指定します。

○サンプルコード2：ファイルの書き込み

JavaScriptファイル内でHTML要素を操作する方法を紹介します。

example.js

document.getElementById("demo").innerHTML = "Hello, World!";

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="example.js"></script>
</head>
<body>
  <div id="demo"></div>
</body>
</html>

この例では、example.jsファイル内でHTML要素を操作しています。

demoというIDを持つ要素の内容を「Hello, World!」に変更しています。

○サンプルコード3：外部ファイルの利用

外部のJavaScriptファイルを利用する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  ...
</body>
</html>

この例では、Googleが提供しているjQueryというJavaScriptライブラリを読み込んでいます。

このように外部のJavaScriptファイルを読み込むことで、そのファイルに定義されている機能やメソッドを使うことができます。

○サンプルコード4：データの受け渡し

HTMLフォームからデータを受け取り、JavaScriptで処理する方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="example.js"></script>
</head>
<body>
  <input type="text" id="inputText">
  <button onclick="showInputText()">Submit</button>
  <p id="outputText"></p>
</body>
</html>

example.js

function showInputText() {
  var inputText = document.getElementById("inputText").value;
  document.getElementById("outputText").innerHTML = "You entered: " + inputText;
}

この例では、テキスト入力フォームに入力されたデータをJavaScriptで取得し、別のHTML要素に表示しています。

●JavaScript拡張子の応用例

JavaScript拡張子を活用して、Webページに様々な機能を追加できます。

ここでは、応用例として10の機能を紹介します。サンプルコードも併せてご覧ください。

○サンプルコード5：画像スライダー

画像スライダーの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="slider.js"></script>
  <link rel="stylesheet" href="slider.css">
</head>
<body>
  <div class="slider">
    <img src="image1.jpg" class="slide">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
</body>
</html>

slider.js

var slideIndex = 0;
showSlides();

function showSlides() {
  var slides = document.getElementsByClassName("slide");
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 3000); // Change image every 3 seconds
}

slider.css

.slider {
  position: relative;
  width: 100%;
  height: auto;
}

.slide {
  display: none;
  width: 100%;
  height: auto;
}

このサンプルコードでは、画像スライダーを実装しています。

HTMLファイルには、スライダー内に表示する画像を<img>タグで指定し、slider.jsファイルでは、画像を順番に切り替える処理が記述されています。

slider.cssファイルでは、スライダーの見た目を調整しています。

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

アコーディオンメニューの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="accordion.js"></script>
  <link rel="stylesheet" href="accordion.css">
</head>
<body>
  <div class="accordion">
    <button class="accordion-toggle">Section 1</button>
    <div class="accordion-content">
      <p>Content for section 1.</p>
    </div>
    <button class="accordion-toggle">Section 2</button>
    <div class="accordion-content">
      <p>Content for section 2.</p>
    </div>
    <button class="accordion-toggle">Section 3</button>
    <div class="accordion-content">
      <p>Content for section 3.</p>
    </div>
  </div>
</body>
</html>

accordion.js

var acc = document.getElementsByClassName("accordion-toggle");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

accordion.css

.accordion-toggle {
  cursor: pointer;
  /* Add additional styles */
}

.accordion-content {
  display: none;
  /* Add additional styles */
}

このサンプルコードでは、アコーディオンメニューを実装しています。

HTMLファイルには、各セクションのトグルボタンとそのコンテンツを指定し、accordion.jsファイルでは、ボタンがクリックされたときにコンテンツの表示状態を切り替える処理が記述されています。

accordion.cssファイルでは、アコーディオンメニューの見た目を調整しています。

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

モーダルウィンドウの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="modal.js"></script>
  <link rel="stylesheet" href="modal.css">
</head>
<body>
  <button id="modalButton">Open Modal</button>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Modal content goes here.</p>
    </div>
  </div>
</body>
</html>

modal.js

var modal = document.getElementById("modal");
var btn = document.getElementById("modalButton");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

modal.css

.modal {
  display: none;
  /* Add additional styles */
}

.modal-content {
  /* Add additional styles */
}

.close {
  cursor: pointer;
  /* Add additional styles */
}

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

HTMLファイルには、モーダルウィンドウを開くボタンと、モーダルウィンドウのコンテンツが記述されています。

modal.jsファイルでは、ボタンがクリックされたときにモーダルウィンドウを表示し、閉じるボタンやウィンドウの外側がクリックされたときにモーダルウィンドウを非表示にする処理が記述されています。

modal.cssファイルでは、モーダルウィンドウの見た目を調整しています。

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

ドロップダウンメニューの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="dropdown.js"></script>
  <link rel="stylesheet" href="dropdown.css">
</head>
<body>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</body>
</html>

dropdown.js

document.onclick = function (event) {
  var target = event.target;
  var dropdown = document.querySelector(".dropdown-content");

  if (target.classList.contains("dropbtn")) {
    dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
  } else {
    dropdown.style.display = "none";
  }
};

dropdown.css

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

このサンプルコードでは、ドロップダウンメニューを実装しています。

HTMLファイルには、ドロップダウンメニューのボタンと、メニューコンテンツが記述されています。

dropdown.jsファイルでは、ボタンがクリックされたときにメニューコンテンツを表示・非表示にする処理が記述されています。

dropdown.cssファイルでは、ドロップダウンメニューの見た目を調整しています。

○サンプルコード9：スクロールアニメーション

スクロールアニメーションの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="scrollAnimation.js"></script>
  <link rel="stylesheet" href="scrollAnimation.css">
</head>
<body>
  <div class="animation-element">
    <!-- Your content -->
  </div>
</body>
</html>

scrollAnimation.js

document.addEventListener("scroll", function () {
  var elements = document.querySelectorAll(".animation-element");
  var windowHeight = window.innerHeight;

  elements.forEach(function (element) {
    var elementPosition = element.getBoundingClientRect().top;
    var animationTrigger = windowHeight - 100;

    if (elementPosition <= animationTrigger) {
      element.classList.add("in-view");
    } else {
      element.classList.remove("in-view");
    }
  });
});

scrollAnimation.css

.animation-element {
  opacity: 0;
  transition: opacity 0.5s;
}

.animation-element.in-view {
  opacity: 1;
}

このサンプルコードでは、スクロールアニメーションを実装しています。

HTMLファイルには、アニメーションを適用したい要素にanimation-elementクラスを付けます。

scrollAnimation.jsファイルでは、画面がスクロールされたときに、要素が画面内に入ったかどうかを判定し、対象要素にin-viewクラスを追加または削除します。

scrollAnimation.cssファイルでは、要素の透明度をアニメーションで変更することで、スクロールアニメーションを実現しています。

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

カウントダウンタイマーの実装方法を紹介します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <script src="countdownTimer.js"></script>
  <link rel="stylesheet" href="countdownTimer.css">
</head>
<body>
  <div id="timer">
    <span id="days"></span> days
    <span id="hours"></span> hours
    <span id="minutes"></span> minutes
    <span id="seconds"></span> seconds
  </div>
</body>
</html>

countdownTimer.js

function countdownTimer(endDate) {
  var daysElement = document.getElementById("days");
  var hoursElement = document.getElementById("hours");
  var minutesElement = document.getElementById("minutes");
  var secondsElement = document.getElementById("seconds");

  function updateTimer() {
    var now = new Date();
    var remainingTime = endDate - now;

    var seconds = Math.floor(remainingTime / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    daysElement.textContent = days;
    hoursElement.textContent = hours;
    minutesElement.textContent = minutes;
    secondsElement.textContent = seconds;

    setTimeout(updateTimer, 1000);
  }

  updateTimer();
}

var endDate = new Date("2023-12-31T23:59:59");
countdownTimer(endDate);

countdownTimer.css

#timer {
  font-size: 2em;
  display: flex;
  justify-content: center;
  gap: 10px;
}

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

HTMLファイルでは、日、時、分、秒の表示部分を個別にspan要素で作成します。

countdownTimer.jsファイルでは、指定された終了日時までの残り時間を計算し、タイマーを更新する関数を定義しています。

そして、その関数を1秒ごとに実行することでカウントダウンを実現しています。countdownTimer.cssファイルでは、タイマーの見た目を調整しています。

●カスタマイズ例

JavaScriptを使ったプロジェクトをさらにカスタマイズする方法を見ていきましょう。

○サンプルコード11：ファイルの読み込みのカスタマイズ

外部ファイルを読み込む際に、読み込むファイルの種類や順序をカスタマイズする方法を紹介します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="custom.js"></script>
    <script>
        function loadScript(url, callback) {
            var script = document.createElement("script");
            script.src = url;
            script.onload = callback;
            document.body.appendChild(script);
        }

        loadScript("file1.js", function() {
            console.log("file1.jsが読み込まれました。");

            loadScript("file2.js", function() {
                console.log("file2.jsが読み込まれました。");
            });
        });
    </script>
</body>
</html>

このサンプルでは、loadScript関数を使用して外部ファイル（file1.jsとfile2.js）を読み込んでいます。

読み込み順序や依存関係をカスタマイズすることができます。

○サンプルコード12：画像スライダーのカスタマイズ

画像スライダーのデザインや動作をカスタマイズする方法を紹介します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Image Slider</title>
    <style>
        .slider {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .slider img {
            width: 100%;
            height: auto;
            display: none;
            position: absolute;
        }
        .slider img.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <script>
        function customImageSlider(sliderSelector, interval) {
            var slider = document.querySelector(sliderSelector);
            var images = slider.querySelectorAll("img");
            var currentIndex = 0;

            function changeImage() {
                images[currentIndex].classList.remove("active");
                currentIndex = (currentIndex + 1) % images.length;
                images[currentIndex].classList.add("active");
            }

            setInterval(changeImage, interval);
        }

        customImageSlider(".slider", 2000);
    </script>
</body>
</html>

このサンプルでは、customImageSlider関数を使用して画像スライダーをカスタマイズしています。

インターバルやデザインを変更することで、独自の画像スライダーを作成することができます。