内容紹介

【2日でTypeScript + Reactの苦手意識を捨てされる本】

- 「TypeScriptだけ」、あるいは「Reactだけ」にフォーカスした書籍はいくつもありますが、本書のように「TypeScriptをReactで使う」という点に重点を置いた本はほぼありません。

- 「TypeScriptをReactで使う」にフォーカスした本書で、2024年の必須スキルを身につけましょう。

- 2024年のフロントエンド開発現場で必須のTypeScript。基礎から高度な内容までを全カバー

- 「TypeScriptをReactで使う」という点に徹底フォーカス。React + TypeScript開発で必須の知識とスキルを効率的に獲得?

- 最新のReact開発環境構築ツール「React + Vite」を使用

- 「手を動かしがら学ぶ」ハンズオン形式なので、飽きづらく、最後まで読み終えられる構成

- 自信をもってReact + TypeScriptコードが書けるようになる一冊

【対象読者】

◆ 2024年のReact開発現場スタンダードのスキルを身につけたい人

◆ 理論重視ではなく、手を動かす実践ベースで学習を進めたい人

◆ Reactの基礎を学習した人

◆ Reactアプリを数回作ったことのある人

◆ TypeScriptのコードは複雑でむずかしいと感じている人

◆ TypeScript初心者〜中級者

◆ TypeScriptのコードを「なんとなく」書いている人

【発売日】

2024年3月14日

【ページ数】

本書は既刊書「はじめてつくるReactアプリ with TypeScript」の約1.7倍の分量です。

◆ 「TypeScriptマスター with React（本書）」の文字数：166, 833

◆ 「はじめてつくるReactアプリ with TypeScript」の文字数：97,919

*本書ではMacを使用しています。Windowsの方は一部表示が異なることに注意してください。

【著者について】

Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。

自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。

専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

【くわしい収録内容】

● プログラミング言語の役割／TypeScriptを使う理由／TypeScriptにむずかしさを感じる理由／JavaScriptとTypeScriptの違い／動的型付け言語と静的型付け言語／データの種類と形／オブジェクト／配列／プリミティブ／Reactの復習（function／コンポーネントの記法／分割代入）

● React + Vite + TypeScriptのセットアップ／型定義の書き方／useStateの型／propsの型／分割代入したpropsの型の記法／◆ イベントの型／イベントの型の記法／functionの型の構造／非同期処理の型／型を確認する方法／型推論／any型／複雑な構造をしたデータの型／Layoutコンポーネント／ローディングの設定／childrenの型／JSX.Element／React.ReactNode／React.ReactElement／デプロイ（Netlify）

● TypeScriptの開発環境セットアップ／TypeScriptのコンパイル方法／TypeScriptとJavaScriptのコード比較／tsconfig.jsonの設定／interfaceとtypeの違い／配列の型定義／インターセクション型／lookup型

● タプル型／ユニオン型／リテラル型／型引数／ジェネリクス／ジェネリクスの記法（Arrow function）／型ガード／ナローイング／ページ設定／useStateでオブジェクトを扱う方法／Local Storage／イベント・オブジェクトの型／ログイン状態の維持の仕組み／ログイン状態によって表示を変える／useEffectの働き／非Nullアサーション／Reactコンポーネントの汎用化／柔軟な型を定義する方法／非同期処理／型定義を共有する方法

● 型の確認方法／CSSProperties／ComponentProps／ComponentPropsWithoutRef／restオペレーター／functionの型定義／型アサーション（as）／as const／anyとunknown／Type Utility／Pick／Omit／Partial／Required／Record／ジェネリクス／インデックス・シグネチャ／enum

【目次】

◆ はじめに

本書のねらい

本書の対象読者

本書の構成

コードのダウンロードと本書で使うツール

ターミナルの使い方

Node.js

npm

VS Code

エラーが発生した場合の対処方法

◆ 第1章 TypeScriptについて知ろう

この章で学ぶこと

この章ですること

データとTypeScript

TypeScriptをむずかしいと感じる理由

TypeScriptの追加機能

Reactの予備知識（コンポーネントとfunctionの記法）

◆ 第2章 TypeScriptでReactアプリを開発しよう その1

この章で学ぶこと

この章ですること

開発ツールのインストール（React + Vite + TypeScript）

ReactコンポーネントをTypeScriptで書く

アプリの構成を確認する

イベントとfunctionに型をつける その1

イベントとfunctionに型をつける その2

複雑な構造のデータに型をつける

フォームの入力文字を消す

画像とCSSを追加する

ローディングを追加する

childrenに型をつける

アプリをオンラインで公開する（デプロイ）

◆ 第3章 TypeScriptだけを使ってみよう

この章で学ぶこと

この章ですること

TypeScriptの開発セットアップ

配列の型定義

typeとinterface

入れ子になった型定義（lookup型）

◆ 第4章 TypeScriptでReactアプリを開発しよう その2

この章で学ぶこと

この章ですること

アプリの構造の確認

ツールの準備とクリーンアップ

ページとルーティングの準備

ユーザー登録機能を開発する

ログイン機能を開発する

複数のデータを受け取るコンポーネントを開発する

柔軟な型を定義してコンポーネントを汎用化する

外部データを取得するコンポーネントを開発する

ローディングとボタンを開発する

複数の型定義をひとつのコンポーネントで使う方法

CSSと画像を追加する

アプリをオンラインで公開する（デプロイ）

◆ 第5章 TypeScriptをもっと使ってみよう

この章で学ぶこと

この章ですること

セットアップ

型の確認方法

CSSProperties

ComponentProps

引数とreturnがあるfunctionの型定義

型アサーション（as）

as const

ユーティリティタイプ（Type Utility）

anyとunknownの違い

ジェネリクス

インデックス・シグネチャ（Index Signature）

enum

あとがき

関連書籍

著者について