Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る

React.jsを使ってプロトタイプを作る。

コンポーネント指向をすすめるなら、プロトタイピングは実用性と実現性を兼ね備えていく必要があるのかもしれない。
本当の意味でのRapid Prototypingはイニシャル開発だけに求めるものではない。

…というお話をまとめました。

## サンプルで使ったInVision -> https://projects.invisionapp.com/share/6V2T05XAN#/screens

Transcript

1. Rapid React Prototyping React.jsでUIデザインプロトタイプを作る React.js Meet Up#1… Copyright Tsuyoshi Higuchi 2015
2. PROFILE UI Designer, Front-End Engineer, UX Architect 株式会社グノシーで こんなことをやっています。 Tsuyoshi Higuchi 趣味でサービスやアプリを作ったりしてます。こんなのとか→ START MAPS
3. AGENDA 1. UIデザイナーがReact.jsを実務で扱ってみた。 2. Rapid PrototypingとReact.js 3. まとめ
4. 1. UIデザイナーがReact.jsを実務で 扱ってみた。
5. グノシーでは… Platform展開を行うにあたって、 WebViewによる スモールアプリケーションの 開発を行っています。 DeNAトラベル × Gunosy Chat UI ココは React.js
6. そこで、React.jsを採用 使って気づいた、これまでの開発と違うところ
7. React-wayに乗れないDOMと関係する ライブラリ(jQueryなど)との共存 コンポーネントを意識しないデザインはつらい マークアップエンジニアのつくったDOMはほぼ ReactのElementに書き換えなければならない
8. 早い段階からReact-wayにのることが重要
9. Rapid Prototyping 実機確認をいろいろな手法で実現して、 ユーザーヒヤリングや開発関係者との確認を素早く 何度も繰り返すことで、サービスの質を高めること。
10. Invision 最近はこのあたりをみんな使っている しかし、画像ベースのツールが多く 細かい点でつらい Prott Flinto
11. Design in Browser PhotoshopやSketchを介さず、 Markup, Cssで直接デザインしていく方法。 言い換えれば直接コードを書く行為。
12. これらをReact-wayに乗せていかなければならない
13. React.jsはComponent指向
14. いくらツールや手法が便利でも、 コンポーネント指向のないツールや手法では React.jsはまかないきれない
15. React.jsもコンポーネント定義がないまま 作っていくと迷う
16. コンポーネント志向 = UIデザインドリブン プロトタイプからReact.jsで作れば色々捗りそう
17. 2. Rapid PrototypingとReact.js
18. プロトタイピングツールでやるとここが面倒臭い - 遷移の設定をページ毎にアサインしなければならない - Fixedレイヤー（ヘッダーなど）が矩形でしか設定できない - コンポーネントだけの変更も対象ページ全て書き出さないとならない
19. Example カメラアプリ的なもの
20. 1. グラフィックツールで コンポーネント毎にUI デザインの作成 レイヤーに.Component_ というPrefixをつけておく LayerSectionやLayerをDOMに 見立ててデザイン
21. 2. コンポーネントの 子要素（ボタンなど） は画像で出力 Component_add-button.png Component_setting-trigger.png Component_camera-roll.png Component_camera-view.png :pngをつけているレイヤーを Pngファイルで出力にしている
22. 3. Reactコンポーネント クラス作成 コンポーネント毎に ファイルを分けておくとさらに 管理しやすい。 PSDからReact Elementを書き出す ライブラリを近日公開します。 気が向いたらSketchとES6対応も。 !
23. 4. React Routerで 遷移を決める CSSTransitonGroupを 使うなどすれば、 Transion Animationも 実装できる。
24. あとは、 画像にしているコンポーネント毎に、 さらにReact Elementを実装していったり CSSをあてていく
25. プロトタイプをそのまま 実際の実装へもっていくことも可能になる React NativeやReact Canvasでもそのままリッチアプリケーションも可能かも!?
26. コンポーネント単位で管理できるので、 ページ単位でデザインを更新しなくてよい。
27. 3. まとめ
28. サービスデザインは 小さいところへのフォーカスがより重要になる
29. React.jsで小さく ささっと作って よりよく改善しよう！
30. 最後に…
31. 株式会社グノシーでは フロントエンドエンジニアを 絶賛募集中です！