React未経験だった私が、技術書典4で React本を出すに至るまで 5/19 React x ビアバッシュ 初心者勉強会 @konosumi

React未経験だった頃の当時の自己紹介 ● 普段の業務では、Web開発でjQueryをたまに使うくらい ● React経験どころか、AngularやVue.jsを触ったこともなかった ● つまり、フロントエンドJSの経験はほぼないと言っていい => 補足：Node.js で Webソケットサーバーを構築した事はあるので、 npmやES2015(例： アロー関数)などは知ってます

フロントエンド未経験の私に激震が走る 「刻一刻と変わる状況(商品情報)を リアルタイムに描画する 管理画面を開発して欲しい」

リアルタイムなシステムに必要なこと 1 リアルタイムデータ連携 ● Webソケットによる自作も考えたが、これはサー バサイドの実装が大変である ● 早々に諦めてエコシステムを調査した結果 「Firebase Realtime Database」 が良いという結論に 落ち着く 2 リアルタイムデータ描画 ● 流行りのSPAで使われているJSを調査した ●「React.js」を選択した。管理画面の特定機能で しか使わないので、只のViewライブラリである Reactのコンパクトさが決め手となった。

Reactを覚える Reactビギナーズガイドをひた すら読む ● Mac上でビルド出来るからお手軽 ● Fluxの章だけ難易度が高い(結果的に飛ばし飛 ばしに読み終える。。)

Firebaseを覚える ● Firebaseは本がなく、公式ドキュメントのスタートガイドを頼りに勉強した ● 結果的に公式ドキュメントだけでどうにかなりました。 => Google先生はさすがである。

開発する時間が足りない ● 会社では、サーバサイドエンジニア、iOSエンジニア、プレイングマネージャーの3足の わらじを履いている => プロジェクト管理もしながら、自らも開発する必要がある ● 一言で言ってしまえば「忙しい」立場である

忙しく時間がないのでReactの使い方を工夫する 1： Reduxではなく「MobX」で開発することにする => MobXは学習コストが低く、1時間で理解できた(後日談：結果的にはMobXも不要で Reactのstateだけで十分だった) 2： Reactでの画面遷移を諦める => react-routerを使わず「formでpost」する。メリット：Reactがそれぞれの画面で個々に 起動するので、実装がシンプルになる。WebAPIが不要

リアルタイム 商品一覧 (React + Firebase) ※一覧に掲載する個々の商品に、 POSTボタンを置いてます。 実装したシステムの概要 商品詳細A ボタン 商品詳細B ボタン 商品詳細C ボタン HTTP POST 非リアル タイム 商品詳細A (リアルタイムに変わらない情報は普 通にサーバサイドでRDBから引いて 表示する) リアルタイム 商品詳細A (React + Firebase) 画面の一部を使って 描画 商品一覧のReact 商品詳細のReact

技術書典4で何を出すか ● 元々技術書典4には申込みはしていたが、何を書くか決まっていなかった ●「Firebaseを解説した本が世の中に少なかった」から売れると予想し、Reactを組み 合わせて頒布してみることにした。 ● 執筆はGoogleドキュメントでひたすら書いた。 ● 執筆は土日を使って、約1ヶ月半で書き終える ● サンプルプログラムにコメントを分かりやすく書くのが一番大変だった。

技術書典4の当日の様子 Firebase + React 本 ● 80部を用意したが無事に完売した。 ● 宣伝：このすみ堂でBOOTHにて電子書籍 も販売中 https://konosumi.booth.pm/items/836447

まとめ 1： Reactをコンパクトに活用する事で、高速にリアルタイムシステムを開発する事が出 来る。 2：流行りのSPAやReduxでなく、只のViewライブラリとしてだけでも、十分にReactは実用 的です。 おまけ： React + 何かの組み合わせのようなスキルの掛け合わせは需要がありそうだと 分かったので、今後も情報発信していきたいと思います。

ご清聴 ありがとうございました 懇親会ではお気軽にどうぞ m(_ _)m 名前：このすみ (@konosumi) 趣味：ゲーム全般、読書、ブログ 好きなもの：弾幕シューティング、なめこ栽 培キット、近代麻雀・・・など。 ブログ： http://www.konosumi.net/