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
160
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
600
レガシーなアプリケーションにこそ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
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
110
Fargateを使った研修の話
takesection
0
120
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
480
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A Tale of Four Properties
chriscoyier
156
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Designing Experiences People Love
moore
138
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
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は未だ変化の途中の⾔語