Reactを学び始める。【Reactの基礎知識】 -

この記事は、YoutubeやTwitterで、プログラミング学習に関する発信をされている、「トラハック」さんのYoutubeチャンネルにある「新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識」という動画の自分なりのまとめになっています！

トラハックさんのYoutubeチャンネル↓

【とらゼミ】トラハックのエンジニア学習講座 - YouTube

トラハックさんのTwitterアカウント↓

トラハック＠React芸人ᓚᘏᗢ (@torahack_) | Twitter

今回参考にさせて頂いた動画↓

新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 - YouTube

Reactとは？

・javascriptのライブラリ

・facebookが開発したUI（ユーザーインターフェース）ライブラリ

・UIを作るためのコンポーネントという概念が特徴的

　（コンポーネント＝見た目＋機能）　

　Reactではコンポーネントを組み合わせてwebの画面を作っていく

Reactを使わない画面描画（従来のwebサイトの画面描画）

前提として…

Q) webブラウザ（Google Chromeとか、Safariとか）ってそもそも何をしとん？

A) HTMLというドキュメント（文章）を画面に表示している。

　→どういうものが書いてあって、どのように表示すればいいのかを、自動的に判断・処理して、僕たちに画面を見せてくれている！（ナイスゥ⤴︎）

それでは本題！

従来のjavascriptを用いたwebサイトの画面描画ってどうなってんの？

HTMLはツリー構造になっている。

↓↓↓ 引用：日本一わかりやすいReact入門（トラハックさんのチャンネル）

gyazo.com

HTMLは色々なタグが組み合わさって1つの木になっている！

なので「1つの木＝1つのwebページ」ということ。

このツリー構造のどこか1部を変更したい場合、DOM（Document Object Model）というものが使われる。

DOMとは、javascriptでHTMLの要素を操作するための仕組みのこと。要は、javascriptでHTMLにアクセスする為の窓口のようなもの。

なので、divタグを書き換えたい時は「divタグのDOM要素」を取得して、javascriptで変更処理を行う！

しかし！！

DOMを直接変更してHTMLを再描画するのはコストが高い！

なぜなら…

ブラウザが変更された所を画面に反映する為に、裏側で複雑な処理を行なってしまうから！（ページを全部再読み込みする等）

そこを解決するべく生まれたのが、「React」である！！（でデーン）

仮想DOMという解決策（Reactで用いられる技術）

・変更したDOMをプラウザに再描画させるのではなく、javascriptで再描画する！

　これによって、ブラウザに負荷をかけずにすむので、効率のいい画面の再描画（レンダリング）を行うことができる！

・仮想DOMを用いれば、DOMの状態をjavascriptで管理することができる！

　これこそが、「コンポーネント（コンポーネント＝見た目＋機能）」つまり、「見た目だけじゃなくて、機能も持っている部品」である！！（きもTぃ）

この仮想DOMという技術を用いて、「差分描画」つまり、一部が変わったらブラウザに全てを再読み込みさせるのではなく、変わった所に影響されて変更がある部分「差分」だけをjavascript（React）で「描画」することで、無駄のない、めちゃんこ効率のいい画面描画を実現することができる！