2016/04/21 開催のReact.js & AngularJSの勉強会資料です

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

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

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

4. 1. 組織のスキルセット

5. • HTMLとCSSの専⾨家 JavaScript: △ の⼈
よくあるスキルセット
デザイナー、HTML/CSSコーダー
• JavaScript: ○ HTML: △ CSS: × の⼈
サーバーサイドエンジニア
だけ だと…

6. • デザイン上のエレメント構成
• 再利⽤や責務、テストのしやすさ
を考慮したコンポーネント分割
ほぼ無理
両立させる必要がある

7. • HTMLとCSSの専⾨家
最低限
• JavaScript OKな⼈
が何⼈か必要

8. 大まかな手順
デザイン
(イラレ的な)
JavaScript
仮のHTML構築
HTML/CSS
コーディング
1
HTML/CSSな⼈JavaScriptな⼈
2 3
コンポーネント設計
2でreact-bootstrapやmaterial-ui等
UIツールキットを利用するとうまく行きやすい

9. 2. 学ぶステップ

10. • react-howto
https://github.com/petehunt/react-howto
• 翻訳: React初学者のためのガイド @Qiita
(原⽂の⽅が若⼲新しいようです)
参考文献

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

12. 3. props, state, flux

13. デモ

14. Reactのモノ作り
コンポーネントのツリー構造を作っていくこと
1. ある「画⾯」を表すコンポーネントを作る
2. 画⾯内の「部分」を担うコンポーネントを切り出す or
既存コンポーネントを配置する

15. コンポーネント分割
画面内で持つべき「責務/役割」をベースに
なるべく小さく
• ⾒通しが良くなる
• テストしやすい

16. データフロー設計
基本、なるべくツリーの上部のコンポーネント
誰がデータを持つべきか
中間状態を持つ必要があれば
末端コンポーネントにstateを持たせる
全体としてstateの利⽤を極⼒控える

17. 中間状態？
データとして不完全な(例えば編集中)の状態
良い⾔葉を思いつかなかったので… (適当な造語)
e.g.
• ⽇付を⼊⼒中のテキストフィールド

18. Screen
ToolsWidget
VisibleColumns
Table
表示カラム

19. VisibleColumnsStore
Fluxは平たく言うと
グローバル変数
Screen
ToolsWidget
VisibleColumns
Table
表示カラム
変更Action
通知