JavaScriptの歴史とライブラリ・フレームワークが誕生した理由

JavaScriptを勉強していると、単純なプログラミングを覚えるだけでなくライブラリやフレームワーク、ビルドツールの使い方や環境の構築方法など次々と学ぶべきことが増えていきます。

過去のJavaScript学習と現在では大きく異なってきているわけですが、そもそもJavaScriptってどのような経緯で誕生して今に至るのかご存知でしょうか？また、なぜ今のように学習が複雑になってきているのでしょうか。

この記事では、初心者でも今日からJavaScriptの歴史とライブラリやフレームワークが誕生した経緯について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

また、次の記事ではそもそもJavaScriptとはどんなプログラミング言語なのか、その特徴やできることを将来性も交えて紹介しているので良ければ参考にしてください。

→ JavaScriptとは？初心者向けに特徴・できること・将来性を簡単解説

なお、JavaScriptの歴史については次の動画でも解説しているので、良ければご覧ください。

JavaScriptの誕生

この章では、JavaScript誕生の経緯について見ていきましょう。主に、JavaScriptの生い立ちからECMAによる標準化、JavaScriptが持つ問題点について学んでいきます。

JavaScriptが生まれたきっかけ

90年代に少しずつ広まりつつあったインターネットにおいて、Netscape Navigator 2.0というブラウザに初めて実装されたLiveScriptと呼ばれるプログラミング言語が、1995年にJavaScriptと改名されます。

当時はHTMLとCSSだけの静的なWebサイトが一般的で、ほとんどが文字だけのクラシックなページばかりでした。しかし、JavaScriptの誕生によってWebサイトにリッチな表現を追加できるとして注目されたわけです。

しかしながら、マイクロソフトのInternet ExplorerなどブラウザによってJavaScriptの仕様が異なるという問題があり、プログラミング言語としてまったく標準化されていませんでした。

JavaScriptとECMAScriptの違い

JavaScriptがブラウザごとに仕様が異なることによって、開発者の負担が大きいだけでなくセキュリティ的にも良くないということで次第に標準化への動きが出てきます。

そして、1997年に国際標準化団体ECMAインターナショナルがJavaScriptのコア部分を標準化し、それがECMAScriptと呼ばれていくわけです。

本来ならJavaScriptと呼ばずにECMAScriptという名称を使っても良いわけですが、あくまでコア部分だけが標準化されているので、例えばWeb開発でよく使うDOM APIなどはECMAScriptには含まれていないので覚えておきましょう。

ライブラリの誕生

この章では、JavaScriptライブラリが生まれた経緯について見ていきましょう。主に、jQueryの誕生とさまざまなライブラリについて学んでいきます。

jQueryが生まれたきっかけ

Webサイトでリッチな表現を可能にする唯一のプログラム言語として、JavaScriptは大変便利なわけですがいくつか問題点もありました。

標準化されたといっても、いくつかのWeb APIはブラウザによって扱いが異なっていたり、そもそもコードが複雑化しやすかったのです。

そのため初心者には扱いが難しかったのですが、これを解消するためにjQueryというライブラリが誕生しました。あらかじめプログラムされたJavaScriptファイルをHTMLのscriptタグから読み込むだけで利用できるという手軽なものです。

例えば、非同期通信の処理を見てみましょう。

現在ではfetch()など便利なメソッドがありますが、以前はXMLHttpRequest()というメソッドを次のように記述するのが一般的でした。

var xhr = new XMLHttpRequest();
 
xhr.open('GET', sample.php);
xhr.send();
 
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

この非同期処理をjQueryで実装すると次のようになります。

$.ajax({
    url: "sample.php",

    success: function( msg ){
        console.log( msg );
    }
});

ソースコードがすっきりしたのが分かりますね。

記述量が減り、オブジェクト形式で処理を構築できるのでそもそも理解しやすいわけです。初心者でもすぐにJavaScriptでプログラミングできるとしてjQueryは大変人気を得ました。

これをきっかけに、さまざまな用途に特化したライブラリが次々と誕生することになり、JavaScriptによるWeb開発はどんどん加速していくわけです。

続々と登場するライブラリ

jQueryのヒットを皮切りに、ネット上ではさまざまなJavaScriptライブラリが毎日のように誕生しています。

ほんの一例として、人気の高いライブラリをいくつかピックアップしてご紹介しておきます！

【 d3.js 】

膨大なデータを簡単に可視化することができるビジュアライゼーションに特化したライブラリです。基本的なグラフ化だけでなく、データマッピングやダイアグラムとかツリー状に配置するなど多彩なことができるのが魅力です。また、Canvasによる描画だけでなくSVGにも対応しています。

【 chart.js 】

見た目の良いグラフやチャートを簡単に描画することに特化したライブラリです。棒グラフや折れ線グラフ、円グラフ、レーダーチャート、散布図など、さまざまな種類のグラフに対応しており、自分好みにカスタマイズしていくことも可能です。レスポンシブデザインにも対応しているので、PCやスマホでも快適に閲覧できます。

【 three.js 】

WebGLをベースに誰でも簡単に3Dグラフィックを表現することができるライブラリになります。カメラやライティングなどを設定し、基本的な3Dオブジェクトを配置したり外部データを読み込んで表示することなども簡単です。最近ではVR / AR向けのWebアプリを開発するのにも利用されています。

【 tone.js 】

音の再生や加工・編集・生成など、これ1つでシンセサイザーを作ることも可能なライブラリです。さまざまな音源を利用することができ、エフェクトやサンプラーなどもあらかじめ定義されているのが魅力でしょう。単音から複雑なメロディー演奏や生成、伴奏の構築まで幅広い音楽編集を楽しむことができます。

フレームワークの誕生

この章では、JavaScriptによるWeb開発で使われているフレームワークの誕生について見ていきましょう。主に、フレームワークの概要やビルドツールについて学んでいきます。

フレームワークとは？

JavaScriptで実現できることが増えてくると、扱うデータや制御する要素なども増えていくだけでなくサーバーとのやり取りも管理しなくてはいけません。

以前は開発者がそれぞれ好きなようにプログラムを組み立てていましたが、再利用性が極端に低くソースコードの信頼性・保守性だけでなくセキュリティの面でもいろいろ問題が起き始めます。そこで、標準化されたシステムが必要になってくるわけです。

これがフレームワークと呼ばれるシステムであり、統一された一定のルールに従ってプログラムを組み立てていくことで最適なWeb開発を行えるのです。

フレームワークを利用することによるメリットは以下のようにたくさんあります。

フレームワークの種類はたくさんありますが、最近ではReact・Vue・Angularの3種類がほとんどのケースで利用されています。

それぞれのフレームワークについて詳細を次の記事でまとめているので、ぜひ参考にしてみてください！

【2024年最新】JavaScriptのフレームワーク6選を初心者向けに比較！

更新日：2024年3月24日

ビルドツールが生まれたきっかけ

最近ではフレームワークが人気を得ていることもあり、さまざまなWeb開発で使われるようになってきました。

しかしながら、React・Vue・Angularなどのフレームワークは基本的にNode.jsの開発環境を前提としているのが現状です。つまり、開発用のサーバーを用意するかPCに搭載されているターミナルを利用してコマンドラインから実行するという手段が取られているのです。

これにはいくつか理由があり、主なものとしては次のとおりです。

つまり、プログラミング作業を効率化してさまざまざなフロントエンド事情の問題を解決するためにはNode.js環境が一番最適であるということですね。

そもそもJavaScriptはメモ帳などにプログラムを書いて、ブラウザで開けば表示できるシンプルなスクリプト言語なのですが、本格的に開発を始めようとしたらさまざまな問題が発生します。それを上手く解決するためにNode.js環境を整えて解消するための手法を学ばなければいけないわけです。

まとめ

今回は、JavaScriptの歴史やライブラリ・フレームワーク誕生の経緯について学習しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！