History of JavaScript

Transcript

1. History of JavaScript @miracle_fjsw JavaScript TechCafe 2⽉@RAKUS
2. Developer Roadmap https://github.com/kamranahmedse/developer-roadmap JavaScriptは⼈気の⾔語 https://www.gtalent.jp/blog/japanwork/career-development/programming- ranking
3. 1995年：⽣誕（最初はLiveScriptと呼ばれる） 1997年：国際団体ECMAによって標準仕様が決定 ECMAScript ： JavaScriptの標準化仕様 暗⿊期：「セキュリティに問題があるJavaScriptはOFFにしましょう」 2000年代初期： Flash全盛期
4. 2000年代中期 Ajaxの登場で再注⽬ GoogleMapで採⽤ ⾮同期でサーバーサードと通信して動的にコンテンツを更新する新しい体験 jQuery/prototype.jsの活躍 Ajaxの勢いと共にDOMをコネコネする機会が増える 当時のブラウザ標準JSは ブラウザ依存が激しく DOM操作が複雑だった jQuery/prototype.jsは、ブラウザ間の依存を吸収し、DOM操作やAjaxによる処理 を容易にするAPIを備えていた AjaxとjQueryによって⼀躍JavaScriptの地位が向上
5. 2000年代後期 Node.js爆誕 サーバーサイドもJavaScriptでやろうず CommonJSの策定 JavaScriptをサーバーサイドで使う上での標準仕様 モジュールの概念の組み込み module.exports / require 当時、JavaScriptにはモジュールの概念が無かった npm/yarn（パッケージマネージャ）によるエコシステムの確⽴により、ライブラリの 再利⽤・開発が容易に
6. 2010年代初期 ブラウザ上で動くJavaScriptでもモジュール使いたい フロント側の開発規模の拡⼤に伴い、JavaScriptのコードを効率よく管理する必要が ⽣じた CommonJSはあくまでサーバーサイドJSの標準仕様 Webブラウザは対応していない webpack（モジュールバンドラ） CommonJS形式のモジュール記法で書かれたJavaScriptをWebブラウザでも使える ようにした 以降、webpackはリソースの⼀元管理、サーバーへのリクエストの最適化という役割も あり、デファクト化していった
7. ES6（ES2015）の策定 JavaScriptがモダンでより⽣産性の⾼い構⽂で書けるようになった let/const class Promise（⾮同期処理の記述簡便化） モジュールの導⼊ export / import JavaScriptに正式にモジュール構⽂が追加 CommonJS vs ES Modules 今は使っているライブラリの関係などで、CommonJS形式もES Modules形式 もまとめてwebpackで固めるのが多い？ 以降、ESは毎年新しい仕様を追加し、より洗練された⾔語へ ES8（ES2017）：async/await（Promiseをもっと簡単に） ES9（ES2018）：for-await-of（⾮同期Iterator）
8. ブラウザの対応がES仕様に追い付かない問題 開発者は新しい構⽂使って書きたいが、肝⼼のブラウザが対応していない Babel 新しい仕様で書いたJavaScriptを古い形式の構⽂に書き換えてくれる素敵ツール この辺りから、最新の構⽂で書いてバベるという⼿法がメジャーに。 同時期に、この辺の処理を⾃動化してくれるタスクランナーのGulpとかGluntとか が注⽬された 書いて終わりの⾔語から、「ビルドする」⾔語に 2020年現在は概ね主要ブラウザはESに追従しつつある ただしIEは（略
9. JavaScriptフレームワークの登場 フロントエンドの開発の⼤規模化と分業化がさらに加速 JavaScriptでもMVC DOM操作は正直しんどい Angular/React.js/Vue.js JavaScriptのMVCフレームワーク （Angular/Vue.js）双⽅向バインディングによって、画⾯上の要素とデータが双⽅向 に連動するようになった（DOM操作不要）
10. AltJS さらにJavaScriptを堅牢・スマートに書きたい勢 TypeScript 静的型付け（コンパイル時にデータ型の不整合を検出） CoffeScript Rubyっぽく簡潔に書ける PureJS 関数型
11. テスト 開発規模の⼤規模化に伴い、テストツールも必要になった Jest react-testing-library モバイル React Native Vue Native 先の話 WebAssembly(WASM) JavaScriptでは対応しきれないリッチで⾼速な表現 ブラウザ上でネイティブコード動かせば良くね JavaScriptとWebAssemblyの合わせ技が必要になってくる？
12. JavaScriptは未だ変化の途中の⾔語