Javascript（ジャバスクリプト）とは？：ホームページを動かすプログラミング言語
更新日：2023年07月01日

ネットサーフィンをしていると、「Javascript」という言葉を見かけることがよくあります。
では、Javascriptとは一体何なのでしょうか？
今回の記事では、Javascriptとは何か、そしてJavascriptで何ができるのかを解説します。
これを読むことで、Javascriptについての基本的な理解が深まるでしょう。

Javascriptとは

Javascriptとは、ホームページで動作するプログラミング言語の一つです。
これは、ホームページ上でボタンをクリックしたときなどに何か動きが起こるための言語です。
Javascriptは1995年に登場して以来、ホームページ上のインタラクティブな機能を実現するための主要な言語となっています。

Javascriptで出来ること

Javascriptがなければ、ホームページはただの静的なテキストと画像の集まりになってしまいます。
Javascriptは、ホームページに動きとインタラクティブ性をもたらします。
これにより、ユーザーは情報を受け取るだけでなく、ホームページと直接対話することが可能となります。

具体例

それでは具体的にどのようなことがJavascriptで可能なのか見てみましょう。
また、簡単なプログラミング例も挙げます。

フォームの検証:

ユーザーがホームページのフォームに情報を入力する際、その情報が適切であることをJavascriptで確認できます。
例えば、以下のJavascriptコードは、フォームが空でないことを確認します。

function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    if (name == "") {
        alert("名前を入力してください");
        return false;
    }
}

スライドショーの作成：

ホームページのトップに自動で切り替わる画像（スライドショー）を表示することができます。
これは通常、Javascriptを使用して作られます。

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");

    for (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, 2000); // 2秒ごとに画像を切り替えます
}

ドロップダウンメニュー：

ホームページのナビゲーションメニューにマウスを置くと、サブメニューが表示される機能は、Javascriptによって実装されます。

モーダルウィンドウ：

「お問い合わせ」ボタンをクリックすると、ホームページの上に新たな小さなウィンドウ（モーダルウィンドウ）が表示される場合、これもJavascriptによるものです。

アニメーション：

Javascriptを使用して、スクロールに応じて要素をフェードインさせるなど、ホームページに様々なアニメーションを追加することができます。

function fadeIn(element) {
    var op = 0.1;  // 透明度を初期化
    element.style.display = 'block';

    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        op += op * 0.1;
    }, 10);
}

var btn = document.getElementById('myButton');
var div = document.getElementById('myDiv');

btn.onclick = function () {
    fadeIn(div);
}

非同期通信：

Javascriptの強力な機能の一つに、非同期通信があります。
これにより、ホームページ全体を再読み込みすることなく、一部の情報だけを更新することができます。
例えば、SNSの「いいね！」ボタンを押すと、いいねの数が増えますが、これは非同期通信によるものです。

リソース

以下に、Javascriptの学習に役立つリソースを2つ紹介します。

JavaScript.info:

https://ja.javascript.info/
Javascriptの基本から高度なトピックまで、詳しくわかりやすく解説しています。

JS Primer:

https://jsprimer.net/
こちらも初心者から上級者まで対応したJavascriptの学習サイトです。
具体的なプログラムの書き方や、実践的な内容も学ぶことができます。

まとめ

この記事を読んで、Javascriptとは何か、そしてJavascriptで何ができるのかが少しでも理解できたら嬉しいです。
Javascriptは、ホームページがユーザーと対話するための重要なツールであり、これからもホームページ作成や開発においては欠かせない存在となるでしょう。
ちなみに、このホームページはGatsbyというJavaScriptベースの静的サイトジェネレーターで作成しています。
Gatsbyは最初に全てのデータを取得して静的なホームページを生成します。
これにより、ユーザーが各ページを訪れる際にはすでにコンテンツが準備されているため、ロード時間が短縮され、高速な閲覧を提供します。