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
新卒研修でRecoil導入アプリをリリースしてみた【DMM.com】
Search
tetty
October 01, 2020
Technology
3
1.1k
新卒研修でRecoil導入アプリをリリースしてみた【DMM.com】
#React #Recoil #TypeScript #javascript
tetty
October 01, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
590
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why Our Code Smells
bkeepers
PRO
337
57k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
A Tale of Four Properties
chriscoyier
160
23k
It's Worth the Effort
3n
185
28k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
© DMM.com 新卒研修でRecoil導入アプリをリリースし てみた。 合同会社DMM.com 動画配信事業部 EC-Growth Team 毛利 哲太
© DMM.com ❏ 所属:動画配信事業部 EC-Growth Team (2020年4月に新卒入社) ❏ 領域:フロントエンドその他 ❏
大事にしていること ❏ 負債と開発の闇に立ち向かう勇気と楽しさ ❏ 最近のココが大変! ❏ お酒やめられないんだけど ❏ 最近のココが気になる! ❏ ChromeOSのアプデ(楽しいよね) プロフィール 毛利 哲太 もーりてった (例の女装カメラ。意外とうまくいったので味をしめて使っている。) 2
© DMM.com イントロダクション ❏ 今日話すこと ❏ FEから見た弊社の新卒研修 ❏ ざっくりRecoil ❏
Recoil入りアプリをProductionリリースした件 ❏ おまけ、最近のRecoil事情 ❏ 今日話さないこと ❏ 新卒研修1つ1つの詳細 ❏ Twitterなどで聞いていただければ〜〜〜 ❏ Recoilの深堀り ❏ ブログ書くのでみてねー 3
© DMM.com 4
© DMM.com FEから見た弊社の新卒研修 主な研修目的 ❏ DMMエンジニアとして専門性を発揮するための広範囲な知識を身につ ける 5
© DMM.com ❏ 専門領域を頂点とした山なりの スキルマップ ❏ 知識のマッピング ❏ プロダクト開発の基礎知識・運用 技術・周辺の学習
FEから見た弊社の新卒研修 6
© DMM.com FEから見た弊社の新卒研修 Frontend/SM Backend/Infra Mobile Backend/AI Backend/ Algorithm Design/PO
7 私
© DMM.com FEから見た弊社の新卒研修 企画 ヒアリング リーン/ ブラッシュアップ モック スクラム リリース
最終成果発表 8
© DMM.com FEから見た弊社の新卒研修 全部おまかせの引越しタスク管理アプリをつくりました。 9
© DMM.com ざっくりRecoil 10
© DMM.com ざっくりRecoil Recoilとは ❏ Facebook発 ❏ 今年の5月末に爆誕 ❏ React向け状態管理ライブラリ
11
© DMM.com ざっくりRecoil 特徴 ❏ 分散型である ❏ React hooks like
❏ (今現在は)状態操作がめちゃんこシンプル ❏ State更新による再レンダリングが明快 ❏ 学習・導入敷居の低さ 12
© DMM.com 最低限のナレッジ ざっくりRecoil Atom Selector ・・・ ・・・ 分散したStore1つ1つを指す。 StoreのKeyはユニークです。
AtomのValueから計算された値を取得できる機構。 (ReduxとかMobx使ってると出てきますよねー) AtomFamily ・・・ IDによって同じKeyのAtomを Collection形式で管理している。 13
© DMM.com ざっくりRecoil Atom ✅ タスク1 ☑ タスク2 ☑ タスク3
☑ タスク4 Task Atom F(1) Task Atom F(2) Task Atom F(3) Task Atom F(4) TasksAtom 各AtomはAtomFamilyとして Collectionで管理。 => 個々の変更で起きる再レ ンダリング範囲はタスクごと。 それ以上の影響は基本的に ない。 14
© DMM.com Atom Task.tsx Tasks.tsx store/task/atom.ts 15
© DMM.com ざっくりRecoil Selector ✅ タスク1 ✅ タスク2 ☑ タスク3
☑ タスク4 completed: 2 completedなTaskAtomの数を算 出した値を表示している。 タスクにチェックを入れると Selectorが更新され、Selectorを購 読しているコンポーネントに再レン ダリングが走る。 completedCountSelector 16
© DMM.com ざっくりRecoil Recoil使うと何がいいのか ❏ 低コストで学習・導入可能 ❏ 再レンダリングの条件が明快で課題に対処可能 ❏ Hooksなので扱いやすい
17
© DMM.com リリースしてみた 18
© DMM.com Productionへリリースするまで 19
© DMM.com Productionへリリースするまで 20
© DMM.com Productionへリリースするまで 実際に導入してみてよかった点 ❏ Store設計でほとんど困らなかった ❏ UIに対して正直なStoreを立てられたため ❏ 実用までがとにかく早い
❏ 学習から導入、設計、実用までスピーディーな進捗が出たため ❏ パフォーマンスさっくさく ❏ Next上でも普通に動いた 21
© DMM.com Productionへリリースするまで 実際に導入してみて辛かった点 ❏ Warningあたりまえ ❏ 色々ない ❏ SSR(0.0.11から対応開始)
❏ 型定義(0.0.10から導入済) ❏ ボイラー・ベスプラ ❏ 参考ドキュメント ❏ DevTool(コミュニティで開発され始めた) ❏ 活用に至るプロダクトを選ぶ 22
© DMM.com ❏ 高速化 ❏ SSR ❏ Example ❏ Devtool
❏ React Native ❏ ナレッジのBlog公開 ❏ ドキュメントの充実化 ❏ など おまけ 最近のRecoil事情 23
© DMM.com おわり 24