Reactとは？

Reactとは、Facebook社が開発したJavaScriptのライブラリです。

Reactとよく比較されるVue.jsはフレームワークなので、
Reactも同じくフレームワークだと表現されることもありますが、厳密には異なります。

ライブラリとフレームワークの違いについてはこちらの記事がわかりやすいと思ったので、
気になった方は参照してみてください。
https://www.e-loop.jp/knowledges/32/

Reactを使用する目的

具体的にReactは何をするためのものなのか？というと、
Webのユーザーインターフェース（UI）を作るためものといえます。

つまり、ユーザーとサービスの接点となる、
ユーザーが見たり操作したりする部分（メニューやボタンなど）を作るために使用されます。

Reactを使用するメリット

Reactを使用するメリットを3つ取り上げてみます。

1. 動きが速い
変更があった差分のみを再描画できるため、Webアプリケーションの動きを速くすることができます。

2. 保守性が高い
コードを編集するとき、どこを編集したら他のどの部分に影響するのかがわかりやすいため、
状態管理がしやすくなります。

3. 再利用性が高い
Webアプリケーションを構成する各要素を独立した部品として扱えるので、
それぞれの部品を複数の箇所で使い回すことができます。

Reactの基本的な概念

Virtual DOM（仮想DOM）

Virtual DOMとは、Reactで使用する仮想のDOMのことをいいます。

そもそもDOMとは何かというと、Document Object Modelの略で、
JavaScriptなどのプログラミング言語から、HTMLにアクセスする窓口のことをいいます。
Webサイトの中身を変更したいときは、このDOMを通してHTMLにアクセスして操作を行います。

通常のDOM操作では、中身が変更される度にブラウザをレンダリングするので、
変更する必要のないDOMまで再描画されてしまい、パフォーマンスが低いことが課題でした。

一方Virtual DOMは、ブラウザのレンダリングとは別管理のため、
変更に必要なDOM（差分）だけを効率よく再描画でき、パフォーマンスの向上が期待できます。

コンポーネント

コンポーネントとは、ReactにおいてUIを作る部品のようなものであり、
見た目と機能がセットになったものをいいます。

例えばあるWebサイトでメニューがあったとしたら、
そのメニューのまとまりを一つのコンポーネントといえますし、
その中にある一つ一つのメニューのボタンもコンポーネントといえます。

そして、Reactはそれぞれのコンポーネントで自分自身の状態を管理し、状態が変わる度に再描画します。

例えばチャットを例に考えると、チャットは新しいメッセージが送信されるたびに、
メッセージが下の方に追加されていきますよね。

これをReactで考えると、まずチャット全体の一つのコンポーネントがあり、
そのコンポーネントはチャットの中身の状態を持っています。

新しいメッセージが送信されると、チャットの中身は
今までのメッセージに新しいメッセージが加わった状態に変更されるので、
その変更された部分（差分）だけが書き換えられ、新しいメッセージが画面に反映されるというようなイメージです。

JSX

JSXとは、Facebook社が開発した、HTMLのような文法で書けるJavaScriptの拡張言語です。
Reactを使う際は必ずJSXで書かなければいけないというわけではないのですが、
公式ドキュメントではJSXを使うことが推奨されており、業界標準にもなっています。

例えばJSXでは、以下のように記述することができます。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

classの書き方などHTMLとは少し異なる部分もありますが、
基本的にHTMLの書き方に近く可読性が高いため、広く使われているということですね。

Reactの使用例

Facebook
Instagram
Netflix
Trello
Slack
Skype
Airbnb

などなど、誰もが知っている大規模なアプリケーションでかなり多く使われています。
日本ではVue.jsの方が人気ですが、海外ではReactの方が人気だと言われています。

最後に

Reactは海外での圧倒的な人気に比べると日本ではそこまで浸透していませんが、
これからどんどん広まっていけばいいなと思います。

Reactに関するQiitaの記事もあまり多くないので、これから少しずつ書いていけたらと思います。

拙い文章でしたが、最後まで読んでいただきありがとうございました！

参考文献

React公式ドキュメント
https://ja.reactjs.org/

日本一わかりやすいReact入門#1...Reactの基礎知識
https://www.youtube.com/watch?v=Otrc2zAlJyM&list=PLX8Rsrpnn3IWKz6H5ZEPWBY8AKWwb9qq7

現代のフロントエンド開発でReactが使われる理由
https://www.youtube.com/watch?v=1kqu8TwZaZU

Reactとは
https://programmagick.com/sections/react/intro

Reactとは何か？Reactの基本的な概念や使用するメリットについて解説