reflow・とは？初心者にも分かるリフロー入門ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

reflow・とは？初心者にも分かる基本のポイント

ウェブページをブラウザで表示する時、描画される前に起きる「再配置」のことをリフローと呼びます。英語の"reflow"を日本語読みしたもので、直訳すると「再流れ・再配置」という意味になります。リフローは表示の幅・高さ・位置を再計算する作業で、フォントを変えたり、画像を読み込んだり、DOM操作を行うと発生します。この過程をうまく扱えると、ユーザーがストレスを感じないウェブ体験につながります。

リフローの仕組みはシンプルです。ブラウザはページの構造を木のような階層（DOM）とスタイルの情報（CSS）で管理します。何らかの変更が加わると、ブラウザは「どこがどう変わったか」を見つけ出し、結果として画面上の要素の配置を計算します。計算が終わると、描画（ペイント）と呼ばれる作業が行われ、実際の画面に表示されます。この「再計算 + 描画」がセットになってリフローです。

重要なのは、リフローが起きるとブラウザは多くの作業を行うため、パフォーマンスに影響を与えることがあるという点です。特にスマートフォンや低スペックの端末では、頻繁なリフローが体感速度を遅くしてしまいます。したがって、リフローを減らす工夫はウェブ制作の基本テクニックです。

リフローが起きる主な原因

・要素の挙動を変えるDOM操作（追加・削除・移動）

・CSSの変更（表示・非表示、幅・高さ、フォントサイズの変更）

・画像の読み込み完了や外部リソースの遅延読み込み

リフローとリペイントの違い

リフローはレイアウトの再計算を伴う大きな処理で、リペイントは色や背景などの描画の再適用だけで済む軽い処理です。リフローが発生するとリペイントも連携して起きることが多く、全体の表示に影響します。

リフローを減らす実践的なコツ

・DOM操作をなるべくまとめて行う。例えば複数の要素を追加する場合、一度にまとめて追加するか、ドキュメントフラグメントを使ってから挿入する。

・スタイルの変更は、一度にまとめて行い、個別に変更する回数を減らす。

・アニメーションはプロパティがレイアウトに影響しないものを選ぶ。例えば transform, opacity など。

・ウィンドウのリサイズイベントなどはデバウンス（一定間隔でしか処理しない）すると無駄なリフローを減らせます。

開発ツールでリフローを確認する

ブラウザのデベロッパーツールを使って、リフローの発生原因を調べる方法を紹介します。ChromeのPerformanceタブを使い、リフロー/リペイントのタイムラインを確認します。JSの操作は長いグラフとして表示され、どの処理がどのくらいの時間を使ったかを把握できます。あるいはLayoutイベントが起きた時刻をマークして、該当コードを見直すと良いです。定期的にパフォーマンスを測ることが重要。

実例と表での比較

項目	リフローの影響	対策
原因	DOMの大きな変更、レイアウト変更	変更をまとめて適用
コスト	高い（計算・描画が必要）	アニメーションは transform/opacity へ
効果的な回避策	DOMを一度に変更、CSSトランジションを工夫	遅延読み込み、ウィンドウイベントをデバウンス

総じて、リフローはウェブの「表示を正しく作るための仕組み」です。初心者のうちはさまざまな変更を試すとリフローが増え、体感速度が落ちることがあります。しかし、正しい理解と基本的な対策を知っていれば、リフローを減らして快適なウェブ体験を提供できます。

まとめ

リフローはウェブ表示の必須のプロセスですが、過剰に発生すると体感が悪くなります。正しい設計・実装・デバッグを通じて、リフローを抑え、レスポンスの良いページを作りましょう。

reflowの関連サジェスト解説

reflow oven とは: reflow oven とは、プリント基板（PCB）上の部品を接続するためのはんだ付け専用の加熱機械です。主に表面実装部品（SMD）を取り付けるときに使われ、ペースト状のはんだを部品とパッドの間に置き、機械の熱でそのはんだを溶かして接合します。ペーストはんだを用いることで、小さな部品が配列どおりに固定され、はんだ付けの品質を高められます。構造は複数の温度ゾーンに分かれており、温度を段階的に上げる「温度プロファイル」と呼ばれる手順が組み込まれています。基本的な流れは、1) プリヒート（基板を徐々に温める） 2) ソーク（はんだフラックスを活性化させるための温度域で一定時間保持） 3) リフロー（はんだが溶ける高温域に短時間で達する） 4) クールダウン（急冷を避けて冷却し、接合を安定させる）です。部品の数が多くても、1枚の基板を同時に処理でき、統一されたはんだの品質を保てる点が大きな利点です。温度の目安はペーストの仕様によって異なりますが、一般的には200度前後の高温域を短時間で通過させます。リードフリーはんだと従来の鉛入りはんだでは適温が少し違うことがあるため、使用するペーストのデータシートを必ず確認してください。初心者が自宅で挑戦する場合は、専用のリフローオーブンを使うのが安心です。トースター型のオーブンを改造して使う人もいますが、温度ムラや排気、臭い、部品の飛散といった問題が起きやすく、慣れが必要です。安全には十分注意し、換気のよい場所で作業し、部品や基板を過剰に加熱しないようにしましょう。大まかな用途としては、大量の部品を正確に結合したい場合や、市販の電子工作キットの小型PCB、学習用のボードなどに適しています。初めて触れる人は、はんだペーストの扱い方、部品の向き・配置、そしてオーブンのプロファイル設定を小さなボードから練習すると良いでしょう。理解を深めると、品質の高いはんだ付けと、失敗を減らす温度管理のコツが身につきます。
no reflow とは: no reflow とはウェブページの描画処理の中でリフローを発生させずに表示を更新する考え方やテクニックのことですここでいうリフローとは要素のサイズや位置を計算し直す作業のことでこれが発生するとページ全体の表示が一時的に止まることがあります一方リペイントは色や透明度など見た目の描画だけを更新する処理でこちらは必ずしもレイアウトの再計算を伴いませんno reflow を意識した実践にはいくつかの基本があります第一にアニメーションはレイアウト変更を伴う top left width height などではなく CSS の transform や opacity を使うこれらは描画パイプラインの別の経路で動くためリフローを起こしにくいです第二に変更をまとめて行うバラバラに DOM をいじると都度レイアウトが走ってしまうため変更はまとめてから画面更新を待つようにします第三に可能なら要素を分離して独立させる CSS contain の活用も有効です contain: layout; あるいは contain: paint; を使うことで影響を受ける範囲を限定できます第四に読み込み時のフォントや画像のサイズを前もって決めておくと初期のレイアウトが崩れにくくなります第五に描画の更新と画面の更新を同期させるために requestAnimationFrame を使うこれにより画面更新が滑らかになります実務でのポイントとしてはまず何をリフローさせたくないのかを明確にすることそしてパフォーマンスの計測ツールを使って実際にどの処理が重いかを特定することです Chrome の Performance パネルでは Layout や重さを可視化できますそして最終的には体感の滑らかさを優先して transform や opacity を中心に最適化する癖をつけましょう
mass reflow とは: mass reflow とは、ウェブの世界でよく耳にする用語です。根本には“レイアウト計算（リフロー）”があります。ブラウザは要素のサイズや位置を決めるたびに、この計算を行います。mass reflow とは、これらの計算が短時間に大量に起きて、ページの再描画が追いつかなくなる状態を指します。結果として、ページ表示が遅くなったり、スクロール時にページが重く感じられたりします。mass reflow が起きる主な原因は、頻繁な DOM 操作や、読み取りと書き込みを混ぜて行うことです。例えば、ループの中で要素を次々に追加・削除したり、要素の高さや幅を読み取ってからすぐ書き換えたりすると、毎回レイアウト計算が走り、mass reflow が蓄積します。対策としては、変更をまとめてから一度に適用する方法が基本です。具体的には、文書断片(DocumentFragment)を使って一括追加する、または innerHTML でまとめて差し替える、読み取りと書き込みを分ける、クラスの切替えを使うなどです。さらに、transform や opacity への変更はレイアウト計算を伴わないことが多いので、表示変更にはこれらを活用します。CSS contain プロパティで表示領域を分離することや、will-change の活用も有効です。イベント処理やリサイズ時にはデバウンスを使い、頻繁な再計算を避けましょう。

reflowの同意語

リフロー: 再度流れを作る・再計算・再配置することを指す総称。特に、はんだ付けの分野では基板上の部品を加熱してはんだを再度溶融させ、接合する工程を意味する。ウェブや印刷分野では、表示レイアウトを再計算・再配置する処理を指す場合がある。
再流動: 物質がもう一度流れること。液体・気体の流れが再開・再配置する現象を指す技術用語。
再溶融: 材料が再度溶けること。特にリフローはんだ付けでの再溶融を指す場合に用いられる表現。
再加熱: 物体をもう一度熱して温度を上げる動作。リフローの加熱工程を指す一般語として使われることがある。
再レイアウト: レイアウトを再度作成・整える作業。ウェブページや印刷物の配置を見直す意味で使われる。
レイアウト再計算: ウェブページの要素の位置・サイズを再度算出・更新する処理。ブラウザのレンダリングやデザイン更新時に使われる。
再描画: 表示内容をもう一度描くこと。DOM・CSSの変更後などに画面を再表示する工程を指す。
再配置: 要素の位置を再度決定して配置し直すこと。ウェブ・デザイン・印刷などで使われる。

reflowの対義語・反対語

再描画（Repaint）: レイアウトの再計算を伴わず、ピクセル単位の描画のみを更新する状態。画面表示の変化がレイアウト変更を引き起こさない場合に発生します。
静的レイアウト（Static layout）: ページのレイアウトが固定され、コンテンツの追加・サイズ変更によって自動的に再配置・再計算が行われない設計または状態。
固定レイアウト（Fixed-layout）: 要素の位置・サイズが事前に決定され、動的なリフローを起こさず表示されるレイアウト。特にデジタル出版物で使われる概念。
非リフロー（Non-reflow）: レイアウトの再計算（リフロー）が起こらない状態の総称。
合成（Compositing）: 描画のレイヤーを合成する段階であり、レイアウト計算（リフロー）とは別の処理。

reflowの共起語

リフロー: ブラウザが要素の幅・高さ・位置を再計算してレイアウトを更新する処理。DOMやCSSの変更が起きると発生しやすく、ページの表示速度に影響します。
レイアウト: ページ内の要素の位置とサイズを決定する過程。リフローの中心となる作業で、要素が正しく表示されるために欠かせません。
レンダリング: ブラウザがページを実際に画面へ描く一連の処理。リフローとペイントを含むが、最終描画を構成します。
ペイント: レイアウト後に色・背景・文字などを画面に描く作業。通常はリフローの後に発生します。
スタイル計算: CSSの適用と計算を行い、各要素のスタイル情報を確定させる工程。これがリフローの準備段階になります。
DOM変更: DOMツリーの追加・削除・属性変更など、構造が変わるとリフローのきっかけになります。
CSS変更: スタイルの変更によってレイアウトが変わり、リフローを引き起こします。
ウィンドウサイズ変更: ブラウザの表示領域が変わると、要素の配置を見直すためにリフローが発生します。
非表示: display: none などで要素を非表示にすると、レイアウト計算から外れて再計算が走ることがあります。
強制リフロー: スクリプトが offsetWidth などの値を読み取って同期的にレイアウトを強制的に再計算させる場合。パフォーマンスに大きな影響を与えることがあります。
再計算: レイアウトの再計算を指す一般用語。リフローの別表現として使われることがあります。
テキスト折り返し: 幅に合わせて文字が自動的に改行され、行長が変わる現象。テキストがリフローの対象になる場面です。
クリティカルレンダーパス: 画面に表示するための最短経路。リフロー・再描画を含む重要な処理の連続です。
リフローのコスト: リフローはCPU・メモリに負荷をかける高コスト処理。パフォーマンス改善の対象になりやすいです。

reflowの関連用語

リフロー: ブラウザが要素の位置と大きさを再計算して画面を更新する処理。DOMやCSSOMの変更で発生しやすく、重いとページ表示が遅くなります。
レイアウト: 要素の位置とサイズを決定する中核の処理。リフローの主な作業で、長時間かかると表示が遅くなります。
ペイント（再描画）: レイアウト後に画素を塗り直して表示を作る処理。色・背景・枠線の変更などで発生します。
コンポジット: 複数のレイヤーを結合して最終的な画面を作る処理。GPUで実行されることが多く、滑らかさを改善する鍵になります。
レンダリング: HTML/CSS/JSを解釈して画面に表示する一連の過程の総称。Parse → Style → Layout → Paint → Composite などの段階があります。
DOM: Document Object Modelの略。HTML文書を木構造のオブジェクトとして表現する仕組みです。
CSSOM: CSS Object Modelの略。CSSのスタイル情報をオブジェクトとして扱うデータ構造です。
クリティカルレンダリングパス: 最初の表示を速くするために、表示に直接関与する処理を優先して実行する流れのことです。
レイアウトスラッシング: JSで読み取りと書き込みを交互に行うと頻繁に再計算が走り、フレーム落ちが起きやすくなる現象です。
CLS（Cumulative Layout Shift）: 読み込み中のレイアウトシフトの累計を測る指標。要素が移動するとユーザー体験が低下します。Core Web Vitalsの一つです。
CSSコンテインメント: containプロパティを使い、対象要素のレイアウト・描画・サイズの影響を外部に拡げないよう限定します。
contain: layout / contain: paint / contain: size: containの値を指定して、レイアウト/ペイント/サイズの再計算の影響を局所化します。
will-change: 将来変更される可能性のある要素を事前に宣言して、合成レイヤー化を促しパフォーマンスを改善するヒントです。
遅延読み込み（Lazy Loading）: 画面に表示される前のリソースを後回しにして、初期のリフロー・ペイントを減らす技術です。
画像のサイズ属性とアスペクト比の固定: widthとheightを事前に指定して、画像読み込み時のレイアウトシフトを防ぎます。
レスポンシブ画像（srcset / picture）: 表示幅に応じて適切な画像を選択して読み込むことで不要な再計算を減らします。
サードパーティスクリプトの影響: 広告・解析ツールなど外部スクリプトがDOMやスタイルを変更してリフローを発生させることがあります。
DOMContentLoadedとLoadイベントの違い: DOM構築完了と全リソース読み込み完了のタイミングで、リフローの起こる機会が変わります。
クリティカルCSS: 初期表示で必要なCSSを最小限にして、最初のリフローを早く終わらせるテクニックです。
パフォーマンスツールの活用: Chrome DevToolsのPerformanceやTimelineを使って、Layout/Calculate Style/Paint/Compositeのコストを分析します。