JavaScriptライブラリの【React】とは？

Reactは、質の高いUIを作るのに適したJavaScriptライブラリです。現在、多くのJavaScriptのフレームワーク・ライブラリがありますが、その中でも世界的に圧倒的な採用率となっています。
今回はそんなReactについて、Reactとは何か？という基礎知識から、特徴・メリットや注意点、活用事例について解説していきます。専門用語にはその都度解説を入れていますので、初心者の方でも分かりやすくなっているかと思います！ぜひ、最後までご覧ください。

Reactを知る前に、「Java Script」とは

JavaScriptは、1995年に当時ネットスケープコミュニケーションズのプログラマーであったブレンダン・アイク氏によって開発されました。
‍
JavaScriptとはプログラミング言語の1つで、ポップウィンドウやスライドショーなどWebページに動きをつけるための実装で用いられます。JavaScriptは、ブラウザとエディタの環境が整えば誰でも使用できる言語で、ユーザーの視認性や利便性を向上させることが可能です。
‍
世界中のWebサイトのうち約9割にJavaScriptが使用されているとも言われており、世界標準のポジションを築いているといっても過言ではありません。

Reactとは

ReactとはReact.jsとも呼ばれ、WebサイトやWebアプリのUIを開発する際に使用するJava Scriptライブラリです。Facebook社が開発し、2013年にオープンソース化されました。
‍
Reactは流行のUIを簡単に構築できるだけでなく、ユーザービリティの高いReactアプリを開発することが可能です。また、コンポーネント指向という特徴があるため、機能拡張にも柔軟に対応可能で、拡張を重ねても品質を維持することができます。
‍
そのため現在、Yahoo!やNetflixなど世界的に有名な企業もWebサイトやWebアプリにReactを採用しており、日本でも注目を集め、採用企業が増えています。
‍
また、ReactのようなUI用のライブラリやフレームワークが注目されるようになった背景として、SPAの普及が挙げられます。
‍
SPAとはSingle Page Applicationの頭文字を取った言葉で、その名の通り、1つのページだけで完結するWebアプリケーションのことを指します。従来のWebページでは操作のたびにWebページ全体の再読み込みが入っていましたが、これにより、読み込みを待つ時間や余分な通信量などが発生してしいました。しかしSPAであれば、必要な部分だけ読み込むため、アプリケーションのパフォーマンス向上に一役買います。
‍
しかし、1つのページ内にたくさんの機能を詰め込むため、UIの複雑化やページ読み込みの速度が遅延傾向にあるという課題がありました。このような課題を、Reactを使用することで解決が見込めるため、Reactは普及していきました。

「ReactとReact Native」、「ライブラリとフレームワーク」の違い

Reactと名称が似ているため、混同してしまうのが「React Native」です。ReactがJava Scriptのライブラリである一方、React Nativeは、クロスプラットフォームのアプリ開発用のフレームワークであるというのが、2つの大きな違いです。
‍
また、ライブラリとフレームワークも混同しやすく、Reactがフレームワークだと認識している人も多いようなので、ここで一旦整理していきます。
‍
・ライブラリ
ライブラリとはよく使う機能を、再利用可能なパッケージ化したファイルとしてまとめたものです。構築するアプリケーションに埋め込むことで、その分のプログラムを省略することが可能です。ライブラリはあくまで開発の一部の「部品」として組み込むことで、作業効率を向上させます。
‍
・フレームワーク
フレームワークとは新しいプログラムを開発する際に活用できる枠組み（土台）のことです。アプリケーション全体の枠組みを提供するため、ライブラリより一層効率化が見込めますが、土台が決まっているが故に、自由度は低いといえます。

特徴とメリット

世界中に多くのユーザーがいるReactの特徴やメリットにはどんなものがあるのでしょうか？以下に、代表的なものをまとめていきます。
‍
・宣言的なview
Reactのコード記述は「こういう表示（View＝見た目）にしたい」という宣言的な記述が可能です。そもそも「宣言的」とは？という方も多いと思います。プログラミング言語の多くは、どのような処理を行うかという「処理の手順」を記述します。しかし、Reactでは「このような表示にする」といった結果から記述をしていくイメージです。この宣言的UIによって、記述するコードも短くなり、第三者が見ても分かりやすく、不具合の原因究明も行いやすくなっています。
‍
・コンポーネント指向
コンポーネント指向は、アプリケーションにおけるあらゆる要素を、単独で機能する再利用可能な小さな部品に分け、必要に応じて組み合わせて使っていきます。Reactでは、画面に表示したい記述を小さな部品に分けて再利用していきます。
例えば、コンポーネント指向でない場合は、プログラムに修正したい部分が出てきた場合、全体的な変更が必要になります。しかし、コンポーネント指向であれば、対象のコンポーネントの修正を行えばいいため、不具合の修正だけでなく、改良や拡張にも対応しやすく、保守性の高いコードが実現可能です。
‍
・仮想DOMにより高速な処理を実現
まずDOMとは、Document Object Modelの略で、HTMLやXMLドキュメントにJavaScriptなどのプログラミング言語からアクセス可能にするAPIを指します。これにより、ドキュメントの作成や閲覧、修正、変更、追加などが可能になります。そして仮想DOMとは、情報を受け取ってもすぐに描画するのではなく、バーチャルなDOM（＝仮のDOM）を構築します。仮想DOMを利用することで、変更前と変更後を比較し、情報が変化した部分を素早く見つけ出し、その差分のみ変更することで、変更が最小限に抑えられ、ページ表示の高速化を実現できます。
‍
・Reactを学習すれば様々なところで使える
Reactの活用はWebサイトやWebアプリだけに留まりません。例えば、Reactから派生したReactNativeというフレームワークを活用すれば、1つのコードベースでAndroidとiOS両方の開発が可能です。
‍
・流行のUI構築が簡単にできる
Reactは世界中で多くのユーザーが利用しており、ライブラリには今風のコンポーネントが豊富に用意されています。そのため、洗練された、流行の最先端のUI構築を簡単に行うことができます。

注意点

Reactの採用は、場合によっては不向きなこともあります。以下で、Reactを採用する際に注意すべき点について解説していきます。
‍
・環境構築に時間がかかる
Reactを使用するには、Node.jsやbabel、webpackなど複数のプログラムのインストールや、その後のアップデートの対応なども必要になってくるため、環境構築に手間がかかることは否定できません。
‍
最近では、Reactの環境構築をよりシンプルにしたスターターキットなどもあるため、活用を視野に入れていきたいところです。
‍
・開発するWebアプリやWebサイトに適さない可能性がある
仮想DOMを使用するというReactの特性上、ページの更新頻度が低いWebアプリやWebサイトには、負担が大きく、かえって処理速度が低下してしまう可能性があります。
‍
開発するWebアプリやWebサイトにとって、Reactの技術が本当に適しているのか、見極める必要があります。

まとめ

ここまで、世界的に圧倒的な採用率のJavaScriptライブラリ「React」について、Reactとは何か？という基礎知識から、特徴・メリットや注意点を解説してきました。
‍
Reactは宣言的なViewやコンポーネント指向、仮想DOMの使用といった特徴から、最先端のUIを生産性を向上させながら構築することが可能です。しかし、開発するWebアプリやWebサイトによってはReactが不向きな場合もあるため、しっかりと見極めて採用していきたいところです。
‍
JIITAKでは、常に最新のフロントエンド技術に目を配らせ、React.js、Vue.js、Next.js、Angularなどの優れたWebフレームワークを使用し、効率的かつ柔軟なフロントエンド開発を提供しています。ビジネスフェーズ・開発規模・予算感に応じて、最適化された開発チームを構築していきますので、Webアプリ開発のアイデアのある方やお困りごとのある方は、ぜひ一度JIITAKまでご相談ください。