【初心者用】Reactとは

Web系の開発のためにReactを使用した開発の勉強をしているので、改めてReactについてまとめます。

後々見直す用かつ初心者の人に見せても分かるような説明にしたいと思います。

1. そもそもReactって何?


ReactはNode.jsやJQuery等のWebサイトなどを作成する際に使用するJavaScriptのライブラリとなっています。

・ライブラリとは

ライブラリとはプログラムを書くにあたりよく利用される機能を取り出して、なおかつ再利用しやすいようにまとめたものです。

ライブラリを使用することにより、1から機能の作成をする必要がなくなり早く開発をすることができます。

基本的には各プログラミング言語にあるパッケージマネージャから、構築したアプリケーションに読み込ませて使用します。


ライブラリは単体で動くわけではなく部品のようなものだと考えるとよいと思います。

JavaScriptではReact,JQuery,Node.jsなどの多種多様なライブラリが存在しています。

ライブラリはReactでもJQueryでも自分がやりたいもので選ぶとよいかと思います。


Node.jsに関しては非同期型の処理が可能なサーバー専用の通信ライブラリなので、フロント側の開発作業がしたい場合はReact,JQueryどちらかを使用することになります。

後述するライブラリに似たフレームワークというものがあるのですが、そちらも含め自分が開発する目的にあったものを使用することをお勧めします。

2. ライブラリとフレームワークについて


Reactの説明なので同じライブラリであるJQueryも少しお話ししましたが、現在JavaScriptで使用されているものとしてはVueとangularというものがあります。

こちらのVueとangularに関してはライブラリではなく、フレームワークという枠組みになります。

この二つはReactとは強みが違うので開発する際には、ReactだけでなくVueやAngularなどもあることを覚えておくと選択肢が広がると思います。


ライブラリについては上記のほうで説明しているので、以下にはフレームワークについて説明を入れます。

2-1. フレームワークについて

フレームワークとはWebアプリケーションなどを操作するための処理や機能が実装されているものです。

他に必要な処理がある場合は自身で開発・実装などをして、使用しているフレームワークに組み込んで使用することができます。

こちらもライブラリと同じく開発する際に、一から作成する負担を減らすことにより楽に開発をすることができるようになります。

・JavaScriptのフレームワーク

 ■Vue.js
 ■Angular.js
 ■Bootstrap

・JavaScriptのライブラリ

 ■React.js
  ■jQuery
 ■Node.js


JavaScriptの分類分けをすると上記のようになります。

上の説明を踏まえフレームワークとライブラリは何が違うのか説明したいと思います。

2-2. フレームワークとライブラリの違いとは

ライブラリとフレームワーク両方ともWeb開発をするにあたり、必要なコードを少なくすることにより効率よく開発が進められるという点は共通しています。

両方とも同じように見えるのですが、元をたどると作成の意味が異なります。

ライブラリに関してはよく使用する関数やクラスの集合体であり、開発を簡単・効率化するために予め定義されているものです。

フレームワークに関してはアプリケーションを開発するために必要となる土台という認識になります。


ライブラリは開発者が使用したいタイミングで関数やクラスを呼び出すことができ、なおかつWebアプリケーション側の開発プロセスを制御することができます。

ライブラリで実行される操作は正確でかつ具体的に定義をされています。

ですので、Webアプリケーション開発などでライブラリを使用する際には、必要な特定の機能を効率的に実装する為に使用されます。


フレームワークは予め定義されている枠組みや開発フローがありそれを開発者に伝える。

そのため、ライブラリとは違いプログラマーは必要に応じたコードを追加してフレームワークを補助する。

以上がライブラリとフレームワークの違いになります。


ライブラリもフレームワークも効率的に開発するうえで必要なものなので、各々が自分の必要としている作業に応じたものを使用して少しでも開発を楽に出来ればいいなと思います。

3. Reactは何ができるのか?


Reactが他のライブラリやフレームワークとは違い注目されている点としては、SPA(Single Page Application)の開発が増えてきたためだと思われます。

3-1. SPA(Single Page Application)とは

SPAは従来のページ遷移をする表示方法ではなく、単一ページでコンテンツの切り替えを行えるWebアプリケーションのアーキテクチャです。

SPAはブラウザのページ遷移を行わないため、ユーザーへの待ち時間などのストレスを排除することができ利便性を向上させることができます。


なぜSPAだと更新が早いのかというと従来のWebページでは、ページ遷移の際に更新しなくてもよいページ全て(DOM)を書き換えるので余計に時間がかかっていました。

ですが、SPAではWebページ内のHTMLの更新が必要な一部だけを差し替えることにより、従来の余分に更新していた時間が削減することができるようになりました。

ですので、ページ更新の高速化やブラウザの挙動に縛られないUIの実現などのパフォーマンスの向上が可能になりました。

有名な使用例と言いますと開発元のFaceBookなどがあります。


また、上記の利点だけではなくSPAではUIをできる限りわかりやすく作成する必要性があります。

1ページに全ての処理や機能を簡潔させるため、同じページに複数の機能が集約されることになります。

それを、うまく整理して機能や処理を同一のページ内に配置しなければ、UIがうまく機能せずに使用しずらいものとなってしまいます。


そのため、React、Vue等のライブラリやフレームワークを使用することにより、完成度の高いUIまたは機能を簡単・効率よく開発をすることができます。

4. Reactのメリット・デメリット


Reactのメリットとしては

 ■宣言的ソースコードを理解しやすい

 ■コンポーネント指向で拡張しやすい

 ■仮想DOMを使用しているので処理が高速になる

 ■Reactを学習することにより、他の開発でも対応可能


以上があり、Reactのデメリットとしては

 ■ものによっては不向きなアプリ・Web開発がある

 ■環境構築が少し面倒である


以上があります。

個人的に使用していてコンポーネント分けしてしようできるのはとても便利でした。


メリットに関して簡単にまとめると、宣言的なコードなのでどのような処理をするかがすぐにわかることにより、他の人がコードを見ても理解がしやすいようになっています。

また、コンポーネント(部品)ごとの機能・処理に分かれているので全体的な修正などが必要なく、その部分ごとに変更や更新・修正をすればよいので改良や改善がとてもしやすくなっています。

それから、ReactにはReact Nativeなど携帯アプリケーションなどの開発やReact VRなどのVR開発なども可能になるので、Webだけでなく他の開発の選択肢も豊富になっています。


Reactに関してはReactのフレームワークなどもあるので、今後益々需要が上がっていくと思います。

ですので、今からWeb開発するにあたり学んでおいて損はないかと思われます。