Reactは現在人気のJavascriptフレームワークのひとつで、Facebookが開発しオープンソースとして無料で提供しています。
多くのパーツが世界中で開発されており、それらを組み合わせることで簡単にWebアプリを開発することが可能です。
Reactをまだ使ったことがないユーザーのために、Reactの特徴や基本的なことについて紹介します。
Reactとは
Reactは、Facebookによって提供されているオープンソースのJavascriptライブラリで、React.jsやReact.JSと呼ばれることもあります。
基本的にはシングルページのアプリケーションやモバイルアプリを想定して作られています。
洗練されたUIを簡単に導入することができることや、多くの機能をプラグインとして追加することができるため、同じく人気のフレームワークであるAngularと比較すると導入が容易で学習時間も短く済むという利点があります。
特に、純粋なJavaScript技術者にとってはReactの方が受け入れやすいという声が多いです。
本記事執筆時点では、reactの最新バージョンはv16.8.6です。
Reactは頻繁なバージョンアップが行われており、バージョンによって機能の互換性がない場合もありますので、情報を参照する場合はバージョンには注意しましょう。
最新バージョンは以下の公式サイトから確認できます。
参考：React公式サイト
Reactの特徴や利用シーン
Reactの特徴や利用シーンについて概説します。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選ちょっと試したい人はオンラインエディタがある
Reactをちょっと試してみたい人は、Codepenなどのオンラインエディタでも試してみることが可能です。
ある程度大きな規模のページを作ることになると動作が遅くなっていきますので、簡単なテストページ程度にとどめておきましょう。
JSXによるスクリプトとマークアップの一体化
JSXというReactで利用されているJavascriptの拡張では、スクリプト中にマークアップを記述していくことが可能です。
これにより、スクリプトを搭載したパーツをそれぞれ設計し、コンポーネント化して組み合わせることでページ作成が可能です。
また、このような形で記述することにより、Javascript内に悪意ある形でコードを記入されることを防ぎますので、既存サイトのセキュリティ強化などにも利用できます。
仮想DOM
Reactでは仮想DOMとしてメモリ上にDOMの状態をキャッシュし、差分だけえを計算して反映させる仕組みをとっています。これにより、変更が必要な部分だけを効率的に描画することが可能です。
しかし、差分が大きくなるとそれだけキャッシュが圧迫されることになるため、内部の描画が大きく変わるようなサービスではメモリ消費量が大きくなる可能性があるのて注意しましょう。
基本的にどんなWebアプリにも適用可能
Reactは、学習のための時間が短く済み、また最小構成からプラグインを追加していくことでさまざまな機能を追加し、大規模な開発案件にも活用可能です。
YahooやAirbnbなどもreactが使われています。
エコシステムが強い
Facebookが開発して提供していることもあり、Reactは非常に強いエコシステムを持っています。
世界中の多くの技術者やデザイナーがコンポーネントやプラグインの作成に取り組んでおり、より便利にReactを使うための環境が整っています。
Reactの苦手なこと
Reactには多くのメリットがありますが、Reactが苦手にしている部分についても理解しておきましょう。
大規模かつ頻繁なデータの書き換えが生じるようなサービスでは不向き
仮想DOMの仕組み上、大規模で頻繁なデータの書き換えが必要になるようなサービスにはReactは不向きであると言えます。
キャッシュするデータ量が大きくなってしまい、メモリを大きく圧迫してしまう恐れがあるからです。
具体的にはゲームなどどんどん画面が切り替わるようなサービスでは不利です。
実際にはそういった種類のサイトはあまり多くありませんが、開発場面では出てくる可能性もありますので頭に入れておいた方が良いでしょう。
規模が小さいサービスでは十分に機能を発揮できない
構築が難しい、不可能ということではありませんが、Reactのメリットはある程度の規模のサービスになっても管理が容易にできるという点にあります。
逆に言えば、たいして大きくない規模のサービスなら、あえてコンポーネントを分けて独自の記法などを用いて管理する必要はないのです。
また、データ量も大きくないのであれば仮想DOMでなくとも表示速度には大差がありません。
規模が小さいサービスでは、従来通りのHTMLやJavaScriptを使って作成したり、他のJavaScriptライブラリを使った方が便利かもしれません。
サーバーサイド中心のサービスからの移行は難しい
従来、PHPやRuby、Node.jsを利用して管理していたようなサーバーサイドが中心になっているサービスを、Reactで実装したものに移行しようとすると難易度が高くなります。
Reactまとめ
ReactはFacebookが作成し、世界中のコミュニティによって開発が行われているオープンソースのJavaScriptフレームワークです。
フロントエンド開発に特に強く、多くのメリットでWebアプリの開発を効率化してくれますが、一方でそのメリットを正しく理解して使わなければ機能をうまく活かすことができません。
学習難易度は低いため、早めに学習しておけば対応できる案件も増え、転職などの際にも幅が広がるでしょう。