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
330
RFC駆動のPHP学習術.pdf
takayukifujisawa
3
380
PHPのEnum事情
takayukifujisawa
1
530
レガシーなアプリケーションにこそTypeScriptを採用するべきではないかと思ったのでちょっとまとめてみたよっていう話をするスライドです / Legacy code needs TypeScript
takayukifujisawa
1
300
usb_boot_ubuntu
takayukifujisawa
0
220
なぜPHPにはEnumがないのか
takayukifujisawa
0
4.4k
Other Decks in Technology
See All in Technology
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
MapLibreとAmazon Location Service
dayjournal
1
150
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.2k
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
220
JSON攻略法.pdf
miyakemito
8
5k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
530
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
ユーザーストーリーのレビューを自動化したみたの
bun913
1
420
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Being A Developer After 40
akosma
57
580k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Writing Fast Ruby
sferik
621
60k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
The Invisible Side of Design
smashingmag
294
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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は未だ変化の途中の⾔語