React.jsコンポーネント設計のツボ

•

•

オンライン顧問税理士・社労士・弁理士・行政書士・司法書士

本⽇の内容

1.組織のスキルセット2.学ぶステップ3.props, state, fluxアーキテクチャ

1. 組織のスキルセット

• HTMLとCSSの専⾨家 JavaScript: △ の⼈

よくあるスキルセット

デザイナー、HTML/CSSコーダー

• JavaScript: ○ HTML: △ CSS: × の⼈サーバーサイドエンジニア

だけ だと…

• デザイン上のエレメント構成• 再利⽤や責務、テストのしやすさ

を考慮したコンポーネント分割

ほぼ無理

両立させる必要がある

• HTMLとCSSの専⾨家

最低限

• JavaScript OKな⼈

が何⼈か必要

大まかな手順

デザイン(イラレ的な)

JavaScript仮のHTML構築

HTML/CSSコーディング

1

HTML/CSSな⼈JavaScriptな⼈

2 3

コンポーネント設計

2でreact-bootstrapやmaterial-ui等UIツールキットを利用するとうまく行きやすい

2. 学ぶステップ

• react-howtohttps://github.com/petehunt/react-howto

• 翻訳: React初学者のためのガイド @Qiita(原⽂の⽅が若⼲新しいようです)

参考文献

1. React (公式のチュートリアルを⾒る・やる)2. npm (モジュールシステム, パッケージシステム)3. JavaScriptのバンドラ (gulp, browserify, webpack等)4. ES6 (俄然JSが楽しくなる)5. ルーティング (react-router⼀択か)6. Flux7. Immutable.js (バグを減らすために)

推奨ステップ

3. props, state, flux

デモ

Reactのモノ作り

コンポーネントのツリー構造を作っていくこと

1. ある「画⾯」を表すコンポーネントを作る2. 画⾯内の「部分」を担うコンポーネントを切り出す or

既存コンポーネントを配置する

コンポーネント分割

画面内で持つべき「責務/役割」をベースになるべく小さく

• ⾒通しが良くなる• テストしやすい

データフロー設計

基本、なるべくツリーの上部のコンポーネント

誰がデータを持つべきか

中間状態を持つ必要があれば末端コンポーネントにstateを持たせる

全体としてstateの利⽤を極⼒控える

中間状態？

データとして不完全な(例えば編集中)の状態

良い⾔葉を思いつかなかったので… (適当な造語)

e.g.• ⽇付を⼊⼒中のテキストフィールド

Screen

ToolsWidget

VisibleColumns

Table

表示カラム

VisibleColumnsStore

Fluxは平たく言うとグローバル変数

Screen

ToolsWidget

VisibleColumns

Table

表示カラム

変更Action

通知