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

Chat Work

mail

blog

ブログ
  • HOME
  • ブログ
  • 【超訳】Reactとは?メリットとデメリット

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

Writer

玉木 柚衣

Web Developer

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

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

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

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

 

◾︎合わせて読みたい

 

React(リアクト)とは?

ReactJavaScriptのライブラリのこと

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

 

ReactFacebook社(現Meta社)が開発

 

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

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

 

Reactのメリット

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

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

 

ページの移動が早い

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

 

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

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

 

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

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

 

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

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

 

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

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

 

 

Reactのデメリット(注意点)

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

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

 

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

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

 

開発価格が高い

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

 

Reactを一言でまとめるなら

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

 

ReactSEOに弱いのか?

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

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

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

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

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

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

 

Next.jsとはなにか?

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

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

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

 

◾︎合わせて読みたい