Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化

~~最近、**次世代のMicrosoft Edge**が**Chromium**をベースにする~~という記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。

※2020/3/17追記:
**Microsoft Edge**は既に**Chromium**ベースになりました。
それに伴い記事を更新し、以下のように表記を変更しました。

- **現世代Microsoft Edge** → **旧世代Microsoft Edge**
- **次世代Microsoft Edge** → **現世代Microsoft Edge**

もし変更のし忘れがあった場合はご指摘お願いします。


#Webブラウザとは
まずWebブラウザとは
>ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。
出典:「ウェブブラウザ」「ウィキペディア (Wikipedia): フリー百科事典」 最終更新日: 2019年3月27日 (水) 12:03 UTC、URL: https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6

つまり**Google Chrome**とか**Microsoft Edge**などのことですね。ウェブサイトを見るためのあれです。
Qiitaを見るような方でしたらわかっているとは思いますが念のため。

今回は、その中身であるChromiumとかWebKitとかV8エンジンとかをまとめてみようという記事です。
#Webブラウザの種類について
今回はWebブラウザとしてよく使われているであろう

+ **Google Chrome**
+ **Opera**
+ **Microsoft Edge**
+ **Internet Explorer**
+ **Safari**
+ **Firefox**

この6つを主題としてやっていきます。


それでは分類していきます。

+ **Google Chrome**
+ **Opera**
+ **現世代Microsoft Edge**

これらは**Chromium**をベースとして作っています。
**Chromium**は**Google**が主導して開発してる**オープンソース**の**Webブラウザ**です。


その他の

+ **旧世代Microsoft Edge**
+ **Internet Explorer**
+ **Safari**
+ **Firefox**

これらは他のWebブラウザをベースとしたものではなくそれ単体でのWebブラウザです。

ちなみに**Firefox**は**Chromium**と同じくオープンソースです。

図にしてまとめると

![ブラウザ解説図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307076/be0c3943-a068-3d7f-d34a-3d09bc24a60b.png)

こんな感じでしょうか。

#HTMLレンダリングエンジンについて
次はHTMLレンダリングエンジンについてです。
HTMLレンダリングエンジンってのはWikipediaさんによると
>HTMLレンダリングエンジンとは、ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラムである。
出典:「HTMLレンダリングエンジン」「ウィキペディア (Wikipedia): フリー百科事典」 最終更新日: 2018年7月28日 (土) 19:53 UTC、URL: https://ja.wikipedia.org/wiki/HTML%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3

とのことです。

様々なブラウザはこのHTMLレンダリングエンジンを組み込んでウェブサイトを表示しています。
私は「ウェブページを解析、表示する際のコアの部分を独立させた物かなー」と勝手に解釈しています。(間違っていたらごめんなさい)

私が調べた限りではレンダリングエンジンとして

+ **KHTML**
+ **WebKit**
+ **Blink**
+ **Gecko**
+ **Servo**
+ **Trident**
+ **EdgeHTML**
+ **Presto**

といったものがあります。

これらはいくつかプロジェクトがフォーク(分岐)しているものがあり、

そしてフォーク(分岐)の関係としては
例)フォーク元→フォーク先
**KHTML→Webkit→Blink
Trident→EdgeHTML**
といったようになっています。
**Gecko,Servo**は特にフォーク等はしていないようです。

ただこの中で**Presto**についてはもう使われていません。
**Presto**は2003年~2013年の間、**Opera**でレンダリングエンジンとして使われていたのですが開発が終了されました。
**Opera**は現在**Chromium**をベースとしているのでレンダリングエンジンとして**Blink**を使用しています。

ブラウザとの対応関係は以下のような感じです。
**Chromium系**では**Blink**使用
**Safari**が**Webkit**使用
**Internet Explorer**が**Trident**使用
**旧世代Microsoft Edge**が**EdgeHTML**使用
**現世代Microsoft Edge**では**Chromium**をベースとして作成するので**Blink**使用
**Firefox**では**Gecko**使用、そして一部**Servo**使用

**Firefox**ですが今まではレンダリングエンジンとして**Gecko**を使用していましたが、別プロジェクトとして開発していた**Servo**を2017年ごろから**FireFox**へ少しずつ取り込んでいるようです。

図でまとめると

![レンダリングエンジン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307076/900b5683-12aa-92eb-7af5-458e4eddfdcd.png)


こんな感じです。

##ベンダープレフィックス
ベンダープレフィックスについても紹介します。
**-webkit-**とか**-ms-**とかのことです。
あれは各レンダリングエンジンが先行して搭載した機能や固有の機能を使う為のものです。
いい機会なのでベンダープレフィックスもまとめます。
昔はベンダープレフィックスはこのようになっていました。

+ **-o-** ・・・・**Opera**
+ **-ms-** ・・・・**IE, Microsoft Edge(Microsoft社)**
+ **-moz-**・・・・**FireFox(Mozilla社)**
+ **-webkit-**・・・・**Chrome,Safari**

ただ現在は**Opera**は**Webkit**を組み込んでる**Chromium**に鞍替え済み、**Microsoft Edge**も**Chromium**に鞍替えしたのでベンダープレフィックスの対応関係はこんな風になると思います。

+ ~~**-o-**・・・・**Opera**~~ 廃止
+ **-ms-**・・・・**IE**
+ **-moz-**・・・・**FireFox**
+ **-webkit-**・・・・**Chrome, Safari, Microsoft Edge, Opera**

こうまとめてみると**-webkit-**が有効な物がすごい多いです。

##iOSはガラパゴス
ただ**iOS**だけは事情が違います。

**iOSではWebkit以外のレンダリングエンジンを使用する事が禁止されています。**

つまりiOS上で公開されている**Google Chrome**はレンダリングエンジンに**Blink**ではなく**Webkit**を、
**FireFox**も**Servo**でもなく**Gecko**でもなく**Webkit**を使っているはずです。
iOS上では全てのブラウザがレンダリングエンジンに**Webkit**を使ってるというわけですね。


これでiOS上ではどのブラウザでもよくわからない動作をしたりする理由です。


#JavaScriptエンジンについて
最後はJavaScriptエンジンについてです。
その名の通りJavaScriptを実行するためのプログラムです。
ブラウザでJavaScriptが使えるのはこのJavaScriptエンジンが組み込まれているからです。

調べた限りでは

+ **JavaScriptCore**
+ **Google V8 JavaScript Engine(V8 Engine)**
+ **Chakra**
+ **SpiderMonkey**
+ **Carakan**

といったものがあるようでした。

ブラウザとの対応関係について紹介します

※JavaScriptエンジンの中にはレンダリングエンジンに付属している物として解釈すべき物もありますが今回は理解しやすくするためにブラウザを基準として紹介させていただきます。

**JavaScriptCore**は**Safari**で使用、
**Google V8 JavaScript Engine**は**Chromium系**で使用、
**SpiderMonkey**は**FireFox**で使用
**Chakra**は**Internet Explorer, 旧世代Microsoft Edge**で使用

**Carakan**は昔の**Opera**で使われていたJavaScriptエンジンです。
すでに**Opera**は**Chromium**に鞍替えしたため開発は終了されています。

ちなみに**Google V8 JavaScript Engine**は**Node.js**というサーバーサイドでJavaScriptが使えるというシステムでも使われています。

図でまとめると
![javascriptエンジン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307076/e1efade8-6722-8b78-d6ca-48576a5e903d.png)
こんな感じだと思います。

#まとめ

まとめとして最後にブラウザ、レンダリングエンジンJavaScriptエンジンをまとめた図をのせます。
![まとめ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307076/f565c21c-d5ca-7468-4737-a5b82b73aa63.png)

最後までお読みいただきありがとうございました。

#参考
https://ja.wikipedia.org/wiki/Google_V8_JavaScript_Engine
https://ja.wikipedia.org/wiki/HTML%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3
https://developer.mozilla.org/ja/docs/Web/JavaScript/About_JavaScript
https://webkit.org/project/
https://ja.wikipedia.org/wiki/Chakra
https://v8.dev/
https://developer.mozilla.org/ja/docs/Mozilla/Projects/SpiderMonkey
https://news.mynavi.jp/article/20110715-a069/
https://ja.wikipedia.org/wiki/WebKit
https://ja.wikipedia.org/wiki/KHTML
https://ja.wikipedia.org/wiki/SpiderMonkey
https://ja.wikipedia.org/wiki/Gecko
https://research.mozilla.org/servo-engines/
https://ja.wikipedia.org/wiki/HTML%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3
https://ja.wikipedia.org/wiki/Trident
https://ja.wikipedia.org/wiki/Blink_(%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)
https://ja.wikipedia.org/wiki/Chromium
https://ja.wikipedia.org/wiki/Google_Chrome
https://liginc.co.jp/348669
https://ja.wikipedia.org/wiki/Opera
https://qiita.com/amamamaou/items/42197e443134478befaf
https://www.itmedia.co.jp/mobile/articles/1501/23/news133.html
https://www.atmarkit.co.jp/ait/articles/1905/16/news020.html