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
170
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
380
RFC駆動のPHP学習術.pdf
takayukifujisawa
3
400
PHPのEnum事情
takayukifujisawa
1
610
レガシーなアプリケーションにこそTypeScriptを採用するべきではないかと思ったのでちょっとまとめてみたよっていう話をするスライドです / Legacy code needs TypeScript
takayukifujisawa
1
330
usb_boot_ubuntu
takayukifujisawa
0
230
なぜPHPにはEnumがないのか
takayukifujisawa
0
4.7k
Other Decks in Technology
See All in Technology
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
280
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
190
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
670
Lambdaと地方とコミュニティ
miu_crescent
2
370
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
520
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
180
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
GraphQLとの向き合い方2022年版
quramy
43
13k
For a Future-Friendly Web
brad_frost
175
9.4k
Producing Creativity
orderedlist
PRO
341
39k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Navigating Team Friction
lara
183
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Ruby is Unlike a Banana
tanoku
97
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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は未だ変化の途中の⾔語