【2022年】Reactの参考書「おすすめ8選/人気本BEST10」

ReactはJavaScriptのフロントエンド開発用フレームワーク。

日本ではVue.jsが人気ですが、世界的には圧倒的にReactが人気No.1です。

実際、TypeScriptへの対応状況や、React Nativeによるスマホ開発、React Hooksの拡張など、利点も多く今後も世界的に人気であることは間違いないでしょう。

そんな現人気・将来性も高いReactの参考書を人気・評判とともに紹介していきまっす。

 

発売したて・発売予定の新書をピックアップ
技術書は情報の鮮度も重要、人気ランキングの前に新しい書籍もチェックしておきましょう。




 

 

Kindle Unlimited 1ヶ月無料

kindle_unlimited_sale
 
  • 1ヶ月無料で読み放題
  • 1ヶ月以内でも解約可能
  • 解約後も1ヶ月まで利用可


 

React本「人気ランキング」

Reactの今売れ筋本を人気ランキングで一覧したのが以下。

ランキングは日々更新されていますので、最新の人気が反映されています。

 

(2022/11/29 12:04 更新)
Rank製品価格
1
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
発売日 2022/07/25
手島 拓也, 吉田 健人, 高林 佳稀 (技術評論社)
総合評価
(4.1)
3,498円
(+105pt)
3,498円
3,498円
3,498円
2
AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発...
発売日 2022/09/05
掌田 津耶乃 (ラトルズ)
総合評価
(3.7)
2,970円
1,485円
2,970円
3
モダンJavaSciptの基本から始める React実践の教科書(最新ReactHooks対応)...
発売日 2021/09/17
じゃけぇ(岡田 拓巳) (SBクリエイティブ)
総合評価
(4.3)
2,860円
1,430円
2,860円
2,860円
4
モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)...
発売日 2021/09/17
じゃけぇ(岡田 拓巳) (SBクリエイティブ)
総合評価
(4.3)
2,860円
2,574円
2,860円
5
Vue 3 フロントエンド開発の教科書
発売日 2022/09/26
WINGSプロジェクト 齊藤新三 (技術評論社)
総合評価
(4)
3,960円
(+119pt)
3,960円
3,960円
6
Bootstrap 5 フロントエンド開発の教科書
発売日 2022/01/07
WINGSプロジェクト 山内 直 (技術評論社)
総合評価
(4.2)
3,828円
(+190pt)
3,637円
(+162pt)
3,828円
3,828円
7
作って学ぶ Next.js/React Webサイト構築
発売日 2022/07/30
エビスコム (マイナビ出版)
総合評価
(4.3)
3,509円
(+105pt)
3,158円
3,509円
3,509円
8
フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装...
発売日 2021/01/12
安達稜, 武田諭 (秀和システム)
総合評価
(4.1)
3,080円
2,495円
2,772円
3,080円
9
3,080円
2,772円
3,080円
3,080円
10
Webフロントエンド ハイパフォーマンス チューニング
発売日 2017/05/26
久保田 光則 (技術評論社)
総合評価
(4.4)
2,948円
2,801円
2,948円
2,948円
11
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス...
発売日 2021/08/06
Alex Banks, Eve Porcello (オライリージャパン)
総合評価
(4.2)
3,740円
(+112pt)
3,740円
3,740円
12
React+Electronで作る デスクトップアプリ開発入門
発売日 2022/10/18
大西武 (シーアンドアール研究所)
3,223円
2,901円
2,901円
13
React.js&Next.js超入門 第2版
発売日 2021/02/27
掌田津耶乃 (秀和システム)
総合評価
(3.7)
3,300円
2,970円
2,970円
3,300円
14
基礎から学ぶ React/React Hooks
発売日 2021/08/24
asakohattori (シーアンドアール研究所)
総合評価
(4)
3,762円
(+113pt)
3,386円
3,386円
3,762円
15
3,374円
2,475円
2,750円
220円

 

以降でおすすめ・注目の本をピックアップしていきまっす。

ちなみに、Kindle版のある本ならサンプル送信で試し読み可能。大概目次まで見れるので、内容の概要もつかめるので、サンプル試読おすすめです。

 

Reactおすすめの入門書

Reactをこれから学ぶなら、以下の書籍で学ぶのがおすすめです。

特に 「React.js & Next.js超入門」 は現状Reactの入門にはベストの1冊。React入門から発展向けのNext、Reduxについても学べるので、幅広くReact活用法を学べます。

React.js & Next.js超入門

React.js & Next.js超入門
(著)掌田津耶乃
発売日 2019/08/30
総合評価
(4)
(2022/11/29 12:08時点)
最近のWebサイトを見ると、まるで普通のアプリケーションのように自在に画面が変化します。これはWebサイトをJavaScriptで操作しているからです。一見、難しそうですが、Reactと呼ばれるフレームワークを使えば簡単に本格的なWeb開発ができます。本書は、リアクティブと呼ばれる機能を実現するフレームワーク「React」の使い方とReactを強化するRedux、Next.jsなどのプログラムの基本を解説した入門書です。いますぐはじめましょう!

※この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
 
内容サンプル

(引用元Amazon)

 
内容サンプル

(引用元Amazon)

 
React.js & Next.js超入門
発売日 2019/08/30
(2022/11/29 12:08時点)

  

React開発 現場の教科書

React開発 現場の教科書
(著)石橋 啓太
発売日 2018/03/23
総合評価
(3.7)
(2022/11/29 12:08時点)
Atomic DesignによるモダンUIコンポーネント開発

JavaScriptライブラリReact + Atomic Designの導入によるコンポーネントの設計から実装まで。
現場で使える、実務に役立つ知識とノウハウを習得したいエンジニアのための、React実践書です。
Reactはフロントエンド開発に革新的な影響を与えました。従来のJavaScriptライブラリと比較して、構築へのアプローチが変わり、今後のUI開発に対する大きなヒントとなり得ます。本書はその「今後のUI開発」の視点から、Reactを解説していきます。

Chapter01「Web開発の動向」は現在のWeb開発の最新動向を解説し、「品質」「コスト」「スケジュール」の観点から、開発プロジェクト成功のために「設計」が必要で、重要であることを確認します。
Chapter02「Reactの基本」は、Reactの概要から実行させるための環境構築、記述方法、JSXなどを解説します。
Chapter03「Atomic Design」では、注目度の高いUIデザインの設計手法であるAtomic Designを解説します。論理的な観点でUIを俯瞰して、抽象化と具象化をポイントに、今後求められるWeb開発に向けたデザインの設計を解説します。
Chapter04「ソースコードのビルド」ではビルド作業の実際を解説します。モジュールバンドラーwebpackなどの使い方も解説します。
Chapter05「コンポーネントの実装」では、今後のUI開発の基本であるコンポーネントに関して、実装方法を解説します。
Chapter06「CSSの実装」では、UI構築において重要な要素となるCSSによるスタイリングについて、構造化設計に沿った実装方法を紹介します。CSS in JSやPostCSSなどを取り上げます。
Chapter07「ロジックの実装」では、UIロジックの根幹にあたる状態管理に焦点を定め、Reactを強力に支援するReduxアーキテクチャを例に、組み込み方法とその構造を解説します。
Chapter08「プロダクトの品質」では、さまざまな視点から品質向上ならびに品質維持に繋がる手法と実現するツールを紹介します。テストフレームワークJestやenzymeを使ったテストの方法、Lintツールによる構文チェック、flowを使った型チェッカー、スタイルガイドツールStorybookの活用などを解説しています。

リアルな開発現場から生まれた、実践ノウハウを凝縮した1冊です。

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
目次
Chapter 1 Web開発の動向
1 現在の課題とその背景
   1 Webフロントエンドを取り巻く環境
   2 デザイナーとエンジニア
   3 開発現場の悩み
   4 フロントエンジニアの理想像
2 開発者が考えるべきこと
   1 ブラウザ実装
   2 HTMLとCSS
   3 CSSが抱える問題
3 設計の必要性
   1 今までのWebフロントエンドコード
   2 コードは生き物
Chapter 2 Reactの基本
1 Reactの概略
   1 Reactの特徴
   2 React推奨の理由
2 基本構文と実行環境
   1 ECMAScript
   2 開発環境の準備
   3 オンラインエディタCodeSandbox
3 JSX
   1 JSXとは
   2 Babel
4 Reactの記述方法
   1 Components
   2 render
   3 Functional Components
   4 Props
   5 State
   6 イベント
   7 key
5 ライフサイクル
   1 Reactにおけるライフサイクル
   2 処理の流れ
   3 Functional Componentsのライフサイクル
   [コラム]Babel 7へのアップデート
Chapter 3 Atomic Design
1 Atomic Designとは
   1 Atomic Designの基本概念
   2 Atoms
   3 Molecules
   4 Organisms
   5 Templates
   6 Pages
2 メリット
   1 デザインシステム
   2 開発におけるデザインの基準
3 コンポーネント開発のUIデザイン
   1 スタイリング
   2 レイアウト
   3 トーン&マナー
4 Reactとの相性
   1 肥大化しないコンポーネント
   2 拡張性
   [コラム]Fragments
Chapter 4 ソースコードのビルド89
1 ビルドする理由
   1 Node.js
   2 人間がやるべきこと・機械にやらせること
   3 開発環境の拡張性
2 webpack
   1 webpackの基本
   2 webpackのセットアップ
   3 webpack.config.js
   4 ローダー
   5 プラグイン
3 webpack-dev-server
   1 基本的な使い方
   2 Hot Module Replacement
Chapter 5 コンポーネントの実装
1 ベストプラクティス
   1 PresentationalとContainer
   2 データの反映
   3 Local State
2 コンポーネントレベル
   1 Atomic Designとの照合
   2 Molecules・OrganismsとTemplates・Pages
   3 実運用と妥協点
3 プロジェクト構成
   1 コンポーネントディレクトリ
   2 UIライブラリの活用
4 サーバーサイドレンダリング
   1 サーバーサイドレンダリングとは
   2 Reactでのサーバーサイドレンダリングの実践
Chapter 6 CSSの実装
1 コンポーネント化とCSS
   1 従来のアプローチ
   2 解決すべき課題
2 CSS in JS
   1 CSS in JSの基本概念
   2 CSS modules
   3 styled-components
   4 styled-jsx
3 CSSの分離
   1 依存性の分離
   2 ローカルスコープの実現
   3 PostCSS
   [コラム]Portals
Chapter 7 ロジックの実装
1 コンポーネントの状態管理
   1 フロントエンドが持つ状態とは
   2 従来の状態管理とFlux
2 Reduxの基本
   1 基本概念と3原則
   2 実装
   3 データフロー
3 Reduxの実践
   1 Reactコンポーネントとの接続
   2 Middleware
   3 Storeを元にしたUI制御
4 非同期処理
   1 Reduxにおける遅延処理
   2 redux-thunk
   3 redux-saga
   [コラム]Error Boundary
Chapter 8 プロダクトの品質
1 品質の維持
   1 プロダクトの品質
   2 品質維持の必要性
   3 品質維持のポイント
2 コンポーネントのテスト
   1 テストフレームワーク
   2 Reactコンポーネントのテスト
   3 enzyme
   4 enzymeのレンダリング処理
3 Lint
   1 ESLint
   2 ESLintのセットアップ
   3 Rule
   4 stylelint
4 flow
   1 型の恩恵
   2 flow
   3 flowの実践
   4 型指定の応用と型定義
5 スタイルガイド
   1 スタイルガイドの必要性
   2 Storybook
   3 Storybookのセットアップ
   4 ストーリーファイルの作成
   5 アドオン

↓全て表示↑少なく表示
Users Voice
網羅的な割に説明丁寧で、フロントエンドの世界に入りたての時読みたかった。
これで全体像掴んで個々の技術要素抑えていく感じの使い方になりそう。
現時点で割とトレンド変化してるとはいえ、初心者にオススメできそうな本。 (参考:honto)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
著者略歴

著:石橋 啓太
1987年生まれ。ウェブサイトデザインやHTML・CSSを中心にデザイナーとして4年ほど経験後、2014年5月に株式会社DMM.comラボ入社。
ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。現在では各種イベントでの登壇やOSSへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なWeb開発を研究している。
サービスやガジェットなど新しいものが好き。梨とビールと音楽が好き(楽器は弾けない)。

編:丸山 弘詩
書籍編集者。早稲田大学政治経済学部経済学科中退。国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダクトディレクション、開発マネージメントなどを手掛ける。編集した書籍に『ブロックチェーンアプリケーション開発の教科書』『ビッグデータ分析・活用のためのSQLレシピ』(マイナビ出版)など多数。


↓全て表示↑少なく表示

  

作りながら学ぶReact入門

作りながら学ぶReact入門
(著)吉田裕美
発売日 2018/03/09
総合評価
(3.6)
(2022/11/29 12:08時点)
2013年にFacebook社によって公開されたJavaScriptライブラリーがReact(React.js)です。仮想DOMによる高速表示、コンポーネント指向による高いメンテナンス性といった特長からFacebookだけでなく、Instagram、Airbnbなどの大規模Webサービスでも採用されています。本書は、簡単なじゃんけんアプリを作りながら学べるReactの入門書です。開発環境構築も詳述しましたので、JavaScript(ES6)への移行を目指す人にも最適です!

※この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
 
内容サンプル

(引用元楽天Books)

 
目次
1 はじめに
2 モダンJS開発環境の構築
3 モダンJS開発環境の解説
4 ES6
5 JSX
6 コンポーネント
7 コンポーネントの応用
8 テスティング
9 さらに学ぶなら
Users Voice
React初心者が最初に読む本としては、必要最低限のことが書いてあるのかな。
実際にReactを使う場面が訪れたら再読しようと思う。 (参考:honto)

↓全て表示 ↑少なく表示
環境構築系は割と詳しく書いてある。
著者がGithubを公開してるので、そこからコピペしたりも可能 (参考:honto)

↓全て表示 ↑少なく表示
React初心者が最初に読む本としては、必要最低限のことが書いてあるのかな。
実際にReactを使う場面が訪れたら再読しようと思う。 (参考:楽天)

↓全て表示 ↑少なく表示
内容サンプル

(引用元楽天Books)

 
著者略歴
吉田裕美(ヨシダユウミ)
CADのベンチャー企業でCADのコア部分の開発に従事したあと、2000年に独立し有限会社EY-Officeを設立。WebやiOSアプリの受託開発を開始し多数のWebアプリやiOSアプリを開発、また独自のプログラム開発教育も行うようになる。ここ数年はRuby on Rails、iOS、Reactを使ってアプリの開発や教育を行っている(本データはこの書籍が刊行された当時に掲載されていたものです)

↓全て表示↑少なく表示

  

 

React Nativeでスマホアプリ開発の参考書

ReactはWebフロントエンドフレームワークですが、スマホアプリなどのUIでも同様の考え方ができますよね。

そこで、ReactはスマホのNativeアプリ(Webじゃない)開発向けのフレームワークとして公式に「React Native」として展開しています。

React Nativeを使うことで、Android、iOSなどのUIコンポーネントの差異を吸収してくれるので、簡単にマルチプラットフォーム向けスマホアプリ開発が可能。

Webと同様の知識が使える、マルチプラットフォーム対応できる、といったことで人気も高まっているReact Native、その参考書が以下です。

今なら情報も新しい「React Native ~JavaScriptによるiOS/Androidアプリ開発の実践」が間違いないです。

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践
(著)髙木 健介, ユタマこたろう, 仁田脇 理史
発売日 2020/05/30
総合評価
(3.1)
(2022/11/23 12:22時点)
アプリ開発の新しい技術選択を広げよう!

「iOS/Androidの2つのアプリをもっと効率良く開発したい」
「ハイブリッドアプリだと、速度やUIがネイティブより劣ってしまいがち」

こんな課題は、React Nativeを使えば解決できます。
React Nativeは、iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は、ReactやReact Nativeが生まれた背景を見直しながら、React Nativeの基本はもちろん、ReactやTypeScript、アプリ設計・開発、テスト、リリースまで、React Nativeによるアプリ開発のすべてを解説。日本でまだ無名だった頃からReact Nativeを追い続けた著者陣が、現場実践をふまえて開発手法を伝授します。
フロントエンドの方はもちろん、アプリ開発の技術選択を広げたいすべてのエンジニアにおすすめの1冊です。
 
内容サンプル

(引用元Amazon)

 
目次
●はじめに
■■■第1章 React / React Nativeの概要とその背景
■■1-1 Reactとは
■特徴1. Declarative
■特徴2. Component-Based
■コラム コンポーネントベースを採用しているその他の標準化仕様・フレームワーク
■特徴3. Learn Once, Write Anywhere
■■1-2 Reactが必要とされた背景
■React isn't an MVC framework
■React doesn't use templates
■Reactive updates are dead simple
■コラム 表示速度と仮想DOM
■■1-3 React Nativeが必要とされた背景
■1.Native Experience
■コラム ネイティブUIとブリッジ
■2.Learn Once, Write Anywhere
■3.Keeping Development Velocity
■■■第2章 TypeScriptとECMAScript 2015の基本を押さえる
■■2-1 TypeScriptとは
■型があることによる2つのメリット
■■2-2 TypeScriptの構文
■明示的な型付け
■暗黙的な型付け
■基礎的な型
■新たな型を作成する
■noUnusedParametersオプションとアンダーバー
■Optional Chaining
■Assertion Functions
■コラム 効率的な型付け
■■2-3 ECMAScript 2015の新記法
■letとconstによる変数定義
■Arrow Functions
■Default Parameter Values
■Template Literals
■Property Shorthand
■Computed Property Names
■Destructuring
■SpreadOperator
■classキーワード
■非同期処理
■ES Modules
■■■第3章 開発環境の構築
■■3-1 IDEの導入
■コード編集ツールが満たすべき機能
■■3-2 Visual Studio Codeのインストールと設定
■Visual Studio Codeをインストールする
■TypeScriptの設定
■コラム Visual Studio Codeの設定とその対象
■■3-3 React Nativeプロジェクトのセットアップ
■HomeBrewのセットアップ
■Node.jsのセットアップ
■yarnのインストール
■watchmanのインストール
■Xcodeのインストール
■CocoaPodsのインストール
■Java8のインストール
■Android Studioのインストール
■古いコマンドラインツールのアンインストール
■React Nativeプロジェクトの生成
■環境診断
■Android用の設定
■■3-4 開発効率を向上させるプロジェクト設定
■依存パッケージのバージョンを固定する
■コラム セマンティックバージョニングとpackage.json
■Prettierの設定
■ESLintの設定
■EditorConfigの設定
■■3-5 GitHubのセットアップ
■GitHubを用いた開発の流れ
■レビューを推奨する設定
■■■第4章 React Nativeの基本
■■4-1 React Nativeを使った開発
■React Nativeを起動する
■TypeScriptファイルを1つにまとめるMetro Bundler
■RedBox/YellowBox
■■4-2 React Nativeのデバッグメニュー
■Reload
■Debug
■Show Inspector
■■4-3 コンポーネントでUIを作成する
■JSX文法で開発する
■コンポーネントを定義する
■式の評価
■コラム truthy/falsyとショートサーキット評価
■フラグメント
■style propsによる装飾
■Flexbox
■props
■state
■コラム propsとstateの設計
■副作用を持つコンポーネント
■Context
■ref
■■4-4 React Native標準コンポーネント
■Viewコンポーネント
■Textコンポーネント
■Imageコンポーネント
■sourceプロパティによる表示画像の指定
■resizeMode propsによる拡大縮小時の挙動指定
■背景画像を指定する
■ScrollView
■FlatList/SectionList
■Touchable系コンポーネント
■Buttonコンポーネント
■TextInputコンポーネント
■コラム React HooksとCustom Hooks
■StatusBarコンポーネント
■ActivityIndicatorコンポーネント
■Switchコンポーネント
■■4-5 React Native標準ユーティリティー
■Alert
■AppState
■BackHandler
■Clipboard
■Dimensions
■Linking
■PermissionsAndroid
■Share
■Vibration
■■4-6 コミュニティから提供されているコンポーネント
■AsyncStorageモジュール
■SafeAreaViewコンポーネント
■ProgressView/ProgressBarAndroidコンポーネント
■■4-7 コンポーネントを作成する際の注意点
■モバイルアプリの制限
■propsとstateの更新頻度を抑える
■プラットフォームに沿ったコンポーネント作成
■コラム バンドルされたJSの取得方法
■■4-8 コンポーネントにアニメーションをつける
■アニメーションの考え方
■React Nativeにおけるアニメーション実装
■効果的なアニメーション
■■■第5章 作成するアプリケーションの仕様策定
■■5-1 リーンキャンバス
■■5-2 ユースケース
■■5-3 画面遷移を考える
■仕様書のラフ画
■Initial
■ChooseLogin
■SignIn
■SignUp
■Home画面
■Statics
■Detail
■UserInfo
■Loading
■アプリを実装する手順
■■■第6章 テストによる設計の質の向上
■■6-1 React Nativeのテストの2つの目的
■要求や仕様を満たしていることを確かめるテスト
■設計改善のためのテスト
■■6-2 Jestによるユニットテスト
■コラム テストで用いるパッケージの選択
■最初のテスト実行
■テストの書き方
■テストを書く
■テストを書かない対象を見極める
■■6-3 CIを取り入れ安定した開発をする
■CircleCIのセットアップ
■■■第7章 Navigationの概要と実装
■■7-1 画面遷移の基本
■Webアプリケーションの画面遷移
■モバイルアプリケーションのルーティング
■Navigationとは
■react-navigationの導入
■学習環境を準備する
■構成を変更する
■■7-2 Stackを実装する
■Stackの実装
■ライブラリの読み込み
■スタイルの定義
■画面の作成
■ルーティングの実装
■NavigationContainerを使用する
■■7-3 Tabを実装する
■Tabの実装方法
■Tabの種類
■■7-4 Drawerを実装する
■■7-5 Optionsを定義する
■Optionsを定義する2つの方法
■navigationOptionsを動的に変化させる
■options、screenOptionsで受け取れる引数
■■7-6 headerModeとmode
■mode
■headerMode
■■7-7 サンプルを作りながら、ページ遷移を実装してみよう
■プロジェクトの準備
■アプリケーションの起動
■事前準備
■作るべき画面を整理する
■画面パスを管理するためのファイル作成
■定数化する理由
■画面作成の事前の準備
■各画面の作成
■画面の接続
■ルーティングの確認
■Tabを組み合わせる
■TabNavigatorとStackNavigatorを組み合わせる
■DrawerNavigatorとStackNavigatorを組み合わせる
■ドロワー遷移する遷移先でタブが表示されないようにする
■Modalを組み込む
■複数のStackNavigatorを使う
■■■第8章 Atomic Designとコンポーネントの実装
■■8-1 コンポーネント設計のメリット
■1.コンポーネントの再利用によって開発効率が向上する
■2.保守面のメリット
■3.関心の分離を実現できる
■4.テスト面におけるメリット
■■8-2 ユニットテストを実装する
■ライブラリを用意する
■スナップショットテスト
■動作のテスト
■■8-3 Atomic Designを理解する
■ボタンをAtomsとして分離する
■■8-4 アプリケーションのレイアウトを整える
■アプリケーションのテーマ設定
■各画面に色を入れ込む
■StackNavigatorにテーマを適用する
■DrawerNavigatorへのデザイン適用
■TabNavigatorにデザインを適用する
■■8-5 アプリケーションの画面を作り込む
■react-native-paperをインストールする
■CHOOSE_LOGINの実装
■ChooseLoginの作成
■Signupの作成
■Signinの作成
■Initialの実装
■Homeの作成
■Todoを作成する
■Inputの作成
■Detailの作成
■UserInfoの作成
■Statisticsの作成
■■■第9章 データフローの設計および実装
■■9-1 Reduxとは
■特徴1. Single source of truth
■特徴2. State is read-only
■特徴3. Changes are made with pure functions
■どのような場合にReduxを使うのが有効か
■React Stateの限界
■■9-2 Reduxの基本
■Reducerのベース作成と初期状態の設計
■Actionの設計
■Storeの作成
■Reduxの世界とReactの世界をつなぐ
■コラム useSelector、useDispatchとconnectの比較
■Reduxにおけるディレクトリー構造
■Ducks
■■9-3 Reduxにおける非同期処理
■ネットワーク通信の結果をActionに載せdispatchする
■Redux middleware
■middlewareを実装する
■コラム 便利なmiddleware
■ReduxにおけるStore設計
■表示用データの生成
■アプリケーションが動作する環境や状況の文脈データ
■ディレクトリー構成を整理する
■■9-4 アプリのデータフローの実装
■必要パッケージのインストール
■ドメイン層の実装
■todo管理モデル
■Ducks Moduleの定義
■Storeの実装
■Selectorの実装
■Container Componentの実装
■ルートコンポーネントの実装
■その他、画面制御に必要なデータ
■■■第10章 Firebaseを使ったバックエンド連携
■■10-1 Firebaseとは
■Firebase Authentication
■Firebase Cloud Firestore
■Firebase Analytics
■■10-2 Firebaseをアプリへ組み込む
■インストール
■認証を実装する
■データ同期を実装する
■ユーザートラッキングを実装する
■■■第11章 E2Eを実装する
■■11-1 E2Eテストとは
■E2Eテストの範囲
■E2Eテストの対象基準
■React NativeにおけるE2Eテストパッケージ
■■11-2 Detoxによる検証
■依存パッケージのインストール
■プロジェクトへDetoxのインストール
■Detoxでの検証方法
■Debug/Releaseビルド
■API
■■11-3 Detoxテストを実装する
■今回作成するテストケース
■Detoxでテストを実装する
■ChooseLoginまでのテストケース
■テスト:~Home
■画面遷移テスト:SignUpページ
■画面遷移テスト:SignInページ
■アカウント登録
■サインアウト
■サインイン
■テスト:Todo追加
■Todo完了
■Todo更新
■Todo削除
■■11-4 CIでE2Eテストをおこなう
■Bitriseの利点と欠点
■Bitriseのセットアップ
■Detoxビルドの追加
■Bitrise Workflow
■■■第12章 アプリストアへの公開
■■12-1 リリースビルド
■Firebaseの本番環境を作成する
■iOSのビルド設定
■Androidのビルド設定
■コラム 開発用とリリース用を共存させる
■■12-2 アプリをApp Storeに提出する
■アイコン設定
■App IDの登録
■アプリの登録
■アプリの送信
■アプリの登録の続き
■リリース
■■12-3 アプリをGoogle Play Consoleに提出する
■アプリの作成
■ストアの掲載情報
■アプリのリリース
■コンテンツのレーティング
■アプリのコンテンツ
■価格と配布
■公開
●さくいん

↓全て表示↑少なく表示
Users Voice
アプリ開発のマニュアルを紙で読みたいという人にはいいと思います。最近だとこういったハウツー本も電子一択ですもんね。 (参考:honto)

↓全て表示 ↑少なく表示
ReactNativeをやるなら間違いなく買っておいた方が良い本
とりあえず迷ったらこれ買っとけって感じ (参考:honto)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
著者略歴

著:髙木 健介
●髙木健介(たかぎけんすけ) ネットワーク構築、Web開発、ネイティブアプリ開発を経て、当時日本では無名だったReact Nativeを用いて医療系スタートアップ企業でプロダクトを構築。同時にReact Native Japanスタッフとして活動し、日本におけるReact Nativeの普及に尽力した。現在、クラスメソッド株式会社においてエンジニアリングマネージャーとして最高のチーム構築と後進の育成に努めている。 Twitter:@janus_wel GitHub:januswel

著:ユタマ こたろう
●ユタマこたろう 新卒入社した大手Sier企業にて、「たった1人のフロントエンドエンジニア」となり、社内向けフロントエンドフレームワークの制作をおこなう。その後、興味本位で触ったReact Nativeをきっかけに、同著者であり師となる髙木健介と出会い、同じくReact Native Japanスタッフとして普及活動をおこなう。現在は、エアークローゼットにてエンジニア、データサイエンティストの両チームの構築と育成に務める。 Twitter:@YutamaKotaro GitHub:YutamaKotaro

著:仁田脇 理史
●仁田脇理史(にたわきさとし) SIer、小売業でのバックエンドエンジニア、社内SEを経験後、株式会社エアークローゼットへ所属。ユタマこたろう氏の指導を受け、既存SwiftアプリからReact Nativeアプリへリプレースを牽引。React Nativeアプリを中心にAtomic Designの導入や、社内の日数見積の廃止、E2Eテストを使用したリリース前テストの自動化などの提案をおこない、サービス・プロダクトの改善活動をおこなっている。 Twitter:@nitaking_ GitHub:nitaking


↓全て表示↑少なく表示

  

Android/iOSクロス開発フレームワーク React Native入門

スマートフォンアプリ開発において「AndroidとiPhone(iOS)を別々に開発しなければならない」という問題点は大きな悩みです。その悩みを解決するのが、一度ソースを書けばどちらのアプリも作れる「React Native」です。本書は、React Nativeで効率的にスマホアプリを開発するためのノウハウを解説した入門書です。基本的なUI関係のコンポーネント、グラフィックの描画、データアクセスなど、開発に必要な技術をひととおり解説します。

※この商品は固定レイアウトで作成されており、タブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
 
内容サンプル

(引用元楽天Books)

 
目次
Chapter 1 インストールとセットアップ
Chapter 2 React Nativeの基本をマスターする
Chapter 3 UIコンポーネント
Chapter 4 レイアウトを考える
Chapter 5 プラットフォーム固有の機能
Chapter 6 グラフィックの描画
Chapter 7 タイマー、アニメーション、データアクセス
Chapter 8 サンプルアプリの開発
内容サンプル

(引用元楽天Books)

 
著者略歴

著:掌田 津耶乃
日本初のMac専門月刊誌「Mac+」の頃から主にMac系雑誌に寄稿する。ハイパーカードの登場により「ビギナーのためのプログラミング」に開眼。以後、Mac、Windows、Web、Android、iPhoneとあらゆるプラットフォームのプログラミングビギナーに向けた書籍を執筆し続ける。


  

React Native+Expoではじめるスマホアプリ開発

React Native+Expoではじめるスマホアプリ開発
(著)松澤 太郎
発売日 2018/08/29
総合評価
(3.3)
(2022/11/29 12:04時点)
※この商品は固定レイアウト型の電子書籍です。
※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
※お使いの端末で無料サンプルをお試しいただいた上でのご購入をお願いいたします。


JavaScriptによるネイティブアプリ開発の現場のノウハウ、教えます!

「React Native」は、Facebookが開発しているスマートフォンアプリ向けの開発環境で、2015年3月にオープンソースとして公開されました。ほとんどのコードをJavaScriptで記述でき、スマートフォンのAndroidとiOSに両対応したネイティブアプリの開発が可能です。名前からもわかるように、同じくFacebookが開発したUI用のライブラリであるReactをベースの技術としており、コンポーネントを組み合わせてUIを構築できます。Facebookは、自社や傘下のInstagramのスマートフォンアプリ開発にReact Nativeを利用しています。
Reactをベースにし、JavaScriptで開発を行えるため、Web系の開発者がスマートフォンのネイティブアプリ開発を始めるには、React Nativeは最適なプラットフォームといえるでしょう。
また、「Expo」は、React Nativeによる開発・アプリ配布を支援するためのツールとサービスです。本書では、開発環境としてExpoを使って解説しています。
本書では、ある程度、Web開発の知識があり、これからスマートフォンのネイティブアプリ開発に取り組もうという人に向けて書かれています。

【各章の内容】
●第1章
React Nativeの概要、および、その開発支援ツールである「Expo」と「Create React Native App(CRNA)」について説明しています。

●第2章
React Nativeに必要となるnode.js、そしてExpoの導入について説明しています。

●第3章
Androidエミュレータ/iOSシミュレータの導入と、デバッグ環境などの具体的な利用方法を解説します。また、実機での動作確認方法にも触れています。

●第4章
TODOアプリの開発を通してReact Nativeの基本を学んでいきます。

●第5章
Flexboxレイアウトを学ぶために、逆ボーランド電卓を作成します。

●第6章
統一的なUIを持ったアプリの作成を可能にする「UIライブラリ」を使ってTODOアプリを拡張します。

●第7章
Fluxアーキテクチャを使って、TODOアプリを書き直してみます。

●第8章
トイレマップとGPSロガーの2つのアプリを通して、ライブラリの利用、GPSやカメラといったスマートフォン機能の使い方など、本格的で実践的なReact Nativeプログラミングについて学びます。

●第9章
アプリ内でWebページを表示するための「WebView」を使ったプログラミングを解説しています。

●第10章
React Native CLIを使ったネイティブモジュールを使った開発について解説しています。

●第11章
Google Play/App Storeでの配信について説明しています。

●第12章
意外とハマるポイントでもあるReact Native/Expoのバージョンアップについて解説しています。

●付録
tvOS/Windowsに対応したアプリの対応方法を解説しています。

↓全て表示↑少なく表示
 
内容サンプル

(引用元楽天Books)

 
目次
第1章 React Nativeとは
 1-1 React Nativeとは
 1-2 Expoとは
 1-3 Create React Native Appとは
 1-4 React NativeとExpo/CRNAの違い
第2章 開発環境の構築
 2-1 node.jsのインストール
 2-2 Expoを導入
第3章 エミュレータ/シミュレータによる確認
 3-1 Androidエミュレータのセットアップ
 3-2 iOSシミュレータのインストール
 3-3 Expoの確認用プロジェクトと開発サーバの起動
 3-4 ExpoでAndroidエミュレータの確認
 3-5 iOSシミュレータでの確認
 3-6 Expoのネットワークについて
 3-7 実機での確認
 3-8 Expoの動作モード
 3-9 エディタを選ぶ
第4章 TODOアプリで学ぶ初めてのReact Native
 4-1 作成準備
 4-2 import
 4-3 const/let/var
 4-4 Componentとrender関数
 4-5 Reactにおけるkeyとloop
 4-6 setState関数
 4-7 React.Componentのライフサイクル
 4-8 JavaScriptの非同期処理
第5章 電卓アプリ開発で学ぶFlexboxレイアウト
 5-1 Flexboxの「軸」
 5-2 Flexboxでの配置
 5-3 電卓アプリを作ってみよう
 5-4 画面の回転
第6章 UIライブラリによるTODOアプリの拡張
 6-1 nativebaseとReact Native Elements
 6-2 React Native Elementsの導入
 6-3 SearchBarの導入
 6-4 テキスト入力とボタンをReact Native Elementsに置き換える
 6-5 ListItemを実装
 6-6 iPhone Xへの対応
第7章 React Nativeの状態管理
 7-1 Fluxアーキテクチャとは
 7-2 ReduxによるTODOアプリの状態管理
 7-3 redux-persistによる永続化
第8章 地図アプリとGPSロガーアプリ制作で学ぶ実践的React Native開発
 8-1 react-native-mapsとreact-navigation
 8-2 トイレマップを作成
 8-3 GPSロガーの作成
第9章 WebViewプログラミング
 9-1 経路探索アプリの作成
 9-2 WebViewにデータを渡す
 9-3 WebViewからデータを受け取る
 9-4 駅すぱあとWebサービスとの連携
第10章 ネイティブモジュールを利用した開発
 10-1 開発環境のセットアップ
 10-2 React Native Cameraで作るバーコードリーダー
 10-3 Mapbox Maps SDKで作るトイレマップ
第11章 Storeへの配信
 11-1 スプラッシュスクリーンの作成
 11-2 アイコンの作成
 11-3 Google Playでの配信
 11-4 App Storeでの配信
第12章 React Native/Expoのバージョンアップ
 12-1 Expoのバージョンアップ
 12-2 React Nativeのバージョンアップ
付録
 A-1 tvOSプログラミング
 A-2 Windowsプログラミング

↓全て表示↑少なく表示
Users Voice
コードの例がGitHubにも上がっていてRNによる開発の参考になる本だった。redux周り含め、説明がかなり簡略化されている部分もあったのでもうちょっと詳しく説明があっても良かったかも。 (参考:honto)

↓全て表示 ↑少なく表示
内容サンプル

(引用元楽天Books)

 
著者略歴

著:松澤 太郎
地理空間系プログラマー。合同会社Georepublic Japanで(顔がおっさんなので)シニアエンジニアとして働く。専門分野は、地図タイルおよびWeb/スマートフォンアプリケーション開発。古くからMozillaコミュニティやLinux/OpenSourceコミュニティで活動し、某組の組長だったことから、いまだに「くみちょ」と呼ばれている。日本UNIXユーザ会理事、OSGeo財団日本支部理事、OpenStreetMap Foundation Japanのメンバーでもある。趣味はブレイクコアなどの音楽を聞くこと。Twitterは、@smellman。


↓全て表示↑少なく表示

  
 

フロントエンドフレームワークを選ぶのに参考になる本

Reactは世界的に人気なのは上述のとおりですが、やはり日本ではVue.jsが人気、Google開発なら間違いなさそうなAngularもある・・など、それぞれ魅力がありがっつり取り組む前にちょっと迷いますね。

そんなときは、以下の書籍がフレームワークそれぞれの具体的な特徴や使い方を解説しているので、まずざっと書籍から各フレームワーク要点を眺めてみて決めるとよいです。

React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発

React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発
(著)原 一浩, taisa, 小松 大輔, 永井 孝
発売日 2018/05/09
総合評価
(3)
(2022/11/14 12:22時点)
リッチなUIを構築可能なJavaScriptフレームワークとして、React、Angular、Vue.jsや、
さらにiOSやAndroid向けのネイティブアプリを作ることができるReact Nativeが幅広く利用されるようになりました。
フロントエンドエンジニアやデザイナーにとって少し難しく感じられることもあるこれらは、
SPA(Single Page Application)と呼ばれるリッチなWebアプリや
ネイティブアプリを実現可能にする技術として、欠かすことのできない存在になっています。
本書では各フレームワークを入門記事とSlackライクなサンプルを作りながらの解説でわかりやすく解き明かします。
 
内容サンプル

(引用元Amazon)

 
目次
1 JavaScriptフロントエンドフレームワークの最新動向(JavaScriptフロントエンドフレームワークの興隆
SPA、PWA-フロントエンド実装技術の最新トピック)
2 フロントエンドJavaScript開発のための基礎知識と環境構築(フロントエンドJavaScript開発のための環境構築
フロントエンドJavaScript開発のための基礎知識
フロントエンドJavaScript開発のためのサーバ構築)
3 Slackライクなサンプルで比べて学ぶReact
Angular
Vue.js(React入門&徹底活用
Angular入門&徹底活用
Vue.js入門&実践活用)
4 Slackライクなサンプルで学ぶReact Native(React Native入門&徹底活用)

↓全て表示↑少なく表示
Users Voice
WebはもちろんなことでReact Nativeを使ったアプリの開発まで、サンプルコードを用いて説明してくれてるので、今どきのJavaScriptやWebの開発について詳しく知ることができる。
これから勉強したい人やまだそこまで使いこなせてない人にはオススメな一冊! (参考:honto)

↓全て表示 ↑少なく表示
内容として3大フレームワークを試している点や各フレームワークのメリデメを極力端的にまとめている点でわりと良かったように感じられる。
Amazonのレビューが結構酷くて細かな間違いを論って★1つけていて、それに対していいね票がたくさん付いていてなかなか地獄。どうしてこうなった。 (参考:honto)

↓全て表示 ↑少なく表示
内容として3大フレームワークを試している点や各フレームワークのメリデメを極力端的にまとめている点でわりと良かったように感じられる。
Amazonのレビューが結構酷くて細かな間違いを論って★1つけていて、それに対していいね票がたくさん付いていてなかなか地獄。どうしてこうなった。 (参考:楽天)

↓全て表示 ↑少なく表示
内容サンプル

(引用元Amazon)

 
  

ネコミミでもわかるフロントエンド開発環境構築 (技術の泉シリーズ(NextPublishing))

【複雑化したフロントエンド開発環境の構築がこの1冊でさらっとわかる!】

本書は、ReactやVue.jsなどに代表される新しいフレームワークの到来により最適化されたWebアプリの開発ができるようになったにもかかわらず、それぞれの開発環境の構築が複雑化したことで技術選定に苦労しているエンジニアに向けた「サクッとわかる」開発環境構築ガイドです。ベストプラクティスを提示するのではなく、環境構築に慣れていないエンジニアがとりあえず自分なりの最適なツールを選ぶための入り口に立つことができる入門書です。
《本書の対象読者》
・モダンなJavaScriptを書きたいが、書き方がよくわからない
・BabelやWebpackの設定方法がいまいちわかっていない
・ESLint、Flow、Jestなどを導入したいが、方法がわからない

【目次】
第1章 まずは準備から
1.1 package.jsonファイルの作成
1.2 ディレクトリー構成について
1.3 EditorConfigを導入する
第2章 JavaScriptを動かす
2.1 Babel
2.2 webpack
第3章 JavaScriptのためのパワフルなツール
3.1 ESLint
3.2 Prettier
3.3 Flow
第4章 Reactをはじめる
4.1 Reactをブラウザーで表示させるための準備
4.2 最初で最後のReactコンポーネント
第5章 CSSを適用する
5.1 webpackの設定
5.2 CSSファイルの作成
5.3 StyleLint
5.4 PostCSS
第6章 ReactとCSSの連携
6.1 CSSをコンポーネントに適用する
6.2 CSSModules
第7章 爆速でテストを書く
7.1 Jestで始めるユニットテスト
7.2 コンポーネントはスナップショットテストで
7.3 コードカバレッジを見る
第8章 プロダクションコードの生成
8.1 webpackの設定を分離する
8.2 CSSをminifyする

↓全て表示↑少なく表示
 
内容サンプル

(引用元Amazon)

 
内容サンプル

(引用元Amazon)

 
  
 

React本「Kindle Unlmited 読み放題 人気ランキング」

「Kindle Unlimited」は、Amazonの定額本読み放題サービス。

実はそこにReactの本もそこそこあるんです。すなわち、定額で何冊も学習することも可能

Kindle Unlimitedの主な特徴としては、おおよそ以下の通り。

  • 雑誌がかなり充実
  • 豊富なKindle個人出版本がほとんど読み放題
  • 最近は出版社単行本も対応増加

個人的には雑誌が、IT系(CG WORLD等)、ガジェット系(Get Navi等)、ゲーム(ファミ通等)、など見たい雑誌が幅広く読めるのが大きな魅力。2冊以上読みたいものがあるだけで確実にお得です。

また、30日無料体験も可能なので、体験期間を利用して無料で学習してみるのもお得な学習法です。

以下がKindle Unlimited対応のReact関係の本人気ランキングです。

(2022/11/29 12:04 更新)
Rank製品価格
1
はじめてつくるReactアプリ with TypeScript
発売日 2021/05/13
三好アキ
Kindle Unlimited対象
総合評価
(4.5)
1,099円
2
899円
3
はじめてつくるReactアプリ
発売日 2021/03/01
三好アキ
Kindle Unlimited対象
総合評価
(4.4)
999円
4
999円
5
はじめてさわるReact & JavaScript
発売日 2021/05/31
三好アキ
Kindle Unlimited対象
総合評価
(4.4)
799円
6
Clean Architecture for React (技術の泉シリーズ(NextPublishing))
発売日 2021/01/15
今森 大地 (インプレスR&D)
Kindle Unlimited対象
総合評価
(3.9)
880円
7
299円
8
React & Gatsby開発入門 (技術の泉シリーズ(NextPublishing))
発売日 2021/04/02
竹本 雄貴 (インプレスR&D)
Kindle Unlimited対象
総合評価
(3.4)
880円
9
速習 React 速習シリーズ
発売日 2018/08/27
山田祥寛 (WINGSプロジェクト)
Kindle Unlimited対象
総合評価
(3.7)
500円
10
699円

 

おまけ:本より高コスパ?「Udemy Reactおすすめ講座」

UdemyではReactを基礎から応用までトータルで学べる学習講座があります。

こちらが、セール時には2千円程度で購入可能で、講座によっては本よりコスパよく学習が可能です。

講座は、買い切り型ながら更新あり、質問可能、30日間返金も可能、という本以上の手厚いサポートがあるのが魅力。

以下の表が、Reactの学習講座例。セールの場合、かなりおすすめなのでぜひトライしてみください。

Udemyについては、以下のページでも詳しく紹介しているので覗いてみてください。

人気
Rank
学習コース評価
1
モダンJavaScriptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
受講者 17,409人
通常 4,200円
現在 1,800円
(4.5)
総評価数 4119件
2
【2022年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript...
発売日 2022/03/29
受講者 5,493人
通常 10,000円
現在 1,800円
(4.6)
総評価数 525件
3
(4.6)
総評価数 1916件
4
(4.4)
総評価数 345件
5
(4.4)
総評価数 126件

 

関連:Web開発(JavaScritp,PHP)系の他の書籍

Reactを学ぶなら、基本となるJavaScriptを固めるのはもちろん、バックエンドの開発知識も固めるとできることの幅が広がります。バックエンドを学ぶなら今はPHPがおすすめ。

以下でJavaScript、PHPの書籍も同様に紹介しているので覗いてみてください。

いじょうでっす。

コメント

タイトルとURLをコピーしました