皆さんは「Reactは早い」などと聞いたことはないでしょうか?本記事ではReactがなぜ高速なパフォーマンスを提供できるのかとどのように動いてブラウザに表示されているのかを解説します。結論なのですが、Reactアプリケーションが高速なパフォーマンスを可能にしているの一番のポイントは、Reactが仮想DOMを使い、必要な箇所だけを効率的に変更を加えているからです。Reactがどのように高速なパフォーマンスを提供しているのか詳しく理解するために必要な項目は3つです。DOM)私はReactの学習を開始した当初、Reactだけでブラウザに表示されているものだと思っていましたが、しかし実はReactで実装するということは、ReactDOMというライブラリーも同時に使うことになります。図解なぜ高速なパフォーマンスにつながるのか?ではここから解説していきます。ReactとReactDOMの関係性ReactもReactDOMも正確に言えばJavaScriptのライブラリーです。ReactはUIコンポーネント作成するためのライブラリです。これにより、コンポーネントの再利用性とメンテナンス性を向上させます。DOM)の使用などの機能を提供します。ReactDOMはReactアプリケーションにおいて、仮想DOMを実際のDOMに反映させるためのライブラリです。Reactがアプリケーションの心臓でReactDOMが見た目を担ってくれていると思っておけば良いでしょう。これらの関係性からReactで起きた状態(state)などの変更をReactDOMに伝えて、最新の状態でブラウザに表示させているのです。DOM)と言われるものを使用できます。仮想DOMとは、JavaScriptのオブジェクトとして存在するDOMの複製であり、ブラウザが実際に描画するDOMとは異なります。この仮想DOMをReactDOMに渡して、本物のDOMと差分があればReactDOMがその差分だけを変更します。diffingと呼ばれます。ReactのあるコンポーネントがuseState()によって再構築されます。useState()によるコンポーネントの再構築は本物のDOMの再構築を意味しません。Reactでコンポーネントの再構築されたからといって、そのままHTML化されている本物のDOMが再構築をされていると言うわけではないのです。Reactによって作られた仮想DOMと本物のDOMとを比較して、その差分だけを本物のDOMは更新しているのです。仮想DOMと本物のDOMで差がない部分は何も更新されません。図解これが高速なパフォーマンスにつながっています。高速なパフォーマンスにつながるのか?JavaScriptなど通常の情報更新の場合、本物のDOMを触ったり、ブラウザに再表示する作業には負荷がかかります。仮想DOMを作ることによって更新前と更新後の比較はメモリーの中だけで行われ、更新も必要な箇所だけになるので負荷を最小限に抑えることができます。JavaScriptでDOMのある一部だけを変更するだけであればReactとのパフォーマンスの差は生まれないですが、大規模のDOMツリーの更新ではJavaScriptとReactには大きな差が生まれます。他にも高頻度な変更やアニメーションがある時も通常のDOM操作では頻繁な描画が繰り返されますが、Reactなら仮想DOMが効率的に計算し、最適なタイミングで描画を行なってくれます。要はどんな大掛かりなページ更新であろうが、動きであろうが、仮想DOMが必要な最小限のDOM操作を教えてくれてReactDOMが最終結果をブラウザに表示をしてくれているのです。したがってReactで作られたアプリケーションは常に最速なパフォーマンスが提供可能なのです。最後にこのコンテンツでは一般のエンジニアがどのように言語(今回はフレームワークになりますが)を学習し、つまずき、乗り越えていっているのかを垣間見えるようにしていこうと思います。できるだけ画像、動画などを盛り込んで視覚的に理解できるように工夫しています。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思いますので、温かい目で見てもらえると嬉しいです。今回私が解説する上で使った教材は、Udemyのコースになります。興味があればぜひ使ってみてください。このコースの補足教材としてこのブログを使ってもらえると効果的だと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。React学習ログ【React学習ログ4】Reduxをどう理解したかを解説|図解あり私がReduxをどう理解したかを解説します。3/4】Timelineを使って複数の要素を連動させるアニメーション複数の要素が連動するアニメーションをコントロールする方法を解説します。Hooksの一つのuseRefについて使い方から、useStateとの違いまで詳細に解説しました。React学習ログ【React学習ログ3】メモ化で子コンポーネントが無駄に実行されるのを防ぐ子コンポーネントも勝手に実行されるのを防ぐ方法を解説しますフリーランスになって良かったこと・悪かったこと|お金・休み・スキル【React学習】2ヶ月の記録フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。