React開発 現場の教科書

  • 著作者名:石橋啓太
  • 編集者名:丸山弘詩
    • 書籍:3,769円
    • 電子版:3,769円
  • B5変型判:336ページ
  • ISBN:978-4-8399-6049-0
  • 発売日:2018年03月23日
  • 備考:中級
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

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冊です。

続きを読む

商品を選択する

フォーマット 価格 備考
書籍 3,769
EPUB 3,769 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。
PDF 3,769 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

  

備考

石橋 啓太(イシバシ ケイタ)
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 アドオン

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?