レンダリング（Rendering）

レンダリング（Rendering）とは、コンピューターが持つデータをもとに、画面上に見える形として描き出す処理のことです。Webサイトの分野では、HTMLやCSSなどのデータをブラウザが解析し、実際に目に見えるページとして表示するまでの一連の処理を指します。

現実世界に例えると、レンダリングは設計図から実際の建物を建てる作業のようなものです。設計図（データ）だけでは中に入ることも眺めることもできませんが、その情報をもとに組み立てることで、初めて目に見える形として完成します。

レンダリング図解

Webページが表示されるまでの流れ

サーバーサイドレンダリングとクライアントサイドレンダリング

Webページの組み立てをサーバー側で済ませてから届ける方式を「サーバーサイドレンダリング」、ブラウザ側でデータを受け取ってから組み立てる方式を「クライアントサイドレンダリング」と呼びます。前者は表示開始が速く、後者は操作に応じた滑らかな画面更新が得意という違いがあります。

3DCGにおけるレンダリング

映像や3DCGの分野でも「レンダリング」という言葉が使われます。こちらは、光の当たり方や質感といった膨大な計算をもとに、立体的なモデルを一枚の画像や映像として描き出す処理を指し、Webの場合よりも多くの計算時間を必要とすることがあります。

レンダリングが遅いと起きること

データ量が多いページや、複雑な処理を含むページでは、レンダリングに時間がかかり、表示が遅れたりカクついたりすることがあります。画像の軽量化や不要な処理の削減は、レンダリング速度を改善するための代表的な対策です。

レンダリングの完了を待つ場面

動画編集ソフトや3DCGソフトでは、作業内容を最終的な映像として書き出す処理も「レンダリング」と呼ばれます。扱うデータが複雑になるほど処理に時間がかかるため、パソコンの性能によっては完了までに数十分から数時間かかることも珍しくありません。

レンダリングを高速化する工夫

Webの分野では、画像サイズの最適化や、表示に必要な部分から先に読み込む工夫などによって、レンダリングにかかる時間を短縮できます。3DCGの分野では、複数のパソコンで計算を分担したり、専用の処理装置（GPU）を活用したりすることで、作業時間の短縮が図られています。

あわせて知っておきたい用語

• HTML：
  Webページの構造を記述するための言語です。
• CSS：
  Webページの見た目やレイアウトを指定するための言語です。
• ブラウザ：
  Webページを読み込み、レンダリングして表示するソフトウェアです。
• GPU：
  画像や映像の描画処理を高速に行う専用の処理装置です。
• JavaScript：
  Webページに動きや処理を加えるためのプログラミング言語です。