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

2021年1月13日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キーワードで取得できる値はコンテキストによって変化します。
コンテキストについては次の記事を参照ください。

JavaScript

Posted by devsakaso