Javascript in the past and now

Transcript

1. JavaScriptの昔と今 2019/08/02 Tambourine Meetup at tambourine commune
2. 安部 草⿇⽣ Kusamao Abe 株式会社タンバリン ‧テクニカルディレクター ‧Webエンジニア
3. タンバリンでは
 Webエンジニアリングをやっています • Webサイト制作 • Webアプリケーション制作 • クラウドプラットフォームとの統合 • ECサイト開発 • そのほか、モバイルアプリケーションなども
4. ソフトウェアエンジニアリング • ソフトウェアをつくる職域‧スキルセット • Webフロントエンド • バックエンド • ネイティブアプリケーション（モバイル‧Mac‧Win） • OS
5. Webフロントエンド • HTML • CSS • JavaScript • PHP • Ruby, Ruby on Rails • etc.
6. Webフロントエンドで
 JSに触らず済むことはあんまりない
7. JSのイメージ • 実⾏速度が遅い • シングルスレッドで⾮同期？わからん • なんかバージョン？がいっぱいあるんでしょ？ • 流れが早すぎてついていけない • 制約が少なすぎてなんでもできちゃうのが嫌
8. JSは⾊々あってわからない？ • DOM API • node.js, npm, bower • webpack, browseify • Vue.js, React.js, AngularJS • jQuery • ES X • ノンブロッキングI/O • トランスパイル, babel • gulp, grunt • etc.
9. まずはJSの歴史
10. ݟͨ͜ͱ͋Γ·͔͢
11. Netscape • 今は亡きブラウザ • 最初にJavaScriptを搭載した • サーバサイドでレンダリングされたものを表⽰するだけで なく動的な要素を組み込むためのスクリプト⾔語 • MicrosoftはInternet ExplorerにJScriptを実装 • →ブラウザ戦争へ……
12. 当時の時代背景 • 1995年、約四半世紀前 • ダイヤルアップ接続が主流 • 従量課⾦ • 深夜帯ならつなぎ放題になる「テレホーダイ」が開始さ れたのがこの年 • マシンスペックも格安スマートフォン以下
13. 仕様が乱⽴する • （今もそうだけど）各ベンダがこぞって適当な実装をする • Netscapeが「これじゃまずい！」と標準化機構に依頼 • Ecma International（旧 欧州電⼦計算機⼯業会）が標準化 することに • → ECMAScriptのはじまり
14. JSとES • ESは標準化された仕様 • その仕様を実装した⾔語がJavaScript • 昔はESを実装した別の⾔語もあった • ActionScript
15. ECMAScriptの歴史 όʔδϣϯ උߟ ೥ &$." ॳ൛  &$." ಺༰͸͋·ΓมΘΒͣ  &$." USZDBUDIͳͲɺ·ͱ΋ʹͳΓ͸͡ΊΔ  &$." ೋ౓ͷݕ౼΋์غʢ"DUJPO4DSJQUͱ͔੓࣏ͱ͔ʣ &$." ೥લ൒·Ͱͷελϯμʔυɺ͍͍ͩͨࠓͷܗ  &$."ˠ $MBTTߏจ
    ςϯϓϨʔτϦςϥϧͳͲϞμϯʹ  &$." "SSBZQSPUPUZQFJODMVEFTͳͲ  &$." BTZODBXBJUͳͲ 
16. JSの特徴 • インタプリタ⾔語 • 弱い型付け⾔語（動的型付けとも） • プロトタイプベース
17. JSの⾔語仕様 • ブラウザで実⾏されることが想定されたつくり • HTTPサーバがない • filesystemへのアクセスがない • moduleももちろんない
18. ブラウザが持っている仕様 • DOM API • window, document • Web workers • Web sockets • canvas
19. 最初期のJS • ブラウザでDOMを動かす程度 • マウスに追従して動くキラキラした画像（ウザい） • 右クリック禁⽌（ウザい） • ⽂字が動く（ウザい）
20. 貧弱そして脆弱 • ⾔語仕様じたいがあんまり発達していないのでAPIが少ない • 脆弱性を利⽤したウイルスの広がり • マシンスペックに対して処理が重い • →JSをOFFにするユーザも……
21. 激しいブラウザ間実装差異 • イベントハンドラの設置すらifで分けて書く必要があった ほど、実装がブラウザ間でごちゃごちゃ • IE , IE がマジで地獄だった • 標準化が遅々として進まない上、⾃動アップデートなども なかったので実装差異を吸収するライブラリが登場 （Prototype.js, jQuery）
22. Flashの台頭 • 2000年初頭、FlashでのWebサイト制作が増加 • ブラウザにプラグインを⼊れる必要があった • インタラクティブ‧⽐較的軽量で「イケてる」サイトはだ いたいFlash • Flashで使われたScript⾔語がActionScript
23. JSの転機 • 2005年 Googleの開発者が提唱したAjaxという概念が流⾏ • XHR（XMLHttpRequest）を使って動的に書き換える • Googleマップなどに採⽤ • JSで実⽤に耐えうるアプリケーションが作れるのでは？
24. 実⾏速度の⾼速化 • 2008年、Google Chromeが登場 • 当時ほかのブラウザを引き離す実⾏速度 • V （Google V JavaScript Engine） • ここからJIT（実⾏時コンパイラ）のチューニングの競争が はじまる
25. Flash、堕つ • 2008年7⽉11⽇、iPhoneが⽇本で発売 • スマートフォンの時代が到来 • iPhoneにはFlashプラグインを⼊れることができなかった • JSの実⾏⾼速化も合わせ、以降凋落の⼀途をたどる
26. サーバサイドJSの登場 • 2009年、node.jsが登場 • JavaScriptがブラウザだけでなく、サーバサイドの実⾏環 境として提供されるもの • V を搭載し、⾼速なREPL（Read-Eval-Print Loop）を提供 • fs, HTTP server, module化などが登場！！！ • →これからはJSが来る！みたいな時代に
27. パッケージマネージャの登場 • npm: node package managerの登場 • 便利なモジュールをがんがんimportして使えるように • 開発コストの低減やOSS（Open Source Software）開発が 活性化する
28. 依存解決‧バンドル • 様々なパッケージやモジュールをfsで読み込むだけでな く、ブラウザ側のJSの開発でも同じようにモジュールなど を利⽤して開発したい • 依存してるのを⼀個にまとめて書き出しちゃえばいいん じゃね？という思想から依存解決ツールが登場 • →browserify, webpack
29. ビルドしちゃえ • 依存解決ついでに他のこともしちゃおう • template scriptもJSの中に⼊れちゃえ • ESの新しいバージョンで書いて古いバージョンに変換し ちゃえ（ES to , babel） • JS以外も変換しちゃえ（SCSS, EJS etc.） • もう全部まとめてやっちゃえ（grunt, gulp）
30. 開発環境整備 • HTML, CSS, 画像, デプロイ, ローカルサーバ⽴ち上げなどた くさん準備するものがある • npm install叩いたらできるようになったら便利 • node.jsが開発環境を整えるのに汎く使われるように
31. 実⾏環境のリッチ化 • サーバサイドに頼らずとも計算‧演算をクライアントサイ ドで⾏っても⼤丈夫なようになってきた（ムーアの法則） • クライアントサイドにMVCモデルを取り⼊れる動き • サーバサイドはWeb APIを提供 • クライアントサイドがロジックを担当 • SPA: Single Page Applicationの勃興（Backbone, Knockout, React, Angular, Vue etc.）
32. ブラウザの進化 • シングルスレッドを解消するWorkerの登場 • ストレージの進化（LocalStorage, IndexedDB） • WebSocketによる双⽅向通信 • グラフィック描画の提供（Canvas API, WebGL）
33. ESの進展 • ES 策定失敗の流れからか、ES （のちのES ）から標 準化策定がスピードアップ • Classの導⼊など、やっとか！と⾔われるものが少しずつ追 加される • AltJSと呼ばれるJSに変換されるための⾔語（もっと書きや すく‧読みやすくする⾔語）からも仕様が取り⼊れられた
34. ⾮同期処理‧シングルスレッド • ⾮同期処理 • かんたんにいうとコードが書いた順に実⾏される
 わけではない • TimerやXHRをキューに⼊れる順番は書いた順、しかし時 間のかかる処理が返ってくる前にキューを進め、処理が 戻ってきたら割り込みで実⾏ • シングルスレッドなので「並列処理」ではないことに注意
35. ⾮同期処理‧シングルスレッド • 通信など、JSのスレッドがやらなくて良い処理の結果を 待ってから実⾏しようとするとコールバック地獄になって た IUUQDBMMCBDLIFMMDPN
36. ⾮同期実⾏を扱いやすく • ⾮同期実⾏を扱いやすくする⼿法が登場 • Promise • .then() • Generator • Async/Await（ES ）
37. まだまだブラウザは進む • WASM（Web Assembly） • ウェブブラウザのクライアントサイドスクリプトとして 動作する⾔語 • 要はバイナリコードドン！動く！ • 開発中 • JSじゃなくてもよくなる……かも？
38. JSはたしかに貧弱 • そもそもの経緯として、そういうもの • 未だにブラウザはfsやmoduleをどうするかわからない • TypeScriptのようなAltJSじゃないと安全に書けない場合も ある • そもそもブラウザベンダーが⾜並みをそろえてくれている わけでもない
39. とはいえ、かんたん • ブラウザコンソールやnode.jsのREPLに突っ込めば動く • 前者ならサーバをインストールする必要すらない • アップロードしたら動く • 複雑化してはいるけど、フレームワークや実⾏環境の違い をひとつずつ抑えていけばあとはドキュメント読んでいけ ばいい（はず！）
40. 参考⽂献 • JavaScriptの⾮同期処理を並列処理と勘違いしていませんか？
 https://qiita.com/klme_u /items/ea f cbe d f d • JavaScriptの同期、⾮同期、コールバック、プロミス辺りを整理してみる
 https://qiita.com/YoshikiNakamura/items/ ded c a f a • JavaScriptが辿った変遷
 https://qiita.com/naoki_mochizuki/items/cc ef d ba a f • ⽇本のインターネット歴史年表 1995年（平成7年）
 https://i.impressrd.jp/e • JavaScript - Wikipedia
 https://ja.wikipedia.org/wiki/JavaScript
41. Thank you!