📌 新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース

React + TypeScript新刊書リリース

React + TypeScriptの新刊書を本日リリースしました。

私はすでに数冊、ビギナー向けのReact + TypeScript入門書（下掲）を書いていますが、本書はそれらを終えた方が次に読むのに最適な一冊です。

特に、先月リリースのReactの全範囲をカバーした「Reactマスター Zero To Hero」の次に読む本としてぴったりの内容です。

Reactマスター Zero To Hero：自信をもってReactコードが書けるようになる本

【JavaScript／Reactの基礎から発展的内容まで全範囲を網羅。自信をもってReactを書けるようになる本】

販売ページに移動する

本書も好評のハンズオン（作りながら学ぶ）形式で進み、React + TypeScriptアプリを2つ開発します。

TypeScriptだけに焦点をしぼった章もあります。

---

本書は現在下記4つのプラットフォームからご購入いただけます。

🔷BASEショップ：monotein.base.shop

🔷note：note.com/monotein

🔷楽天：books.rakuten.co.jp

🔷Booth：monotein.booth.pm

*各プラットフォームの販売手数料が異なるため、価格も異なります。BASEショップがもっとも安くご購入いただけます。

Reactエンジニアに必須となったTypeScriptスキル

3、４年ほど前まで、TypeScriptはオプション的なスキル、いわば「知っていたらベター」というものでした。

しかし今では、フロントエンド・エンジニアならば知っておかなければならない必須スキルになっています。

これはReact開発において特に顕著で、企業案件や商業目的のReactアプリではTypeScriptを使わないケースの方が珍しいでしょう。

企業の求人などを見ても、「Reactだけ」というケースはほとんど見られず、「TypeScript」がほぼ必ず書かれる状況になっています。

【試し読み】 monotein-master-books-reading.netlify.app

本書の特徴（TypeScript + Reactにフォーカス）

そうはいっても、ビギナーがReact + TypeScript開発に自ら手を伸ばすことには難しい事情もあります。

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

TypeScriptの機能の中には「Reactでよく使うもの」と「Reactではほとんど使わないもの」があり、TypeScriptだけを分けて学ぶことは非効率的です。

本書は「TypeScriptをReact開発に使う」という点を、最初から最後まで重視しています。

扱う内容も、基礎の基礎から発展的内容まで広範囲をカバーしています。

そのため、これまでJavaScriptでしかReactを書いたことのなかったビギナーの人でも、本書読了後には自信をもってTypeScript + Reactアプリを開発できるようになります.

本書の構成

本書は全5章構成です。

---

🔸1章：イントロダクション

🔸2章：1つの目のReact + TypeScriptアプリ開発（Viteを使用）

🔸3章：TypeScriptだけで開発

🔸4章：2つの目のReact + TypeScriptアプリ開発（Viteを使用）

🔸5章：補足事項

---

実践的であることを重視する本書のメインパートは、第2、4章のReact + TypeScript開発です。

ここで、「なぜTypeScriptだけを扱う章（3章）が最初に来ていないのか」と疑問に思う人がいるかもしれません。

これには理由があります。

本書を読む読者の目標は、「TypeScriptだけを使って開発したい」ではなく「TypeScriptとReactを使って開発したい」という点にあると思います。

「React + TypeScript」という目標地点の高さを先に確認しておけば、それが思っていたほどは高くないことに気がつけ、その道のりの途中にある「TypeScript」にも心に余裕を持った状態でアプローチできるでしょう。

対象読者

TypeScriptの知識や経験は必要ありません。

Reactの深い知識や高度なスキルも必要ありません。

しかし、Reactアプリを少なくとも数回は作ったことのある人が本書の対象読者です。

具体的な知識としては以下のものになります。

---

• Reactアプリの構造
• state
• props
• イベント
• APIからのデータ取得
• レンダリング
• コンポーネント／function

---

React + TypeScript入門者から中級者の人にもっとも学びがある内容になっています。

React + TS徹底フォーカス：TypeScriptマスター with React

【TypeScriptをReactでつかうことに徹底フォーカス。2024年の開発現場で必須のスキルを最短で学べる一冊】

販売ページに移動する

本書は現在下記4つのプラットフォームからご購入いただけます。

🔷BASEショップ：monotein.base.shop

🔷note：note.com/monotein

🔷楽天：books.rakuten.co.jp

🔷Booth：monotein.booth.pm

*各プラットフォームの販売手数料が異なるため、価格も異なります。BASEショップがもっとも安くご購入いただけます。

本書を書いた理由

私が最初のReact + TypeScript入門書、『はじめてつくるReactアプリ with TypeScript』を書いたのは3年前です。

はじめてつくるReactアプリ with TypeScript

【2024年4月新版発売。HTMLとCSSの知識だけで始められるReact + TypeScript開発。好評なハンズオン形式でスイスイ進める】

2079円 → 0円

Amazonのページに移動する

私の著作の中で最も読まれているのが、この本になります。

しかし扱っている内容は初歩的なものなので、これよりももっと深くTypeScriptに触れた本を書きたいと思っていたこと、そして次に触れますが、TypeScriptに苦手意識を持つ人が意外に多いことが「React + TS徹底フォーカス：TypeScriptマスター with React」を書いた理由です。

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

TypeScriptですることは実は非常に単純です。

データの種類と形を明示するだけです。

覚えることもたいしてありません。

それでもTypeScriptに馴染みにくさや難しさを感じるビギナーが多い理由は、コードの分量が多く、特殊な記法が使われているからです。

そこを乗り越えるために必要なのは、ステップ・バイ・ステップでコードをひとつひとつ解説するやさしい教材になります。

本書を読んだあと、読者が「TypeScriptって意外に簡単だな」と感じ、自らReact + TypeScript開発を始めていく前向きな気持ちを得られたのなら、本書のねらいは成功したといえるでしょう。

---

*本書は現在のところAmazon Kindle版での発売予定はありません。下記サイトより直接ご購入ください。PDF版（A5／全223ページ）のダウンロードとなります。

React + TS徹底フォーカス：TypeScriptマスター with React

【TypeScriptをReactでつかうことに徹底フォーカス。2024年の開発現場で必須のスキルを最短で学べる一冊】

販売ページに移動する

---

本書は現在下記4つのプラットフォームからご購入いただけます。

🔷BASEショップ：monotein.base.shop

🔷note：note.com/monotein

🔷楽天：books.rakuten.co.jp

🔷Booth：monotein.booth.pm

*各プラットフォームの販売手数料が異なるため、価格も異なります。BASEショップがもっとも安くご購入いただけます。

文字数と分量

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

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

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

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

【試し読み】 monotein-master-books-reading.netlify.app

内容一覧

◆ プログラミング言語の役割／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

目次

◆ はじめに

P.4 ― 本書のねらい
P.4 ― 本書の対象読者
P.5 ― 本書の構成
P.6 ― コードのダウンロードと本書で使うツール
P.6 ― ターミナルの使い方
P.7 ― Node.js
P.7 ― npm
P.8 ― VS Code
P.8 ― エラーが発生した場合の対処方法

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

P.9 ― この章で学ぶこと
P.9 ― この章ですること
P.10 ― データとTypeScript
P.12 ― TypeScriptをむずかしいと感じる理由
P.13 ― TypeScriptの追加機能
P.16 ― Reactの予備知識（コンポーネントとfunctionの記法）

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

P.21 ― この章で学ぶこと
P.22 ― この章ですること
P.23 ― 開発ツールのインストール（React + Vite + TypeScript）
P.27 ― ReactコンポーネントをTypeScriptで書く
P.40 ― アプリの構成を確認する
P.45 ― イベントとfunctionに型をつける　その1
P.53 ― イベントとfunctionに型をつける　その2
P.61 ― 複雑な構造のデータに型をつける
P.70 ― フォームの入力文字を消す
P.72 ― 画像とCSSを追加する
P.74 ― ローディングを追加する
P.76 ― childrenに型をつける
P.84 ― アプリをオンラインで公開する（デプロイ）

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

P.85 ― この章で学ぶこと
P.85 ― この章ですること
P.86 ― TypeScriptの開発セットアップ
P.91 ― 配列の型定義
P.92 ― typeとinterface
P.94 ― 入れ子になった型定義（lookup型）

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

P.95 ― この章で学ぶこと
P.95 ― この章ですること
P.96 ― アプリの構造の確認
P.101 ― ツールの準備とクリーンアップ
P.102 ― ページとルーティングの準備
P.107 ― ユーザー登録機能を開発する
P.119 ― ログイン機能を開発する
P.127 ― 複数のデータを受け取るコンポーネントを開発する
P.144 ― 柔軟な型を定義してコンポーネントを汎用化する
P.150 ― 外部データを取得するコンポーネントを開発する
P.158 ― ローディングとボタンを開発する
P.165 ― 複数の型定義をひとつのコンポーネントで使う方法
P.178 ― CSSと画像を追加する
P.181 ― アプリをオンラインで公開する（デプロイ）

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

P.182 ― この章で学ぶこと
P.182 ― この章ですること
P.183 ― セットアップ
P.184 ― 型の確認方法
P.185 ― CSSProperties
P.188 ― ComponentProps
P.191 ― 引数とreturnがあるfunctionの型定義
P.193 ― 型アサーション（as）
P.195 ― as const
P.199 ― ユーティリティタイプ（Type Utility）
P.203 ― anyとunknownの違い
P.205 ― ジェネリクス
P.218 ― インデックス・シグネチャ（Index Signature）
P.220 ― enum
P.221 ― あとがき
P.223 ― 関連書籍
P.224 ― 著者について

React + TS徹底フォーカス：TypeScriptマスター with React

【TypeScriptをReactでつかうことに徹底フォーカス。2024年の開発現場で必須のスキルを最短で学べる一冊】

販売ページに移動する

本書は現在下記4つのプラットフォームからご購入いただけます。

🔷BASEショップ：monotein.base.shop

🔷note：note.com/monotein

🔷楽天：books.rakuten.co.jp

🔷Booth：monotein.booth.pm

*各プラットフォームの販売手数料が異なるため、価格も異なります。BASEショップがもっとも安くご購入いただけます。