WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

Reactの基本がイチからわかる入門書

UI構築のためのJavaScriptライブラリであるReact。そんなReactを用いたWebアプリプログラミングの入門書です。Reactの基本概念から始まり、最終的にはtodoアプリを作成できるようになります。入門書ではありますが、HTML/CSS、JavaScriptに関しての基礎がある方向けです。

■サンプルコードのダウンロード/正誤表のWebページ
本書のサンプルコードは以下のURLのページからダウンロードできます。
また、正誤表を掲載した場合はこのページに表示されます。
http://book.impress.co.jp/books/1116101040

○本文中に登場する会社名、製品名、サービス名は、各社の登録商標または商標です。
○本書の内容は本書執筆時点のものです。本書で紹介した製品/サービスなどの名前や内容は変更される可能性があります。
○本書の内容に基づく実施・運用において発生したいかなる損害も、著者ならびに株式会社インプレスは一切の責任を負いません。
○本文中ではR、TM、Cマークは明記しておりません。

はじめに

その対象がどんなものであれ、プログラミングは楽しいものです。楽しくなければ学ぶ意欲も起こらず、長く続けることもできませ ん。プログラミングが楽しいものであるためには、自分の行為についてよく理解していることが必要です。また、プログラムが自分の思った通りに動き、その結果として何らかの成果が、願わくば目覚ましい効果が実感できるものでなければなりません。

この本は、Reactを利用したWebアプリのプログラミング入門書です。それに関する基礎的な知識、経験、そして狙った成果を得るための技術を習得することを目指しています。つまり、その分野のプログラミングが楽しいと感じられるようになりたい人のための本です。

この本を書くにあたっては、読者としてある程度のレベルの人を想定しています。簡単に言えば、HTML、CSS、JavaScriptに関して基礎的な知識を持っている人です。それらを使ったシンプルなWebページを、テキストエディタだけを使って書いたことがある人なら申し分ないでしょう。もちろん、それほど高度な知識や経験を想定しているわけではありません。本書の中では、HTMLやJavaScriptそのものについては特に解説していませんが、入門レベルを超えると思われる事項については、折に触れて説明を加えています。そして、Reactの真髄を学ぶ上で、基礎知識の不足が障害にならないように心がけています。

この本を使ってReactのプログラミングについて学ぶためには、Webブラウザが1本あれば十分です。自前のサーバーを立てたりする必要もありません。バージョンさえ新しければ、タブレット上のものでも大丈夫でしょう。装備や環境の整備に気を散らすことなく、本題に集中してプログラミングを楽しんでください。

2016年11月 柴田文彦

CONTENTS

Chapter 1 Reactとは?

1-1 Reactの概要と特長
Reactは一種のJavaScriptライブラリ?
Declarative
Component-Based
Learn Once, Write Anywhere

1-2 Reactを使うために必要な準備
さまざまな動作環境

1-3 Reactを動かしてみよう
JSFiddle上での試運転

1-4 Reactを理解する5つのキーワード
構成要素で考えるReact
コンポーネント、
ステート
プロパティ
JSX
仮想DOM

Chapter 2 Reactのコンポーネント

2-1 コンポーネント定義の基本
HTML要素をコンポーネント化する
要素の属性を指定する
カスタムコンポーネントを作る

2-2 内容が変化するコンポーネント
文字列を受け取って表示するコンポーネント
与えた式を計算するコンポーネント

2-3 ユーザーからの入力を受け付けるコンポーネント
1つのコンポーネント内に複数の要素を配置する
文字列を入力するinput要素を配置する
ユーザー入力に反応する仕組みを実現する

2-4 コンポーネントのライフサイクル
ライフサイクルメソッド
典型的なライフサイクルシーケンス
ライフサイクルの変遷を観察する

Chapter 3 JSXの基本

3-1 JSXの概要とメリット
JSXを使うには
JSXEBabel
JSXとHTMLとの違い

3-2 JSXの中で使うJavaScript
JSXでカスタムコンポーネントを記述する
JSXで複数の要素を配置する
JSXでステート付きのコンポーネントを作成する
条件(三項)演算を使う
真偽値の属性を指定する
JSXの中のコメントの書き方

3-3 スプレッド属性を利用する。
スプレッド属性とは
スプレッド属性でスタイルを設定する
カスタムコンポーネントでスプレッド属性を利用する
デフォルトの属性をスプレッド属性で設定する
デフォルトの属性をオーバーライドする

3-4 JSXトランスパイラの使い方
Webサイト上のトランスパイラを利用する
ブラウザ用のトランスパイラを利用する
JSXを別のファイルに保存して動かす

Chapter 4 Reactを使いこなす

4.1 Reactで使うフォーム
HTMLとの比較
コントロールドコンポーネント
type属性とchecked属性でラジオボタンを実現
type属性で複数選択可能なチェックボックスを実現
プロパティによって選択状態の初期値を設定する
value属性でセレクトボックスを選択可能にする
TextAreaコンポーネントではvalue属性で値を設定

4-2 フォームのサブミットとバリデーション
formタグとon Submitの属性
ステート値のバリデーション –

4-3 動的に作成するコンポーネント
HTMLとReactのtableタグの違い
配列要素を自動的に展開して表示するmapメソッド

4-4 コンポーネント間の機能の共有
マルチコンポーネント化
ネームスペースドコンポーネント
Mixinの利用

Chapter 5 Reactの一歩進んだ使い方

5-1 アドオンによる機能拡張
Reactのアドオンについて
公式なアドオン
Reactアドオンを使う準備
アドオンの使用例|

5-2 アニメーションの基本テクニック
Reactアニメーションの種類
CSSアニメーションを確認する
Reactアドオンによる出し入れのアニメーション
Reactアドオンによる初期マウントのアニメーション
トランスフォームを使ったアニメーション
Reactアニメーションを使ったToDoリスト

5-3 Reactの開発ツール
React純正のブラウザ拡張機能
React Developer Toolsの簡単な使い方

5-4 Reactの周辺技術
次に何を学ぶべきか?
Flux
React Native
いくつかのUIライブラリー

索引
著者プロフィール