SlideShare a Scribd company logo
Reactで動画プレーヤー作っている話
2018/04/14
React x Typescript ミートアップ!
Yugo Matsumoto / @ymmmo1
Who?
• Yugo Matsumoto
• 株式会社FABRIC TOKYOでフロントエンドエンジニア
• 最近、会社関係なしに動画プレーヤーを作る話を頂いたので
、Electron,Reactで作成しています。
• 大体このアイコンで活動しています→
動画プレーヤーの仕様
ライブラリの選定
ライブラリ
• React
• Electron
• Redux
• Recompose
• Material-UI
• React-Video
• React-DropZone
React Video Player
使いませんでした…
• 個人開発での型導入することにメリットが少
ない
• 型導入による本質的でない部分での疲労
• TypeScriptはOSS制作、チームでの大規模開
発時に後半から力を発揮する
大いなる勘違い
動画の状態を管理するのではない
• ざっと説明すると、VideoがStateを更新し、
そのStateの状態に応じてPlayerの状態を変更する。
Action
Reducer
Store
Views(Player)Video
refs
componentDidMount
状態管理について
Reduxを採用した理由
• ReduxのThree Principlesが好き
• Container, Componentのでシンプルに作成できる。
• ボイラープレートが多いのは確かにめんどうだが、そ
れだけの恩恵はある。
• Mobxはシンプルだが、それゆえに設計を守ることが
難しいと感じている(1人だったら別に…)
• 単純にReduxが一番慣れている
みなさんに質問です。
ご清聴ありがとうございます
。

More Related Content

PPTX
Autowareの紹介と物体検出
PDF
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
PDF
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
PPTX
nalgo-botができるまで
PDF
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
PPTX
Robotium を使った UI テストとレイアウト確認の効率化
PPTX
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
PDF
エターナらないゲーム開発
Autowareの紹介と物体検出
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
nalgo-botができるまで
第11回 cocos2d-x勉強会 「cocos2dxでLWFを利用する」
Robotium を使った UI テストとレイアウト確認の効率化
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
エターナらないゲーム開発

What's hot (20)

PDF
Tmcn Leap Motion
PPTX
【Swift】 それ、enumとstructでやってみましょう!!
PPTX
消滅都市 Cocos2d-xでの演出・UIあれこれ
PDF
こんなに違う!Unityアプリケーション講座
PPTX
ポコロンダンジョンズを彩るアニメーションノウハウ
KEY
Androidリリース作業の効率化(2)
PPTX
アプリの不具合を少なくするために
ODP
Jenkins導入ライブ
PDF
VMを改めて学んで見る
KEY
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
PDF
【Unity道場スペシャル 2017京都】〜ブラウザアプリ・ネイティブアプリの複数プラットフォームのゲーム開発の現場〜
PDF
Unreal Engine 4.27 ノンゲーム向け新機能まとめ
PDF
Service a week したさあるよな?
PDF
Leap motion 実践活用 ダイジェスト版
PDF
インフラエンジニアの綺麗で優しい手順書の書き方
PDF
Leap Motion を用いた数学教材開発の例
PDF
Leap motionの接触判定をコードを書かずに使うまで
PDF
【Interop tokyo 2014】 実践!話す人を追いかけて話しだす! ― 最新のビデオカメラデモ ―
PPTX
Unity ゲーム開発
PDF
Unityとスマートフォンアプリの最適化
Tmcn Leap Motion
【Swift】 それ、enumとstructでやってみましょう!!
消滅都市 Cocos2d-xでの演出・UIあれこれ
こんなに違う!Unityアプリケーション講座
ポコロンダンジョンズを彩るアニメーションノウハウ
Androidリリース作業の効率化(2)
アプリの不具合を少なくするために
Jenkins導入ライブ
VMを改めて学んで見る
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
【Unity道場スペシャル 2017京都】〜ブラウザアプリ・ネイティブアプリの複数プラットフォームのゲーム開発の現場〜
Unreal Engine 4.27 ノンゲーム向け新機能まとめ
Service a week したさあるよな?
Leap motion 実践活用 ダイジェスト版
インフラエンジニアの綺麗で優しい手順書の書き方
Leap Motion を用いた数学教材開発の例
Leap motionの接触判定をコードを書かずに使うまで
【Interop tokyo 2014】 実践!話す人を追いかけて話しだす! ― 最新のビデオカメラデモ ―
Unity ゲーム開発
Unityとスマートフォンアプリの最適化
Ad

React Video Player