「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

HTMLレンダリングエンジン

pointこの用語のポイント

pointWebブラウザさんの脳みそだよ

pointホームページの見た目を整えて表示するのがお仕事だよ

スポンサーリンク

簡単に書くよ

HTMLレンダリングエンジン(読:エィチティーエムエルレンダリングエンジン 英:HTML rendering engine)とは

ホームページを見るときに使うソフト(Webブラウザ)の脳みそに相当する部品。
もう少し具体的に書くと

Webブラウザさんの中にいて、ホームページの見た目を整えて表示してくれるやつのこと
です。


image piyo

詳しく書くよ

順番に見ていきましょう。
まずは予備知識として「レンダリング」について説明します。
「そんなの説明されなくても知ってるよ!」な人は適当に読み飛ばしてください。

レンダリングは「もとになる情報を整形して表示すること」です。
犯罪捜査なんかで似顔絵を作るときは、目撃証言をもとにして似顔絵を作りますよね。
それと似たようなものです。

HTMLレンダリングエンジン

例えば、そうですね。

あなたがホームページを見るとき、まず、ホームページを見るときに使うソフトWebブラウザがホームページのファイルが置いてあるコンピュータWebサーバに対して「このページをおくれ」と お願いを出します。

HTMLレンダリングエンジン2

そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」と お返事がきます。

HTMLレンダリングエンジン3

お返事を受け取ったWebブラウザさんは、受け取ったページを画面上に表示します。

HTMLレンダリングエンジン4

これがホームページを見るときの流れです。

ここで、Webブラウザさんが受け取ったページを表示するところに注目してください。

HTMLレンダリングエンジン5

Webブラウザさんが受け取ったページの中身は、例えば以下のような内容になっています。


<table border="1" width="50%">
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td>c</td></tr>
</table>


なんか、ぐちゃぐちゃした感じですね。

ところがどっこい、画面には以下のような見た目で表示されます。

ab
cc


いかがでしょう。
ちょっと違いますよね。

これはWebブラウザさんが見た目を整えてくれたからです。
「<table> ~ </table>と書いてあったら表組っぽい見た目にするのね」のように、あらかじめ決められたルールに従って、見た目を整えてくれています。

この話において、Webブラウザさんがやったことがレンダリングです。
受け取ったファイルの中身もとになる情報整形して表示していますよね。

実際には、登場シーンによって具体的な中身が変わってくる用語です。
とはいえ、とりあえず

1.もとになるデータがあるよ
2.(もとになるデータを)整形するよ
3.整形した結果を表示するよ


の3つを押さえておけば、困ることは少ないと思います。

以上を踏まえて、本題に入ります。

先ほどのレンダリングの説明を思い出してください。
Webブラウザさんが受け取ったページを画面に表示したところです。

HTMLレンダリングエンジン6

Webブラウザさんが受け取ったページの中身は、例えば以下のような内容になっています。


<table border="1" width="50%">
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td>c</td></tr>
</table>


これが画面に表示されると、以下のような見た目になります。

ab
cc


これはWebブラウザさんが見た目を整えてくれたからです。
「<table> ~ </table>と書いてあったら表組っぽい見た目にするのね」のように、あらかじめ決められたルールに従って、見た目を整えてくれています。

この見た目を整えて表示する作業が(ホームページの話で出てくる)レンダリングです。

そう説明しました。

それでは、レンダリングをしてくれたのは誰でしょう?

そうですね。
Webブラウザさんです。

ただし、より正確に書くと、Webブラウザさんの中にある

レンダリングをするのが仕事の部品

です。

この

Webブラウザさんの中にある「レンダリングをするのが仕事の部品」

が「HTMLレンダリングエンジン」です。

HTMLレンダリングエンジンさんは、Webサーバさんからページを受けと取ったときに「う~ん、このページの内容は、どんな見た目で表示しようかな~」と考えてくれています。
Webブラウザさんの脳みそに相当する部品です。

ちなみに、Webブラウザには、いくつかの種類があります。
Google Chrome(グーグルクローム)Microsoft Edge(マイクロソフトエッジ)Firefox(ファイアーフォックス)などです。

HTMLレンダリングエンジン7

そして、Webブラウザによっては違うHTMLレンダリングエンジンを使っていたりします。
ピヨ太ブラウザはピヨ太エンジンを使っているけど、ピヨ子ブラウザはピヨ子エンジンを使っていたりするのです。

これが同じホームページを見てもWebブラウザの種類によって見た目が変わる原因です。

例えば、ホームページのファイルの中にリンゴが書いてあったとしましょう。
ピヨ太エンジンは「赤くて丸いリンゴ」と表現しました。
ピヨ子エンジンは「丸くて赤いリンゴ」と表現しました。

そのような表現の違いが見た目の違いとなって現れます。


image piyo2

一言でまとめるよ

まぁ「HTMLレンダリングエンジン」って単語が出てきたら「Webブラウザ(ホームページを見るときに使うソフト)の中にいて、ホームページの見た目を整えて表示してくれるやつなんだな~」と お考えください。

一番上に戻るよ
スポンサーリンク
書籍画像007
書籍画像028

おまけ

■訳してみるよ

「HTML」は「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略です。
「HyperText(ハイパーテキスト)」はIT用語の「ハイパーテキスト」です。
ちょっと意訳ですが「ホームページのファイル」だと思ってください。
「mark(マーク)」の意味は「印」とかです。
「up(アップ)」の意味は「上へ」とかです。
「mark up(マーク・アップ)」で「印をつける」的な意味になります。
「language(ランゲージ)」の意味は「言語」とか「言葉」とかです。
「rendering(レンダリング)」の意味は「(芸術とかの)表現」とか「演出」とか「解釈」とか「翻訳」とか「訳文」とかです。
「engine(エンジン)」の意味は「機関」とか「エンジン」とかです。
何となく くっつけると

ホームページのファイル用の印を付ける言語を表現する機関

となります。


■検索してみる?




書籍画像
わわわ説明術コラム
宣伝だよ
「分かった!」と思わせる説明の技術 知識ゼロの相手にも伝わるようになる本
ソフトウェア受託現場の「失敗」集めてみた。 42の失敗事例で学ぶ受託開発のうまい進めかた
サイバーセキュリティお嬢様と学ぶ 情報セキュリティの基本