【れんだりんぐ】
レンダリング とは？
💡 裏側のデータを「目に見える画面」に変える処理
📌 このページのポイント
- HTML/CSS/JavaScriptをブラウザが解釈して画面に描画する処理がWebのレンダリング
- 3DCGでは光の計算やテクスチャの適用を行い映像を生成する処理を指す
- SSR（サーバーサイド）とCSR（クライアントサイド）でレンダリングの場所が異なる
- レンダリング速度はユーザー体験に直結するため、パフォーマンス最適化の重要項目
ひよこ レンダリングって何をしてるの？
ペンギン先生 たとえばブラウザはHTMLを受け取ったら、まず構造を解析して、CSSでデザインを適用して、JavaScriptを実行して、最終的にピクセルを画面に描くんだ。この一連の流れがレンダリングだよ
ひよこ Webと3DCGのレンダリングは別物？
ペンギン先生 「データを映像に変える」という本質は同じだけど、3DCGは光の反射・影・質感の計算が加わるからずっと重い処理になるね。映画のCGだと1フレームのレンダリングに数時間かかることもあるよ
ひよこ SSRとCSRの違いは？
ペンギン先生 ひよこ レンダリングを速くするには？
ペンギン先生 不要なJavaScriptの削減、画像の遅延読み込み、CSSの最適化が基本だよ。最近はReactのServer Componentsのように、サーバーとクライアントで最適にレンダリングを分担する手法も進化してるんだ
まとめ：ざっくりこれだけ覚えればOK！
「レンダリング」って出てきたら「データを人間が見える画面に変換する処理」と思えればだいたいOK！
📖 おまけ：英語の意味
「Rendering」 ＝ 描画・表現
💬 英語の「render（表現する・描く）」から来ていて、目に見えないデータを視覚的に変換するという意味だよ