本文へスキップ
Web整備室
JavaScript 入門 JavaScript Webの歴史 Vanilla JavaScript

JavaScriptの歴史

更新日：2026-08-02

HTMLはページの構造を作り、CSSは見た目を整えます。

JavaScriptは、そこへ利用者の操作に応じた動きを加えるためのプログラミング言語です。

現在では、メニューの開閉やフォームの入力確認だけでなく、サーバー開発、スマートフォンアプリ、デスクトップアプリなどにも利用されています。

この記事では、JavaScriptがどのような理由で生まれ、Webの変化とともにどう発展してきたのかを確認します。

対象読者と前提知識

JavaScript編は、BuildBooksのHTML/CSSカテゴリで 基礎（intermediate）まで習得した方 を対象にしています。

少なくとも、次の内容を理解していることを前提に進めます。

  • HTMLタグを使ってページの構造を作れる
  • classやidの役割を理解している
  • 外部CSSファイルをHTMLから読み込める
  • CSSで要素の表示やレイアウトを変更できる
  • Chrome DevToolsでHTMLとCSSを確認できる

JavaScriptでは、HTML要素を取得して内容や属性を変更します。そのため、HTML/CSSの構造を理解していると、JavaScriptが何を操作しているのか判断しやすくなります。

今回使用するファイル構成

この回では、次のファイルを使用します。

javascript-practice/
├── index.html
└── js/
    └── script.js

JavaScriptの誕生と標準化

JavaScriptが生まれる前のWeb

初期のWebページは、文書や画像を表示し、リンクを使って別のページへ移動することが中心でした。

HTMLで作られたページは、現在のように利用者の操作へ細かく反応するものではありませんでした。

例えば、次のような動作をブラウザ上で実現するには、新しい仕組みが必要でした。

  • ボタンを押したら表示を切り替える
  • 入力内容に誤りがないか送信前に確認する
  • マウス操作に応じて表示を変える
  • ページを移動せずに内容を更新する

HTMLとCSSだけでは、ページの構造や見た目は作れても、条件に応じた処理を記述することはできません。

そこで、ブラウザ上でプログラムを実行するための言語が求められるようになりました。

1995年にJavaScriptが誕生した

JavaScriptは、1995年にNetscape社のブラウザで動作する言語として作られました。

開発を担当したのはBrendan Eichです。最初はMocha、その後LiveScriptと呼ばれ、最終的にJavaScriptという名前になりました。

名前にJavaが含まれていますが、JavaScriptとJavaは別のプログラミング言語です。

言語 主な利用例
JavaScript ブラウザ上の画面操作、Node.jsによるサーバー処理など
Java 業務システム、Androidアプリ、サーバー処理など

JavaScriptという名前だけを理由に、Javaを先に学ぶ必要はありません。

ブラウザごとの違いが問題になった

JavaScriptが広がると、複数のブラウザがそれぞれ機能を実装するようになりました。

しかし、ブラウザによって書き方や動作が異なると、同じコードがすべての環境で動くとは限りません。

そこで、JavaScriptの共通仕様としてECMAScriptが標準化されました。

関係を簡単に整理すると、次のようになります。

  • ECMAScript：JavaScriptが従う言語仕様
  • JavaScript：ECMAScriptをもとにブラウザなどで動作する実装

日常的にはJavaScriptという名前を使いますが、新しい文法の説明でES2015やES2020といった表記を見かけることがあります。このESはECMAScriptを表しています。

ブラウザ上の機能の発展

JavaScriptでHTMLを操作する

ブラウザはHTMLを読み込むと、その構造をJavaScriptから扱える形にします。これをDOMと呼びます。

例えば、次のHTMLがあるとします。

<button id="message-button" type="button">
  メッセージを変更する
</button>

<p id="message">変更前のメッセージ</p>

JavaScriptから要素を取得し、クリックされたときに文章を変更できます。

const button = document.querySelector('#message-button');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
  message.textContent = 'JavaScriptで変更しました';
});

処理の流れは次のとおりです。

  1. document.querySelector()でHTML要素を取得する
  2. addEventListener()でクリックを待ち受ける
  3. クリックされたらtextContentを変更する

このように、JavaScriptはHTML/CSSで作った画面を土台として動作します。

jQueryによってDOM操作が書きやすくなった

以前は、ブラウザごとの差を考慮しながらDOM操作や通信処理を書く必要がありました。

2006年に登場したjQueryは、要素の取得、イベント登録、アニメーション、通信などを簡潔に記述できるようにしたライブラリです。

先ほどの操作は、jQueryでは次のように書けます。

$('#message-button').on('click', function () {
  $('#message').text('jQueryで変更しました');
});

jQueryは既存のHTMLへ動作を追加しやすく、多くのWebサイトで利用されました。

現在も既存サイトの保守では見かけますが、ブラウザ標準のJavaScriptも進化し、以前jQueryが担っていた処理の多くを標準機能で書きやすくなっています。

Ajaxによってページの一部を更新できるようになった

JavaScriptの重要な役割の一つが、サーバーとの非同期通信です。

ページ全体を読み直さずにサーバーからデータを取得し、必要な部分だけを更新する方法は、一般にAjaxと呼ばれます。

現在はfetch()を使って、ブラウザからHTTPリクエストを送信できます。

fetch('/api/articles')
  .then((response) => response.json())
  .then((articles) => {
    console.log(articles);
  });

検索候補の表示、通知の取得、一覧の追加読み込みなど、ページ遷移を伴わない機能に利用されています。

JavaScriptの利用範囲と開発手法の変化

Node.jsによってブラウザの外でも動くようになった

JavaScriptは、もともとブラウザ上で動かすことを目的として広がりました。

2009年にNode.jsが登場すると、JavaScriptをブラウザの外でも実行できるようになりました。

Node.jsは、次のような用途で利用されています。

  • WebサーバーやAPIの開発
  • 開発用ツールの実行
  • JavaScriptやCSSのビルド
  • パッケージ管理
  • 自動テスト

Laravelで利用するViteや、npm run buildといったコマンドも、Node.jsの環境で動作します。

ブラウザのJavaScriptとNode.jsでは利用できる機能が異なりますが、同じJavaScriptの文法を基礎としている点は共通しています。

ES2015以降に文法が大きく整備された

2015年に公開されたECMAScript 2015は、一般にES2015またはES6と呼ばれます。

現在よく使われる次のような文法が追加され、JavaScriptで大きなプログラムを管理しやすくなりました。

  • letとconst
  • アロー関数
  • クラス構文
  • テンプレートリテラル
  • 分割代入
  • importとexport
  • Promise

例えば、アロー関数は次のように記述します。

const greet = (name) => {
  return `こんにちは、${name}さん`;
};

BuildBooksでは、古い書き方をすべて暗記するのではなく、現在の開発で使われる文法を中心に学びます。

フレームワークによる画面開発が広がった

Web画面が複雑になると、HTML要素を一つずつ探して変更する方法だけでは、状態の管理が難しくなる場合があります。

そこで、状態と表示を結び付け、画面を部品として管理する技術が広がりました。

技術 主な特徴
React UIをコンポーネントとして構築するライブラリ
Vue.js HTMLに近い記述で画面と状態を管理できるフレームワーク
Alpine.js 既存HTMLへ小規模な状態や動作を追加できるフレームワーク

これらの技術はJavaScriptを置き換えるものではありません。内部ではJavaScriptの変数、関数、配列、イベントなどを利用します。

フレームワークの使い方だけを先に覚えると、問題が起きたときにJavaScript自体の動作とフレームワーク固有の動作を切り分けにくくなります。

最初にVanilla JavaScriptを学ぶ理由

ライブラリやフレームワークを使わない、ブラウザ標準のJavaScriptはVanilla JavaScriptと呼ばれることがあります。

Vanilla JavaScriptを先に学ぶと、次の基礎を理解できます。

  • 変数へ値を保存する
  • 条件によって処理を分ける
  • 関数へ処理をまとめる
  • 配列やオブジェクトでデータを扱う
  • HTML要素を取得する
  • クリックや入力などのイベントを扱う
  • ブラウザの開発者ツールで動作を確認する

これらは、jQuery、React、Vue.js、Alpine.jsを学ぶ場合にも必要になる知識です。

最初からすべての機能を覚える必要はありません。まずはブラウザ標準の機能だけを使い、「JavaScriptを書いたら、画面で何が変わるのか」を確認することが重要です。

まとめ

JavaScriptは、HTMLだけでは作れなかったブラウザ上の動作を実現するために誕生しました。

その後、ECMAScriptによる標準化、jQueryによるDOM操作の簡略化、Ajaxによる非同期通信、Node.jsによる利用範囲の拡大、ReactやVue.jsなどによるコンポーネント開発へ発展してきました。

技術が増えても、その土台にあるのはJavaScriptです。

次の記事からは、Vanilla JavaScriptを使って、変数、関数、条件分岐、DOM操作、イベントなどを順番に学んでいきます。