【初級者向け】 TypeScript と React/Next.js でつくる実践 Web アプリケーション開発

以下の書籍を読み、現役の自称フルスタックエンジニア（よわ）がレビューさせていただきます。

ちなみに私は、フロントの実務経験は従来が半年、モダンで 1 年未満で、約 1 年半くらいで基礎はわかっているかな程度レベルでの感想になります、ご理解下さい。

概要

タイトルにもある通り、「実践 Web アプリケーション開発」と記載されていますが、モダンな技術初学者にとってはとっつきやすい内容でした。
もちろん最低限の HTML,CSS,JavaScript が全く分からない人には厳しいです。。
本書では、前半は React/Next.js と TypeScript を基礎からわかりやすくまとめられていて、後半は実際にアプリケーション開発に進む形になります。
上記の技術を組み合わせた開発を取り入れたいや学習したい方にはバッチリおすすめ本だと思います！

扱う内容

• フロントエンド技術についての歴史 なぜ進化していったか
• TypeScript の基礎
• React の基礎
• Next.js の基礎
• コンポーネント概念、設計
• 実際に Web アプリケーションを開発する
• 実装以降のテスト、リリースまで
• Web セキュリティやログ管理など

良かったところ

序盤はモダンなフロントエンド技術が生まれた背景が描かれており、なぜ活用した方がいいか紹介されています。
これは技術選定時や社内でモダンフロントを広めたい場合にも活用できる内容だと思いました。

新しい技術が生まれる時って、従来の問題の課題解決のために生まれていることが多いです。
React が生まれた理由はコーディングで抱える問題、保守性の欠如、互換性問題などなどがあります。
TypeScript は Javascript のには型定義(動的型付け言語)がなかったため、可読性も落ち、実行されるまでエラーか判断できない部分を解消しました。
Next.js は React の抱える描画問題、SEO などを解決するために作られました。

こういった背景を理解しておくことによって、より深くまで理解できるかと思います。

Next.js には SPA・SSR・SSG・CSR・ISR というようなレンダリング方式が存在しています。
それぞれアプリケーションの用途によって最適なレンダリングをすることによってパフォーマンスが変わってきます。
ここでは詳しく説明しませんが、この辺についてもしっかり図で説明されていたのがわかりやすかったです。

また、コンポーネントやスタイル、テストについて、推奨化されているものを紹介していて、自分はベストプラクティスを追い求めるので、とても嬉しかったです。
モダンフロントの場合のセキュリティ対策やログ出力も最後の方にまとめられていて、網羅的で良かったです。
あまり意識しなくてもある程度の対策は React がやってたりするらしいです。

さらに。。なんと Youtube でオンラインセミナーの動画が公開されています！
あとGitHubソースも公開されています。

TypeScript と React/Next.js でつくる実践 Web アプリケーション開発

悪かったところ

実際のアプリケーション開発部分は、画面＋コードの羅列だったので、行ったり来たりで読みづらい部分はあった。が、どの書籍にも言えることなので、ここはいつも同じ感想になる。→ なのでソースコードを見ながらするとより理解できると思います。

最新アップデート版の AppRouter などは記載されていないので、改正版を待った方がいいかも知れません。
（フロントエンド技術のアップデートは本当に早すぎてついていくのが大変）

学んだこと

自分が知りたかった、モダンフロントでの、Jest を使ったテスト、セキュリティ対策などが知れました。
特に StoryBook でコンポーネントを管理する方法は使えそうだなと感じました。
また、以下のコンポーネント思想による設計を学ぶことができた。

まとめ

Next.js を少し触ったことがある私からすると、なんて多機能なんだ、扱うの大変。という印象ですが、今回この本を読んで散りばめられた知識がまとまりました笑
それほど網羅的に、簡潔にまとめられていました。