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

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

• 要旨（「BOOK」データベースより）

  本書は、皆さんがＴｙｐｅＳｃｒｉｐｔとＲｅａｃｔ／Ｎｅｘｔ．ｊｓの基礎をしっかり理解できるように解説し、サンプルアプリケーション開発を通じて業務にそのまま役立てられる実践的なスキルを身につけられるように執筆されています。世界共通で評価される、ＴｙｐｅＳｃｒｉｐｔやＮｅｘｔ．ｊｓを中心としたフロントエンドスキルを本書で学んでください。

• 目次

  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対応

• 内容紹介

  新しいフロントエンドの入門書決定版！
  
  本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。
  
  WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。
  高速さに裏付けされた高いUXと、開発しやすさを両立しているのが特徴です。
  
  本書では、Next.jsの開発をより快適・堅牢にするTypeScriptで開発を進めます。
  
  Next.jsによるアプリケーション開発の基礎、最新のフロントエンドやWebアプリケーションの開発方法が学べます。

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  手島 拓也(テジマ タクヤ)
  ＩＢＭやＬＩＮＥにて主にＷｅｂ製品開発を約７年間担当。その後、共同創業者兼ＣＴＯとしてタイにて起業、事業譲渡を経験。現在はシンガポールを拠点に東南アジア発のスタートアップスタジオＧＡＯＧＡＯを設立し代表を務める
  
  吉田 健人(ヨシダ タケト)
  日本経済新聞社、タイの総合商社系企業でアプリケーション開発を経験。現在はアドビ株式会社でＳｏｆｔｗａｒｅ　Ｄｅｖｅｌｏｐｍｅｎｔ　Ｅｎｇｉｎｅｅｒとして働く。ＤＸ（デジタルエクスペリエンス）系のプロダクト開発とローカリゼーションテクノロジーの研究開発に従事
  
  高林 佳稀(タカバヤシ ヨシキ)
  シンガポールの金融系スタートアップにＷｅｂフロントエンドエンジニアとして就職し、取引ツールの開発を行う。その後、フリーランスとして複数のＷｅｂアプリ開発案件に携わる。現在は医療系スタートアップのＷｅｂアプリ開発にフルスタックエンジニアとして参画しつつ、ブロックチェーンのＯＳＳプロジェクトの開発に従事

• 著者について

  手島 拓也 (テジマ タクヤ)
  手島拓也(てじまたくや)
  
  IBMやLINEにて主にWeb製品開発を約7年間担当。その後、共同創業者兼CTOとしてタイにて起業、事業譲渡を経験。現在はシンガポールを拠点に東南アジア発のスタートアップスタジオGAOGAOを設立し代表を務める。本書では1-2章を執筆。
  
  吉田 健人 (ヨシダ タケト)
  吉田健人(よしだたけと)
  
  日本経済新聞社、タイの総合商社系企業でアプリケーション開発を経験。現在はアドビ株式会社でSoftware Development Engineerとして働く。DX(デジタルエクスペリエンス)系のプロダクト開発とローカリゼーションテクノロジーの研究開発に従事。本書では5-7章を執筆。
  
  高林 佳稀 (タカバヤシ ヨシキ)
  高林佳稀(たかばやしよしき)
  
  シンガポールの金融系スタートアップにWebフロントエンドエンジニアとして就職し、取引ツールの開発を行う。その後、フリーランスとして複数のWebアプリ開発案件に携わる。現在は医療系スタートアップのWebアプリ開発にフルスタックエンジニアとして参画しつつ、ブロックチェーンのOSSプロジェクトの開発に従事。本書では3-4,7章を執筆。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 の商品スペック