- ホーム
- > 和書
- > コンピュータ
- > Ｗｅｂ作成
- > Ｗｅｂプログラミング
出版社内容情報
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冊です。
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 アドオン
石橋啓太［イシバシケイタ］
著・文・その他
丸山弘詩［マルヤマヒロシ］
編集
内容説明
Ｒｅａｃｔ＋Ａｔｏｍｉｃ Ｄｅｓｉｇｎの導入によるコンポーネントの設計から実装まで。ＪａｖａＳｃｒｉｐｔライブラリＲｅａｃｔの基本から、ＵＩデザイン設計、コンポーネントの実装、モジュールバンドラーｗｅｂｐａｃｋによるソースコードのビルド、Ｒｅｄｕｘによる状態管理、プロダクトの品質維持などリアルな開発現場から生まれた実践ノウハウを解説。
目次
１ Ｗｅｂ開発の動向
２ Ｒｅａｃｔの基本
３ Ａｔｏｍｉｃ Ｄｅｓｉｇｎ
４ ソースコードのビルド
５ コンポーネントの実装
６ ＣＳＳの実装
７ ロジックの実装
８ プロダクトの品質
著者等紹介
石橋啓太［イシバシケイタ］
１９８７年生まれ。ＤＭＭ．ｃｏｍラボ所属。デザイナーとしてＷｅｂサイト制作を経験後、２０１４年５月より現職。ネイティブアプリのＵＩ／ＵＸデザインやＷｅｂフロントエンド業務に携わる。現職で本格的にＪａｖａＳｃｒｉｐｔを学習し、イベントへの登壇やＯＳＳへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なＷｅｂ開発を研究している（本データはこの書籍が刊行された当時に掲載されていたものです）
※書籍に掲載されている著者及び編者、訳者、監修者、イラストレーターなどの紹介情報です。
感想・レビュー
※以下の感想・レビューは、株式会社ブックウォーカーの提供する「読書メーター」によるものです。
Q
も
Ryota Iida
