Javascript in the past and now

by Kusamao Abe

Slide 1

Slide 1 text

JavaScriptの昔と今 2019/08/02 Tambourine Meetup at tambourine commune

Slide 2

Slide 2 text

安部草⿇⽣ Kusamao Abe 株式会社タンバリン ‧テクニカルディレクター ‧Webエンジニア

Slide 3

Slide 3 text

タンバリンでは  Webエンジニアリングをやっています • Webサイト制作 • Webアプリケーション制作 • クラウドプラットフォームとの統合 • ECサイト開発 • そのほか、モバイルアプリケーションなども

Slide 4

Slide 4 text

ソフトウェアエンジニアリング • ソフトウェアをつくる職域‧スキルセット • Webフロントエンド • バックエンド • ネイティブアプリケーション（モバイル‧Mac‧Win） • OS

Slide 5

Slide 5 text

Webフロントエンド • HTML • CSS • JavaScript • PHP • Ruby, Ruby on Rails • etc.

Slide 6

Slide 6 text

Webフロントエンドで  JSに触らず済むことはあんまりない

Slide 7

Slide 7 text

JSのイメージ • 実⾏速度が遅い • シングルスレッドで⾮同期？わからん • なんかバージョン？がいっぱいあるんでしょ？ • 流れが早すぎてついていけない • 制約が少なすぎてなんでもできちゃうのが嫌

Slide 8

Slide 8 text

JSは⾊々あってわからない？ • DOM API • node.js, npm, bower • webpack, browseify • Vue.js, React.js, AngularJS • jQuery • ES X • ノンブロッキングI/O • トランスパイル, babel • gulp, grunt • etc.

Slide 9

Slide 9 text

まずはJSの歴史

Slide 10

Slide 10 text

ݟͨ͜ͱ͋Γ·͔͢

Slide 11

Slide 11 text

Netscape • 今は亡きブラウザ • 最初にJavaScriptを搭載した • サーバサイドでレンダリングされたものを表⽰するだけでなく動的な要素を組み込むためのスクリプト⾔語 • MicrosoftはInternet ExplorerにJScriptを実装 • →ブラウザ戦争へ……

Slide 12

Slide 12 text

当時の時代背景 • 1995年、約四半世紀前 • ダイヤルアップ接続が主流 • 従量課⾦ • 深夜帯ならつなぎ放題になる「テレホーダイ」が開始されたのがこの年 • マシンスペックも格安スマートフォン以下

Slide 13

Slide 13 text

仕様が乱⽴する • （今もそうだけど）各ベンダがこぞって適当な実装をする • Netscapeが「これじゃまずい！」と標準化機構に依頼 • Ecma International（旧欧州電⼦計算機⼯業会）が標準化することに • → ECMAScriptのはじまり

Slide 14

Slide 14 text

JSとES • ESは標準化された仕様 • その仕様を実装した⾔語がJavaScript • 昔はESを実装した別の⾔語もあった • ActionScript

Slide 15

Slide 15 text

ECMAScriptの歴史 όʔδϣϯ උߟ ೥ &$." ॳ൛ &$." ಺༰͸͋·ΓมΘΒͣ &$." USZDBUDIͳͲɺ·ͱ΋ʹͳΓ͸͡ΊΔ &$." ೋ౓ͷݕ౼΋์غʢ"DUJPO4DSJQUͱ͔੓࣏ͱ͔ʣ &$." ೥લ൒·Ͱͷελϯμʔυɺ͍͍ͩͨࠓͷܗ &$."ˠ $MBTTߏจςϯϓϨʔτϦςϥϧͳͲϞμϯʹ &$." "SSBZQSPUPUZQFJODMVEFTͳͲ &$." BTZODBXBJUͳͲ

Slide 16

Slide 16 text

JSの特徴 • インタプリタ⾔語 • 弱い型付け⾔語（動的型付けとも） • プロトタイプベース

Slide 17

Slide 17 text

JSの⾔語仕様 • ブラウザで実⾏されることが想定されたつくり • HTTPサーバがない • ﬁlesystemへのアクセスがない • moduleももちろんない

Slide 18

Slide 18 text

ブラウザが持っている仕様 • DOM API • window, document • Web workers • Web sockets • canvas

Slide 19

Slide 19 text

最初期のJS • ブラウザでDOMを動かす程度 • マウスに追従して動くキラキラした画像（ウザい） • 右クリック禁⽌（ウザい） • ⽂字が動く（ウザい）

Slide 20

Slide 20 text

貧弱そして脆弱 • ⾔語仕様じたいがあんまり発達していないのでAPIが少ない • 脆弱性を利⽤したウイルスの広がり • マシンスペックに対して処理が重い • →JSをOFFにするユーザも……

Slide 21

Slide 21 text

激しいブラウザ間実装差異 • イベントハンドラの設置すらifで分けて書く必要があったほど、実装がブラウザ間でごちゃごちゃ • IE , IE がマジで地獄だった • 標準化が遅々として進まない上、⾃動アップデートなどもなかったので実装差異を吸収するライブラリが登場（Prototype.js, jQuery）

Slide 22

Slide 22 text

Flashの台頭 • 2000年初頭、FlashでのWebサイト制作が増加 • ブラウザにプラグインを⼊れる必要があった • インタラクティブ‧⽐較的軽量で「イケてる」サイトはだいたいFlash • Flashで使われたScript⾔語がActionScript

Slide 23

Slide 23 text

JSの転機 • 2005年 Googleの開発者が提唱したAjaxという概念が流⾏ • XHR（XMLHttpRequest）を使って動的に書き換える • Googleマップなどに採⽤ • JSで実⽤に耐えうるアプリケーションが作れるのでは？

Slide 24

Slide 24 text

実⾏速度の⾼速化 • 2008年、Google Chromeが登場 • 当時ほかのブラウザを引き離す実⾏速度 • V （Google V JavaScript Engine） • ここからJIT（実⾏時コンパイラ）のチューニングの競争がはじまる

Slide 25

Slide 25 text

Flash、堕つ • 2008年7⽉11⽇、iPhoneが⽇本で発売 • スマートフォンの時代が到来 • iPhoneにはFlashプラグインを⼊れることができなかった • JSの実⾏⾼速化も合わせ、以降凋落の⼀途をたどる

Slide 26

Slide 26 text

サーバサイドJSの登場 • 2009年、node.jsが登場 • JavaScriptがブラウザだけでなく、サーバサイドの実⾏環境として提供されるもの • V を搭載し、⾼速なREPL（Read-Eval-Print Loop）を提供 • fs, HTTP server, module化などが登場！！！ • →これからはJSが来る！みたいな時代に

Slide 27

Slide 27 text

パッケージマネージャの登場 • npm: node package managerの登場 • 便利なモジュールをがんがんimportして使えるように • 開発コストの低減やOSS（Open Source Software）開発が活性化する

Slide 28

Slide 28 text

依存解決‧バンドル • 様々なパッケージやモジュールをfsで読み込むだけでなく、ブラウザ側のJSの開発でも同じようにモジュールなどを利⽤して開発したい • 依存してるのを⼀個にまとめて書き出しちゃえばいいんじゃね？という思想から依存解決ツールが登場 • →browserify, webpack

Slide 29

Slide 29 text

ビルドしちゃえ • 依存解決ついでに他のこともしちゃおう • template scriptもJSの中に⼊れちゃえ • ESの新しいバージョンで書いて古いバージョンに変換しちゃえ（ES to , babel） • JS以外も変換しちゃえ（SCSS, EJS etc.） • もう全部まとめてやっちゃえ（grunt, gulp）

Slide 30

Slide 30 text

開発環境整備 • HTML, CSS, 画像, デプロイ, ローカルサーバ⽴ち上げなどたくさん準備するものがある • npm install叩いたらできるようになったら便利 • node.jsが開発環境を整えるのに汎く使われるように

Slide 31

Slide 31 text

実⾏環境のリッチ化 • サーバサイドに頼らずとも計算‧演算をクライアントサイドで⾏っても⼤丈夫なようになってきた（ムーアの法則） • クライアントサイドにMVCモデルを取り⼊れる動き • サーバサイドはWeb APIを提供 • クライアントサイドがロジックを担当 • SPA: Single Page Applicationの勃興（Backbone, Knockout, React, Angular, Vue etc.）

Slide 32

Slide 32 text

ブラウザの進化 • シングルスレッドを解消するWorkerの登場 • ストレージの進化（LocalStorage, IndexedDB） • WebSocketによる双⽅向通信 • グラフィック描画の提供（Canvas API, WebGL）

Slide 33

Slide 33 text

ESの進展 • ES 策定失敗の流れからか、ES （のちのES ）から標準化策定がスピードアップ • Classの導⼊など、やっとか！と⾔われるものが少しずつ追加される • AltJSと呼ばれるJSに変換されるための⾔語（もっと書きやすく‧読みやすくする⾔語）からも仕様が取り⼊れられた

Slide 34

Slide 34 text

⾮同期処理‧シングルスレッド • ⾮同期処理 • かんたんにいうとコードが書いた順に実⾏される  わけではない • TimerやXHRをキューに⼊れる順番は書いた順、しかし時間のかかる処理が返ってくる前にキューを進め、処理が戻ってきたら割り込みで実⾏ • シングルスレッドなので「並列処理」ではないことに注意

Slide 35

Slide 35 text

⾮同期処理‧シングルスレッド • 通信など、JSのスレッドがやらなくて良い処理の結果を待ってから実⾏しようとするとコールバック地獄になってた IUUQDBMMCBDLIFMMDPN

Slide 36

Slide 36 text

⾮同期実⾏を扱いやすく • ⾮同期実⾏を扱いやすくする⼿法が登場 • Promise • .then() • Generator • Async/Await（ES ）

Slide 37

Slide 37 text

まだまだブラウザは進む • WASM（Web Assembly） • ウェブブラウザのクライアントサイドスクリプトとして動作する⾔語 • 要はバイナリコードドン！動く！ • 開発中 • JSじゃなくてもよくなる……かも？

Slide 38

Slide 38 text

JSはたしかに貧弱 • そもそもの経緯として、そういうもの • 未だにブラウザはfsやmoduleをどうするかわからない • TypeScriptのようなAltJSじゃないと安全に書けない場合もある • そもそもブラウザベンダーが⾜並みをそろえてくれているわけでもない

Slide 39

Slide 39 text

とはいえ、かんたん • ブラウザコンソールやnode.jsのREPLに突っ込めば動く • 前者ならサーバをインストールする必要すらない • アップロードしたら動く • 複雑化してはいるけど、フレームワークや実⾏環境の違いをひとつずつ抑えていけばあとはドキュメント読んでいけばいい（はず！）

Slide 40

Slide 40 text

参考⽂献 • 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

Slide 41

Slide 41 text

Thank you!