この記事はトラストバンク Advent Calendar 2022の13日目の記事です。
フロントエンドエンジニアの飯島です。
皆さんはテストを行う際のOSやブラウザをどのように選んでいますか？
実装があれば必ずテストもあるものですが、実装の内容によっては多くのテスト項目を作成して内容を確認していかなければなりません。
例えば10個のテスト項目があったとして、下記のOS・ブラウザで確認するとします。

OS	ブラウザ
Mac	Google Chrome　 Safari　 Firefox
iOS	Google Chrome Safari
Windows	Google Chrome Microsoft Edge Firefox Internet Explorer
Android	Google Chrome

4つのOSで各ブラウザのテストを10項目行うとすると、合計で100ケースのテストを行う必要があります。
これはとても大変ですのでどうにか数を減らしたいのですが、根拠なく「このOS・ブラウザでのテストは不要です」とは言い切れません。
そこで今回「ブラウザに搭載されているレンダリングエンジンとJavaScriptエンジンがテスト実施の判断材料になるのでは？」と思い立ち、それぞれのブラウザに搭載されているレンダリングエンジンとJavaScriptエンジンについて調べてみました。

レンダリングエンジンとJavaScriptエンジンとは

各ブラウザに搭載されているレンダリングエンジンとJavaScriptエンジンをまとめる前に、そもそも「レンダリングエンジンとJavaScriptエンジンってなんぞや？」というところを確認していこうと思います。

レンダリングエンジン

レンダリングエンジンは「HTMLエンジン」とも呼ばれ、HTMLやCSSなどを画面上で描画する際に動作するソフトウェアコンポーネントです。
Webページが画面上で綺麗に見えるのは、このレンダリングエンジンがHTMLやCSSを読み取って画面に描画しているからです。
「Chromeだと大丈夫なのにIEで見ると表示が崩れる！」といったことが起こるのは、ブラウザごとに搭載されているレンダリングエンジンが違うためです。

JavaScriptエンジン

JavaScriptエンジンはその名の通りブラウザでJavaScriptを実行するための環境を提供するソフトウェアコンポーネントです。
JavaScriptがPHPなどの言語のように実行環境を用意しなくて良いのは、このJavaScriptエンジンがどのブラウザにも搭載されており、自分で実行環境を用意する代わりにブラウザがあらかじめ用意してくれているからです。

それぞれのブラウザに搭載されているレンダリングエンジンとJavaScriptエンジン

では先程あげたOS・ブラウザのレンダリングエンジンとJavaScriptエンジンを見てみましょう。

ブラウザ（OS）	レンダリングエンジン	JavaScriptエンジン
Google Chrome（Mac）	Blink	V8
Google Chrome（Windows）	Blink	V8
Google Chrome（Android）	Blink	V8
Google Chrome（iOS）	Webkit	JavaScriptCore
Safari（Mac）	Webkit	JavaScriptCore
Safari（iOS）	Webkit	JavaScriptCore
Microsoft Edge（Windows）	Blink	V8
Firefox（Mac）	Gecko	SpiderMonkey
Firefox（Windows）	Gecko	SpiderMonkey
Internet Explorer（Windows）	Trident	Chakra

注意しなければいけない点として、iOSのGoogle Chromeは「Blink + V8」ではなく、「Webkit + JavaScriptCore」の組み合わせという点です。
これはiOSのブラウザは全てWebkitを使用しなければならないというAppleの規約があるためらしいです。

Google Chromeで使用しているBlinkは元々はWebkitから派生したレンダリングエンジンです。
なので、WebkitとBlinkをまとめてWebkit系と呼びます。
Google Chromeのベンダープレフィックスが-webkit-なのは元々Webkitから派生したBlinkを使っているからなのかもしれないですね。

WebkitやGeckoはその中にJavaScriptエンジンを内包しているようで、「Webkitの中のJavaScriptCore」や「Geckoの中のSpiderMonkey」という位置付けのようです。

おまけ：Chromiumってなに？

Microsoft Edgeについて調べていると「Chromiumベースの〜」という記事がよく出てきます。
「ChromiumってChromeと似た名前だしChromeに関係した何かだろう」とぼんやり思っていたので、今回ついでに少し調べてみました。

Chromiumはオープンソースのウェブブラウザ向けソースコード

簡単に書くとみんなが利用できるウェブブラウザの素みたいなものだと思います。
Googleはこの「みんなが利用できるウェブブラウザの素」に独自の機能を入れたものを「Google Chrome」として提供しているみたいです。
そしてMicrosoft Edgeもこの「みんなが利用できるウェブブラウザの素」をベースに独自の拡張機能などを追加して作っているようです。

まとめ

今回はレンダリングエンジンとJavaScriptエンジンを基準にテストをするOSとブラウザを選べないかということで、各ブラウザで搭載されているレンダリングエンジンとJavaScriptエンジンを調べてみました。
実際にテストするOSやブラウザを選定する際は、修正内容や保守すべき環境、プロダクトの各OS・ブラウザのシェア率などさまざまな情報をもとに選ぶ必要があります。
なので、今回調べた内容をもとに「ChromeとEdgeは同じレンダリングエンジンを使用しているからどっちか1つでOK!」とは単純にいきませんが、判断材料の1つにはなるかなと思います。
この記事を読んでくださった方のテストが少しでも良いものになれば幸いです。

トラストバンクでは一緒に活躍いただけるエンジニアを募集中です！