Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Fluxを実践投入してみて
Search
pakkun / oneut
October 23, 2017
Technology
0
960
React + Fluxを実践投入してみて
社内LT(2017/10/6)
pakkun / oneut
October 23, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
440
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
140
本が全く読めなかった過去の自分へ
genshun9
0
710
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
310
Lazy application authentication with Tailscale
bluehatbrit
0
110
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
Witchcraft for Memory
pocke
1
660
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
340
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
1k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualization
eitanlees
146
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Faster Mobile Websites
deanohume
307
31k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Documentation Writing (for coders)
carmenintech
72
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
React + Fluxを 実践投入してみて @pakkun
やっていること
オールアバウトの基幹システ ムである記事生成ツール (CMS)のリプレイス
None
アジェンダ
アジェンダ よかったこと 大変だったこと 開発を楽にするためにやったこと やっておけばよかったこと
教訓 まとめ
React + Fluxで作った機能数 ※flux-utilsを使用
19機能
よかったこと
Virtual DOMが提供する一方通行のフローによ り、サーバサイドと似た構造にできる コードをシンプルに書ける Immutable.jsを使うとさらに楽
VirtualDOMが提供する 一方通行のフロー
None
サーバサイドで考えるなら
None
コードがシンプルに書ける
None
Immutable.jsを使うとさらに楽
None
React + Fluxで 大変だったこと
Examplesが難しい jQueryとの共存がしづらい Fluxの学習コストが高い 良くも悪くもコンポーネント指向 LaravelやRailsのようなフルスタックフレー
ムワークと合わせて使うと中途半端になりや すい ライセンスに問題があった
Examplesが難しい
綺麗に構造化されているexamplesが少な い・・・ flux/examples ActionCreator、Actionが明確に分かれていないなど・・・
jQueryとの共存がしづらい
VirtualDOMに任せる必要があるので、直接 DOMを更新しづらい ※jQueryをなるべく使わない強い意志が必要
Fluxの学習コストが高い
CQRS(コマンドとクエリの責務分離)がわ かっていないとしんどい ※CQRSに関しては、CQS(コマンドとクエリの分離原則)とDDD(ドメイン駆 動設計)を知るのが早い
良くも悪くも コンポーネント指向
ライブラリを組み合わせてフレームワークを 構築できる程度の知識が必要 ※サーバサイドで置き換えると、React(View)、Flux(Controller、 Service)、Immutable.js( Repository 、Factory、Entity) 日頃からGithub Trendsを追いかけて使えそ
うなものを探しておく必要がある ※awesome-reactを見ておくと良い
LaravelやRailsのようなフルス タックフレームワークと合わせ て使うと中途半端になりやすい
Node.jsで完結できないのでつらい react-scriptsが使えない Hot Module Replacement(HMR)が難しい Webpackの知識が必要になってくる
ライセンスに問題があった
FacebookのOSSには特許に関するライセン スが付与されている問題があったが、 Apacheが本格的に使用をやめたことにより、 結果的にはMITライセンスになった。ライセ ンス周り大事。
React + Fluxでの開発を楽にす るためにやったこと
開発環境のDocker化(Node入り) Webpackでファイルの自動トランスパイル化 ESLintでの構文チェック React + Flux勉強会(6時間)
-> QiitaのAPIを使用してのハンズオン Boilerplateの作成
やっておけばよかったこと
flux-utilsのAPIコールはviewより ActionCreatorが良い
まとめ
Reactは玄人向け コストは高いけど秩序が保たれた 誰が書いても同じようなコードにしやすい 一度作れれば高速に実装できる イージーではなくシンプルに実装できる
導入してよかった!!
最後に
JavaScriptはHTML、CSSを操作する ために後から実装された機能で、リッチ なUIを提供することを目的としている
Virtual DOMによって HTML・CSS > JavaScript の構造を逆転できるようになり、 JavaScript > HTML・CSS で管理できるようなった
それは、JavaScript上でHTML、CSS を組み込んでアプリケーションが実行で きるということ
つまり、Android Java、Swiftのよう な開発ができるようになったということ と同義
Virtual DOMはフロントエンドの世界 にパラダイムシフトを起こした
ご清聴ありがとうございました。 明日から Let’s VirtualDOM+ Flux!