React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

モダンWebアプリ開発の全体像がわかる!

Reactの基本から応用を学ぶことができ、Reactの概念をしっかりおさえることができます。インストール手順も丁寧に説明されており、サンプルコードも豊富なので、初心者の方にもおすすめです。Reactを用いたWebアプリケーションの開発から公開に至るまで、ボリューム満点の1冊です。

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP

本書内容に関するお問い合わせについて

このたびは翔泳社の書籍をお買い上げいただき、誠にありがとうございます。
弊社では、読者の皆様からのお問い合わせに適切に対応させていただくため、以下のガイドラインへのご協力をお願い致しております。下記項目をお読みいただき、手順に従ってお問い合わせください。

●ご質問される前に、
弊社Webサイトの「正誤表」をご参照ください。これまでに判明した正誤や追加情報を掲載しています。
正誤表 http://www.shoeisha.co.jp/book/errata/

●ご質問方法
弊社Webサイトの「刊行物Q&A」をご利用ください。
刊行物Q&A http://www.shoeisha.co.jp/book/qa/
インターネットをご利用でない場合は、FAXまたは郵便にて、下記“翔泳社 愛読者サービスセンター”までお問い合わせください。
電話でのご質問は、お受けしておりません。

●回答について
回答は、ご質問いただいた手段によってご返事申し上げます。ご質問の内容によって回答に数日内侍それ以上の期間を要する場合があります。

●ご質問に際してのご注意
本書の対象を越えるもの、記述個所を特定されないもの、また読者固有の環境に起因するご質問等にはお答えできませんので、あらかじめご了承ください。

●郵便物送付先およびFAX番号
送付先住所 〒160-0006 東京都新宿区舟町5
FAX番号 03-5362-3818
宛先 (株)翔泳社 愛読者サービスセンター

※本書に記載されたURL等は予告なく変更される場合があります。
※本書の出版にあたっては正確な記述につとめましたが、著者や出版社などのいずれも、本書の内容に対してなんらかの保証をするものではなく、内容やサンプルに基づくいかなる運用結果に関してもいっさいの責任を負いません。
※本書に掲載されているサンプルプログラムやスクリプト、および実行結果を記した画面イメージなどは、特定の設定に基づいた環境にて再現される一例です。
※本書に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。

前書き

この度は本書をお買い上げいただき、誠にありがとうございます。
Webフロントエンドは、流行り廃りが他の界隈と比較して早く、「また新しいライブラリを使っているのか」と揶揄されがちです。ですが、その流行り廃りの中にはタスクランナやモジュールバンドラなどの開発ツール、SassやPostCSSなどのCSS拡張言語など、さまざまな要素が含まれており、React Angular、Vue.jsなどのView(見た目の部分)を構築するライブラリ・フレームワークに限ってみるとここ3年くらいはトレンドに大きな変化はありません。Reactは筆者が注目し始めた3年前から、内部の実装は変われど、外から利用するAPIに大きな変更はほとんどありません(Reactが後方互換性をなるべく維持して開発しているということもありますが)。

また、Reactが普及に大きく貢献した仮想DOMやコンポーネント指向の開発スタイルは、他のフレームワーク・ライブラリにも取り入れられており、Webアプリケーション開発において今や欠かせないものになっています。開発ツールに関しては、「Less Configuration」という考え方が広まっており、インストールしたデフォルトの状態である程度利用でき、学習コストが低いツールがよいとされています。本書はcreate-react-appを利用しており、モジュールバンドラやトランスパイラの複雑な設定に気をとらわれることなく、ReactやReduxの学習に集中できるように意識して執筆しました。

「流行り廃りが早い」ことは悪いことだけではなく、そこに身をおいているエンジニアとしては毎日ワクワクする楽しい環境です。ライブラリ・フレームワークだけではなく、最近ではブラウザのAPIや言語自体の機能も私がエンジニアになった2009年と比べると考えられないスピードで進化を遂げています。iOSやAndroidのネイティブアプリの方が機能的には制限がありませんが、アイデアを形にするプラットフォームとしてWebの価値はこれからも変わらないと思います。本書をきっかけにWebやWebフロントエンドに魅力を感じてくれる方が増えると幸いです。

最後に、個人的な話になりますが、学生時代にバイト前の空いた時間に本屋で技術書を眺めるのが好きで、技術書がたくさん並んだ本棚を見ながら「いつかここに名前が並ぶようなエンジニアになりたいな〜」とぼんやりと思っていました。今回、その大きな目標が叶い、感慨深いものがあります。このような素晴らしい機会をご提供いただいた翔泳社様、筆の遅い執筆者陣の怒涛の追い上げに親切にご対応いただいた緑川さんにこの場を借りてお礼申し上げます。

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP

目次

はじめに

1章 React・Reduxとは?

1.1 React とは?
React の特徴
その他のライブラリ・フレームワークとの比較

1.2 Flux とは?
Fluxの特徴
Fluxの構成要素

1.3 Reduxとは?
Reduxの特徴
Reduxの構成要素

2章 create-react-appで開発をはじめよう

2.1 create-react-appとは?
開発環境を整える
インストール
create-react-appのインストール

2.2 アプリケーションの作成
プロジェクトの構成…..
アプリケーションを起動
Hello, World! …..

3章 JSX

3.1 JSXとは?
JavaScriptを拡張した言語
JSX はなぜ必要なのか?
JSXの文法

3.2 Babelを使ってJSXをJavaScriptに変換する
トランスパイラとは? Babelとは?
CLI
webpackとは

4章 Reactコンポーネント

4.1 Reactコンポーネントとは?
コンポーネント開発の準備
Functional Componentと Class Component
コンポーネントの再利用
Reactエレメント
データの受け渡し(props)

4.2 stateとイベントハンドリング
コンポーネントの準備
イベントハンドリング
Stateのまとめ

4.3 ライフサイクル
マウントに関するライフサイクルメソッド
データのアップデートに関するライフサイクルメソッド

5章 Redux でアプリケーションの状態を管理しよう

5.1 Reduxでアプリケーションの状態を管理する
ReduxのみでTodoアプリケーションを実装
Reduxの構成
ActionCreatorを定義する
Storeを生成する
React.jsと組み合わせよう
ファイルを機能ごとに分割する

5.2 react-redux
react-reduxのインストール
Container ComponentとPresentational Component.
react-reduxが行なっていること.
Todoアプリにreact-reduxを導入する

6章 ルーティングを実装しよう

6.1 ルーティングとは
ルーティングの実装パターン
ルーティングのライブラリ紹介

7章 Redux Middleware

7.1 Redux Middlewareとは?
Redux Middlewareの基礎

7.2 Actionのログを表示するRedux Middlewareを作る
ミドルウェアの仕組み
ログミドルウェアの実装

7.3 ミドルウェアのサンプル
thunkミドルウェア
localStorage

8章 Reduxの非同期処理

8.1 非同期処理の基礎
非同期処理とは?
redux-thunkによる非同期処理

8.2 thunkミドルウェアの便利な使い方
複数のアクションをまとめる
getState関数

9章 UI をきれいにしよう

9.1 UIライブラリ
Reactコンポーネントのスタイリング
UIライブラリとは
Material-UI
Material-UIを使ってみる

9.2 アニメーションを実装する

10章 より実践的なアプリケーションを作ろう

10.1 アプリケーション作成の準備
作成するアプリケーション
事前準備
Yahoo!ショッピングのカテゴリランキング APIの仕様

10.2 アプリケーションを作ろう
アプリケーションの雛形を作成
ファイル・ディレクトリ構成
Reduxの導入
ページルーティングの導入
ページルーティングを実装
非同期処理の実装
Reducerの実装
Material-UIの導入

11章 アプリケーションのテストを書こう

11.1 テストライブラリ(テストフレームワーク)
Jest

11.2 React・Redux アプリケーションのテスト
ActionCreatorのテスト
非同期Action Creatorのテスト
Reducerのテスト
Reactコンポーネントのユニットテスト
Reactコンポーネントのスナップショットテスト

12章 作ったアプリケーションを公開しよう

12.1 アプリケーションを公開する
GitHub Pages
GitHub Pagesのメリット・デメリット

12.2 Firebaseについて
Firebaseとは?

13章 サーバサイドレンダリング

13.1 サーバサイドレンダリングとは?
サーバサイドレンダリングは必須ではない
Reactにおけるサーバサイドレンダリングの流れ
React v15以前のサーバサイドレンダリング

13.2 React v16以降のサーバサイドレンダリング
React v16でのサーバサイドレンダリングの変更点
Reduxでのサーバサイドレンダリング

索引

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP