「Reactって、一体何？」「jQueryとの違いは？」と思っている人も多いと思います。プログラマの中には、どんどん出てくる新しい技術を積極的にキャッチアップしていきたい人が多いと思います。気になっているけどよくわからない、そんな人に「Reactとはなんぞや？」といったところを解説したいと思います。
Reactは、ライブラリである。
最近、言語別に便利なフレームワークが多く出ています。よく勘違いされるのですが、Reactはフレームワークではありません。Reactは、Javascriptで書かれた「ライブラリ」なのです。Vue.jsとよく比較されます。SPA(Single-Page Application) を実現する JavaScript フレームワークの一つで、Facebookによって開発されたライブラリなのです。
Reactは、何のためのライブラリ？
Reactはざっくりいうと、Webの見た目を編集するためのライブラリになっています。UIを調整するためのライブラリ、ということになります。
Reactは、既存のシステムに部分的に取り入れられる。
Rreactは、既存のWebサイトの一部分に組み込むこともできます。例えば、いいねボタンや、チャットボットなど、インタラクティブな機能を付け加えたいときに大いに活用できるのがReact。などを、ReactのUIを使って、部分的に対応することもできるのです。なので、システムすべてをReactで作る、という使い方ではなく、部分的なUIとして取り入れていく、といったことができるのです。大規模に利用することもできますし、最小限の部分で利用することも可能なのです。
Reactは表示速度が速い！・・その秘密はVritual DOM
「Reactは表示が本当に早い」という評判のReactですが、では、その速さの秘訣はどこなのか、探っていきたいと思います。
そもそもDOMとは？
DOMは、「Document Object Model」の略です。HTMLにアクセスするための窓口の役割を果たし、HTMLの構造や、UI、コンテンツを管理している場所になります。
そもそも、DOMというものって何なんだ？という方のために、説明します。皆さんが普段、レストランのサイトや航空会社のチケット予約サイトなどを見ているとき、アクセスしてからしばらくブラウザに描画されるまで、多少なりとも待ち時間が発生していると思います。実は、Webページは基本的には、受け取った情報をもとに毎回、DOMを最初から作成して、ブラウザに描画を行っているんです。
となると、Webページがブラウザに完全に描画されるまでの時間には、このDOMを生成する時間が影響しているんですね。PCからアクセスしたり、更新情報を送るたびに、画面が表示されるまでの間、このDOMの作成するまで待つ、といったことを実はしているのです。
Reactを使うと、DOMの生成時間はどうなるか
Reactは、このDOMの生成時間を低減するために、情報を受け取った際に、DOMの生成を一からしなくてもすむ仕組みになっています。Reactでは、「仮想DOM」、いわばVirtualDOMを生成しているのです。
仮想DOMとは？
では、仮想DOM、つまりVirtualDOMとは、既存のDOMより、DOMを早く生成するような仕組みで設計されているのです。クライアント側で新しいアクションを行っても、その情報を受け取った時から描画がされるまでの時間をなるべく短縮するような仕組みとなっているのです。例えば、ヘッダーやフッターが同じで、中務の部分の情報だけが新しく更新されている、といった場合に、ヘッダーやフッターのDOM生成は省くなどのことも、できるのです。
差分だけを再描画する設計で効率的に！
実際のDOMと対になるもので、既存のDOMより速く動くように設計されている、というところがポイントですね。Reactで管理しているこの仮想DOMは、ブラウザのレンダリングとは別で管理されているため、既存のDOMよりも素早く操作できるようになっているのです。
仮想DOMでは、変更されたVirtual DOMの差分部分だけを、再描画しているためでもあります。例えば、前に表示したヘッダー部分やフッター部分が、今表示したいページと変わりなければ、ヘッダー部分とフッター部分以外の部分だけを、再描画しているのです。
以上、Reactについてでした！
コメントを残す