【超訳】Reactとは？メリットとデメリット｜コーディング、Web開発の外注、代行ならコーディングアライブ

blog

ブログ

2022-12-28 コーディング業務

【超訳】Reactとは？メリットとデメリット

Writer

玉木柚衣

Web Developer

React（リアクト）を使うとWebサイトにとって何が良いのか？非エンジニアでもわかりやすい超訳＆箇条書き形式で、Reactのメリットとデメリットをわかりやすく解説します！

こんにちは。エンジニアの玉木です。
今回は、Webページ制作の世界で人気急上昇中のReact（リアクト）についてご紹介していこうと思います。

この手のお話はきちんと説明するとどんどんわかりにくくなってしまうので、
「React？なにそれ、使うと何か良いことあるの？」
という疑問にズバっとお応えするべく、超訳・箇条書き形式でご紹介します。
見出しを追うだけでアラ不思議～、Reactのイメージが掴めちゃいます！

それでは行ってみましょう！

◾︎合わせて読みたい

コーディングの外注・代行ならコーディングアライブ

https://coding-alive.jp/blog/p1552

Web制作/デザイン会社のコーディング・システム開発部門は外注活用の時代へ

経済産業省が公開したデータによるとIT人材は2030年に最大で79万人不足すると言われています。今でさえシステム開発専業の企業はもとよりWeb制作会社やデザイン会社などでも、エンジニアやコーダーを含むIT人材を採用しづらくなっているのを肌で感じているはずです。社内にIT人材が不足することによって、サービス開発や業務効率化、保守運用面でもさまざまな弊害が生じることがあるでしょう。そこで今回の記事は、特にWeb制作会社やデザイン会社にフォーカスし「IT人材不足にどう向き合っていくか」について解説していきます。この記...

React（リアクト）とは？

ReactはJavaScriptのライブラリのこと

[補足]JavaScriptライブラリとは開発を助けてくれるパッケージのようなもの。複雑な機能を簡単に導入できます。

ReactはFacebook社（現Meta社）が開発

Reactで作ったページは、ページ遷移した時にURLが変わらない

[補足]カスタマイズで変更することもできるが、基本動作としてはURLが変わらない。

Reactのメリット

表示したページを後から部分的に変更できる（ファストリフレッシュ機能）

[補足]ヘッダーやフッタを残してメインコンテンツだけ別のものに切り替えたり、クリックしたボタンによって表示するコンテンツを再読み込み無しで更新したりできる。

ページの移動が早い

[補足]ファストリフレッシュ機能によりページの再読み込みが不要なので、結果としてページの移動が早い。

アプリっぽい動作のページが作れる

[補足]再読み込みせずに画面が切り替わっていくとは、つまりアプリっぽい動きなのです。

SPA（シングルページアプリケーション）の制作に向いている

[補足]SPAとはfacebookやGoogleMapなど、一つのページ内で動作が完結するWebサービス

アクセスしてからのページ読み込みが早い

[補足]PHPなどはサーバ側で表示する内容を計算してからユーザに渡すが、Reactはユーザ側で表示内容を計算するからダウンロードが早い。

サーバに負荷がかかりにくい

[補足]サーバ側で計算する量が少ないので、膨大なアクセスがあった時にサーバ側の負荷が増えにくい。

Reactのデメリット（注意点）

URLが変わらないことがSEOに不利に働く場合がある

[補足]ページURLが変わらないので、ページごとに検索結果にヒットさせたい場合などは不向きな場合がある。（ただし、ページURLはカスタマイズで変更可能）

ユーザ側で出力結果を計算する仕組みがSEOに不利に働く場合がある（かも？）

[補足]Reactはサーバ側で計算（レンダリング）せず、レンダリング前のJavaScriptをユーザに配布するので、検索ロボットがページ内容を理解できないという説がある。
（ただし、Google検索ロボットは2014年にJavaScriptを理解できるようになっているから問題ないとする説もある。）

開発価格が高い

[補足]比較的新しい技術のため、開発可能なエンジニアが少なく市場価格が高い。

Reactを一言でまとめるなら

SPAやWebアプリライクなページを作るならReactが最適！
通常のWebサイトを作りたいけど、動作が軽くてページ遷移せずにヌルヌル動く仕様にしたい場合もオススメ。
ただし、その場合SEOに関してはちょっと注意が必要。

ReactはSEOに弱いのか？

SEOのデメリットに関して要約すれば、

①「URLが変わらない」ことがデメリットとして働くシーンがある。

②サーバ側でページを計算しないから、検索ロボットが読み込んでくれない可能性がある。

という２つが挙げられることになります。

ですが、あえてページURLを変更しないWebアプリケーションを作るのであれば、①は無視できることになります。
また、②も「最近のGoogle検索ロボットは賢くなったから大丈夫！」と考えるのであればやはり無視できることになります。

①URLもページごとに変えたいし、②検索ロボットに読み込まれないか不安…ということであれば、それらのデメリットを払拭できるNEXT.jsという技術があります！

Next.jsとはなにか？

Next.js（ネクストジェーエス）とは、Reactの開発をサポートするフレームワークと呼ばれる技術です。
これを使うことでReactのWebサイトでもページURLの変更が容易になり、また検索ロボットにも理解しやすい形でページを配布することができるようになります。

というわけで、次回はNext.jsについてのご紹介です！↓

【超訳】Next.jsとは？Reactとの関係性、メリットとデメリット