スライドショー

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


そもそもJavaScriptってどのように誕生したの?
ライブラリやフレームワークってなぜ必要になったのか
最近のJavaScriptがNode.js環境やビルドツールを使うのはなぜ?

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

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

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

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

JavaScriptの誕生

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

JavaScriptが生まれたきっかけ

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

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

  • 動的なHTML生成
  • 入力フォームの設置
  • アニメーション
  • サーバーとの通信
  • など…
  • しかしながら、マイクロソフトの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 】

    引用元:URL:https://d3js.org/

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

    【 chart.js 】

    引用元:URL:https://www.chartjs.org/

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

    【 three.js 】

    引用元:URL:https://threejs.org/

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

    【 tone.js 】

    引用元:URL:https://tonejs.github.io/

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

    フレームワークの誕生

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

    フレームワークとは?

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

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

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

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

  • あらかじめ必要となる骨組みがすでに構築されている
  • 足りない部分だけにフォーカスしてプログラミングできる
  • 膨大な知見からベストプラクティスが盛り込まれている
  • 簡単な記述だけで信頼性・保守性の高い開発が可能
  • 再利用性が高く多彩なケースで効率よく開発できる
  • フレームワークの種類はたくさんありますが、最近ではReact・Vue・Angularの3種類がほとんどのケースで利用されています。

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

    2019年最新!JavaScriptの人気フレームワーク6選を徹底比較してみた
    更新日 : 2019年8月28日

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

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

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

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

  • 最新のJavaScript仕様を利用するため
  • ファイルの結合やコードの圧縮などを自動化するため
  • Gitなどでバージョン管理を行うため
  • SassやEmmetなど記述を簡略化するため
  • 利用モジュールやライブラリなどのバージョン管理を行うため
  • など…
  • つまり、プログラミング作業を効率化してさまざまざなフロントエンド事情の問題を解決するためにはNode.js環境が一番最適であるということですね。

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

    まとめ

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

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

    • JavaScriptのコア部分を標準化したものがECMAScriptである
    • ライブラリは専門的な機能に特化したJavaScriptファイルである
    • フレームワークは効率の良いWeb開発を行うためのシステム

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

    LINEで送る
    Pocket

    無料でSEからWebエンジニアへ転職しませんか?



    侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

    • システムエンジニアという職業だけどコードが書けない
    • 事務作業が多くスキルがないため将来が不安
    • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
    という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

    弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

    既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

    まずは無料体験レッスンを予約する

    書いた人

    マサト

    マサト

    JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
    30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
    JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説