今のWebフロントエンドについてざっくりまとめてみる v1.0.0
資料訂正について
間違いがあれば教えて下さい。Flashとかはギリ生まれてすぐ、触ったのは小学校入学したてとか。
Webフロントエンドは深淵なのか？
ブラウザ上で動いているのはすべてHTMLとCSSとJavaScript（ブラウザ上で動く）である
最近はWebAssemblyなどがあり、他言語もブラウザ上で動くことができるようになっているが、基本的にはブラウザ上に言語の実行環境を構築するため重たくなる
OpenJDKやRubyVMのWasm実装がなどが最近出て来ている
HTML/CSS/JavaScript それぞれ標準化団体がおり、RFCなどを受けて更新を行っている
ここで挙げている３つ自体はどれも比較的枯れてきており新規性はあれど大幅な後方互換性を保っている
例えばHTML4やCSS2の書き方はブラウザでサポートされているし、JavaScriptの古い書き方でもブラウザ上で動く
標準を取り入れるのは基本的にはブラウザなため、標準が使えるかどうかはブラウザベンダーに依存している
標準はブラウザベンダーが各ブラウザに取り込むことで実装されるが、ブラウザベンダーの（半ば勝手なもしくはビジネス上、ブランド上の理由により）標準はすべてのブラウザに等しく取り込まれていない
Can I Use「 https://caniuse.com/ 」 などで標準がどこまで取り込まれているか確認可能
かつては標準に反した実装が数多くあった（Internet Explorerなど）
上記に反して開発者が利用している環境では、サーバーサイドJavaScriptのNode.jsとそれを中心としたライブラリ、拡張言語（AltJS）、フォーマッター・リンターが動いているため、実体との乖離が起きている
ブラウザ上で何が起きているか知るために「今目の前で触れているものと実際に動いているものの差＝ブラックボックス化している領域への理解」がどうしても必要になる
これらを前提としてフロントエンドの開発環境並びにエコシステムは破壊的変更を繰り返しながら、開発者や開発組織が各々様々な文化・技術を取り入れ、生み出している。
Webフロントエンドが深淵と呼ばれる理由は上記に起因する
Webアプリケーションにおけるフロントエンドの立ち位置
フロントエンド＝Webアプリケーション構造における主にブラウザ上で動き、ユーザーに対するインターフェースを提供している
動的な表現（ボタンホバーやフォームバリデーション）だけでなく、認証認可の仕組みを担うこともある
振り返り：どんな開発環境やAltJS（JavaScriptの代替としてのスーパータイプやサブセット言語）を使っていっても動いている実体はHTML / CSS / JavaScriptでありブラックボックス化されている
ブラックボックスの中身を理解し、ブラウザで動いている実体にアクセスできればアプリケーションの機能書き換えやセキュアな情報の取得が可能であること
深いデバッグやバグへの対応はブラックボックスへの理解がどうしても必要になる
例えば、APIから全件データを取得しブラウザ上のJavaScriptで認証認可によるフィルタリングを行っても、ブラウザの実行環境上にはデータが展開されているため、うまいことやるとconsole.logからデータを取得し、認証情報のチェックができる
後述のサーバーサイドレンダリング化が進んだ要因の一つ（Server Side Rendering / SSR）
そのため難読化やJWTの保管場所などが話題になりがち
セキュリティは本業ではないので本業の方に丸投げ細かい話は丸投げ
サーバーサイドにビジネスロジックや複雑なデータベース処理は任せ、ユーザー側への体験の提供とデータの受け渡しを行うことを専業としてきた
Webアプリケーションにおけるフロントエンド史
今私たちが面しているフロントエンドの源流を確かめ、今何を迷うべきかを考える取り組み
JavaScript登場以前以後、標準化されたのちに主流になった以前以後で大きく異なるため、B.J / A.J / S.J としてまとめる
ほとんどがWikipedia情報
有志開発のエミュレータにより外部と通信しない形で、ここで取り上げる各種ブラウザやOSに触れることができる
利用は自己責任で！
B.J（Before JavaScript rises）
標準化されたJavaScriptが主流になる前
ティム＝バーナーズ・リーによるWorld Wide Webが1989年に提唱される
CERN（欧州原子力機構）の人
研究が膨大になるにつれてそれらのドキュメントを管理するための手法として掲げられたらしい
「Yes, but how will we ever keep track of such a large project?」
この時点でもう”browser”とか、サーバーとサーバー間の通信とかが概念としてある
Hypercardと呼ばれるビル・アトキンソンという人が作ったカードとカードを繋げてプログラムを作っていくソフトウェアに影響を受けているらしい
1990年にCERN httpdとして最初期のWebサーバーが立ち上げられる（HTTP 0.9）
NEXSTEPで開発される
1990年にWebブラウザ、WorldWideWebが登場（HTMLのWYSWIGエディタを同梱？）
1993年にソースコード含む権利がフリーになる
1993年にマーク・アンドリーセンにより後のInternet Explorer、Netscape Navigatorの源流となるNCSA Mosaicが登場（ソースコード公開済）
NEXSTEPで開発される
1994年にマーク・アンドリーセンがMosaicを販売するための会社Netscape Communications（旧Mosaic Communications）を設立、1995年に株式公開される
1993年にITFLにより、HTML1.0がリリース
1994年に複数ブラウザの登場に伴い、W3Cがバーナーズ・リーを中心に設立される
1994年 Linux1.0 登場、TCP/IPのオープンソース実装
1994年にNetscape CommunicationsからNetscape Navigator 1.0がリリースされる
当初の予定していた名前はMozillaだった
1995年にHTML2.0の標準化からITFLの手を離れW3Cに
1994年に研究者向けではなく民間向けの技術としてホーコン・ウィウム・リーによりCSSが提唱される
1994年にCERNに参画
1995年にW3Cに参画
Operaの創業期CTOとして2017年まで在籍
A.J（After JavaScript rises）
1995年にNetscape Navigator 2.0が登場しCookieなどをサポートするとともに、ブレンダン・アイクの手によってJavaScriptが初めて導入される
Netscape CommunicationsとSun Microsystemsの提携により、ブレンダンアイクが10日間で最初期のMochaを作る
のちにMochaはLiveScriptとなり、最終的にはJavaScriptとなる
JavaScriptの実行環境（JavaScriptエンジン）は初期は単なるインタプリンタで最終的にはC言語製のSpiderMonkeyとなる
兄弟分としてJava実装のRhinoもいる
Netscape Navigator 6からはJavaScriptエンジンがGeckoになる
GeckoにはHTML,CSSのレンダリングエンジンも含まれる
ServoとしてLinux Foundation管理下に
JavaScriptという命名はJavaを意識してのことらしいので、JavaとJavaScriptは全くの別物であるという主張は実はちょっとズレるのかもしれない
ブレンダンアイクはこの後、Mozilla Foundationで技術責任者を務め、その後Brave.incを創業している
1995年 Windows 95登場、TCP/IP, telnet, ftpなどをOSでサポートする。拡張パッケージWindows for Plus!にInternet Explorer 1.0が同梱される（日本語版は2.0）
Internet ExplorerはNCSA Mosiaicのライセンスホルダーである（要調査）Spyglassからソースコードの提供を受け開発された
1995年にSun MicrosystemsからJava製Javaアプレット同梱ブラウザHotJava登場
Javaアプレットは簡単にいうとブラウザ上でJavaアプリケーションが動く仕組み
JavaアプレットがNetscape Navigatorに利用され、普及。サーバー間との通信が可能になったり
Java 11で廃止
1996年にNetscapeのJavaScriptを意識してか、Microsoft印のJavaScript（っぽいけど内部の実行環境はActive Scripting）JScriptが同梱されたInternet Explorer 3.0が登場
ActiveXと組み合わせたプラグイン型での機能拡張により、ブラウザでできることが多機能に
JScriptの実体はOLE環境下で動くことを前提としたエコシステムの一部だった
そのため非同期通信など外部とのインターネット通信ではActiveXが利用可能だった
Windows環境で動くマクロを記述することも可能だった
ActiveXオブジェクトを利用してファイル操作なども可能
code:fso.js
// ファイル操作の為のオブジェクトを生成。
var fso = new ActiveXObject("Scripting.FileSystemObject");
// もし C:\jscript_test というフォルダが無ければ
if(! fso.FolderExists("C:\\jscript_test")) {
// C:\jscript_test を作る。
var fol = fso.CreateFolder("C:\\jscript_test");
}
// .txt のファイル以外でも作成できるという例。
var fil = fso.CreateTextFile("c:\\jscript_test\\output.html");
// 作成したファイルに1行書き込む。
fil.WriteLine("<html><head><title>test</title></head><body>test &lt;b&gt;test&lt;/b&gt;</body></html>");
// ファイルを開放する。
fil.close();
//完了ダイアログを表示。
WScript.Echo("C:\\jscript_test\\output.html にファイルが作成されました。");
この頃からクライアント＝サーバー間での通信を多用したり、CSSによる装飾を利用したりする柔軟なインタフェースをもつウェブアプリケーションである、リッチインターネットアプリケーション（RIA）が登場する
1998年にJavaScriptを利用し、HTMLの構造そのものにアクセスし制御するための DOM（Document Object Mode）が、W3Cにより仕様公開されたのがきっかけ。
1996年にAdobe Flashの前身となるShockwave Flashが誕生する
以降Netscape NavigatorとInternet Explorerによる「ブラウザ戦争」となっていく
1997年にApple ComputerがMicrosoftと業務提携し、Internet ExplorerがMax OS 8.5以降同梱されて配布されるようになる
今となっては民間向けコンピューターの２大巨頭OSで利用されるため、もちろんInternet Explorerがシェアを伸ばす
この頃問題になっていたのがNetscape、Internet Explorerで使われているJavaScriptと呼ばれるスクリプト言語の仕様の差
特にInternet Explorerは独自のタグやJScriptの独自実装が以降も多勝った
1996年に国際標準化団体ECMA Internationalに対して、Netscapeが標準化をすすめるよう働きかけ
1997年に初版であるVer1.0がリリースされる
ECMA-262として標準化され、現在はtc39という組織内委員会が取りまとめを行なっている
HTML4.0の登場
1997年に現在のHTMLの原型となるHTML4.0が勧告される。
勧告とは？→仕様が公開されたので各ブラウザベンダはこれに則って実装をしてねというもの
1999年にHTML4.01が勧告
その後W3CはHTMLそのものを進化させることに興味がなかったらしく、2004年にApple、Mozilla、Operaの開発者たちが中心となって立ち上げられたWHATWGがHTML5に向けた提案をしていくことになる
CSS1.0の登場
1996年にCSS1.0がW3Cによって仕様化され、勧告
1998年にCSS2.0が勧告され、現在のCSSの原型となる。
のちに捕捉される形でCSS2.1が2011年に勧告され以降、CSS2.0は2.1に統合される形で勧告される
Internet Explorer 4以降の進化
1997年にInternet Explorer 4 が登場し、HMLT4.01、CSS1.0への準拠など先進性を見せていた
1999年にInternet Explorer 5が登場、XML、CSS2.0、DOM Level 1.0への準拠と当時のブラウザとしては高機能かつ洗練されており、Windows2000への同梱によりそのシェアを確実に伸ばしていった
しかし、Internet Explorer 5 ではCSS2への対応の杜撰さ（そもそもCSS2.0の仕様が曖昧だったという話もある）セキュリティホールが目につくようになる
2001年にはInternet Explorer 6 が登場し、DHTMLの拡張、CSS2の対応強化、DOM Level 2とSMIL 2.0への部分的な対応などなど新機能が盛り込まれたが、当時としてはそこまで画期的でもなく対応も不十分であった
2006年に細かい修正や機能追加などがなされたInternet Explorer 7 が登場
Netscape Navigatorの衰退
Internet Explorerの進化と台頭、OSへのバンドルによりシェアを奪われる
バージョン4以降はメールクライアントなどのサービスと合わせ、Netscape Communicator と名をあらためている（IEもメールクライアントを同梱していたりする）
1998年にNetscape Communicator 5の開発を中断し、ソースコードを公開し、Mozillaとして開発を続ける。
これが契機となり、
Netscape Communicator 6 を2000年に公開するもシェアは戻らず...
Operaの登場
1996年にさらっとシェアウェアの形でOpera2.0がリリース
2000年のOpera 4.0では SSL 2,3、CSS2、XML、HTML 4.0、HTTP 1.1、ECMAScript、JavaScript 1.3（Netscape系統のスクリプト言語として）をサポートするなど
1998年にCSS1.0にブラウザが準拠しているかテストするためのテストケースとしてAcid1が公開
Adobe(Shockwave) Flashの台頭
1998年、Shockwave Flashのオープンスタンダード化
2000年、Macromedia Flash MX (Flash Player 6)からECMAScriptを独自拡張する形でActionsScriptが開発・公開される
プログラム機能が充実したことによりFlashが台頭してくる流れが生まれる
2004年春にリリースされたMacromedia Flash MX 2004 (Flash Player 7) では、ActionScript 2が搭載され、動画配信もサポートする。
2005年4月にAdobeにMacromediaが買収され、Adobe Flashとなる
1999年にECMAScript3.0がリリースされる
正規表現、よりよい文字列の取り扱い、新しいコントロール構文、try/catch例外処理、より厳格なエラー処理、数字のその他の書式化フォーマットに対応
今後10年近くこれらが主流になる（というか10年間最新版が公開されない）
この後ECMAScript4の仕様策定が進むが2008年に策定を中止ES3.1をES Harmonyと呼称し仕様策定を続けるなど以降の進化が著しく鈍化する
1999年のECMAScript3.0前後は標準化団体側での策定の遅さ、主要ブラウザベンダーの興亡による標準化の難しさ、JavaScriptライクな言語が増えるなど、標準化とは逆行する流れが目につくようになる
これは完全に私見だが、Internet Explorerですら標準化にうまく乗っかれてないため、標準化したはいいものの業界全体がそれについていくまでに10年近くかかってしまったのでは？という考え。最初期はごく一部の業界で使われていたWebが社会全体に広まっていったこともその要因の１つかもしれない。
DOMやXML、HTTP、SSLといった周辺関連技術の標準化に時間やコストが割かれたのも要因？
2000年代前半、おおかた標準化が進むにつれて各種Webサービスが公開されてくる
Facebook 2004年
YouTube 2005年
Twitter 2007年
Googleマップベータ版 2008年
Safariの登場
Internet Explorer 5を同梱していたMacOSだったが、Microsoftとの契約解除に合わせて独自ブラウザの採用を考え、当時Konquerorで利用されていたKHTMLをベースとしたWebkitを開発し、2003年に正式版をリリース。以降MacOSでの標準ブラウザとなっていく
この頃から携帯電話でも簡易的なブラウザが標準搭載されるようになり、2007年にはiPhoneが登場し、Safariが標準搭載されるようになる
WordPressの登場
2003年にバージョン0.70が公開される。当時主流だったMovableTypeの対抗馬として登場
Ajaxの提唱
DOMの仕様策定により、Web開発者はHTMLを制御できるようになりました。この頃からブラウザが外部と非同期通信を行い、HTMLを書き換えることでよりリッチな動作を実現するために2005年にAjaxが提唱される
Web標準の機能のみで行えることから、Adobe FlashやMicrosoft環境下でなくとも動くことが特徴
GoogleがGoogleマップなどに採用することで注目を浴びるようになった
ちなみにInternet Explorerでは初期には、XMLHttpRequestではなく内部実装ではActiveXコントロールを利用しているため今までと実装面では大きく変わっていない
jQueryの登場
ES3とDOMの登場により、 DOMをJavaScriptで操作した動的なアプリケーションが作られるようになる中で、ジョン・レシグがDOM操作やCSSアニメーション制御を目的としたJavaScriptライブラリjQueryを公開する
S.J（Standardized JavaScript）JavaScript標準化主流後の流れ
2009年に待望のECMAScript 5が登場
strictの導入など、まあとにかく多機能というかデファクトスタンダードをちゃんと標準化し、機能に盛り込んだ。我々が今触れているJavaScriptの原型である。
これによりWeb標準に則った形でWebアプリケーション開発がしやすくなっていく
そしてSingle Page Applicationへ....
Adobe Flashの衰退
2010年にスティーブ・ジョブズが「Thoughts on Flash」というオープンレターを公開し、Adobe Flashを批判。以降Apple製品でのFlash利用とりわけ、iPhoneではAdobe Flashが利用できなくなる状態となった。
オープンレターではAdobe Flashはモバイル環境下ではユーザービリティを損ねることを欠点の１つとして挙げている
その後の標準化の流れはモバイル登場によってさらに加速したとも考えられる（私見）
これをきっかけにAdobe Flashは勢いを失ったと言われている
Chromium / Google Chromeの登場
2008年、オープンソースブラウザ基盤ChromiumとそのGoogleでの実装Google ChromeのWindows版がリリースされる
当初のレンダリングエンジンはWebkitであり、その後2013年からBlinkになる
当時は類を見ない高速さと安定さでそのシェアを伸ばした（らしい）
Internet Explorerの衰退
2009年にウェブ標準準拠を目的としたバージョン8を公開
セキュリティ強化やプライバシー保護対策、パフォーマンス向上などブラウザとしての地盤固めを進める
ActiveXを採用しているが故のセキュリティの問題や、IE11以降の標準準拠の遅れなどが要因としそのシェアを落としMicrosoft Edgeへとついでいく
スティーブ・バルマー氏が2000年にMicrosoftのCEOに就任、2008年にビルゲイツが現場から退いたのも要因としてある？
HTML5 / CSS3の登場
WHATWGが中心となってW3C内に形成された委員会から2008年に草案が提出され、2014年にHTML5が勧告される
とりわけvideoタグ、audioタグの導入や、セマンティックなタグの導入（sectionやartcileなどタグが意味を持つもの）により大きく進化しウェブ標準を大きく進める一歩となった
2015年にGoogle Chromeが動画再生プレイヤーをAdobe FlashからHTML5 Media Playerに移行するなどした
この時にいわゆるWeb標準APIと呼ばれるブラウザがストレージを持ったり、OSの機能にアクセスできたりするAPIも標準化され、ここからさらに標準準拠の流れが進んでいく
CSS2.1以降、CSS3からは仕様を定めず機能区分をモジュールとし、各ブラウザが自由に取り入れるよう勧告している
JavaScriptを取り巻く環境の変遷
JavaScriptはECMAScript5の登場前後から幅広く普及し、さまざまなWebアプリケーションが登場するようになってきた。とりわけjQueryの功績は大きかった
ライアン・ダールによってサーバーサイドで動くNode.jsが登場
当時比較的高速かつ馴染みのあったJavaScriptをサーバーサイドで動かすことで複雑だったり大量だったりするリクエストを捌こうという試みだったらしい
同梱されたNode Package ManagerとそのRegistryの仕組みによってJavaScriptエコシステムが形成されるようになる
2009年に従来の命令的なDOM操作からロジックとDOM操作を分離しより宣言的に記述するためのライブラリAngularJSが公開される
2012年のTypeScript登場
2010年から大規模プロジェクト開発でのJavaScriptの不足感から開発チームがMicrosoft内で発足
2012年に満を持して公開
Node.jsのパッケージマネージャー、npmによりtypescriptコンパイラが配布され利用可能に
登場初期はVisual Studioのみでサポートされていたが、その後Atomなどでも利用可能に
2015年にVisual Studio Codeが登場したことで大きく影響が出ていく
2013年のReact登場
Facebook Ads の肥大化に伴い、DOMとCSSの変更が多重化・複雑化していく中でそれらを解決する手法として登場
当時の名前はFax JSで2013年のJSConfにて初お披露目される
facebook PHP拡張、XHPに影響を受けている（というかまんまそれ）
code:php
require 'php-lib/init.php';
class :my:hello extends :x:element {
function render() { return <b>Hello</b>; }
}
echo <a href="http://d.hatena.ne.jp"><my:hello /></a> . "\n";
2012年のGrunt / 2013年のGulpといったタスクランナーの登場
当時必要になっていたminifyやconcatnationなどJavaScriptファイルを操作するタスクをCLI上でうまいこと制御するために開発される
2014年のWebpack登場
プロジェクトが肥大化するにあたって問題となるファイルやフォルダの散乱、またnpmを利用した依存関係解決のため開発されたバンドラー
Visual Studio Code と Language Server Protocolの登場によるエディタ革命
2015年にプレビュー版が公開されたVisual Studio Code
当初はAtomやSublime Textと並ぶテキストエディタでしかなかったが、2016年登場のLanguage Server Protocolにより大きく変革する
従来IDEが行っていたコードの解析・フォーマッティング・リンティングをサービス化し、エディタがその機能をある種外部委託する形で実行し共通化することでエディタ間のリンティングやフォーマッティングが共通化されるようになった
メンタルモデルの変遷を理解する
メンタルモデルを理解する！？
当時の技術やソフトウェアの実装手法の主流から、どういう理念・思想でソフトウェア・プロダクトが構成されていたかを理解し、今後の変遷を追っていくという試み
メンタルモデル＝哲学思想
メンタルモデルもしくはパラダイムシフトを追う試み
ざっくり変遷を追ってみよう
2000年代より前のWeb
インターネットが出始め、ブラウザを利用することで静的コンテンツにアクセスできるような環境が整ってきた
HTML4以前やCSS以前の表現力が乏しい時代
というか初期の構想はハイパーリンクでコンテンツとコンテンツが網目（ウェブ）状につながっている状態を作ることが目標だった
2000年代前半のWeb
動くWeb：Adobe FlashやActive Xといったウェブ標準技術ではない技術を利用したRIA
Ajax通信による、非同期処理とProgressive（漸進的）な画面更新ができるようになる
ブラウザやユーザー環境が乏しく、基本的にはCgiなどが中心となる
2000年代後半のWeb
巨大なSPA：メンタルモデル→ブラウザ上に集約された処理をなるべく構造化、大きなものを大きなまま扱う
DOM操作や非同期処理を命令的に書く必要があり、管理コストや設計コスト、実装コストが肥大化
命令的↔宣言的のちがい→車のMT↔AT
宣言的は「目的に着目する」、ボタンを押したらほしい挙動がされることだけ技術できれば良い
SPAの肥大化
2010年代前半のWeb
ECMAScrip5の登場によりウェブ標準に則り、多機能なJavaScriptで大規模アプリケーション開発に取り組めるようになってきた
jQueryやBackbone.jsをMVCアーキテクチャっぽく書くフロントエンドMVCフレームワークを採用
TypeScriptなどのAltJSが出始めることでJavaScript離れが進む
SPA構築の最適化：コンポーネント指向や宣言的UIによるWebアプリケーションのコード記述範囲でのメンタルモデル更新
大幅に時代が動く
React, Vue, Angular, Typescript, Webpack などが台頭
まだクライアント（ブラウザ）上でアプリケーションが動いている
JavaScriptで（主に）HTMLを演算し、DOMを構築、ブラウザ上に反映するまでのオーバーヘッド
JavaScriptコードの肥大化、初期ロードまでの時間がかかる
体験を損ね、検索エンジンからの評価低下
2010年代後半のWeb
サーバーサイドレンダリングの登場、Webpackなどのバンドラーツールを駆使し事前に生成できるコンテンツやデータは生成し、ブラウザで残りを描画する
2020年代前半のWeb
ハイドレーションの活用：サーバーサイドでリソース最適を行い、すでに取得済みのデータを返しつつ、必要な処理は
キャッシュの活用やセキュアな情報取得、非同期処理を多用したブラウザ
HTMLの構築をサーバーサイドで行う、サーバーサイドレンダリングの登場
サーバーサイドでHTMLと仮想DOMやらJavaScriptをレンダリングもしくは演算して返す
2020年代後半のWeb？
とりあえずHTMLだけ返して都度都度必要になったらコンポーネント単位で必要なデータを取って小分けにしたJavaScriptを読み込む？
サーバーサイドにできる限り処理を集約し、かつ事前にコンポーネントの挙動をある種コンパイルする形で
JSX記法の浸透
どう情報を集めるか？
jser.info
サイボウズ フロントエンド
各ライブラリ・フレームワークの開発者のTwitterをフォロー⇦慣れてくるとめちゃくちゃ良い