非エンジニアの社長にReactとは何かを説明する②
※よく分からんと言われたので非エンジニア向け解説作りました。
前回の続きです。
さて、前回はWebページに動きを付けているのはJavaScriptであり、
ReactはそのJavaScriptをうまく使うための道具(ライブラリ)であることまで説明しました。
とはいえ、React以外にもJavaScriptのライブラリは多くあります。(古くはjQuery,似たような世代ではVueやAngularなど)
これからその中でReactを採用するメリットについて説明していきます。
VirtualDOM/JavaScriptと速度問題
まず、Reactの一番の特長である、VirtualDOMについて解説します。
とはいっても、いきなりVirtualDOMという言葉だけ出されても何のことやらとなってしまいますので少し話を戻します。
前回説明したように、現在のリッチなUIを作るのには、JavaScriptが欠かせません。
しかしながら、このJavaScript,使い方を誤るとUXの方を大きく損なってしまいます。
というのも、JavascriptでHTML形式のデータを書き換える「DOM操作」と呼ばれる処理は重いのです。
少し値を書き換えるくらいだったらそこまででもないのですが、構造の組み換えなど一部の処理を行ってしまうとかなり遅くなります。
画面の描画中は基本的に操作を受け付けられないので、ユーザーとしてはかなりのストレスが溜まります。
このような状況を避けるため、フロントエンドエンジニアは負荷の大きい処理が可能な限り少なくなるように工夫しなければなりません。
開発効率とチューニングの対立
が、この負荷を軽減するためのチューニングは開発効率を下げます。
ロジックの複雑性が増すからです。
簡単なTODOリストを例に考えてみましょう。
複数人のタスクを管理し、表示対象のメンバーを切り替えられるとします。
例:
Aさんのタスク
- 作業1
- 作業2
- 作業3
これを、切替処理を行うと、
Bさんのタスク
- 作業4
- 作業5
に変更するような機能です。
この機能を実装する上で、エンジニアとしては「作業を描画する」「描画されている作業を消す」の二つだけで実現できると都合がいいです。
作業の書き換えを「元々の作業を消す」＝＞「次の作業を描画する」という形で実装すると、
元々ある機能(作業を描画する)を流用できますし、一回全部消してしまえば前と次の差のパターンなども考える必要がありません。
複雑性が増すとバグや仕様追加時の対応コストがどんどん増すのでなるべくシンプルに済ませたいのです。
が、DOM操作をこの発想でやるとろくなことになりません。
速度を考えると、表示欄の追加や削除はコストが大きいので雑に扱ってはいけません。
きちんと変更前後のタスク数を比較して、最小限の増減に抑える処理を入れるべきです。
こうなると、当然書くロジックは増え、必然的にバグの発生しうる要素も増え、テストにかける工数も増えます。
フロントエンドで速度を追求していくと、必要工数がどんどん増えてしまうわけです。
望ましくない状況です。
面倒なところはReactがやってくれる
ここで登場するのがVirtualDOMです。
ReactはVirtualDOMを利用することで、描画部分の最適化を自動で行ってくれます。
Reactは実際のHTML形式データとは別に、描画すべき構造をReact内で管理しており、これがVirtualDOMです。
Reactを利用する場合、開発者は直接DOM操作を行うわけではなく、Reactに「こういう内容を描画したい」という情報を渡します。(例えば、Cさんのタスクとして作業6個描画したいとか)
そうするとReactはまず自分の中に持っている仮想DOMにその変更情報を渡して最終的にどのようなデータになるかを計算します。
その上で、最終的な完成形と内部で計算したデータを比較して最小限の差分だけ実際に適用するのです。
(例えば、前のBさんのタスクは2つだったからタスク欄は4つだけ足す。1番目のタスクはBさんとCさんで共通だから変更なし、など)
Reactに描画の管理を任せると、エンジニアはシンプルなロジックを書いているだけなのに、Reactが勝手に最適化をしてくれるようになるわけです。素晴らしい。
今回のまとめ
- 速いWebページのためには描画の最適化が必要だが非常に面倒臭い
- ReactはVirtualDOMによってそれを代行してくれるすごい奴
も少し続きます。