JavaScript勉強会

JavaScriptの学習日記

React開発 現場の教科書

最近、Reactの話題が盛り上がっているので、使い方を理解してみたいと思いました。

 

jp.techcrunch.com

 

本屋でReactの解説書を眺めたら、図解で分かりやすい本がありました。

「React開発 現場の教科書」という本です。

 

React開発 現場の教科書

React開発 現場の教科書

 

 

目次

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

 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 アドオン

 

索引

謝辞・プロフィール

 

著者紹介

(p.327)

石橋 啓太(イシバシ ケイタ)

1987年生まれ。

DMM.comラボ所属。

デザイナーとしてWebサイト制作を経験後、2014年5月より現職。

ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。

現職で本格的にJavaScriptを学習し、現在ではイベントでの登壇やOSSへのコミット活動を行う。

デザインから実装まで担当できる強みを活かして、ユーザビリティアクセシビリティなどを重視した高品質なWeb開発を研究している。

サービスやガジェットなどは新しいものが好き。

そして、梨とビールと音楽が大好物(楽器は弾けない)。

 

編集者

丸山 弘詩(マルヤマ ヒロシ)

書籍編集者。

早稲田大学政治経済学部経済学科中退。

国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。

大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダクトディレクション、開発マネージメントなどを手掛ける。

著書に『スマートフォンアプリマーケティング 現場の教科書』(マイナビ出版刊)など多数、編集書籍に『ブロックチェーンアプリケーション 開発の教科書』『ビッグデータ分析・活用のためのSQLレシピ』(マイナビ出版)など多数。

 

協力

田宮 直人(企画提案)

堀川 豊(構成)

佐々木 亮彰(査読)

 

出版社情報

book.mynavi.jp

 

感想

React.jsとVue.jsを比べると、最初に覚える事柄が少ないせいで、Vue.jsの方が使い方が簡単そうに見えます。

以前にReactの本を見たときは、JSXとかいろいろ覚えることが多そうで、使うのが面倒くさそうだなーと思い、敬遠してました。

しかし、JSフレームワークの代表格みたいなかんじで、たびたびReactが話題になってたので、一度使い方について理解しておきたいと思いました。

 

現在は、Reactの解説書がたくさん出ています。

その中で本書は、パラパラっと眺めたかんじ、図解があって説明が分かりやすかったです。

この本で得たReactの基礎知識を基にして、他のReact本も読んでみたいと思います。

 

Reactのコンセプト紹介

本書を読んでみたいと思ったきっかけは、12ページのReactの紹介部分です。

 

f:id:jsstudy:20190509002015j:plain

 

(p.12)

2-1-1 Reactの特徴

Reactの公式サイトでは、下記の3項目を特徴として掲げています。

 

  • Declarative(宣言的)
  • Component-Based(コンポーネントベース)
  • Learn Once, Write Anywhere(一度の学びで何でも書ける)

 

上記の特徴はReactのライブラリとしての利点を正しく表しています。

 

reactjs.org

 

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

 

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

 

Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

 

(和訳例) 

宣言的

Reactを使うと、対話型UIを簡単に作成できます。

アプリケーションの状態ごとに簡単なビューをデザインすることで、Reactはデータが変更されたときに適切なコンポーネントだけを効率的に更新してレンダリングします。

宣言ビューを使用すると、コードを予測しやすくなり、デバッグが容易になります。

 

コンポーネントベース

独自の状態を管理するカプセル化されたコンポーネントを構築し、それらを構成して複雑なUIを作成します。

コンポーネント・ロジックはテンプレートではなくJavaScriptで記述されているため、豊富なデータを簡単にアプリケーションに渡し、DOMから状態を除外することができます。

 

1回学べば、どこでも書ける

既存のコードを書き直さなくてもReactの新機能を開発できるように、残りの技術スタックについては想定していません。

ReactはNodeを使ってサーバ上でレンダリングし、React Nativeを使ってモバイルアプリを動かすこともできます。

 

この「宣言的」っていう考え方がいいなーと思いました!

 

Declarative

 Reactの最大の特性であり、従来のJavaScriptによるUI開発と大きく異なるのは、「Declarative」=「宣言的」であることです。
 例えば、jQueryを用いる実装は、各イベントに合わせて手続き的に処理を記述していきますが、ReactではUIの各状態(例えばタブやチェックボックスの選択状態)ごとの表示をあらかじめ定義として記述します。そしてデータが変更されたときに、その定義に沿った形へと適切に表示を更新します。


 具体例で説明しましょう。仮に、UIに次にあげる3種類の表示パターンがあると仮定します。

 

1.フォームが空っぽ
2.フォームに文字が入力されている(その時はチェックマークが表示される)
3.フォームに入力された文字が20字を超えている(その時はエラーメッセージが表示される)

 

 jQueryで実装する場合、フォームへの文字入力イベントを起点として、それに繋げる形で関連する表示変更をUIに対して施す実装です。さらにその処理を直接拡張する方向で、文字数が20文字を超えたタイミングを、新たなイベントの起点として別の処理を実行させます。

 

 jQueryでの実装と比較してReactで同様のものを実装する場合、初めに3パターンの表示差分があることを宣言的に実装します。それぞれ「どのような条件」で「どのような表示結果」になるかを要件通りに記述することになります。

 この実装をブラウザで描画すると、フォームが空っぽのときには何も表示されませんが、入力した瞬間にチェックマークが描画されます。また、20文字を越えるとチェックマークの代わりにエラーメッセージが描画されます。Reactでは、この通り、「この時はこうあるべき」といった視点でUIのコードを記述できます。実装後に表示パターンの増減があっても、追加が容易です。また、特定のデータを持つ場合のみを修正したいケースでも、どこに手を入れるべきか分かりやすくなります。

 

 宣言的であることは条件と結果が明快で予測しやすく、デバッグのことを考慮しても原因の特定が容易であるメリットもあります。

 

jQueryよりもReactの方が、分かりやすくて簡単とのこと。

jQueryよりも見通しが良いなら使ってみる価値があると思いました!

 

ReactのJSX(JavaScriptの構文中にXML風のものをそのまま書く記法)も、それほど面倒くさくないかな?

qiita.com

 

Reactの「宣言的」という特徴を意識しながら、Reactの使い方を練習してみたいと思います。