ReactでHello Worldをする前に…

React Title React
とんぺい
とんぺい

最近、Reactっていうプログラミング言語の存在を知ったブゥ。

師匠の所に行って、この言語について詳しい事を教えてもらうぞ!

師匠こんにちは〜!!

師匠
師匠

こんにちは、とんぺいくん。

今日はReactについて知りたいって?

よし、それじゃ簡単にReactとは何なのか説明してあげよう。

Reactとは

師匠
師匠

Reactは新しい言語というよりは、WebアプリケーションのUIを実装するためのJavaScriptライブラリーのことを言うんだ。

2013年にあのSNSで有名なFacebook社が開発したんだよ。

とんぺい
とんぺい

へぇ〜、それは驚きだブゥ!

Facebookの事業はSNSしか知らなかったけど、色んな事をやってるんだね!

どんな所で使われているの??

師匠
師匠

そうだね。

ReactはFacebookはもちろんのこと、AirbnbUdemyslackNETFLIXなど多くの有名なサービスのフロントエンドで使われているよ。

とんぺい
とんぺい

なるほど〜…

でも、何でReactがこんなにも使われるようになったんだブゥ?

Reactは『はやい』

師匠
師匠

いい質問だね!

なぜReactが使われるのかと言うと、Reactを使うことで、従来の方法よりも早くWebページを表示できるようになるんだ。

これがReactが広まった要因の一つでもあるね。

とんぺい
とんぺい

なるほど… Reactは早いかぁ…

確かに、いつまでも画面上でクルクルしているのがあるとイライラするブゥ!!

師匠
師匠

そうそう。Webサイトの表示速度はとても大切なんだ。

  • ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する
  • 操作開始時間が3秒のサイトは1秒のサイトに比べ、コンバージョン率は38%低下、直帰率は50%上昇する

とも言われているよ。

とんぺい
とんぺい

短気なのは僕だけじゃ無いと知って安心したブゥ…

Webサイトの表示速度が2秒違うだけで売り上げがそんなに変わってしまうんだね!

ReactはどうやってWebページの表示を早くしてるんだブゥ?

DOMと仮装DOM

師匠
師匠

Reactでは仮装DOMという技術を使って。ページの表示速度を早くしているんだ。

仮装DOMの前にとんぺいくんはDOMと言う用語を知っているかな?

とんぺい
とんぺい

仮装DOMDOMどちらも初めて聞く言葉だブゥ…

DOM(Document Object Model)

師匠
師匠

じゃあDOMの説明から始めよう。

DOMとは『HTMLやXMLで作られたドキュメントをプログラム(JavaScript)から直接操作するための仕組み』のことを言うんだ。

ページを表示するとき、従来は受け取った情報を基に毎回1からDOMを作成しブラウザに描画を行なっていたんだよ。

仮想DOM(virutual DOM)

師匠
師匠

一方で仮装DOMとは、実際のDOMと対になる仮のDOMのことで、DOMよりもはやく作れるように設計されているんだ。

Reactでは、情報を受け取ってもすぐにDOMを作らずに、仮想DOMを作り、変更前の仮想DOMと変更後の仮想DOMを比較し、変更のあった箇所だけDOMを再構築し常に最小のコストでWebページを表示できるようになり、非常に高速に動作するんだよ。

https://speakerdeck.com/risagon/reactha-hayai?slide=13
画像:(https://speakerdeck.com/risagon/reactha-hayai?slide=13)
とんぺい
とんぺい

ヘぇ〜、僕らの知らない所で色んな技術が進化していってるんだねぇ…

React仮装DOMのおかげではやい!

しっかり覚えたブゥ!

師匠
師匠

さすがとんぺいくん。飲み込みがはやいね。

それでは次回はReactでHelloWorldをしてみよう。

参考

React公式

ReactでHello Worldをする前に…

JavaScript初心者でもすぐわかる!DOMとは何か?

なぜ仮想DOMという概念が俺達の魂を震えさせるのか

【超重要】サイトのページ表示速度を知ろう!測定方法から改善方法まで解説

コメント

タイトルとURLをコピーしました