本記事では、
Next.jsとReact.jsの違い
を解説します。
想定読者
- Next.jsとReactの違いを知りたい
- Next.jsの勉強をしたい
- フロントエンドエンジニアになりたい
- Next.jsとReactの違い
- Next.jsの使い方
- Next.jsとReactの参考書籍
フロントで、Next.jsは標準技術
副業でNext.js, Reactを書いています
↓Next.jsもReactも超カンタンです
副業で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つ
- HTMLに変数を渡せる
- HTMLの変数を変更できる
具体的にReact.jsでできること
- jQueryのようにDOMの値によって表示を変えられる
- 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でできること
- サーバ機能 → webページの取得、表示
- アプリケーションの状態を保持 → ユーザごとの表示
- ルーティング → いろんなページを作れる
- 画像やファイルへのアクセス → 動的なページを作成できる
1. サーバが構築できる（Next.js）
NextとReactの最大の違いは
フロントエンドアプリケーションとして
起動できるか、起動できないかです
React.jsはサーバ機能はありません
React.jsでシステムを実装する場合
Expressなどサーバ機能の実装が必要
（=Reactだけでは作れない…）
モジュールインストールを行い、
ディレクトリ構成等を検討し、
自分たちで実装しないといけません
↓
学習コストや難易度が高い
Next.jsでシステムを実装する場合
Nextはサーバ機能はNextが有しているため、
サーバ関係の実装を行う必要がありません
↓
学習コストや難易度が低い
Next.jsにできること①
簡単にwebアプリケーションが実装できる
- 参考：next.js
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の違い
はこちらのようになります
React.jsにできること
- jQueryのようにDOMの値によって表示を変えられる
- Next以外のアプリケーションにも実装できる
Next.jsにできること
- サーバ機能を利用することができる
- アプリケーションの状態を保持することができる
- ルーティングを自動生成できる
- 画像リソースへ簡単にアクセスできる
↓メリット&デメリットを知りましょう！
Next.jsのメリット・デメリットを解説
Next.js のメリット
メリット1. 環境構築が簡単にできる
nodeのアプリケーションを構築するためには
検討することがたくさんあります
検討しなければいけない項目例
- サーバライブラリは何にするのか？
- API通信はどのライブラリを使うのか？
- SPAはどのように実現するのか？
Next.jsを使うとこれらは簡単！
またライブラリ間の依存関係も考慮に入れてアプリケーションを構築しないといけないので、Next.js以外では環境構築が難しいです。
Next.jsであれば
アプリケーション構築は簡単に行うことができます。
簡単に環境構築が行える理由
- サーバ機能はNext.jsがデフォルトで提供
- API通信は、デフォルトでaxiosが設定済み
Next.jsを使ったアプリケーション開発
メリット2. アプリケーションの拡張が簡単にできる
Next.jsはデフォルトで様々な設定されていますが、設定済みの項目を修正したい時はファイルを修正するだけで済むことが多いです。
また、ドキュメントがしっかりしているため、
デフォルトにはない機能でも実装しやすい
という点が大きいです
Next.jsのドキュメント
Next.js のデメリット
Next.jsのデメリットは、
Next.jsの記法やプロダクト開発状況に依存してしまう点です
具体的にに解説していきます！
↓
デメリット1. Next.jsの記法に依存してしまう
ルール通りに実装しないといけないため、
Next.jsの記法の勉強が必須です
また、これらのルールはどこに書いてあるか意識せずに実装を行えるため、Next.js特有のルールを知らない人はエラーが起きた時は、解決しにくいかもしれません。
アプリケーションフレームワークを使って、
開発を行ったことがある人は経験したことがあるかもしれませんね。
しかし、これらは解説してある本もあるので、
それらを頼りに学習をすると良いでしょう
Next.jsで参考になる書籍
- React.js&Next.js超入門 第2版
→ React、Next初心者におすすめ - 実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義
→ Next.jsを詳しくなりたい人におすすめ
デメリット2. Next.js自体の開発状況に依存してしまう
Next.jsのデメリットでもう一つ大きいのは
プロダクト開発状況に依存してしまう点です
アプリケーション開発者としては
使っているライブラリのアップデートは
キャッチアップしていかないといけないので
致命的なデメリットです。
書きやすい一方で、
Next.jsが提供している機能で作る必要があるので
これらは意識しておかないといけません。
ただ、Next.jsのプロダクト開発状況に合わせない方法は
ありますので記載します
Next.jsのプロダクト開発状況に振り回されない方法
- 方法①…Next.js非推奨だが、ライブラリは最新版にしてエラーは自分たちでラップして書く
- 方法②…ライブラリはNext.jsで既に対応済みのバージョンで固定し、一定期間バージョン更新を行わない（その際の脆弱性等は許容、もしくは独自の対応を行う）
上記でデメリットは少なくできます!
まとめ：Next.jsとReact.jsの違いを比較
本記事では
Next.jsとReact.jsの違い
を解説しました。
Next.jsとReact.jsの違い
- Next.jsはサーバ機能があり、
React.jsはサーバ機能はない - Next.jsはアプリケーションフレームワーク、
React.jsはviewライブラリ - Next.jsは一部分で導入することはできない、
React.jsは一部分に導入することが可能
これらの違いを踏まえて、フロントはNext.jsで書く、React.jsを導入するがフロントはRailsのままで抑えるなど様々な方法があるのでチームにあった方法を検討してみてください。
稼ぎながらReactを学ぶ方法
フロントは求人が多くて
稼ぎながら、スキルを身につけるチャンス！
Reactの求人の探し方を解説
↓
ここまで読んでいただいてありがとうございました！
Twitterでは最新の状況を発信しています
一緒に強いエンジニアになりましょう！！！
それでは！
