More than 3 years have passed since last update.

Reactのメリット・デメリットを初心者でもわかるようにまとめてみました　　　

Posted at 2021-10-29

Reactとは？

Reactは、Facebook社が開発した「UIライブラリ」です。宣言的UIによって柔軟なフロントエンド開発が可能になっています。

【UI】

ユーザーとコンピューターの間で、情報をやり取りするための仕組み。

【UIライブラリ】

ユーザーとコンピューターの間で、情報をやり取りするための仕組みを実現するための集合体。

【宣言的UI】

"完成形の(求めている)UI(仕組み)"を"実現するためのコード"でそのまま書くこと。宣言的UIでないと"完成形の(求めている)UI(仕組み)"と"実現するためのコード"が分離していて分かりづらく、長いコードを書かないといけない。

用語についての参考サイト一覧

JSX
Javascriptの機能を拡張した構文の中にHTML、Javascriptの処理内容などを一緒にして記述する。

最低限の機能を用意
初期状態ではUI構築に必要な最低限の機能しか用意されておらず、あとは開発者が用途に応じて適宜機能を追加していくような使い方が想定されてる。

ベースがJavaScript

宣言的UIによりわかりやすい。条件と結果が明確にコードに記載されている状態であり、他の人がソースコードを読んでも理解がしやすい仕組みである。
JSXにより、関数の戻り値にコンポーネントが指定できたり、内部の処理内容の記述にJavascriptの記法ができるため、Javascriptの特性を最大限に活かした記述ができる。
JavaScriptの知識がある方なら容易に習得できる。
ベースがJavaScriptかつ動作も早いためSPAアプリケーション向けである。

私はJavaScriptの知識がゼロだったため、デメリットでも同じようなことを記述しましたが、容易に習得はできませんでした...。

再利用性の高いコンポーネントの作成

作成していく段階でどこまでコンポーネント化したらよいのか、困りましたが、一度コンポーネントを作成することで、使いまわしが簡単にでき便利かつ効率の良さを実感しました！

レンダリングが高速

仮想DOM(Document Of Model)という技術が使われており、Webページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更するという効率的な仕組み。それにより、レンダリングする箇所は一部に留まり、高速で表示の切り替えが可能である。
Reactは必要な機能は適宜開発者がプロジェクトの規模に応じて追加していく形なので、無駄が少なく、軽量になる。

おまけ：こちらのサイトからページに関する実際のパフォーマンスデータを確認できます。

多くの分野に適用できる