【れんだりんぐ】
レンダリング とは？
最終更新:
💡 コードやデータから、見える内容を作る処理
コードやシーンのデータなどから、表示する内容や画像を作る処理。WebではサーバーでHTMLを生成する処理や、ブラウザが配置・描画する処理、3DCGではシーンから画像を生成する処理などを指す。
📌 このページのポイント
ひよこ レンダリングって何をしてるの？
ペンギン先生 たとえばブラウザはHTMLの構造とCSSのスタイルをもとに、各部分の配置や見た目を決めて描くよ。JavaScriptが構造やスタイルを変更することもあるけれど、ページを表示するために必ずJavaScriptが必要なわけではないんだ。
ひよこ Webと3DCGのレンダリングは別物？
ペンギン先生 使うデータや計算が違うよ。3DCGではカメラ、形状、材質、光などから画像を作る。「見える結果を作る」という共通点はあるけれど、いつも3DCGの方が重いとは言えない。シーンや解像度、描画方式などで負荷は変わるんだ。
ひよこ SSRとCSRでは、どこで処理するの？
ペンギン先生 ひよこ SSRなら必ず速くて、CSRなら操作が滑らか？
ペンギン先生 そういう保証ではないよ。SSRは早く内容を見せやすい一方、サーバーの生成時間もある。見えてから操作できるまでJavaScriptを待つ構成もあるし、CSRもスクリプトの量や端末性能などで変わる。初回表示と操作への反応を分けて測るんだ。
ひよこ 速くするには何から見ればいいの？
ペンギン先生 まず遅さの原因を測るよ。重要な資源の読み込み、JavaScriptの量、配置の再計算や描き直しなどを確認し、原因に合わせて直す。使う方式の名前だけで最速と決めず、実際の端末や通信条件で検証することが大切なんだ。
まとめ：ざっくりこれだけ覚えればOK！
「レンダリング」って出てきたら「コードやデータから、表示する内容や画像を作る処理」と思えばだいたいOK！
📖 おまけ：英語の意味
「Rendering」 ＝ 描画・表現
💬 英語の「render（表現する・描く）」から来ていて、目に見えないデータを視覚的に変換するという意味だよ