React

【2022年】Next.jsとReactの違い・メリット・デメリットを比較

next.jsとreact.jsの違いを解説

本記事では、
Next.jsとReact.jsの違いを解説します。

想定読者

  • Next.jsとReactの違いを知りたい
  • Next.jsの勉強をしたい
  • フロントエンドエンジニアになりたい

本記事でわかること

  1. Next.jsとReactの違い
  2. Next.jsの使い方
  3. Next.jsとReactの参考書籍

フロントにおいてNext.jsは標準技術

筆者

副業でNext.js, Reactを書いています

↓Next.jsもReactも超カンタンです

さっそくNextとReactの違いを
見ていきましょう!

Next.jsとReact.jsの違いを解説

React.jsについて

React.jsとは
Javascriptを用いたViewのライブラリ
のことです

正しくはReact.jsという名前で、
読み方は『リアクト・ジェーエス』
と読みます

Reactを使うことで
HTMLの見た目に関する実装
をできます

React.jsのポイント

React.jsは、Viewライブラリである

↓次は、Reactにできることを解説します

React.jsでできること

React.jsは
HTMLに変数を入れたりや状態管理
などができます

React.jsの得意なこと:2つ

  1. HTMLに変数を渡せる
  2. HTMLの変数を変更できる

具体的にReact.jsでできること

  1. jQueryのようにDOMの値によって表示を変えられる
  2. Next以外のアプリケーションにも実装できる

↓できることを、順番に解説

1. jQueryのように表示を変えられる(React.js)

React.jsを使うと
jQueryのように表示の変化
を作れます

専門用語的には
『DOM操作』
が得意です

jQueryは実装する人によって
コードが汚くなるのがデメリットですが
Reactでは実装する人によって
コードが極端に汚くなるということは

ほとんど起きません

React.jsにできること①

  • DOM操作が得意
  • jQueryではコードが汚くなるが、
    Reactではキレイなコードを書ける

2. いろんなフレームワークで使える(React.js)

Reactは
いろんなフレームワークに実装
できるのがメリットです

React.jsが利用できるフレームワーク

  • Ruby on Rails(Ruby)
  • Django(Python)
  • Spring(Java)
  • など

部分的にアプリケーションに組み込み可能です

既に構築済みのアプリケーションにも
導入することがカンタンにできます

React.jsにできること②

  • いろんなフレームワークで使える
  • 既にあるアプリケーションにも導入可能

↓React.jsの使い方をみてみましょう!
(超シンプル)

【具体例】React.jsの使い方と導入方法

React.jsは
HTMLに変数を記述するだけで
値を渡せます

【Reactの導入方法】超カンタン → CDNでOK

React.jsはCDNでも提供されています

リンクを埋め込んだらすぐに使える
ように設計されています

React.jsを使いたいファイルに
下記CDNを記述してください

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

※参考:React公式サイト

【Reactの使い方】あとは、HTMLに変数を書くだけ

CDNを追加したあとHTMLファイルに
下記の記述をReactのコンポーネントを記載します

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

これだけで、React.jsを導入OK!

このほかにもHTMLファイルを入れることができたり、React特有の書き方もたくさんあるので、より一層いろいろ幅広い書き方を行うことができます。

Reactのおすすめの本

モダンJavaScriptの基本から始める
React実践の教科書

(Reactの本で高評価)

↓次に、Next.jsについてみてみましょう!

Next.jsについて

Nextとは
Reactファイルを使った
アプリケーションフレームワークです

正しくはNext.jsという名前で
読み方は『ネクスト・ジェーエス』
と読みます。

URLのルーティングや、API処理など
アプリケーション開発に欠かせない機能を
実装することを想定としたものです

Next.jsのポイント①

Next.jsは
アプリケーションフレームワークである

↓Next.jsにできることを、解説

Next.jsでできること

Next.jsは
フロントエンドアプリケーションの作成に利用します

Next.jsは高機能ですが
主に下記を使います

Next.jsでできること

  1. サーバ機能 → webページの取得、表示
  2. アプリケーションの状態を保持 → ユーザごとの表示
  3. ルーティング → いろんなページを作れる
  4. 画像やファイルへのアクセス → 動的なページを作成できる

1. サーバが構築できる(Next.js)

NextとReactの最大の違いは
フロントエンドアプリケーションとして
起動できるか、起動できないかです

React.jsはサーバ機能はありません

React.jsでシステムを実装する場合

Expressなどサーバ機能の実装が必要
(=Reactだけでは作れない…)

モジュールインストールを行い、
ディレクトリ構成等を検討し、
自分たちで実装しないといけません

学習コストや難易度が高い

Next.jsでシステムを実装する場合

Nextはサーバ機能はNextが有しているため、
サーバ関係の実装を行う必要がありません

学習コストや難易度が低い

Next.jsにできること①

簡単にwebアプリケーションが実装できる

2. アプリケーションの状態を保持(Next.js)

Reactとの大きな違いは、
Nextはアプリケーションの状態を保持可能です

このストアを使って、ページ遷移したり、ユーザの入力によって画面に表示している内容が変わってもアプリケーションの状態を保持することができます。

Next.jsにできること②

ユーザによって出し分けをすることができる

3. URLのルーティングを自動生成(Next.js)

Next.jsは
簡単にルーティングを実装可能です

Nextは、アプリケーションを初期化すると
デフォルトでルートディレクトリ配下に
『pages』というディレクトリができます

pagesにReactファイルを配置して、
Reactファイルの名前にアクセスすると
ページが表示されます

RailsやSpring Bootなどの
アプリケーションとは違い、
自分でルーティングを決める必要がありません
(=管理がラク)

Next.jsのポイント

自動でページを作ってくれる

4. 画像、ファイルへのアクセス(Next.js)

Nextではpagesのほかに、
assetsというディレクトリがデフォルトで作成されます

assetsディレクトリに画像を配置するだけで
ソースコードからは下記のようなコードを用いればアクセスが可能です

<template>
  <img src="~/assets/テスト画像ファイル.png" />
</template>

Next.jsのポイント4

ファイルアクセスの実装が簡単

Next.jsのおすすめの本

React.js&Next.js超入門
(同時に学べる良書)

Next.jsとReact.jsの違いのまとめ

Next.jsと、React.jsの違い
はこちらのようになります

↓メリット&デメリットを知りましょう!

Next.jsのメリット・デメリットを解説

Next.js のメリット

メリット1. 環境構築が簡単にできる

nodeのアプリケーションを構築するためには
検討することがたくさんあります

検討しなければいけない項目例

  • サーバライブラリは何にするのか?
  • API通信はどのライブラリを使うのか?
  • SPAはどのように実現するのか?

Next.jsを使うとこれらは簡単!

またライブラリ間の依存関係も考慮に入れてアプリケーションを構築しないといけないので、Next.js以外では環境構築が難しいです。

Next.jsであれば
アプリケーション構築は簡単に行うことができます。

簡単に環境構築が行える理由

  • サーバ機能はNext.jsがデフォルトで提供
  • API通信は、デフォルトでaxiosが設定済み

Next.jsを使ったアプリケーション開発

https://nextjs.org/

メリット2. アプリケーションの拡張が簡単にできる

Next.jsはデフォルトで様々な設定されていますが、設定済みの項目を修正したい時はファイルを修正するだけで済むことが多いです。

また、ドキュメントがしっかりしているため、
デフォルトにはない機能でも実装しやすい
という点が大きいです

Next.jsのドキュメント

https://nextjs.org/docs/getting-started

Next.js のデメリット

Next.jsのデメリットは、
Next.jsの記法やプロダクト開発状況に依存してしまう点です

具体的にに解説していきます!

デメリット1. Next.jsの記法に依存してしまう

ルール通りに実装しないといけないため、
Next.jsの記法の勉強が必須です

また、これらのルールはどこに書いてあるか意識せずに実装を行えるため、Next.js特有のルールを知らない人はエラーが起きた時は、解決しにくいかもしれません。

アプリケーションフレームワークを使って、
開発を行ったことがある人は経験したことがあるかもしれませんね。

しかし、これらは解説してある本もあるので、
それらを頼りに学習をすると良いでしょう

Next.jsで参考になる書籍

  1. React.js&Next.js超入門 第2版
    → React、Next初心者におすすめ
  2. 実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義
    → Next.jsを詳しくなりたい人におすすめ

デメリット2. Next.js自体の開発状況に依存してしまう

Next.jsのデメリットでもう一つ大きいのは
プロダクト開発状況に依存してしまう点です

アプリケーション開発者としては
使っているライブラリのアップデートは
キャッチアップしていかないといけないので
致命的なデメリットです。

書きやすい一方で、
Next.jsが提供している機能で作る必要があるので
これらは意識しておかないといけません。

ただ、Next.jsのプロダクト開発状況に合わせない方法は
ありますので記載します

Next.jsのプロダクト開発状況に振り回されない方法

  1. 方法①…Next.js非推奨だが、ライブラリは最新版にしてエラーは自分たちでラップして書く
  2. 方法②…ライブラリはNext.jsで既に対応済みのバージョンで固定し、一定期間バージョン更新を行わない(その際の脆弱性等は許容、もしくは独自の対応を行う)

上記でデメリットは少なくできます!

まとめ:Next.jsとReact.jsの違いを比較

本記事では
Next.jsとReact.jsの違い
を解説しました。

Next.jsとReact.jsの違い

  1. Next.jsはサーバ機能があり、
    React.jsはサーバ機能はない
  2. Next.jsはアプリケーションフレームワーク、
    React.jsはviewライブラリ
  3. Next.jsは一部分で導入することはできない、
    React.jsは一部分に導入することが可能

これらの違いを踏まえて、フロントはNext.jsで書く、React.jsを導入するがフロントはRailsのままで抑えるなど様々な方法があるのでチームにあった方法を検討してみてください。

ここまで読んでいただいてありがとうございました!

Twitterでは最新の状況を発信しています

一緒に強いエンジニアになりましょう!!!

それでは!