React.js meetup #3 を開催しました

こんにちは、kintone プログラマの前田です。

2月23日(火)サイボウズ東京オフィスで React.js meetup #3 が開催されました。今回はこのイベントの各セッションの内容を簡単にご紹介します。なお、当日の様子は togetter でもまとめられています。

React.js meetup とは

その名の通り React についての meetup で、今回は3回目になります。当日は80人を超える参加者で大変盛り上がり、React の注目度が感じられる meetup でした。 f:id:cybozuinsideout:20160302110754j:plain

Evolving Complex Systems Incrementally

最初は @cpojer さんによる発表から始まりました。JavaScript をモダンなコードに変換するための jscodeshift を紹介する話だったと思います。全編英語で内容をすべて把握できたわけじゃないのですが、書き方が変わるとこのようにツールをつかってガシガシ既存コード書き換えていくという話が印象的でした。こうやって日々進歩する JavaScript にキャッチアップしてるんですね。 f:id:cybozuinsideout:20160303093833j:plain f:id:cybozuinsideout:20160302180601j:plain

Missing Pages: React/Flux/GraphQL/RelayJS

2番目の発表は @neth_6 さんです。こちらも全編英語の発表でした。内容は GraphQL と Relay についてです。

QraphQL の説明や、React コンポーネントの再利用性をもっと進めるための Relay の導入等、大変分かりやすく解説していただきました。

React.js ユーザのための Elm

3番目は @jinjor さんによる React.js ユーザのための Elm でした。 Elmは静的型付けの関数型言語で、ソースコードは JavaScript のコードに変換される、FRP (Functional Reactive Programing) の言語です。最近では Virtual DOM が導入されたようです。

発表の後半で Elm Architecture について紹介していただきました。Elm は FRP の言語だからといって、何も考えずに実装するとコードがカオスになってしまいがちなので、何らかのうまい設計が必要です。そこで Elm では Elm Architecture というのが考えられていて、これを使うとシンプルに記述できるようです。

React でウィジェットライブラリを作った話

4番目の発表は @yosuke_furukawa さんです。ウィジェットライブラリを React で実装した時のお話しでした。

詳しく解説してくださったのは、css-modules を用いて JavaScript の中に CSS を埋め込んだ話です。ライブラリが JavaScript ファイルだけとなったのはメリットですが、script を書く位置が難しい等デメリットもいくつかあるようです。

LT: Ruby の Virtual DOM 実装 'Hyalite' について

最初の LT は Ruby の Virtual DOM 実装 'Hyalite' についてで、@youchanさんの発表です。Hyalite は Ruby の Virtual DOM 実装で、jsx の代わりの便利なメソッドも定義されているみたいです。

LT: React コンポーネント設計と CSS

2番目は React コンポーネント設計と CSS で、hokuma さんの発表です。既存システムの画面を React で書き直した時のお話しを紹介されました。

画面上の Feed や Post などはそのまま React の Component にしてしまえばいいのですが、例えば Button はどうするのかが問題に上がっていました。最初は素朴にタグを直書きされていたみたいですが、ボタンの実装にばらつきがでたり、共通の処理を差し込みたい場合に手間がかかる等の理由で Button コンポーネントをつくられたみたいです。css はコンポーネントの階層に合わせて階層化され、特に問題はないようです。

LT: React と Loopback ことはじめ

3番目は @tyshgc さんの、React と Loopback ことはじめという発表でした。

Loopback はデータモデルの定義から自動で REST API を生成してくれるツールです。モデルのモックデータは非 PG でもさくっと登録できるようになっているみたいで、さらに React-Loopback を使えば簡単に React と連携できるとのことで、プロトタイプをさくっと作るにはよさそうなツールでした。

LT: React/Reduxにおける現場での喜びとツラみ

LT最後は ryota kaneko さんの React/Redux における現場での喜びとツラみでした。

が、喜びはもはや言うまでもないということでツラみの発表でした。まだまだ発展中の ES6 Modules やトランスパイラの仕様変更によってユニットテストが動かなくなるという事例などを紹介していただきました。デグレを防ぐことやインタフェース設計がうまくできているか等を考慮するためのテストが動かないのはツラいです。

おわりに

前述した通り今回の React.js meetup は80人を超える参加者となり、React の盛り上がりが感じられるイベントとなりました。このような交流を通して React の知見やノウハウがたまり、みんなで楽しい JS ライフが送られるようになればと思います。 f:id:cybozuinsideout:20160302113345j:plain