関連サイト
本書の関連ページが用意されています。
内容紹介
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冊です。
書誌情報
- 著者: 石橋啓太(著), 丸山 弘詩(編集)
- 発行日: 2018-03-23 (紙書籍版発行日: 2018-03-23)
- 最終更新日: 2018-03-23
- バージョン: 1.0.0
- ページ数: ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
石橋啓太
1987年生まれ。ウェブサイトデザインやHTML・CSSを中心にデザイナーとして4年ほど経験後、2014年5月に株式会社DMM.comラボ入社。ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。現在では各種イベントでの登壇やOSSへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なWeb開発を研究している。サービスやガジェットなど新しいものが好き。梨とビールと音楽が好き（楽器は弾けない）。
丸山 弘詩
書籍編集者。早稲田大学政治経済学部経済学科中退。国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダクトディレクション、開発マネージメントなどを手掛ける。編集した書籍に『ブロックチェーンアプリケーション開発の教科書』『ビッグデータ分析・活用のためのSQLレシピ』（マイナビ出版）など多数。
目次
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 アドオン