React 何ができる？将来性高いライブラリ。活用事例 webページガイド

2022年4月25日
2022年3月29日
Web制作
インスタグラム, webツール, facebook, システム, web制作, トレンド, 初心者向け, webデザイン, システム開発, 無料

GUI開発で世界的シェアの高い、React。最強ライブラリとして将来性の高いReactで、何ができるか？そして、React 基礎知識、活用事例 webページなどを、ご紹介していきます！今、React 開発は webサイト開発の現場で起きているんです。

日本ではVue.jsと、肩を並べるReactは、javascriptのライブラリの1つ。Webサービス開発において、採用事例の多いライブラリとなっています。ただ、フレームワークのように扱えるので、フレームワークとして活用するケースも多いですね。

JavaScriptのフレームワーク、ライブラリとして、Reactは、コーディングコストが少ないことで、非常に注目されています。また、何よりも、Reactは、サイト規模が大きくても、管理しやすいことから、安心して、活用できます。これは、すでに、世界的に巨大なサービス（Facebook、Netflix、Dropboxなど）で活用されている事例があることから、安心できる材料です。

これからフロントエンジニアとして活躍したい！より、自社webサイト、webサービスのクオリティを改善していきたい！新規事業を、インターネットで展開したい！！という方向けに、この記事では、React 何ができるか？Reactの基礎知識、活用事例、利用されているwebページ webサービスなどをご紹介していきます！リアクト面白いですよ。

React できること

さっそく、Reactでできることについてご紹介していきます！

大きくは以下の4点です。

webサイト開発
webアプリ開発
ネイティブアプリ開発
VRコンテンツ開発

Reactは、基本、phpなどのプログラミング言語ではないですが、使い方次第で、webサービス、アプリサービスを実装できるのです。

webサイト開発

Reactは、シングルページアプリケーション（SPA）として、webサイトを開発できます。従来のwebサイトは、大量にHTMLや、PHPを用意する必要がありました。しかし、Reactでは、1ページ内で、さまざまなコンテンツを呼び出すことができるようになっています。

Reactで開発したホームページは、ページを静的にすることで、表示速度が速くなります。また、ページのコンテンツを毎回読む必要がなくなり、挙動がスムーズになっていきます！

ホームページを利用するユーザーにとっても大きなメリットがありますよね。

ちなみに、Reactと切っても切れない概念として、静的サイトジェネレータの概念があります。後程ご紹介します。

ただ、Reactで、シングルページアプリケーションとして、ホームページを作ると、Googleや、Yahooなどの検索エンジンからの誘導については、不利になります。

想像してみてください。ほかのホームページは１００ページ、Googleの検索結果にインデックスされているのに対して、Reactで、ホームページを作ると、１ページしか、Googleなどの検索エンジンの検索結果にインデックスされません。

集客要素をSEO中心で考えると、Reactはきついかもですね。

webアプリ開発

Reactで、webアプリの開発ができます。仮想DOMという、レンダリングの機能があることで、実際のコンテンツから差分だけを、毎回吐き出して、表示が速くなります。

そして、何よりも、ライブラリが充実しています。カレンダー、ボタン、プルダウン、検索フォームなど、もともとReactで用意されたUIを活用できます。

Reactなら、サーバとのやりとりを最小限に抑えられるので、転送量を抑えることもできます。これによって、AWS（アマゾンのクラウドサーバ）など、転送量課金のクラウドサーバのコストを下げることも可能です。

Reactは、JavaScriptでコンテンツの読み込み、描画を速くできる機能を有しています。

これを活用することで、webアプリを開発できるのです。

具体的にwebアプリとしていえば、

診断コンテンツ
EC
画像投稿

などのアプリケーション開発などが可能です。

ネイティブアプリ開発

Reactには、React NativeというiOS/AndroidのJavaScriptエンジンを活用できるフレームワークがあります。

これによって、Reactで、iOS、Androidで動くスマホのアプリの開発ができるのです。

あまりにも複雑な処理には向かないですが、UIがwebアプリと近しいものであれば、十分、ネイティブアプリの開発に使えます。

何より、学習コストの低減化につながります。今まで、iPhoneアプリ開発はSwift、Objective-Cなどが活用され、Androidアプリであれば、Java、Kotlinという開発言語の習得が必要でした。

しかし、Reactであれば、1つのライブラリの仕様を把握することで、アンドロイド、iPhone、どちらのスマホOS向けにも、Reactで、ネイティブアプリ開発ができるのです！

VRコンテンツ開発

Reactには、VRコンテンツを開発できる React 360 というフレームワークがあります。

このReact 360なら、Reactでchromeなどのブラウザで見れるVRコンテンツを開発できるのです！

VRコンテンツは、拡張現実のコンテンツです。いわゆる、バーチャル空間のwebサイトなどができるんですよね。

ブラウザで360度のVR空間を表現するできるので、Googleアース、Googleマップみたいなかんじの世界観を表現できるのです。

Reactの開発ができれば、こういった360度の世界観を、あっという間に構築できるので、従来のホームページよりも、立体感のあるサービス設計、UI設計が可能です。UIUXにおいて、他社との差別化がしやすいわけですね。

静的サイトジェネレータとは

静的サイトジェネレータとは、JavaScriptなどの開発言語で開発したプログラムコードから、HTMLやCSS、JavaScriptを生成して、静的なホームページを作り出すツールのことを指します。

これは、Reactだけにあるものではありません。wordpressなどにも、プラグインで、静的サイトジェネレータはあります。

ちなみに、Reactでは、React Static や Gatsby.js などが有名です。

静的サイトジェネレータは、Static Site Generatorと解説されることもあります。

静的サイトジェネレーを活用することで、ページの表示が高速化されます。

Reactとは何なの？

React 日本版公式ホームページ
 https://ja.reactjs.org/

Reactとは、UI制作に特化したJavaScriptのライブラリです。

Reactは、リアクトと呼ばれます。

Reactは、Facebook社とそのコミュニティにより開発、リリースされたライブラリで、実際、上記の日本版のReact 公式ホームページは、meta、facebookのオープンソースとしてのロゴが入っています。

以下、wikipediaの記事も引用しますが。

React (リアクト) は、Meta（旧Facebook）とコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである

引用フリー百科事典『ウィキペディア（Wikipedia）』
React
https://ja.wikipedia.org/wiki/React

というように、React は、ライブラリであって、フレームワークではありません。

React 基礎知識解説動画

ここまで、Reactについて、解説してきましたが、やはりReactの基礎知識について、まとまったイメージが欲しい！体系化した情報が欲しい！！などがあると思います。そこで、Reactの基礎知識についてわかりやすい、解説動画をご紹介します。

このYoutube動画は、日本一わかりやすいReact入門とタイトルに入れていまして、視聴回数も万単位で、とても多いReactの基礎知識についてのYoutube動画になっています。

React どんなことができるの？フロントエンドエンジニアになるために、学ぶべき、React のポイント、webの構造などを、詳細に解説してくれている動画です。基本となるReact の概念把握にもってこいです！ぜひ、1度、無料なので、閲覧してみてください。動画でイメージつきやすくなりますよ。

React 基礎知識についての動画、いかがですか？スライド形式なので、読みやすいですよね。セミナー形式なので、React 基礎知識について、がんがん入ってくると思います。webページで、React について読むよりも、頭に入りやすいかもですね。そもそも、DOMの概念とか、図があったほうがわかりやすいですし。

React についてのYoutube動画は、意外と多く存在します。日本語で解説されているReact 基礎知識の動画も多いです。Youtubeで検索してみると、わかると思います。ちなみに、React で検索すると、海外の動画も出てくるので、おすすめの検索キーワードは、Reactとは、とか、React 基礎知識ですね！Youtube動画を活用して、React 基礎知識、抑えていきましょう。Youtubeなので、インターネットさえあれば、スマホ、タブレットなどで、無料視聴できます！繰り返し見れるので、スライドが先に行ってしまった！というときでも、振り返って、React の動画を見れますよ。safariやGoogle chromeなどのスマートフォンブラウザや、おなじみのYoutubeアプリから、探してみてくださいね。

React jQueryとの違い

Reactは、JavaScriptのライブラリなので、よく、jQueryと比較されます。しかし、ReactとjQueryは、違いがあります。

Reactの方が、コードがシンプルになる

という点です。

これは、コード管理の面を考えると、とても大きく、それゆえに、大型のサービスで、jQueryよりも、Reactが活用されている！という面に関係します。

Reactは、データ更新時に、自動的にHTMLの更新がされます。しかし、jQueryは、データの更新時に、HTMLも自分で書き換えないといけないのです。

これによって、コードのシンプルさ、運用管理のしやすさに違いが出てきますね。

React 事例

Reactで、開発されたホームページについて、ご紹介します！いわゆる、Reactの活用事例ですね。

Facebook フェイスブック

Facebook
https://www.facebook.com

ご存知、SNSのfacebook。もともと、Facebookとそのコミュニティから生まれているReactなので、facebookでReactは活用されています。

Instagram インスタグラム

Instagram
https://www.instagram.com/

こちらも、Facebookのサービスなので、インスタも、Reactで開発されています。Facebookよりも表示が軽快なのは、Reactの箇所が多いからなのかもですね。

Netflix ネットフリックス

Netflix
https://www.netflix.com/jp/

動画の見放題サービスで、世界でも有名なNetflix（ネットフリックス）。

こちらでも、Reactが活用されています。

Want to put those React, TypeScript, and GraphQL skills to use to help Netflix Studios continue to expand the content budget?
This might be the role for you! https://t.co/DsvW76DBNn
— Netflix Engineering (@NetflixEng) April 28, 2021