React.js&Next.js超入門

React導入書

Reactの入門書として最適な1冊です。JavaScript未経験でもイメージが掴めるように、基本的な内容から丁寧な説明がされています。JSX、コンポーネント、Redux、Next.js、Firebaseなどが扱われています。

 

掌田 津耶乃 (著)
出版社: 秀和システム (2019/3/8)、出典:出版社HP

 

はじめに

ようこそ、リアクティブ・プログラミングの世界へ!

WebサイトをJavaScriptで操作する。ある程度、本格的なWeb開発をしようと思ったら、これは必ず必要になる技術です。最先端をゆくWebサイトを見ると、まるで普通のアプリケーションのように自在に画面が変化します。「これ、本当にHTMLとJavaScriptでできてるのか?」と疑いたくなるようなものもたくさんあります。それらを見るにつけ、思うのです。「こんなもの、自分にはとても作れない。無理だ!」って。
そうした人は、勘違いをしています。こうした最先端のWebサイトも、JavaScriptで1つ1つの処理をすべて書いて作っているんだ、と。実をいえば、こうした高度な表現を可歳にしているWebサイトでは、秘密兵器を使っているんです。「フレームワーク」という秘密兵器を。

「React」は、最近使われるようになってきているJavaScriptフレームワークの中でも、もっとも注目されているものの一つです。これは「リアクティブ」と呼ばれる機能を実現するプログラムで、データの更新に応じて自動的に画面表示が更新されるような仕組みを提供してくれます。
このReactは、これまでの「JavaScriptでHTMLのエレメントを操作して表示を行う」といったスタンダードなやり方とはまるで違っています。これまでのやり方は、全く役に立ちません。React特有のやり方をマスターしないといけないのです。本書では、Reactの基本に加え、Reactを強化するRedux、Next.jsといったプログラムについてもその基本的な使い方を説明します。またFirebaseというデータベースサービスをReactから利用する手法などについても扱います。
本書で取り上げる機能は、React全体のおそらく2~3割でしょう。ですから、これでReactを完全マスターできるわけではありません。が、少なくとも「Reactを使ったWebアプリ」の基本ぐらいは自分で作れるようになるはずです。
Reactで、リアクティブ/プログラミングという「まったく新しいJavaScriptプログラミング」を体験して下さい。今までのJavaScriptのイメージが大きく変わること、間違いありませんよ。

2019年2月 掌田津耶乃

目次

Chapter1 Reactを準備しよう!
1-1 Reactを動かそう
Webアプリの「2つのサイド」
複雑な画面表示を支える技術
JavaScriptの開発って?
Reactってなに?
何が必要なの?
HTMLファイル1つでReactアプリ!
Reactでメッセージを表示しよう
表示を更新しよう

1-2 プロジェクト開発をしよう
Node.jsを用意しよう
Create React Appを使おう
プロジェクト操作のコマンドについて
プロジェクトを実行してみる
プロジェクトの中身をチェック!
プロジェクトをビルドしよう
React Developer Toolsを使おう
スタンドアロン版について
スタンドアロン版を動かす
開発ツールの準備について
Visual Studio Codeを使おう
この章のまとめ

Chapter2 JSXをマスターしよう!
2-1 React利用の基本をおさらい!
HTMLファイルの内容をチェック!
DOMの仕組みを理解しよう
表示作成の基本スクリプト
スクリプトを分離しよう
複雑な表示を作るには?

2-2 JSXを使おう!
JSXを準備しよう
JSXを書いてみよう!
JSXに値を埋め込む
属性の値を設定する
スタイルの設定
関数でJSXを作る

2-3 JSXの構文的な使い方
条件で表示する
真偽値による表示の切り替え
配列によるリストの表示
mapを使った表示の繰り返し
アロー関数を使う

2-4 表示の更新とイベント
表示を更新する
更新が動かない!
クリックして更新する
フォームの値を利用する
この章のまとめ
Reactらしさは「コンポーネント」から

Chapter3 コンポーネントをマスターしよう!
3-1 関数コンポーネントを作ろう
コンポーネントってなに?
シンプルな「関数」コンポーネント
コンポーネントを表示しよう
「属性」を利用しよう
計算するコンポーネント
関数からクラスへ!
コンポーネントのクラス
簡単なコンポーネントを作ってみよう
属性を利用する

3-2 プロジェクトでコンポーネント開発!
プロジェクト、再び!
プロジェクトの表示用ファイルについて
Index.htmlについて
index.jsについて
Appコンポーネントについて
Appコンポーネントを書き換えよう
属性を利用する
コンポーネントを組み合わせる
Rectコンポーネントを別ファイルに!

3-3 ステートを使いこなそう
ステートを利用しよう
ステートを用意する
ステートの更新
イベントをバインドしよう
ステートで表示を切り替える
プロパティとステートの連携
リスト表示コンポーネント

3-4 コンポーネントのさまざまな機能
子エレメントを活用するには?
フォームの利用
値のチェックを行うには?
コンポーネントのイベント作成
onCheckイベントを持ったコンポーネント!
コンテキストについて
コンテキストを使おう
Providerでコンテキストを変更する
コンテキストでテーマを作る
この章のまとめ

Chapter4 Reduxで値を管理しよう!
4-1 Reduxを使ってみよう
値の総合管理は重要!
Reduxをインストールしよう
Reduxの仕組みを考えよう
ストアとレデューサー
レデューサーの作成
ストアを作成してみよう
レデューサーの作成
プロデューサーと表示作成
コンポーネントからストアを利用する
コネクトについて
Massageにストアをコネクトする
ディスパッチとアクション
全体の流れを理解しよう!

4-2 簡易メモを作る!
より複雑なアプリでのRedux
Index.jsとApp.jsを作成する
Store.jsを作成する
Memoコンポーネントを作る
Itemコンポーネントを作る
AddFormコンポーネントを作る
DelFormコンポーネントを作る
Findformコンポーネントを作る
ポイントはアクションクリエーターとディスパッチ

4.3 Redux Persistによるデータの永続化
「永続化」ってなに?
Redux Persistのインストール
Redux Persist利用の手順
パーシストゲートの利用
使用オブジェクトのインポートについて
カウンターを永続化しよう
App.jsの作成
ストレージの内容を確認しよう
メモアプリを永続化しよう!
動作エラー発生!
永続化の対応をしよう
不要なデータも保存される?
保管するデータを整理しよう
永続化の停止と再開
この意のまとめ

Chapter5 Next.jsでReactをパワーアップしよう!

5-1 Next.jsを使おう
クライアントサイド・レンダリング?
Next.jsプロジェクトを作ろう
ページを作ろう!
Next.jsは「pages」でページを用意する
エクスポートしてみよう
出力されるHTMLファイルをチェック!
スタイルを適用する
ビルトインCSSを使おう!
CSSファイルは使えない?

5-2 複数ファイルを活用しよう
複数のページを作ろう
外部スタイルシートの利用
コンポーネントの利用
レイアウトを考えよう
レイアウト用コンポーネントの作成
ページでレイアウトを利用する
の設定静的ファイルの利用Imageコンポーネントを表示する

5-3 Reduxでデータを共有する
Reduxを使う準備
AppWithReduxコンポーネントの作成
修正Appコンポーネントを作る
ストアを用意しよう
ストア作成の内容をチェック!
Counterコンポーネントを作る
Counterを利用しよう

5-4 足し算専用電卓を作る!
メモ書きから足し算する電卓!
ストアを修正する
Calcコンポーネントを作ろう
calc.jsを作ろう
Style.jsにスタイルを追加
この章のまとめ

Chapter6 Firebaseでデータベースを使おう!
6-1 Firebaseを使ってみよう
データベースを使おう!
Firebaseってどういうもの?
Firebaseプロジェクトを作る
オーバービューをチェック!
データベースを作ろう
データを構築しよう
Authenticationを表示する
コピーされる設定情報について
ReactでFirebaseを使おう!
index.jsを修正する
App.jsの修正
Sampledataコンポーネント
Firebaseアクセスをチェック!

6-2 Firebaseデータベースの基本操作を覚える
Next.jsプロジェクトにFirebaseを組み込む!
ストアでFrebaseを初期化する
fireページの作成
特定IDのデータを表示する
fire_findページを作ろう
Firefindコンポーネントを作る
データの追加
fire_addページを作ろう
Fireaddコンポーネントを作る
データの削除
Firedeleteコンポーネントを作ろう

6-3 メッセージ機能付アドレスブックを作る
メッセージが送れるアドレス帳!
アプリの設計をしよう
store.jsを修正しよう
Accountコンポーネントを作る
addressページを作る
Addressコンポーネントを作成する
address_addページを作る
AddressAddコンポーネントの作成
address_showページを作る
AddressShowコンポーネントの作成
ライブラリファイルの作成
スタイルの用意
Firebaseのデータベースアクセスを設定
ユーザー認証の設定

6-4 スクリプトのポイントをチェック!
ポイントを押さえて読む!
データの構造を確認
ソーシャルログインの設定
Firebaseのキーについて
アドレスデータの取得
データの作成
登録したアカウントのデータを表示する
メッセージの表示
メッセージの送信
今後の改良点は?
これから先はどうするの?

Addendum JavaScriptオブジェクト超入門
A-1 JavaScriptの基本を超簡単おさらい!
この章の目的は?
この章で説明すること
値と変数について
制御構文について
配列について
「関数」について
アロー関数について

A-2 オプジェクトをマスターしよう
オブジェクトについて
オブジェクトを使う
メソッドについて
クラスを使おう!
extendsで機能を継承!
スクリプトファイルの読み込み
モジュールについて
モジュールを利用する
export defaultについて
Reactのために必要な知識とは?.

索引