文法で学ばないJavaScript

Transcript

1. 文法で学ばない JavaScript ざっくりと学ぶWebの基礎
2. 自己紹介 • 名前 ◦ 松永勇太（@ufoo_yuta） • 出身学科 ◦ 大阪工業大学ロボット工学科 • 職業 ◦ Webエンジニア • すきなこと ◦ シンプルなものづくり
3. 今日のテーマ： JavaScriptについて
4. このLTが目指すところ JavaScriptを書いた事ない 人が、 結局JavaScriptは書けない けど、 なんとなくJavaScriptが理解できる こと。
5. ざっくり基礎
6. 覚えて帰ってほしいトピック • スクリプト言語 • サンドボックス • Web API • イベントループ
7. スクリプト言語 JavaScriptは、スクリプト言語 →コンパイラ(機械語への変換)を介さずに実行するプログラム言語 各ブラウザとそれの実行エンジン↓ Chrome V8 Firefox SpiderMonkey Safari JavaScriptCore
8. サンドボックス JavaScriptは、サンドボックス内で動く →サンドボックスとは、プログラムの危険な動作を防ぐ安全柵 以下の操作はJavaScriptではできない • 選択していないファイルを勝手に読む • 他のアプリを勝手にインストールして起動する • 他のタブで開いたページの内容を知る • カメラやマイクを勝手に起動する
9. Web API Web APIは、JavaScriptがブラウザの機能を呼び出す仕組み • インターネット通信(fetch) • タイマー実行(setTimeout) • 画面操作(document) • ストレージへのアクセス(localStorage) • デバイスからの入力(MediaDevices) JavaScriptはOSへの干渉ができないので、Web APIを介する
10. イベントループ イベントループとは、「JavaScriptをいつ実行していいか」を決める仕組み fetch(https://xxx) .then(hoge) Web API イベントループ https://xxxとの通信 通信完了 hogeの実行を許可 Web API(fetch)でhttps://xxxへの通信後に、hogeという処理を実行させる例↑ イベントループの采配で、 hogeの実行タイミングが決まる
11. 一言でまとめると JavaScriptは、 誰でも使えるように設計された言語 そのため、 危険なことを極力させない工夫が施されている
12. 少し踏み込んだ話
13. JavaScriptの実行速度は遅い？ 現代のJavaScriptは十分な性能 • JIT(Just In Time)コンパイラを持っている ◦ スクリプト言語の処理速度を最適化する仕組み ◦ 実行しながら処理の最適化がされる • 内部処理はネイティブが動いている ◦ C/C++が実行しているので早い • 文字列処理はかなり早い ◦ 正規表現は高度に最適化されている
14. JavaScriptをブラウザ以外で動かす方法 ３つの環境（ランタイム）がある • Node.js ◦ 一番歴史があるので、情報も多い ◦ その分負の遺産多め • Deno ◦ Node.jsの反省を活かして設計された ◦ Node.jsとの互換性が弱いので、現場で使いにくい • Bun ◦ Denoよりは互換性が強い ◦ 開発体験も良くて、実行速度も一番早い
15. JavaScriptで静的型付けをする方法 TypeScriptがある • MicroSoftが開発した言語 • JavaScriptにトランスパイルすることで実行できる →トランスパイルとは、ある言語のプログラムを別の言語に変換すること トランスパイル
16. JavaScriptの仕様はどこが決めている？ • JavaScript ◦ ECMA-262 ▪ JavaScriptの仕様そのもの ▪ ECMA Scriptとも呼ばれる ◦ TC39 ▪ ECMAScriptを策定する専門委員会 • Web API ◦ ２つの団体が決めている ▪ W3C ▪ WATWG
17. さいごに なんでJavaScriptという名前なの？ 当時Javaが流行っていたからそれに便乗したらしい