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

著者 : 掌田津耶乃

• 秀和システム (2021年2月27日発売)

作品紹介・あらすじ

React.jsの入門者向け書籍です。2019/3発刊「React.js＆Next.js超入門」の改訂版となります。改訂内容は新バージョン17対応、新しい周辺ツールやデータベースサービスへの対応となります。対象読者はJavaScriptの入門書を読み終えた層で、React.jsの経験がなくても読めるようにしました。既存の入門書などで挫折した人でもついていけるように、手順を可能な限り省略せず、手取り足取り教えていく形で説明しています。

感想・レビュー・書評

[桜美林大学図書館さんの感想 · 2022年12月2日]

https://cool.obirin.ac.jp/opac/volume/906000

[japapizzaさんの感想 · 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を使ったほうが、圧倒的に便利だと思うでしょう？

[hide1080さんの感想 · 2022年7月16日]

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

著者プロフィール

日本初のMac専門月刊誌『Mac+』の頃から主にMac系雑誌に寄稿する。ハイパーカードの登場により「ビギナーのためのプログラミング」に開眼。以後、Mac、Windows、Web、Android、iOSとあらゆるプラットフォームのプログラミングビギナーに向けた書籍を執筆し続ける。
・ 近著：「Spring Boot 3 プログラミング入門」「C#フレームワーク ASP.NET Core入門.NET 7対応」「マルチプラットフォーム対応 最新フレームワーク Flutter 3入門」「見てわかるUnreal Engine 5 超入門」（秀和システム）、「Google AppSheetで作るアプリサンプルブック」「AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発」（ラトルズ）、「もっと思い通りに使うための Notion データベース・API活用入門」（マイナビ出版）

「2023年 『R／RStudioでやさしく学ぶプログラミングとデータ分析』 で使われていた紹介文から引用しています。」