ブラウザとJavaScriptエンジンの関係とJavaScriptエンジンの構造

2021年1月13日2021年5月3日JavaScript

JavaScriptエンジンを理解すると、JavaScriptをより深く理解することに直結します。 JavaScriptエンジンとはなんぞやというところからポイントをまとめました。

JavaScriptエンジンとは

JavaScriptエンジンというのは、JavaScriptのコードを実行するプログラムのことです。 どのブラウザにもそれぞれのJavaScriptエンジンが備わっています。 一番知られていて多く使われているJavaScriptエンジンは、V8 Engineというグーグルクロムのものです。

ブラウザとJavaScriptエンジン

ブラウザには、

• User Interface(ユーザーからの操作を受け付ける)
• Rendering Engine（画面の描写を司るエンジン）
• Networking
• Browser Engine
• Data Storage（保存する領域）
• UI Backend
• JavaScript Engine(JavaScriptが実行される環境)

とさまざまな機能が備わっています。 JavaScriptエンジンはその中の機能のひとつで、JavaScriptが実行される環境のことです。 Chromeブラウザの場合、V8という一番シェア率の高いエンジンを使っています。 他のブラウザでは、次のエンジンを使っています。

他のブラウザのJavaScriptエンジン

ブラウザ	バージョン
Chrome	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore
Edge	Chakra / V8
Opera	V8

 

V8エンジンについて

V8エンジンでは、 ECMAScriptの言語仕様であるJavaScriptとWeb APIsが含まれています。 Web APIsには、

• DOM API
• WebRTC
• Fetch API
• XHR API
• Geolocation APIなどなど

たくさんのAPIが含まれています。 APIはブラウザといったソフトウェアが提供しているプログラムコードからアプリケーションを操作するための仕組みのことです。 JavaScriptからWeb APIsを通してブラウザを操作します。 V8エンジンを組み込むことで、JavaScriptは実行する環境を作成することができます。 また、Node.jsといったソフトウェア上でも動作します。 このようなさまざまなソフトウェア上で動くJavaScriptのことをUniversal JavaScriptといいます。 Universal JavaScriptはいろんな環境で動かすことのできるJavaScirptです。

JavaScriptエンジンの構造

どのJavaScriptエンジンにも、次の2つの部品があります。

• コールスタック（call stack）
• ヘルプ（help）

コールスタックはコードを実行するための場所です。stackは積み重ねとかそれが堆積した山といった意味があります。 コールスタックは具体的には、実行コンテキスト(Execution context)というものを実行します。 ヘルプはオブジェクトを保管する場所のことです。オブジェクトをメモリに置いておきます。 コールスタックは次の記事を参照してみてください。 次に、自然言語に近い言語を機械語に翻訳する(コンパイル)する必要があります。 JavaScriptの実行時コンパイラについては次の記事を参照ください。

JavaScriptエンジンで予め準備される重要な機能

JavaScriptエンジンには、コードを実行する環境の他に次の２つの重要な機能が予め準備されています。

• グローバルオブジェクト
• thisキーワード

グローバルオブジェクト

グローバルオブジェクトは、JavaScriptエンジンによって生成されるコード内のどこからでもアクセスできるオブジェクトのことです。 ブラウザ上ではWindowオブジェクトというオブジェクトになります。 そして、このWindowオブジェクトにWeb APIs（ブラウザを操作する仕組み）が含まれています。 window.alert()やwindow.documentなどです。

thisキーワード

コンソールでthisを入力するとwindowオブジェクトが表示されます。 thisキーワードはオブジェクトへの参照を保持しているキーワードです。そしてthisキーワードで取得できる値はコンテキストによって変化します。 コンテキストについては次の記事を参照ください。