doralog
フロントエンドNode.jsTypeScriptJavaScript

【JavaScript】Web技術の歴史【ブラウザ】

thumbnail

1990年代前半

Webブラウザの誕生

1990年代前半にWebブラウザが誕生するところから、Web技術は始まります。

1993年

CGIの誕生

それまでのWebサーバはクライアントの要求に対し、HTMLファイルを返すだけでした。

1993年にはCGI技術が誕生し、プログラムの実行結果に基づいて動的にHTMLを生成・送出できるようになりました。

これにより、掲示板やチャット、アクセスカウンターのような動的なコンテンツが作られるようになります。

1995年

JavaScriptの誕生

1995に、WebブラウザーであるNetscape Navigatorに搭載されるスクリプト言語としてJavaScriptが誕生しました。

ちなみに最初はJavaScriptではなく、LiveScriptという名前でした。
しかし同じ年に発表されたJavaが人気を博したことから、それに便乗してJavaScriptという名前に改名したそうです。

1996年

JScriptの誕生

当時、WebブラウザはNetscapeとInternet Explorerの２強でした。
これらのブラウザでは使用できる言語が異なるため、２つのブラウザで動かすためには２つの言語に対応する必要がありました。
Netscape JavaScriptとJava applet
Internet Explorer JScript

1997年- JavaScript標準化団体の結成

２つの言語に対応しなければならない状態は、健全ではありません。
そのためEcma Internationalという標準化団体が組織され、JavaScriptの標準化に向けて動き出しました。

ECMAScriptの誕生

1997年6月にECMAScriptの初版が誕生します。
その後は1998年にECMAScript 2版が、1999年にECMAScript 3版が公開されます。

1997年

PHPの誕生

Perl言語をCGIとして利用するために、PHPが開発されました。
2000年に登場したPHP4.0から、爆発的に普及します。

2000年代前半

JavaScriptの不遇の時代

ECMAScriptの第4版は言語仕様の変更推進派と保守派の対立が起こり、暗礁に乗り上げることになります。

同時にJavaScriptの脆弱性を利用したウィルスや、JavaScriptを利用した不快なサイトが増え、JavaScriptをオフにするユーザが増えてきました。

後述のFlashの普及もあり、JavaScriptの利用は減っていきました。

Adobe Flashの普及

動作が軽くアニメーションが使える「Flash」が普及しました。

Flashは実行にプラグインが必要なものの、ブラウザ依存がないため安定した動作が可能でした。

のちにガラケーがFlashに対応するのも、普及の要因になります。

MVC Frameworkの普及

HTMLの中にインラインでコードを埋め込む形式はコードの可読性や保守性が落ちるため、Model・View・Controllerに分けるMVCという形式が取られるようになりました。

2005年

AJaxの普及

GoogleがAJaxの機能を利用した「Google マップ」を発表し、注目を集めます。

これによりJavaScriptでサーバと非同期通信し、動的にコンテンツを書き換える手法が人気になります。

また「prototype.js」により、ブラウザごとの差異の吸収も容易になりました。

2006年

jQueryの誕生

その後長きにわたって使われるようになるjQueryがリリースされます。

jQueryがブラウザ差異を吸収してくれることでロジックの記述に集中できるようになりました。

これにより、JavaScriptにより動的にDOMを書き換えるWebサイトが増え始めます。

2007年

iPhoneの誕生

最初のスマートフォンであるiPhoneが誕生します。

2008年

Google Chromeの誕生

JavaScriptは実行速度の遅さがネックになっていました。

そんな中、Google Chromeが発表されます。

このGoogle ChromeはJavaScriptの実行エンジンとして、V8 エンジンを搭載していました。

このV8エンジンはJITコンパイラによりJavaScriptの実行の高速化を行いました。

また当時はInternet Explorer一強の時代でした。

しかしこの頃から、様々なブラウザがシェアを奪い合うようになります。

そのためWebブラウザが機能追加にしのぎを削るようになり、フロントエンドの進化が促進されるようにいなります。

2009年

ECMA Scriptの復活

Internet Explorerの一強が崩れることで標準化の機運が強まり、ECMA Scriptが復活します。

2009年に5版が公開され、2011年には5.1版されました。

Node.jsの誕生

Google Chromeに搭載されていたV8エンジンはオープンソースで公開されていたので、それを利用したJavaScriptの実行環境であるNode.jsが誕生しました。

Node.jsによりサーバサイドもJavaScriptで書くことができるようになりました。

関連記事
Node.jsの構造や仕組みは？【普及した理由】

2010年

HTML5の普及

この頃からブラウザがHTML5に対応しだし、HTML5が使われるようになります。

HTML5はJavaScriptから呼び出すことでストレージの利用や、位置情報の利用など様々な機能が利用できるようになりました。

またCanvas要素により自由な描画ができるようになり、JavaScriptだけでゲームやアニメーションの作成もできるようになりました。

JavaScriptパッケージ管理ツールの誕生

Node.jsの誕生でJavaScriptが広く使われ始めるのにあわせ、パッケージ管理ツールが誕生します。

2010年にnpmが、2012年にbowerが発表されます。

iOSのFlash非対応

iOSがFlash非対応を発表します。

JavaScript側が進歩してきたのもあり、本格的にフロントエンドでJavaScriptが使われ始めるようになります。

Webpackの誕生

複数のJavaScriptファイル・CSSファイルなどをまとめるWebpackが誕生します。

2013年

レスポンシブデザイン

スマートフォンのシェアが広まるにつれ、あらゆる端末でもデザインを維持できるレスポンシブデザインの必要性が増し始めます。

特にCSS3メディアクエリにより、CSSによるレスポンシブ対応がやりやすくなりました。

それ以前からレスポンシブデザイン自体はありましたが、Mashable曰く2013年がレスポンシブウェブデザインの年だそうです。

フラットデザイン

小さい画面も想定すると、グラデーションの強いデザインが使いづらくなりました。

そのため小さくても視認性の高いフラットデザインが主流になっていきます。

React.jsの誕生

jQueryによる開発だと、時間軸にあわせ要素の中身が変わっていきます。

そのためDOMの状態を把握するのが困難であり、大規模になると管理しづらいものでした。

そんな中、React.jsが誕生します。

React.jsの宣言的UIにより、状態に対して一意にUIを記述することができるようになりました。

また仮想DOMという仕組みにより、更新のあったDOMのみ再レンダリングすることでページ全体を効率的に操作できるようになりました。

そのためSPA(Single Page Application)という、コンテンツを全てJavaScriptにより生成する手法も主流になっていきました。

2014年

マテリアルデザイン

Googleがマテリアルデザインを発表します。

これが革新的だったのは、それまでセンスに任されていたデザイン領域に明確なガイドラインを作成したことです。

ここから主にAndroidでマテリアルデザインが採用され、iOSでフラットデザインが採用されるようになります。

2010年代半ば

AltCSS

CSSはグローバルに適用されるので、大規模になってくると影響範囲が増大していきます。

そのためUI構造に合わせCSSをネストさせ、影響範囲を閉じるBEMなどの記法が主流となります。

それにあわせ、CSSの記法を拡張したAltCSSが普及します。

AltJS

ブラウザが対応する言語がJavaScriptしかないため、どんなに不満があってもJavaScriptを使わざるを得ません。

しかしどんどん進化していく他のプログラミング言語と違い、JavaScriptはほぼ進化してきませんでした。

そのためCoffeScriptやTypeScriptといったAltJSが注目され始めます。

CoffeScriptはモダンな記法を取り入れより簡潔に書けるようにしたもので、TypeScriptは静的型づけを取り入れたものです。

2015年

ECMAScriptの毎年リリースが始まる

この年から、ECMAScriptの毎年リリースが始まります。

特に2015年は大きく変更され、クラスやモジュール、アロー関数など様々なモダンな言語の機能が追加されました。

様々な言語不満が解決されました。

2016年

Babelの普及

ECMAScriptは仕様策定するのみで、ブラウザ側がそれに対応するまでには時間がかかります。

そのため最新の記法で書かれたJavaScriptを古いJavaScriptの記法に変換するトランスコンパイラであるbabelが誕生します。

これにより、ブラウザ側の対応を気にせず最新の記法を使えるようになりました。

2010年代後半

SSR（サーバサイドレンダリング）

React.js、Vue.js、Angular.jsなどの普及によりSPAの機運が高まりますが、一方でSPAだと検索エンジンのクローラーがコンテンツを認識できないという問題も出てきました。

そのためサーバサイドでReact.jsなどを実行し、生成された結果を返す、SSRという技術が普及します。

React.jsのNext.jsや、Vue.jsのNuxt.jsなどのフレームワークにより実現が容易になったのも、普及の要因の１つです。

Atomic Design

Component設計の配置や粒度の分け方が人によりバラバラで、統一した指針が求められるようになります。

特にデザイナーとプログラマーでComponentに対する意識が統一されていないことから、使い回しがされない問題も起きてきます。

そんななか、Atomic DesignというComponentの設計指針が広まります。

これによりデザイナー、プログラマー間での共通言語が生まれ、Componentの再利用が促進されるようになりました。

フロントエンドNode.jsTypeScriptJavaScript
@dorarep
小学生の頃からフリーゲーム作ってました。今はフリーランスでフルスタックエンジニアしてます。