「React」を導入している３社 − ランサーズ・Mozilla・freee − による実践勉強会！

12月15日（月） 19時半より 「【ランサーズ×Mozilla×freee】React実践！勉強会」が開催されました。

「React」を実際に導入している企業からtipsを共有していいただき「React」に関して知識を深ることが本イベントの目的。自社への導入を検討している方や「React」の勉強を始めた方など、70名ほど参加されました。

登壇者とテーマは次の通りです。

「ReactのHigher-order Componentsの利用方法」
ランサーズ株式会社 沼野剛志さん

「Type-Safe Flux Using Flowtype」
freee株式会社 野口将人さん（@joe_re）

「debugger.html：React x Redux app built-in Firefox」
一般社団法人Mozilla Japan 清水智公さん（@chikoski）

それでは内容を紹介します！

ReactのHigher-order Componentsの利用方法

1人目の登壇者は、ランサーズ株式会社 プロダクト企画開発部の沼野剛志さんです。

沼野剛志（ぬまの・つよし）／ランサーズ株式会社 プロダクト企画開発部。2014年北陸先端科学技術大学院大学卒業。株式会社リッチメディアでの勤務を経て、2015年にランサーズへ入社。岡本太郎好き。

クラウドソーシングサービスの「ランサーズ」では、2015年の6月から、メッセージ画面やプロジェクト管理画面に「React.js」を使用しています。

その中でも沼野さんの講演のテーマは「Higher-order Components（以下、HOC）」について。「HOC」は、「コンポーネントを引数にして、カスタマイズしたコンポーネントを返す関数」のことであり、既存のコンポーネントに新しい機能を追加することを可能にします。

沼野さんはまず、「HOC」が初めて使われたと言われている「sebmarkbage/Enhance.js」の「gist」を例として紹介。コンポーネントを引数にとった関数が、何らかの処理を行い機能を加えることで、引数にとったコンペに合成してリターンするというのが「HOC」の基礎的な考え方です。

この「HOC」を利用しているライブラリとして、沼野さんは「react-redux」「Material-ui」「redux-form」「react-router」「radium」を紹介。これらのライブラリを使用していて「Enhancer（WrappedComponent）」のように、コンポーネントを引数にとる構成の記述を見かけた場合は、「『HOC』の実装を使っていると考えると理解しやすい」と指摘しました。

続いて、沼野さんはランサーズでの2つの実装例を紹介。

まず、「ボタン」のバリエーションを「HOC」で実現した事例です。「HOC」には大きく2つのパターンがありますが、こちらは「Props Proxy」と呼ばれる「props」を新しく追加するパターンで実装しています。

次は「ログインしていません」というダイアログを表示した事例です。この事例ではもうひとつの「Inheritance Inversion（逆継承）」というパターンによって実装しています。

「Props Proxy」のパターンでは、コンポーネントを引数にとり、コンポーネントに何か新しい「props」を加えてリターンしていました。一方、「Inheritance Inversion」では、引数にとったコンポーネント自体を「extends＝継承」し、新たなコンポーネントをつくってリターンしています。

この事例では、ログインが必要なコンポーネントは、この「HOC」を利用すればよいので、他のコンパーネント内にif文を書かなくて済むメリットがあります。コンポーネントが自身の責務に集中できる利点があるのです。

沼野さんは最後に「HOC」を利用すると「アプリケーション内で共通で利用する機能やパーツをまとめるのに便利であり、慣れてくればコードを読みやすく書くこともできる」とまとめました。当日の資料はこちらに公開されています。

Type-Safe Flux Using Flowtype

続いて、2人目の登壇はfreee株式会社の野口将人さんです。

野口将人（のぐち・まさと）／freee株式会社 エンジニア。1987年生まれ。埼玉県出身。趣味はギター。

野口さんのテーマは「Flux」アーキテクチャーへの「Flowtype」を使った型システムの導入について。まず、野口さんは静的な︎型チェックがもたらすメリットとして下記の3つを挙げます。

• コードが読みやすくなる
• コードの意図がわかりやすくなる
  → 関数の入出力が明確になるため、コードの動作を理解しやすくなる。
• 開発効率向上が見込める
  → 静的な型チェックは、実際にブラウザ上で動かさなくてもコードを書いた開発段階でエラーがわかるため。

今回のメインとなる「Flowtype」は、facebookが開発する「JavaScript」に静的な片付けを提供できるOCamelで実装された型チェックツール。野口さんは「Flowtype」の特徴として次の3点を挙げます。

• 強力な型推論
• 開発サイクルのなかでの早いフィードバック
  → 「Flowtype」が独自に依存解決し、差分が発生したところのみをチェック対象とするため、開発サイクルが早く回せるようになる。
• 「AltJS」ではない
  → 「Flowtype」は言語ではないので「JavaScript」の代替言語にはならず、あくまで「『JavaScript』の型×機構」を提供する。

続いて、野口さんは「Flux」アーキテクチャの適用を著名な図（上写真）から示していきます。

まず「ReactViews」は「ActionCreator」を呼びます。「ActionCreator」はただの関数であり、「ReactViews」から呼ばれる関係になっています。次に「ActionCreator」は「Action」を生成し、それを「Dispatcher」経由で「Store」に通知。

「Store」は受け取った「Action」に従って、アプリケーションの状態（state）を変更する。その時、「Store」はstateの変更と共に「ChangeEvent」を発行する。「ReactViews」は「Store」の「ChangeEvent」を購読し、Storeの変更に従って描画を変更する。これが「Flux」アーキテクチャーの一連のサイクルです。

野口さんはライブラリ「flux-utils」と「Web API Utils」を使ったデモを実施。上記の「『ReactViews』から『ActionCreator』」、「『ActionCreator』から『Store』」、「『Store』から『ReactViews』」の経路とWeb APIからのリクエストにおける型定義を全て実演しました。

当日の資料はこちらに公開されています。

debugger.html：React x Redux app built-in Firefox

最後の登壇者は、一般社団法人Mozilla Japanでテクニカルマーケティングを担当する清水智公さんです。

清水智公（しみず・のりただ）／一般社団法人Mozilla Japan テクニカルマーケティング所属。2001年、慶應義塾大学政策・メディア研究科修士課程修了。慶應義塾インフォメーションテクノロジセンタなどを経て、2013にMozilla Japanに参画。趣味はサッカー観戦。

ブラウザ「Firefox」の開発を行うMozilla Japanの清水さんは、「Firefox」に組み込むデバッガーに「React」を利用する事例を紹介します。

「Firefox」には「Nightly」と呼ばれる開発版など、製品版を含めて4つの段階があります。そして、現在の「Nightly」のブラウザ組み込みデバッガーは「React」で作られているのです。

「Firefox」は「XUL」という Firefox でしか利用されていない言語でUIコンポーネントが記述されています。しかし「Firefox」はオープンソースのプロジェクトであるため、多くの方に参加してもらわなければなりません。「Firefox」に搭載されているデバッガーを再実装するにあたり、これまで利用してきた「XUL」を採用せず、Web開発者が慣れ親しんだコンポーネント技術を採用することとなりました。

どのような技術が検討されたかはうかがい知ることはできませんでしたが、新しいデバッガーは「React」が採用されていました。これに合わせて、イベントと状態管理には「Redux」を、実装言語には静的解析が行える上に、文法がJavaScriptに似ている「flow」も利用されています。

続いて清水さんは、「Firefox」でのコンポーネントの使い方に関して事例を紹介しました。

例えば「デバッグ対象の選択画面」は2つのコンポーネントで構成されています。このように比較的大きな単位でコンポーネントへ分割されているのが特徴です。また「Redux」を利用しているにも関わらず、コンポーネントの内部状態を併用しているのも特徴です。これは再利用性に主眼を置いていないことが理由であると考えられます。

コンポーネントは「React」でよく使われるjsxの形で定義されるのではなく、「ReactDom」を利用しています。つまり描画されるHTMLをjsxの形で直接記述するのではなく、JavaScriptの関数呼び出しとして表現しています。

この実装に対して清水さんは「1つの.jsで閉じることができる点」と「関数プログラミング的にかける点」にメリットを感じているそうです。

さらに、状態管理には「Redux」を採用。「React-Redux」を利用して、「props」の一部を「store」へ保存してアクションさせるという一般的な書き方をしています。

清水さんは「ブラウザに組み込まれるデバッガーと言えども、普通の『React』コンポーネントの、普通のウェブアプリケーションとして作られているのです」とまとめました。

懇親会！

3名のご登壇終了後は、登壇者も交えた懇親会です！

軽食とビールを片手に、日頃からの疑問点などをお互いに共有し合っていたようです。

次回の開催もお待ちしています！