新しいフロントエンドの入門書決定版！

本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。

WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。
高速さに裏付けされた高いUXと、開発しやすさを両立しているのが特徴です。

本書では、Next.jsの開発をより快適・堅牢にするTypeScriptで開発を進めます。

Next.jsによるアプリケーション開発の基礎、最新のフロントエンドやWebアプリケーションの開発方法が学べます。

1 Next.jsとTypeScriptによるモダン開発
1.1 Next.jsとTypeScript
1.2 フロントエンド開発の変遷
1.2.1 JavaScript黎明期とjQueryの人気
1.2.2 SPAの登場とMVC/MVVMフレームワーク
column. SPA普及の裏で貢献したHistory API
1.2.3 Reactの登場とコンポーネント指向・状態管理
1.2.4 Node.jsの躍進
column. CommonJSとESモジュール
column. Deno
1.2.5 AltJSの流行とTypeScriptの定番化
1.2.6 ビルドツールとタスクランナー
1.2.7 SSR/SSGの必要性
1.2.8 Next.jsの登場と受容
1.3 モダンフロントエンド開発の設計思想
1.3.1 フロントエンド技術の複雑化
1.3.2 コンポーネント指向とは
column. FluxのライブラリRedux
1.3.3 Next.jsがなぜ必要になってきているか
column. Vue.jsとNuxt.js
column. Next.jsの対応ブラウザ
column. Reactコンポーネントの復元 - Hydration
2 TypeScriptの基礎
2.1 TypeScriptの基礎知識
2.1.1 TypeScript登場の背景
2.1.2 TypeScriptとVisual Studio Code
2.1.3 TypeScriptとJavaScriptの違い
2.1.4 TypeScriptコマンドラインツールによるコンパイル
2.2 型の定義
2.2.1 変数
2.2.2 プリミティブ型
2.2.3 配列
2.2.4 オブジェクト型
2.2.5 any
2.2.6 関数
2.3 基本的な型の機能
2.3.1 型推論
2.3.2 型アサーション
2.3.3 型エイリアス
2.3.4 インタフェース
2.3.5 クラス
2.4 実際の開発で重要な型
2.4.1 Enum型
2.4.2 ジェネリック型
2.4.3 Union型とIntersection型
2.4.4 リテラル型
2.4.5 never型
2.5 TypeScriptのテクニック
2.5.1 Optional Chaining
2.5.2 Non-null Assertion Operator
2.5.3 型ガード
2.5.4 keyofオペレーター
2.5.5 インデックス型
2.5.6 readonly
2.5.7 unknown
2.5.8 非同期のAsync/Await
2.5.9 型定義ファイル
2.6 TypeScriptの開発時設定
2.6.1 tsconfig.json
2.6.2 Prettier
2.6.3 ESLint
2.6.4 コンパイルオプション
column. コーディングスタイルガイド
column. TypeScriptのコンパイラ
column. import type
3 React/Next.jsの基礎
3.1 React入門
3.1.1 Reactの始め方
3.1.2 Reactの基本
3.1.3 Reactのコンポーネントを作成する
3.2 Reactにおけるコンポーネント
3.2.1 React要素
3.2.2 コンポーネント（Reactコンポーネント）
column. 関数コンポーネントとクラスコンポーネント
3.3 Reactにおける型
column. FCとVFC
3.4 Context（コンテキスト）
3.5 React Hooks（フック）
3.5.1 useStateとuseReducer―状態のフック
3.5.2 useCallbackとuseMemo―メモ化のフック
3.5.3 useEffectとuseLayoutEffect―副作用のフック
column. React18におけるuseEffect・useLayoutEffectの挙動
3.5.4 useContext―Contextのためのフック
3.5.5 useRefとuseImperativeHandle―refのフック
3.5.6 カスタムフックとuseDebugValue
3.6 Next.js入門
3.6.1 プロジェクトのセットアップ
3.6.2 プロジェクトの基本的な構成
3.7 Next.jsのレンダリング手法
3.7.1 静的サイト生成（SSG）
3.7.2 クライアントサイドレンダリング（CSR）
3.7.3 サーバーサイドレンダリング（SSR）
3.7.4 インクリメンタル静的再生成（ISR）
3.8 ページとレンダリング手法
3.8.1 Next.jsのページとデータ取得
3.8.2 SSGによるページの実装
3.8.3 getStaticPropsを用いたSSGによるページの実装
3.8.4 getStaticPathsを使った複数ページのSSG
column. useRouter―ルーティングのためのフック
3.8.5 SSRによるページの実装
3.8.6 ISRによるページの実装
3.9 Next.jsの機能
3.9.1 リンク
3.9.2 画像の表示
3.9.3 APIルート
3.9.4 環境変数/コンフィグ
3.9.5 React/Next.jsとライブラリの互換性
4 コンポーネント開発
4.1 Atomic Designによるコンポーネント設計
4.1.1 Presentational ComponentとContainer Component
4.1.2 Atomic Design
4.1.3 Atoms
4.1.4 Molecules
4.1.5 Organisms
4.1.6 Templates
4.1.7 Pages
4.2 styled-componentsによるスタイル実装
4.2.1 styled-componentsをNext.jsに導入
4.2.2 styled-componentsを用いたコンポーネント実装
4.3 Storybookを使ったコンポーネント管理
4.3.1 Storybookの基本的な使い方
4.3.2 Actionを使用したコールバックのハンドリング
4.3.3 Controlsタブを使ったpropsの制御
4.3.4 アドオン
4.4 コンポーネントのユニットテスト
4.4.1 Reactにおけるユニットテスト
4.4.2 テスト環境構築
4.4.3 React Testing Libraryによるコンポーネントのユニットテスト
4.4.4 非同期コンポーネントのユニットテスト
column. Next.js 11以前のstyled-components/jest導入
5 アプリケーション開発1～設計・環境設定～
5.1 本章で開発するアプリケーション
5.1.1 アプリケーションの仕様
5.1.2 アプリケーションのアーキテクチャ
5.2 開発環境構築
5.2.1 Next.jsのプロジェクト作成
5.2.2 styled-componentsの設定
5.2.3 ESLintの設定
5.2.4 Storybookの設定
5.2.5 React Hook Formの導入
5.2.6 SWRの導入
5.2.7 React Content Loaderの導入
5.2.8 Material Iconsの導入
5.2.9 環境変数
5.2.10 テスト環境構築
5.2.11 JSON Serverの設定
5.2.12 CSS in JSライブラリ
6 アプリケーション開発2～実装～
6.1 アプリケーションアーキテクチャと全体の実装の流れ
6.2 APIクライアントの実装
6.2.1 fetcher関数
6.2.2 APIクライアントの関数
6.2.3 アプリケーションで使用されるデータの型
6.2.4 開発環境のためのAPIリクエストプロキシ
6.3 コンポーネント実装の準備
6.3.1 レスポンシブデザインに対応したコンポーネント
6.3.2 Wrapperコンポーネントの実装
6.4 Atomic Designによるコンポーネント設計の実施
6.4.1 Atomic Designに沿ってコンポーネントを分割する
6.5 Atomsの実装
6.5.1 ボタン―Button
6.5.2 テキスト―Text
6.5.3 シェイプイメージ―ShapeImage
6.5.4 テキストインプット―Input
6.5.5 テキストエリア―TextArea
6.5.6 バッジ―Badge
6.6 Moleculesの実装
6.6.1 チェックボックス―Checkbox
6.6.2 ドロップダウン―Dropdown
6.6.3 ドロップゾーン―Dropzone
6.6.4 イメージプレビュー―ImagePreview
6.7 Organismsの実装
6.7.1 カート商品―CartProduct
6.7.2 グローバルスピナー―GlobalSpinner
6.7.3 ヘッダー―Header
6.7.4 商品カード―ProductCard
column. データURIスキーム
6.7.5 商品投稿フォーム―ProductForm
6.7.6 サインインフォーム―SigninForm
6.7.7 ユーザープロファイル―UserProfile
6.8 Templatesの実装
6.8.1 レイアウト―Layout
6.9 ページの設計と実装
6.9.1 サインインページ
6.9.2 ユーザーページ
6.9.3 トップページ
6.9.4 検索ページ
6.9.5 商品詳細ページ
6.9.6 買い物カートページ
6.9.7 出品ページ
6.10 コンポーネントのユニットテストの実装
6.10.1 ボタンのユニットテスト
6.10.2 ドロップダウンのユニットテスト
6.10.3 ドロップゾーンのユニットテスト
6.10.4 ヘッダーのユニットテスト
6.10.5 サインインフォームのテスト
6.10.6 商品投稿フォームのテスト
7 アプリケーション開発3～リリースと改善～
7.1 デプロイとアプリケーション全体のシステムアーキテクチャ
7.2 Heroku
7.3 Vercel
7.3.1 Vercelへのアプリケーションのデプロイ
7.4 ロギング
column. ログレベル
7.5 SEO
7.5.1 メタタグ
7.5.2 パンくずリスト
7.5.3 sitemap
7.5.4 robots.txt
7.6 アクセシビリティ
7.6.1 セマンティック
7.6.2 補助テキスト
7.6.3 WAI-ARIA
7.7 セキュリティ
7.7.1 フロントエンド開発における脆弱性とその対策
column. CSRF
column. Permissions-Policy
column. X-XSS-Protectionヘッダー
column. セキュリティテスト
column. Next.jsのバックエンドの考え方
column. Next.jsの認証
Appendix Next.jsのさらなる活用
A.1 決済ツールStripe
A.1.1 Stripeのセットアップ
A.1.2 Stripe APIの利用
A.1.3 Stripeの公式ドキュメント
A.2 StoryShots―UIスナップショットテスト
A.2.1 StoryShotsとは
A.2.2 storyshots-puppeteer―スナップショットイメージによるUIテスト
A.3 AWS AmplifyへのNext.jsアプリケーションのデプロイ
A.3.1 Next.jsアプリケーションのAWS Amplifyへのデプロイ
A.3.2 SSGを使用したNext.jsアプリケーションのAWS Amplifyへのデプロイ
A.4 国際化ツールi18n
A.4.1 パスによる言語ルーティング
A.4.2 next-i18nを使ったテキストのi18n対応

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

Node.jsの基本からWebアプリの開発、デプロイまでを網羅！
Node.jsの入門書。対象読者は、フロントエンド開発の知識はあってもサーバーサイド開発は知らないエンジニアや他言語の経験はあってもNode.jsは触ったことがないプログラマー。本書ではターミナルのプロンプトにコマンドを入力してその反応を確認したり、簡単なスクリプトをNode.js環境で実行したりしながら、Node.jsプログラミングの基本からWebアプリケーションの開発、テスト、デプロイまでをハンズオン形式で学びます。また、コードの背景にある設計思想や、プログラムの挙動のしくみについてもしっかり掘り下げます。本書のゴールは、読者がNode.jsの全体像を掴み、業務レベルでのアプリケーション開発に対応可能な知識を身につけることです。

ハンズオンNode.js

Node.jsの入門者向け書籍です。2018/8に出た「Node.js超入門 第2版」の改訂版です。改訂内容は新バージョン14対応、データベースはSQLite3、ORMはSequelizeに変更しています。CSS関連はBootstrap利用、Expressは最初からGeneratorを使う形で解説しています。
対象読者はJavaScriptの入門書を読み終えた層ですが、その経験がない層も読めるよう配慮し巻末にこの本を読むのに必要なJavaScriptの知識を最低限解説しています。Node.js未経験者から、既存の入門書などで挫折した人までより多くの人がついていけるよう、手取り足取り教える内容です。

順位	3位
総合点	109点
Googleの検索結果での点数	107点
Twitterでの点数	2点

【express.js】ハンズオンNode.jsの評価
2022-07-18更新

express.js分野での評価

【express.js】ハンズオンNode.jsの評価2022-07-18更新

express.js分野での評価

【express.js】ハンズオンNode.jsの評価
2022-07-18更新