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
1k
新卒研修でRecoil導入アプリをリリースしてみた【DMM.com】
#React #Recoil #TypeScript #javascript
tetty
October 01, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
510
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
290
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.5k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
web-application-security
matsuihidetoshi
0
170
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
320
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
Featured
See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
Web Components: a chance to create the future
zenorocha
305
41k
Web development in the modern age
philhawksworth
202
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Code Reviewing Like a Champion
maltzj
514
39k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Embracing the Ebb and Flow
colly
80
4.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
For a Future-Friendly Web
brad_frost
172
9k
The Mythical Team-Month
searls
216
42k
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