体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

「React.js × React Native」―メリット・デメリット、将来はどうなる?【後編】

LT1「Webpackを使ったReact Hot Loaderの導入」

パネルディスカッションの後は、LTタイムに。最初に登壇したのはISAOで社内SNS「Goalous」の開発を行っているフロントおよびサーバサイドエンジニアの吉田将之さん。テーマは「Webpackを使ったReact Hot Loaderの導入」。

Browsersyncとは、ファイル変更を監視して自動でブラウザリロードすることで、一般的に行っているもの。

React Hot Loaderは、Reactの開発においてファイル変更を監視し、ステートを保持したままReactコンポーネントの自動更新を可能にするロードモジュールだと説明。

続いて、テキストボックスに入力した文字列を表示するデモで、どのように使うか紹介した。

1つの親コンポーネントに対して2つの子コンポーネントがある。子コンポーネントを修正すると、その修正は反映されるが、ステートは保持されたままだ。

続いて親のコンポーネントをいじってみる。そこから元に戻す。その際、React Hot Loaderはどのようにそれを実現しているのか。

React Hot LoaderはWebpackなどのビルドツールに組み込んで使うことが前提になる。今回はWebpack、Browsersyncを組み合わせた事例を紹介。

まずは、gulpfileを開く。そしてWebpackConfigでBundlerを作るという手順となる。大事な点はエントリーポイントで、webpackHotDevServerとHotMiddlewareを指定すること。

また複数のエントリーポイントの時にもコツがある。React Hot Loaderはステート保持したまま、コンポーネントを更新できる便利なローダーなので、ぜひ使ってみてほしいとのこと。

LT2「Inside Bdash」

続いて、クックパッドでAndroidを開発しているhokacchaさんが登壇した。テーマは「Inside Bdash」。

Bdashはhokacchaさんが作った、SQLを書いて保存&実行できる、結果を元にグラフを書ける、gistで共有できるというアプリだ。

まずは、アプリのFlux Frameworksのアーキテクチャについて。ドメインロジックの呼び出しをどこでやっているか。描画に関すること以外のすべての処理はドメインロジックとして定義。

データベースのやり取りやAPIの呼び出し、設定の管理など。BdashではドメインロジックはAction Creatorから呼び出すようにしている。

ドメインロジックをFluxのフローから分離したのは、Storeとドメインロジックはテストしやすくなるため。Action Creatorがテストしづらい、すべてがPure Functionというのは幻想なので諦めた。

つまりStateをどう分割するか。リソースごとにStoreをすると、問題になるのは、Store同士の依存関係ができるので、Dispathcerによる交通整理や、waitForを使った依存の解決が必要になる。

1 2 3 4 5次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。