非エンジニアの社長にReactとは何かを説明する2.5
前回の記事を社長に見せたところ、
「第一回はともかく第二回はハードルが高すぎる、もっとわかりやすく」との物言いがつけられてしまいました。
確かにちょっとエンジニアよりになってしまっている気はしていたので、よりかみ砕いた記事を書きます。
Webページが動く時、裏で模様替えが行われている
第一回で、WebページはHTML形式のデータで表現されており、何か動きがあるときはjavascriptがそれを書き換えていると説明しました。
これだけ聞くと簡単そうですが、第一回で紹介したF12で開く開発者ツールから見ると、Webページの裏で動いているHTMLデータはかなり大規模で複雑な構造を持っているのが分かるかと思います。
ちょっと動きがあるたびに、大規模な施設の模様替えが行われているようなものです。
javascriptは事前の指示書である
ブラウザ上での画面の動きを模様替えに例えると、エンジニアは、そのプランを練るホワイトカラーのような存在です。
目的(特定の画面)を実現するために必要なレイアウト(HTMLの構造)は分かっていますが、自分で現場に出て作業を行ったり逐一指示を出すことは出来ません。
現場はユーザーのPC上なので、ここで作業できるのはブラウザだけです。
一方、ブラウザは実際に現場で作業が出来ますが、命令通りに動くことしかできません。
人間ではないので、「指示待ちしてないで自分で考えろ」とか怒っても無駄です。
よって、エンジニアは詳細なマニュアルやフローチャートを作って事前にブラウザに渡しておくことが必要です。
JavaScriptというのは言ってみればこのマニュアルです。
複雑なフローチャートやマニュアルを完璧に作るのは難しい
しかしながら、融通の利かないブラウザでも大丈夫な完璧なマニュアルを精密に作るのは難しいです。
人間と違って空気を読んで変な内容だったら質問したり調整したりしてくれることもなく、
忠実にマニュアル通りに処理をしてしまうので、細部まで完璧に指示してあげないといわゆる「バグ」が起こってしまいます。
完璧に作るためにそもそも作業が大変ですし、本当に完璧にできているのか色々なパターンで予行演習をしてみる(テストをする)ことも必要になって非常に面倒です。
単純化というアプローチ
そこで、エンジニアというものは指示の単純化を考えます。
模様替えにおいて最低限の物の動きで済むように導線を最適化したり、
以前の配置と目的の配置を比べて移動しなくていいものは移動させないようにしたりと言った工夫を放棄して、
「とりあえず現在置いてあるものを全部外に出して目的の形に1から並べなおせ」
という風にできないかと考えます。
こうするとマニュアルがシンプルになるのでミスや想定外の動きが減ります。
人間相手にこういうマニュアルを出すと、「効率悪いんじゃない?」と言ったような文句が出てくることもありますが、
機械相手ならそういう心配はありませんし、単純作業の類は得意なので大抵の場合はうまく行きます。
このような単純化はエンジニアにとっては習い性のようなものです。
ブラウザ上の画面表示は安易に単純化できない
が、ことブラウザ上での要素の描画に関しては、うまく行かないレアケースに当たります。
模様替えに例えて言うと、動かすのにものすごく時間のかかる重い荷物が存在するようなもので、
「一旦全部外に出せ」というような雑な命令だときちんと計画を立てた場合に比べて時間がかかりすぎてユーザーに怒られてしまいます。
よって、エンジニアは面倒でも綿密なプランを立てなければならないのです。
Reactという救世主
エンジニアからすると絶望的なこの描画の最適化ですが、ここでReactが登場します。
このReactは細かい命令を出したくないエンジニアと詳細な作業手順が必要なブラウザの間を取り持ってくれる素晴らしい存在です。
エンジニアからReactにこういう描画がしたいという情報が渡ると、
Reactは最終的にどのようなデータ構造が必要になるのか、内部的に計算を行い最終的な目標を定めます。
そして、その目標と現在の状態を比較して、最適化されたプランを作成・実行してくれるのです。
いわば、大雑把な指示さえ与えれば、現場で臨機応変に計画を立てて動いてくれる現場監督ですね。
まとめ
- 画面の描画をエンジニアが手動で制御しようとするととても面倒臭い
- Reactはその面倒な作業を現場で臨機応変にやってくれるすごいやつ