Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
History of JavaScript
Search
Takayuki Fujisawa
February 13, 2020
Technology
1
210
History of JavaScript
Takayuki Fujisawa
February 13, 2020
Tweet
Share
More Decks by Takayuki Fujisawa
See All by Takayuki Fujisawa
RFC駆動のPHP学習術 Fukuoka.php edition
takayukifujisawa
1
420
RFC駆動のPHP学習術.pdf
takayukifujisawa
3
420
PHPのEnum事情
takayukifujisawa
1
700
レガシーなアプリケーションにこそTypeScriptを採用するべきではないかと思ったのでちょっとまとめてみたよっていう話をするスライドです / Legacy code needs TypeScript
takayukifujisawa
1
390
usb_boot_ubuntu
takayukifujisawa
0
240
なぜPHPにはEnumがないのか
takayukifujisawa
0
5k
Other Decks in Technology
See All in Technology
20250807_Kiroと私の反省会
riz3f7
0
170
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
3
160
Claude Codeは仕様駆動の夢を見ない
gotalab555
16
4.2k
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
480
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
310
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
110
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
280
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Thoughts on Productivity
jonyablonski
69
4.8k
How to Ace a Technical Interview
jacobian
278
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Speed Design
sergeychernyshev
32
1.1k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
History of JavaScript @miracle_fjsw JavaScript TechCafe 2⽉@RAKUS
Developer Roadmap https://github.com/kamranahmedse/developer-roadmap JavaScriptは⼈気の⾔語 https://www.gtalent.jp/blog/japanwork/career-development/programming- ranking
1995年:⽣誕(最初はLiveScriptと呼ばれる) 1997年:国際団体ECMAによって標準仕様が決定 ECMAScript : JavaScriptの標準化仕様 暗⿊期:「セキュリティに問題があるJavaScriptはOFFにしましょう」 2000年代初期: Flash全盛期
2000年代中期 Ajaxの登場で再注⽬ GoogleMapで採⽤ ⾮同期でサーバーサードと通信して動的にコンテンツを更新する新しい体験 jQuery/prototype.jsの活躍 Ajaxの勢いと共にDOMをコネコネする機会が増える 当時のブラウザ標準JSは ブラウザ依存が激しく DOM操作が複雑だった jQuery/prototype.jsは、ブラウザ間の依存を吸収し、DOM操作やAjaxによる処理
を容易にするAPIを備えていた AjaxとjQueryによって⼀躍JavaScriptの地位が向上
2000年代後期 Node.js爆誕 サーバーサイドもJavaScriptでやろうず CommonJSの策定 JavaScriptをサーバーサイドで使う上での標準仕様 モジュールの概念の組み込み module.exports / require 当時、JavaScriptにはモジュールの概念が無かった
npm/yarn(パッケージマネージャ)によるエコシステムの確⽴により、ライブラリの 再利⽤・開発が容易に
2010年代初期 ブラウザ上で動くJavaScriptでもモジュール使いたい フロント側の開発規模の拡⼤に伴い、JavaScriptのコードを効率よく管理する必要が ⽣じた CommonJSはあくまでサーバーサイドJSの標準仕様 Webブラウザは対応していない webpack(モジュールバンドラ) CommonJS形式のモジュール記法で書かれたJavaScriptをWebブラウザでも使える ようにした 以降、webpackはリソースの⼀元管理、サーバーへのリクエストの最適化という役割も
あり、デファクト化していった
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)
ブラウザの対応がES仕様に追い付かない問題 開発者は新しい構⽂使って書きたいが、肝⼼のブラウザが対応していない Babel 新しい仕様で書いたJavaScriptを古い形式の構⽂に書き換えてくれる素敵ツール この辺りから、最新の構⽂で書いてバベるという⼿法がメジャーに。 同時期に、この辺の処理を⾃動化してくれるタスクランナーのGulpとかGluntとか が注⽬された 書いて終わりの⾔語から、「ビルドする」⾔語に 2020年現在は概ね主要ブラウザはESに追従しつつある ただしIEは(略
JavaScriptフレームワークの登場 フロントエンドの開発の⼤規模化と分業化がさらに加速 JavaScriptでもMVC DOM操作は正直しんどい Angular/React.js/Vue.js JavaScriptのMVCフレームワーク (Angular/Vue.js)双⽅向バインディングによって、画⾯上の要素とデータが双⽅向 に連動するようになった(DOM操作不要)
AltJS さらにJavaScriptを堅牢・スマートに書きたい勢 TypeScript 静的型付け(コンパイル時にデータ型の不整合を検出) CoffeScript Rubyっぽく簡潔に書ける PureJS 関数型
テスト 開発規模の⼤規模化に伴い、テストツールも必要になった Jest react-testing-library モバイル React Native Vue Native 先の話
WebAssembly(WASM) JavaScriptでは対応しきれないリッチで⾼速な表現 ブラウザ上でネイティブコード動かせば良くね JavaScriptとWebAssemblyの合わせ技が必要になってくる?
JavaScriptは未だ変化の途中の⾔語