こんにちは。グッドパッチのフロントエンドエンジニア/グロースデザイナーの右寺です。

今回は、9/8(火)にイベント＆コミュニティスペース dots.で行われたイベント「React.js meetup #2」のレポートをお届けします！

React.jsとは？

React.jsはFacebook謹製のJavaScriptライブラリです。一昨年のリリースから急激に人気が上昇しています。

その特徴は、同じJavaScriptライブラリであるAngularJSがMVCフレームワークとして全般的な機能を提供するのに対し、React.jsではMVCのViewにあたる部分をComponentとして提供することに特化している、と言えます。

現在、React.jsはFacebook社内だけではなくYahoo!やTwitter、Airbnbなどでも採用されているようです。

主催のお二人

今回のイベントは、昨年末にReact.jsのアドベントカレンダーを一人で書き上げたことで有名な@koba04さんと、弊社グッドパッチでProttの開発に携わっているフロントエンドエンジニアのよしことのお二人の主催で行われました。

予約の時点で定員の2倍近い300件以上のお申し込みをいただき、当日もあいにくの雨にもかかわらず150人以上の方にご来場いただいきました。

残念ながら参加できなかった皆さまも、こちらのイベントレポートで雰囲気を掴んでいただければと思います。

React v0.14について

主催の@koba04さんのセッションからイベントはスタートしました。

IMG_2606

セッションの最初に、@koba04さんからの「React.jsを書いたことがある人はいますか？」という質問には会場のほとんどが手をあげ、さらに「仕事でReact.jsを使ったことがある人はいますか？」という質問にもちらほらではありますが私が思ったよりも多くの手が上がり、React.jsの浸透っぷりを実感させられました。

@koba04さんのセッションのテーマは表題のとおりReact.jsの次期バージョンであるv0.14について。
現在beta-3がリリースされていてもうそろそろRCもリリースされているv0.14の、現行のv0.13との違いについてのお話となりました。

その一番大きな変更点は、Stateless Componentsとのこと。
これにより、関数としてReact Componentが定義できるようになり、その結果としてパフォーマンスの最適化が図れるそうです。ただ、v0.14では最低限の実装であるため、今後の発展がまだまだ必要というお話もありました。

二つめはDOM node refs。
DOM nodesをDOM component refsとして参照できるようになるらしく、値の取得などが楽に書けるようになりそうです。

さらに、最近のほかのライブラリでも同じような動きがありますが、v0.14からパッケージが分割され、React(基本部分)、ReactDOM(DOM操作部分)、そしてその他多くの個別のパッケージ、という風になるようです。

また、react-toolsは非推奨になるようで、代わりにBabelを使いましょうとのことでした。
ちなみに、ご存じの方もいるとは思いますがBabelの作者さんはFacebookに入社したらしく、React.jsとBabelの相性は良くなっていくことが期待されます。

その他、v0.15は内部整理的なリリースになるだろうことや、React.jsでのCSSアニメーションが辛い問題を解決するReact-Motionについても軽く触れられていました。

当日の資料はこちら

Flowtypeについて

次に行われたのは、なんとFacebookのソフトウェアエンジニアであるViktor Kelemenさんによるセッション。
ロンドンのFacebookオフィスから来日されたそうです。

IMG_2627

セッションのテーマは、Facebookで開発しているFlowについて。
会場へ「Flowを使っている人はいますか？」という質問がありましたが、React.jsに比べてこちらはあまりいないようでした。
Viktorさんは「素晴らしいのに…」と残念なご様子。しかし、Twitterでは「Flow使いたい！」「気になっているけどまだ使えていない」などの声が上がっており、潜在的な注目度は高いようです。

Flowの理念は「Keep JavaScript applications safe and sane」。
よくある、「大規模プロジェクトになるとJavaScriptだと型指定ができないから辛い」という問題を解決するために作られたそうです。

FlowはPHPをベースにしたHackに強く影響を受けているとのことで、今回のセッションではその特徴を詳細に紹介されていました。

細かい仕様の話はここでは省きますが、

  • TypeScriptとは違って、言語ではないこと(あくまでもただのツール)
  • 自動型推論
/* @flow */
function foo(x) {
  return x * 10;
}
foo('Hello, world!');
hello.js:5:5,19: string
This type is incompatible with
  hello.js:3:10,15: number
  • anyとは別にmixedを用意(mixedはanyと違って、mixed以外の変数に入れることはできない)
var foo :mixed = 'foo';
var bar :mixed = foo;  // Valid
var baz :string = foo; // Type error
  • Union
var x: number | string = 0; // Valid
var a: 'foo' | 'bar' = 'foo'; // Valid
a = 'bar'; // Valid
a = 'buzz'; // Type error
  • Nullable Type
var a: ?string = undefined; // Valid
var b: string = null; // Type error

あたりは良いなと思いました。

また、最後に質問コーナーがあり「Facebook社内でFlowはどのくらい使われているのか？」という質問について「新しいプロジェクトではほとんど使っている。古いコードに関しては徐々に導入を進めている」という回答がありました。

Introduction to Redux

Gunosyの@axross_さんによるセッション。
@axross_さんは現在、Gunosyで開発しているiOSアプリのwebviewの中でReact.jsを動かしているそうです。(react、redux、react-router、bemmerを使用)

IMG_2635

まず初めにReduxは、JavaScriptアプリケーションのための予測可能な状態コンテナでFluxの一種であるという説明がありました。同じFluxのFlummoxの影響を受けているらしく、そのFlummoxの開発者は「v4.0を最後にする。あとはReduxを使ってくれ」と言ってるという話も。

現在のフロントエンド開発現場の中で多くの人が、

  1. SPAが当たり前になって
  2. 凝った作りを求められ
  3. それを実現するためにより多くの状態管理が求められ
  4. 手に負えなくなる

という現実を実感しているかと思います。その結果、

  • 絶えず変化する状態を管理するのが難しい
  • バグの再現が厳しい
  • 機能追加の際の影響範囲が大きい

という問題にぶちあたってしまいます。

その中で有用なのがこのReduxで「React.jsのおかげでDOMと状態は切り離されたけどその状態の管理はできない。しかしその状態の管理を一番うまくできているFluxがこのReduxである」とのことでした。
Reduxが上記のような問題を(100%ではないが)解決してくれるとのことです。

Redux自体の詳細について気になる方は当日の下記資料をぜひ見てみてください。

当日の資料はこちら

React Everywhere

IncrementsのFrontend SPA Specialist、@mizchiさんによるセッション。

IMG_2650

  1. React and Universal
  2. Flux and DDD
  3. Serverside Rendering

という3つのお話をセッションの中でされていました。

まずは、Universal JavaScriptとは何かというお話で「nodeでもブラウザでもどこでも(IoT製品まわりとか？)走るしPureJSはUniversalだよね」という話からJSONにシリアル化して他と値を受け渡しできるものはUniversalだ、というお話をされていました。

その上で、React.jsはUniversalかどうかを考えると、document.querySelector('#hoge');などは違うけどv0.14ではReactDOM.renderとしてDOMを扱うための別パッケージになっているので、そう言って良いと。
React.jsの場合、domだけでなく、react-native、react-canvas、react-pixi、react-three、react-blessedなどもあり、Universalという意味ではかなりの強みがありそうです。

@mizchiさんはこれまで、Backbone.jsやVue.js、AngularJSなども触ってきた中でどれも問題がある(「Backbone.jsは名前の割に骨がない」みたいなコメントもｗ)が、React.jsは良い感じとのこと。

状態管理が簡単になるし、UIとDomainLayersを切り分けやすいはやっぱりかなりの強みのようです。
ただ、最適化のために細かい管理が必要な点とファイルサイズが大きい点については問題と指摘されていました。

次にDDDのお話。

React.jsのメインの理念に「Just the UI」。DDDにおけるUI Layerを担うのがReact.jsで、Application LayerをFluxが担っていると言える。

そのFluxの話の中で、Incrementsが出しているKobito for Windowsを開発する際に作ったものを抜き出してArdaという独自Fluxも開発されているというお話もありました。

最後のサーバサイドレンダリングの話は時間が無くてあまりお話は聞けませんでしたが、現在ReactPhoenixというものを開発されているそうです。
テストはこれからなのでまだ触らないで、とのことｗ

当日の資料はこちら

LT大会

休憩を挟んで行われたLT大会。
こちらも本編のセッションに負けず、豪華なメンバーによる実のある話がたくさん聞けました。

Google Closure Toolsで作った大規模サービスにReactを導入した話

サイボウズの@ama_chさんのLT。

JavaScriptのコードが30万行あるプロジェクトにReact.jsを導入したお話。

いろいろと大変そうでしたが、無理ということは無いらしく、既存UI資産もReact.js化してJSXの中で使えるし、

  • Fluxによって役割分担しやすくなった
  • Viewが肥大化しなくなった
  • イベントを追ってあっちこっちに飛ばずに済むようになった

というメリットを享受できているそうです。

当日の資料はこちら

DDD + Flux?

はてなの@amagitakayosiさんのLT。

@mizchiさんのセッションの中でもあったDDDのお話。 DDDの本を読んで「これはFluxでは？」と思ったところからお話が展開していきます。

Storeはドメインと実装をつなぐポートだよね、というお話。

また、FluxのDispatcherを拡張して、全イベントとその時刻を記録しておくことでリプレイ機能も可能になるデモもありました。

当日の資料はこちら

React Componentのコンストラクタを追いかけて

Fringe81の@jshosomichiさんのLT。

最近の課題はReact.js初学者への作法説明が我ながら緩いことらしく、それを解決するためにもReact.jsのソースコードを読んで理解しなおしたそうです。

話のメインは表題のとおりReact Componentのコンストラクタ。

いわゆる普通のJSのコンストラクタに比べて、React.createClassやReact.Renderでは何をやっているのかを紹介されていました。

LTの最後に詠まれた川柳がこちら。

ReactComponentのコンストラクタを追いかけて

今回のLTのテーマそのものでもありますが、「り悪と(リアクト)」を含んでいるあたりお見事です。

当日の資料はこちら

Our wish to Flowtype

サイボウズの@teppeisさんのLT。

冒頭のViktorさんのセッションでもあったFlowのお話です。

Flowの凄いところとして

  • 型推論がすごい
  • React.jsとの連携がすごい
  • 言語じゃなくただの型チェッカー(良い意味で)
  • 独自シンタックスが少ない

を挙げられており、Facebookのレポジトリでも多く使われていて期待が持てる、というお話でした。

しかし、実際に使ってみるとd.tsがサポートされていないほか、Facebook社内ではfbjsを始めとした社内のパッケージしか使っておらず、npmとの親和性が低いなどといった問題点もいろいろとのこっている点が指摘されていました。
オープンにされているしコントリビュートすれば良いとはいえ、Ocamlで書かれているという壁があったりも。。

当日の資料はこちら

まとめ

Facebookのソフトウェアエンジニアも参加することになった今回のイベント、冒頭にも書きましたが雨の中にもかかわらず多くの人が参加する熱いイベントとなりました。

SPAでサービスを構築する事例が増えている現在、その中に発生する問題を解決する手段としてのReact.jsとその周辺のエコシステムのさらなる発展が求められており、その将来を期待させられる良いイベントだったと思います。

当日のイベント模様はToggeterでもまとめられていますので、合わせてどうぞ。

Share on

Goodpatch
Goodpatch公式アカウントです。