React Video Player

1. Reactで動画プレーヤー作っている話
2018/04/14
React x Typescript ミートアップ！
Yugo Matsumoto / @ymmmo1

2. Who?
• Yugo Matsumoto
• 株式会社FABRIC TOKYOでフロントエンドエンジニア
• 最近、会社関係なしに動画プレーヤーを作る話を頂いたので
、Electron,Reactで作成しています。
• 大体このアイコンで活動しています→

3. 動画プレーヤーの仕様

4. ライブラリの選定

5. ライブラリ
• React
• Electron
• Redux
• Recompose
• Material-UI
• React-Video
• React-DropZone

7. 使いませんでした…
• 個人開発での型導入することにメリットが少
ない
• 型導入による本質的でない部分での疲労
• TypeScriptはOSS制作、チームでの大規模開
発時に後半から力を発揮する

8. 大いなる勘違い

9. 動画の状態を管理するのではない
• ざっと説明すると、VideoがStateを更新し、
そのStateの状態に応じてPlayerの状態を変更する。
Action
Reducer
Store
Views（Player)Video
refs
componentDidMount

10. 状態管理について

11. Reduxを採用した理由
• ReduxのThree Principlesが好き
• Container, Componentのでシンプルに作成できる。
• ボイラープレートが多いのは確かにめんどうだが、そ
れだけの恩恵はある。
• Mobxはシンプルだが、それゆえに設計を守ることが
難しいと感じている（１人だったら別に…）
• 単純にReduxが一番慣れている

12. みなさんに質問です。

13. ご清聴ありがとうございます
。