React開発 現場の教科書

React+Atomic Design

Atomic Designを導入してコンポーネントの設計から実装まで扱います。フロントエンド周りの概念を大まかに掴むことができます。Reactの基本から解説されているため、初心者の方にもおすすめです。ただmJavaScriptの知識はある程度あった方がやりやすいです。

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP

本書のサポートサイト
本書のサンプルデータ、補足情報、訂正情報などを掲載します。適宜ご参照ください。 https://book.mynavi.jp/supportsite/detail/9784839960490.html

●本書は2018年2月段階での情報に基づいて執筆されています。
本書に登場する製品やソフトウェア、サービスのバージョン、画面、機能、URL、製品のスペックなどの情報は、すべてその原稿執筆時点でのものです。
執筆以降に変更されている可能性がありますので、ご了承ください。
●本書に記載された内容は、情報の提供のみを目的としております。
したがって、本書を用いての運用はすべてお客様自身の責任と判断において行ってください。
●本書の制作にあたっては正確な記述につとめましたが、
著者や出版社のいずれも、本書の内容に関してなんらかの保証をするものではなく、
内容に関するいかなる運用結果についてもいっさいの責任を負いません。あらかじめご了承ください。
●本書中の会社名や商品名は、該当する各社の商標または登録商標です。
本書中ではTMおよびRマークは省略させていただいております。

はじめに

WebフロントエンドのUIでは、パフォーマンスとアクセシビリティの2つが最重要と考えられ、いずれもユーザー体験の向上に直結する要因といえます。昨今では、UIとUXの横並び表記に異を唱えられることもありますが、良質なUXにはUIの品質が大きく影響するものです。ビジュアルデザインやレイアウトデザインだけではなく、パフォーマンス・アクセシビリティなどプロダクト全体からの視点での解決を図らなければ、素晴らしいUIは構築できません。

コンポーネント開発はUI実装パターンとして今後の発展が大きく期待されています。フロ ントエンド開発では、周辺の技術発展に伴いJavaScriptが話題の中心となりがちですが、高品質なUIのためには、同じく必須言語であるHTMLやCSSも同列に語られるべきです。

しかし、フロントエンド開発の歴史はまだまだ浅く、UIの実装作業にはエンジニアリングとデザイン双方の視点を要することもあり、確立された手法はありません。開発チーム内でも異なる視点と根本的な知見の相違から、開発現場に混乱を来すことが多々ある状況です。しかし、体系化されてきたコンポーネントベースの開発手法を入口にすることで、両者間のギャッ プを埋めることが可能と考えられます。

そこで、本書ではReactとAtomic Designを軸に、Webフロントエンドにおけるコンポーネント開発の手法を解説します。単なる開発言語やライブラリの説明に留めず、Web開発周辺の最新動向を取り込みながら、論理的なUIデザイン設計からコンポーネントはもちろん、状態管理を踏まえたロジックの実装から、最終的なプロダクト品質を継続的に担保する手法など、さまざまな領域に深く踏み込んで解説します。

本書を通じて、将来的にはWeb開発での標準的な思考になり得る、コンポーネントベースの開発手法を理論と実践によって本質的に理解し、フロントエンドエンジニアとしての具体的な未来像を見据えて、実践力を身に付ける一助となれば幸いです。

2018年3月
石橋 啓太

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP

CONTENTS

Chapter1 Web開発の動向
1 現在の課題とその背景
1 Webフロントエンドを取り巻く環境
2 デザイナーとエンジニア
3 開発現場の悩み
4 フロントエンジニアの理想像

2 開発者が考えるべきこと
1 ブラウザ実装
2 HTML&CSS
3 CSSが抱える問題

3 設計の必要性
1 今までのWebフロントエンドコード
2 コードは生き物

Chapter2 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 ソースコードのビルド
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 EORA
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

Chapter7 ロジックの実装
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 アドオン

索引
謝辞・プロフィール

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP