Slide 1
Slide 1 text
Sep 18, 2018
#roppongijs
@ariaki4dev
JavaScript
a
compiled
language ?
Is
CC-BY-4.0
Slide 2
Slide 2 text
[JavaScript]
インタプリタですか？
コンパイラですか？
Slide 3
Slide 3 text
自己紹介
ariaki @ariaki4dev
#techdo
#engineers_lt
MEDIA DO Co.,Ltd.
Slide 4
Slide 4 text
コンパイラ/インタプリタの概要を知る
JavaScriptの言語体系を考える
本日の目標
初級者もわかるくらい易しい説明をしたい
する
#engineers_ltを宣伝する
ネタLTなのでエモくやりきる
Slide 5
Slide 5 text
プログラム言語体系
JavaScript動作の仕組み
アジェンダ
1
2
Slide 6
Slide 6 text
プログラム言語体系
How compiler / interpreter works
Slide 7
Slide 7 text
コンパイラ型言語 インタプリタ型言語
プログラムをコンピュータが直接的
に実行できる機械語、又は、何らか
の効率的な中間表現に変換して実行
する言語体系。
前提条件
プログラムを直接、又は、何らかの
効率的な中間表現に変換しながら実
行する言語体系。
直接実行するかどうか
Slide 8
Slide 8 text
字句解析 構文解析 意味解析
最適化 コード生成
実行
中間コード
オブジェクトプログラム
ソースコード
Slide 9
Slide 9 text
字句解析
let x = “string”;
let x = “string”
Tokens
構文解析
AST : Abstract Syntax Tree 構文木
(Lexical Analysis)
(Syntax Analysis)
Slide 10
Slide 10 text
https://astexplorer.net
JavaScriptをASTに分割して、
グラフィカルに表示するサイト
AST Explorer
Slide 11
Slide 11 text
http://int3.github.io/metajs/
metajs
JavaScriptをASTに分割して、
ステップ実行できるサイト
Slide 12
Slide 12 text
構文木
意味解析
中間コード
IR : Intermediate Representation
(Semantic Analysis)
最適化
コード生成
(Code Optimization)
(Code Generation)
Slide 13
Slide 13 text
- ESTraverse
- babel/traverse
- estree-walker
- Esrecurse
- AST Types
- Acorn
- Esprima
- babel/parser
- espree
parser traverseler
AST 関連ツール
- escodegen
- babel/generator
code generator
- ESLint
linter
Slide 14
Slide 14 text
https://estools.github.io/escodegen/demo/
escodegen demo
Esprima / escodegenを使って、
JavaScriptをパース＋再生成する
Slide 15
Slide 15 text
How JavaScript works
JavaScript 動作の仕組み
Slide 16
Slide 16 text
https://mathiasbynens.be/notes/shapes-ics
インタプリタ？
コンパイラ？
Slide 17
Slide 17 text
主要JSエンジン
# Browser JS Engine
1 Google Chrome V8
2 Apple Safari JavaScriptCore
3 Mozilla Firefox SpiderMonkey
4 Microsoft Edge Chakra
5 KDE Konqueror KJS
6 Mozilla (JVM) Rhino
Slide 18
Slide 18 text
V8
Slide 19
Slide 19 text
JavaScriptCore
Slide 20
Slide 20 text
SpiderMonkey
Slide 21
Slide 21 text
Chakra
Slide 22
Slide 22 text
- Just-In-Timeコンパイラの略
（対義語 → AOT : Ahead-Of-Time コンパイラ）
- プログラムの実行時にコンパイル
（中間コードからネイティブコードに変換）
- Java / .NET 等が有名
JITコンパイラ
Slide 23
Slide 23 text
- JavaScript エンジンは JIT コンパイラを持つ
- インタプリタはバイトコードをすばやく生成
- あまり効率的ではない
- コンパイラは効率の良いマシンコードを生成
- コンパイルに時間がかかる
- 複数のコンパイラを使って最適化を制御している
結論
Slide 24
Slide 24 text
なんか両方もってるし
今日は両者の境界が曖昧なので
どっちでもいい
という結論に至りました
まじか やべー これでええんか
Slide 25
Slide 25 text
あなたはどっち派？
Slide 26
Slide 26 text
告知 #engineers_lt / エンジニアの登壇を応援する会
https://engineers.connpass.com/event/100640/
Slide 27
Slide 27 text
Build Something Amazing
written by ariaki4dev