React.js&Next.js超入門 第2版

掌田津耶乃(著者)

• 販売会社／発売会社: 秀和システム
• 発売年月日: 2021/03/01
• JAN: 9784798063980

商品レビュー

2022/10/29

■Reactの限界
　前章までで、 React の基本部分はほぼ説明しました。Reactは、一言でいえば「コンポーネントを作って表示する仕組み」です。コンポーネントさえわかれば、使うことはできます。
　が、これは逆にいえば「コンポーネント以外の機能はそれほど用意されていない」ということになります。例えば、複数のページを作りたいとき、Reactではどうするのでしょう。あるいは、サーバーからデータを取得してステートとして使いたい場合は?こんなふうに、ちょっと応用的なことをさせようとすると、途端に「あれ?Reactにそんな機能あったっけ?」という事態に陥ってしまうのです。
　では、Reactではこうした複雑な機能は使えないのか?これは、YESでもあり、NOでもあります。確かにReactには、さまざまな便利機能は用意されていません。が、それは、Reactの開発チームが「Reactにやたらと機能を詰め込んで膨らませない」ようにしているからです。
　React本体は、シンプルにまとめる。そしてそれ以外の機能は、必要に応じて拡張できるようにしたのです。こうした考えから、Reactでは機能を拡張するソフトウェアが多数作られています。それらを使うことで、Reactをどんどん拡張していけるのです。
　そんな中で、「Reactを拡張したいなら、まずこれを使え!」と多くのReact開発者が推すのが「Next.js」というソフトウェアです。

■Next.jsってなに?
「Next.js(ネクスト・ジェーエス)」は、Reactに各種のライブラリなどを統合しパッケージ化したものです。専用のコマンドプログラムを持っており、それを使ってプロジェクトを作成し実行できます。
具体的に、どのような機能が追加されているのか、ざっと整理すると以下のようになるでしょう。

・SSGとSSRの対応
　SSG(Static Site Generator)とは、プロジェクトを静的サイト(必要な処理やデータをすべてHTMLベースで用意してあるもの)として出力する機能のことです。またSSR(Server Side Rendering)は、サーバー側で表示をすべてレンダリングしたものを表示する機能です。
　Reactは、CSR(Client Side Rendering、Webブラウザ側で表示を生成する)と呼ばれる方式を採用しており、Webブラウザの側でJavaScriptを使って表示を生成します。これを 全部サーバーで作って表示するようにできます。
・ファイルシステム・ルーティング機能
「ルーティング」というのは、アクセスするアドレスのパスごとにページを割り当てることです。Reactは、基本的にSPA(Single Page Application、1枚のページだけで完結するWebアプリ)の作成を考えて設計されています。が、Next.jsを利用することで、複数のベージを組み合わせてWebアプリを作ることが簡単になります。
・APIルートとフック
　Webアプリで必要なデータをサーバーから取得する場合、データを配信するAPIを実装し、それにクライアント側からネットワークアクセスしてデータを取得します。Next.jsでは、APIを簡単に作成でき、しかも専用のフックを使ってAPIとデータをやり取りできます。
・ゼロ設定アプリ
　多くのフレームワークやライブラリでは、細々とした設定を行うために設定ファイルを用意し、それを読み込んでアプリの設定を行うようになっています。が、Next.jsでは設定ファイルは使いません。代りにJavaScriptのスクリプト内で必要な設定などが行えるようになっています。
・他にもいろいろ!
　その他にも、国際化のための機能、ビルドインCSSのサポート、イメージコンポーネントの最適化など、さまざまな機能を持っています。これらを使いこなすことで、Reactアプリを格段にパワーアップできるわけです。
　しかも、用意されたコマンドを実行するだけで、すべてをセットアップされた状態でプロジェクトを作成し、すぐに開発に入れます。Reactのプロジェクトを作り、必要なパッケージを調べてインストールし……という通常の開発手順を想像しましょう。最初からNext.jsを使ったほうが、圧倒的に便利だと思うでしょう？

2022/07/16

内容はタイトル通り超入門書。ダウンロードできるサンプルプログラムを使用すればおおよそ動かすことはできると思う。ただしバージョンが古くなり動作しない箇所が一部あったりする。
動作しなくなってしまった部分や誤字・誤記を訂正するWebページが出版社のサイトにはない。