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

# Reactとは？

[React](https://ja.reactjs.org/)は、Facebook社が開発した「UIライブラリ」です。宣言的UIによって柔軟なフロントエンド開発が可能になっています。

### 用語解説

<details><summary>【UI】</summary>
ユーザーとコンピューターの間で、情報をやり取りするための仕組み。</details>

<details><summary>【UIライブラリ】</summary>
ユーザーとコンピューターの間で、情報をやり取りするための仕組みを実現するための集合体。</details>

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

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

- [宣言的UIが何なのかわからなかったので調べてみた](https://zenn.dev/arei/articles/f59e263aa3edf2)


# 特徴

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

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


# メリット

**ベースがJavaScript**

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

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



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

- 柔軟なコンポーネントの記述ができるため、再利用性の高いコンポーネントの作成が可能。
- 機能を小さい部品に分割して持たせているため、状態の管理もしやすく拡張性がある。
- アプリケーションに応じて必要なモジュールのみを追加や削除することができるため、長期運用に向いた構成になっておりいる。
- 影響範囲が限定されるため、保守運用性が高い。

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


**レンダリングが高速**

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

おまけ： [こちら](https://developers.google.com/speed/pagespeed/insights/?hl=JA)のサイトからページに関する実際のパフォーマンス データを確認できます。



**多くの分野に適用できる**

- 開発スタイルをReactに統一さえすれば一度の学習で多くの分野で知識を再利用できる。
- React Nativeのフレームワークを使用してスマホアプリにも拡張できる。



### 用語解説

<details><summary>【SPAアプリケーション】</summary>
Webページにおいて1ページ内を各オブジェクトで構成することで、ページ全体を何度も読み込むことなく、対象のコンテンツのみを遷移させる。そのため、表示の速度を向上させることができるのです。
</details>

<details><summary>【オブジェクト】</summary>
プロパティ（名前と値がセットになっているもの）の集合体。</details>

<details><summary>【レンダリング】</summary>
データをもとにWebブラウザのウィンドウ内にページ内容の描画を行うこと。</details>

<details><summary>【コンポーネント】</summary>
何らかの機能を持ったプログラムの部品・要素。これらの部品・要素を組み合わせてプログラムを作り上げていく。”部品単体では使用せず”他の部品と組み合わせて使う。</details>

<details><summary>【モジュール】</summary>
何らかの機能を持ったプログラムの部品。”部品単体でも動作させることができ”他の部品と組み合わせて使う。<details>

<details><summary>【ライブラリ】</summary>
ある特定の機能を持ったプログラムを、他のプログラムから呼び出せるように部品課したもの。</details>


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

- [シングルページアプリケーションを徹底解説！](https://www.geekly.co.jp/column/cat-technology/1908_009/)
- [オブジェクトを3分で1から解説する](https://it-biz.online/web-design/object-2/)
- [モジュールとは？ライブラリ、コンポーネントとの違い](http://medium-company.com/モジュール/)



# デメリット

**学習コストが高い**

- JSXという独特な記述方式や抽象的な概念が多いため、他のフレームワークよりも比較的学習コストが高い。

:::note info
学習は大変でしたが、React+Next.jsを使用して簡単なポートフォリオを作成することができました！学習方法も参考サイト一覧にのっているので良ければそちらからご覧ください！
:::


**機能の変更、追加のペースが早い**

- Reactは世界中で人気があり、公式やコミュニティの開発も活発なため、次々に新しい機能やライブラリ等が開発、追加される。それは良いことでもありますが新しく追加された仕様や機能を覚えなければならないのは開発者にとっては負担にもなりえる。


**Reactに向かない場合がある**

- 仮想DOMにより表示の切り替えが高速になるが、メモリを大量に使用する、最初のアクセス時に読み込むデータ量が増えタイムラグが生じるという欠点が生まれる。
- ほとんど操作をしないページはReactを使ってもあまり意味がなく、むしろ最初の表示に時間がかかってしまう場合がある。


**PHPが使えない**

- HTMLとの親和性が高いPHP（Web開発言語）が使えない。


# 参考サイト一覧

https://ja.reactjs.org/

https://it-kyujin.jp/article/detail/1647/

https://www.geekly.co.jp/column/cat-technology/1903_078/

https://mynavi-agent.jp/it/geekroid/2021/08/post-403.html

https://tech-parrot.com/programming/next-js-react-js-tigai/#Nextjs-3

https://qiita.com/HorieH/items/87e155a16ad847354e71

https://www.sejuku.net/blog/126994

https://www.i3design.jp/in-pocket/8854


# さいごに

この記事を書いていて、自分でも用語をきちんと理解していなかったものを調べなおすことができました。

[React + Next.js + Tailwind.CSSを使用したポートフォリオの学習方法](https://qiita.com/takara03/items/59fc2fb81aa209b2f742)をまとめた記事を以前に投稿したので良ければご覧ください。

Reactを使ってみようと思っている方や、プログラミングを勉強したいけど、わからない言葉を都度調べるのが大変すぎて嫌になってしまいそうな方（私自身が時々なってます）の助けになれたら嬉しいです！