どうしてブラウザテストって必要なの？

こんにちは。エンジニアの市川です。
今回はウェブ開発等において「なんでブラウザテストが必要なんだっけ？」
という方に向けて、その理由をわかりやすく解説していこうと思います。

一言で言うと、複数のブラウザを実際に見比べ、その差異を確認する為に必要なのがブラウザテストです。
ここからは、その差異確認がなぜ必要なのかという部分に触れていきます。

ブラウザテストとは？

まず、ブラウザとは、普段皆さんがインターネットを利用するために使っているもので、「Google Chrome」や「Microsoft Edge」「Internet Explorer 11」などが一般的に広く使われています。
ウェブサイトやウェブアプリケーションを開発する際は、パソコンやスマートフォンの機種や、OSごとの差異をテストする 端末テスト 以外に、上記のような複数のブラウザを見比べ、ブラウザ毎に表示方法や機能が異なっていないかの確認を行う ブラウザテスト という工程があります。

ブラウザごとの違いって何？

あまり意識せずにブラウザを選んでいる方は、もしかすると「見た目はなんとなく違うけど、インターネットを使うだけだし、大差はないだろう」と思うかもしれません。
ですが、それぞれのブラウザには大きく、
① 表示する見た目
② ブラウザが認識できる機能
という2種類の違いがあります。

①表示する見た目の違い
コレは、同じウェブサイトを見ていたとしてもブラウザごとに色や文字などの見た目が違うということです。
例えば、以下の画像は、とある絵をウェブサイトを制作する方法と同様の手法を用いて制作し、それを様々なブラウザで表示した時の見た目の違いを表しています。

※左上の画像が基準となっています。
(出典：https://gigazine.net/news/20191106-purecss-image-looks-different-browser/)

人物の色や濃淡、輪郭が大きく異なっているだけではなく、ネックレスが表示されていなかったり、背後のレースの見た目が大きく異なっていたりするのが分かると思います。これがブラウザテストを行わなければならない理由の一つ目です。

大袈裟に聞こえるかもしれませんが、これはシステムの構造上、実際に弊社で制作するウェブサイトやウェブアプリケーションはもちろん、私たちが普段見るようなウェブサイトでも発生しうる現象です。
制作していく中で
「Google Chromeで見た時には見た目に問題がなかったから大丈夫」
と思っていても
「Internet Explorer 11では大きく見た目が変わってしまっていた」
ということが発生してしまう可能性があります。
そういったリスクを事前に回避するために、ウェブサイトを制作する際は、必ず複数のブラウザで見比べて検証を行う必要があるのです。

②ブラウザが認識できる機能の違い

ウェブサイト制作では主に、「HTML・CSS・JavaScript」という3種類のプログラミング言語を使用します。
これらのプログラミング言語の中には、
「タイトルは太文字で」「背景は青色で」といった ”見た目に関するプログラム” 以外に、
「このボタンを押したら次のページに移動する」「画面をスクロールしたら背景の画像がカッコよく動く」といった “機能に関するプログラム” も記述されています。

ブラウザごとに見た目が違う。つまり見た目に関するプログラムがブラウザ毎に異なるということは前項で説明しましたが、機能をもたらすプログラムについても同様です。
「このボタンを押したら次のページに移動する」というプログラムが書かれたウェブサイトがあったとして、ボタンを押した時に、あるブラウザでは問題なく次のページに移動することができても、別のブラウザではページ移動ができないといったことが発生しえます。

このように、発注側の依頼内容にもよりますが、多くの場合、①表示、②機能の両点において不具合が起きないよう、複数のブラウザでテストを行う必要があるのです。

結論

ブラウザテストが必要なのは、”ウェブサイトなどでの見た目や機能が、ブラウザ毎に大きく異なってしまう可能性があるから“というお話でした。

ユーザーが普段、ブラウザを気にすることなくウェブサイトを快適に利用できるよう、裏側ではこういったテストが行われています。
世の中のインターネット利用者が使っているブラウザ全てでテストすることは現実的ではありませんが、例えば弊社では統計データから利用率の高いブラウザを端末ごとに選定し、どこまでをテスト対象とするか、お客様と相談しながら決めていきます。

テストとは異なりますが、別の記事でブラウザのシェア率などにも触れているものがあるので、興味があればぜひ読んでみてください。
 レガシー版Edgeが終了！Chromium版 Edgeとは？

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