Gunosyのblogには初登場になります。UI/UX DesignやFront-Endを担当している樋口と申します。
さて、今注目のライブラリといえばReact.jsです。 React.jsは弊社でもWebViewで実装されたChatUIなどで採用しているViewに特化したOne-Way Bindingなライブラリです。
そんな注目のライブラリについて業界的にどのような採用状況なのか知りたく、先月2015年3月30日に弊社オフィスにて、React.jsのMeetup “Gunosy React Meetup” を開催しました。
予想以上の盛況ぶり
イベント公開時は20人 + LT枠ということで25名程度を想定して募集をさせていただいのですが、Reactiveの風が追い風になってあっという間に100名近くまで登録がありました。 丁度、開催前にGunosy.goの勉強会が同じ規模で開催され、人数的にまだまだオフィスに入りそうな雰囲気でしたので10名ほど追加しました。次回、このような勉強会を開催する際は抽選制にしていこうと思います。
そんなイベントの実情はこの辺にして…当日のレポートと所感を簡単ですがまとめたいと思います。 すでにまとめていただいている方もいらっしゃるので、そちらも合わせてご覧いただくと尚良いかと思います :)
http://kadoppe.com/archives/2015/03/gunosy-react-meetup.html
イベントの内容
01. Reusable Component UI Design - React.jsで考える再利用性の高いUIデザイン
Tsuyoshi Higuchi @tyshgc
僭越ながら、React-wayから見えてきたUIデザインのワークフローと今後の考え方についてという僕のスライドです。
掻い摘んで話すと、UIデザイナーとエンジニア（特にFront-End）とはまだまだ距離があり、双方に寄って行くほうが色々な側面からも良い。エンジニア領域への入り口にReact.jsのような学習コストの低いものを採用してみるのも一つ手ではないかなと思いますし、Reactiveを学ぶのに良い材料だと思います。データフローを知ってこそできるUX改善やUIデザインもあります。サービスの運用フェーズではコンポーネントにフォーカスした小さい改善からのグロースハックなど、UIデザイナーはReact.jsを足がかりにして実装フローに参加していけばサービス開発にとってハッピーかもしれません。
02. React Canvasで作るFlappy Bird
Takuya Tejima @tejitakさん
www.slideshare.net
LINEでFront-Endエンジニアをされている@tejitakさんは、React CanvasでつくったゲームサンプルをベースにReact Canvasによる描画やコンポーネントの扱いについてお話ししていただきました。
Flipboardのスマートフォンブラウザ版が60fpsで表示をしているところや、すでにあるゲームのスクリプトをReact Canvasにする過程で見えてきたことなどをまとめていただきました。
アニメーション => CSS3はCanvasで使用できないため自分で作った => React State Animation
setStateとアニメーションの処理速度 => setStateナシが少し速い。
懸念: React Canvasのリポジトリに動きが少ない…
例えば、Flipboardのスマートフォンブラウザ版を触っていただけるとわかると思いますが、Tapに関するディレイが少ない。これはCanvasによる効果だと思います。アニメーションなどの表示を60fpsにというよりも、僕はこちらのタッチに関する精度が気になりました。
ちなみに、@tejitakさんとは毎週日曜朝10時から渋谷で完全趣味でサービスやアプリを開発する集まりを主催されており、僕も参加して一緒にSTART MAPSというスタートアップを地図上に可視化するウェブアプリを作ったりしています。
03. Immutable.js and Kizuna.js
Gregory Roseberry @gregさん
弊社Golangエンジニアの@gregさんの発表です。スライドはこちらから閲覧できます。
今回は、Fluxを使うまでもないSPAのコンポーネント間のデータフローを解決するために作った彼のKizuna.jsの紹介と、Immutable.js（Facebook製）の紹介など。
僕の方でも実際プロジェクトの中でKizuna.jsを使用しました。 例えばモーダルのコンポーネントとモーダルを表示するトリガー（button類）が別のコンポーネントにあるような、小さなフラグメントを渡す際にFluxでは実装コストが高い。 そういうときにこのクレイジーwなTwo-Way Bindingを使うとすんなりできました。
04. 元某エヴァンジェリストが見るReactNative
Yuichiro Masui @masuidriveさん
IT芸人としてお馴染み?の増井さんの元某エヴァンジェリストとしてのReact Nativeの今後の展開についてお話しいただきました。
React Nativeはクロスプラットフォーム的なフレームワークとして見られそうですが、実はそういう側面でつくられていないというところから、比べられがちなTitanium Mobileと比較など。 Facebook側はTitaniumとは違い、React Nativeでの収益などは考えておらず、あくまで自分たちの複数跨ぐプロダクトのために使っているので、永続的に存在し続けるライブラリかどうかは微妙とのこと。
05. React.js v0.13 changes and beyond
Toru Kobayashi @koba04さん
Qiita Advent Calender 2014の一人React.jsでご存知の@koba04さんです。 2015年4月24日に開催されるReact.js Meetup#1の主催もされるそうです。ちなみに僕が見た時点では席が全て埋まっていたので、LTをちょこっとさせていただくことで無理やりねじ込ませてもらいました。
今回は、React.jsのv0.13について気になる部分のまとめをお話しいただきました。 ES6のClassなど諸々がデフォルトになっていたり、mixinのサポート状況（0.13では未対応。それにあたってReactRouterの対応状況）など。
ちなみに、弊社ではv0.12で今の所実装しています。mixin関連の問題も徐々に対応がはじまっているようなので次プロジェクトでは考えたいところです。 スライドについてはかなり細かいところまで掘り下げていただいているので、今後の採用基準としてとても良い資料です。
06. Native開発者からみたReact Native
Yuki Matsumoto @y_matsuwitterさん
弊社筋肉PM&スーパー雑用エンジニアからは、iOS NativeエンジニアとしてReact Nativeでアプリを作ってみた経験などをまとめていただきました。
増井さんも同様にお話されていましたが、NativeのApi参照はやはりNativeのUIKitの知識が必要なため、結局それをやるならSwiftやObjective-Cで記述したほうが早いが、Reactiveを実装するには良いライブラリとのこと。
ちなみに、デザイナー目線からするとNative Appのモック制作などにはそれなりに良いのでは?と思います。
全体の所感
懇親会などでもいろいろヒヤリングしましたが、React.jsを実際のプロダクトに導入しているケースはほとんどないようでした。また、SEOや初回表示時のことを考えるとNode.jsでIsomorphicというところですが、弊社BackendはGo言語なので…さてといったところです。 React.jsだろうが何だろうが、採用基準はあくまでもプロダクト上マッチしているかどうかという基本中の基本で選ばれるべきかと思います。そういう目線でみれば、WebViewでSPAの場合はReact.jsは良い選択肢の一つではないかと改めて感じました。
また、UIデザインの観点でみればコンポーネントでプロダクトを形成していく考え、そして再利用する考えは非常にすっきりした設計思想だと思います。今後も活用していければなと思います。
