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
190
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
410
RFC駆動のPHP学習術.pdf
takayukifujisawa
3
410
PHPのEnum事情
takayukifujisawa
1
670
レガシーなアプリケーションにこそTypeScriptを採用するべきではないかと思ったのでちょっとまとめてみたよっていう話をするスライドです / Legacy code needs TypeScript
takayukifujisawa
1
370
usb_boot_ubuntu
takayukifujisawa
0
240
なぜPHPにはEnumがないのか
takayukifujisawa
0
4.9k
Other Decks in Technology
See All in Technology
システムとの会話から生まれる先手のDevOps
kakehashi
PRO
0
280
AWS Control Towerを 数年運用してきての気づきとこれから/aws-controltower-ops-tips
tadayukinakamura
0
150
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
730
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
800
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
110
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
220
React ABC Questions
hirotomoyamada
0
170
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
180
Writing Ruby Scripts with TypeProf
mame
0
140
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Done Done
chrislema
183
16k
Fireside Chat
paigeccino
37
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
GraphQLとの向き合い方2022年版
quramy
46
14k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
A better future with KSS
kneath
239
17k
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は未だ変化の途中の⾔語