新卒研修でRecoil導入アプリをリリースしてみた【DMM.com】
by
tetty
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© DMM.com 新卒研修でRecoil導入アプリをリリースし てみた。 合同会社DMM.com 動画配信事業部 EC-Growth Team 毛利 哲太
Slide 2
Slide 2 text
© DMM.com ❏ 所属:動画配信事業部 EC-Growth Team (2020年4月に新卒入社) ❏ 領域:フロントエンドその他 ❏ 大事にしていること ❏ 負債と開発の闇に立ち向かう勇気と楽しさ ❏ 最近のココが大変! ❏ お酒やめられないんだけど ❏ 最近のココが気になる! ❏ ChromeOSのアプデ(楽しいよね) プロフィール 毛利 哲太 もーりてった (例の女装カメラ。意外とうまくいったので味をしめて使っている。) 2
Slide 3
Slide 3 text
© DMM.com イントロダクション ❏ 今日話すこと ❏ FEから見た弊社の新卒研修 ❏ ざっくりRecoil ❏ Recoil入りアプリをProductionリリースした件 ❏ おまけ、最近のRecoil事情 ❏ 今日話さないこと ❏ 新卒研修1つ1つの詳細 ❏ Twitterなどで聞いていただければ〜〜〜 ❏ Recoilの深堀り ❏ ブログ書くのでみてねー 3
Slide 4
Slide 4 text
© DMM.com 4
Slide 5
Slide 5 text
© DMM.com FEから見た弊社の新卒研修 主な研修目的 ❏ DMMエンジニアとして専門性を発揮するための広範囲な知識を身につ ける 5
Slide 6
Slide 6 text
© DMM.com ❏ 専門領域を頂点とした山なりの スキルマップ ❏ 知識のマッピング ❏ プロダクト開発の基礎知識・運用 技術・周辺の学習 FEから見た弊社の新卒研修 6
Slide 7
Slide 7 text
© DMM.com FEから見た弊社の新卒研修 Frontend/SM Backend/Infra Mobile Backend/AI Backend/ Algorithm Design/PO 7 私
Slide 8
Slide 8 text
© DMM.com FEから見た弊社の新卒研修 企画 ヒアリング リーン/ ブラッシュアップ モック スクラム リリース 最終成果発表 8
Slide 9
Slide 9 text
© DMM.com FEから見た弊社の新卒研修 全部おまかせの引越しタスク管理アプリをつくりました。 9
Slide 10
Slide 10 text
© DMM.com ざっくりRecoil 10
Slide 11
Slide 11 text
© DMM.com ざっくりRecoil Recoilとは ❏ Facebook発 ❏ 今年の5月末に爆誕 ❏ React向け状態管理ライブラリ 11
Slide 12
Slide 12 text
© DMM.com ざっくりRecoil 特徴 ❏ 分散型である ❏ React hooks like ❏ (今現在は)状態操作がめちゃんこシンプル ❏ State更新による再レンダリングが明快 ❏ 学習・導入敷居の低さ 12
Slide 13
Slide 13 text
© DMM.com 最低限のナレッジ ざっくりRecoil Atom Selector ・・・ ・・・ 分散したStore1つ1つを指す。 StoreのKeyはユニークです。 AtomのValueから計算された値を取得できる機構。 (ReduxとかMobx使ってると出てきますよねー) AtomFamily ・・・ IDによって同じKeyのAtomを Collection形式で管理している。 13
Slide 14
Slide 14 text
© 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
Slide 15
Slide 15 text
© DMM.com Atom Task.tsx Tasks.tsx store/task/atom.ts 15
Slide 16
Slide 16 text
© DMM.com ざっくりRecoil Selector ✅ タスク1 ✅ タスク2 ☑ タスク3 ☑ タスク4 completed: 2 completedなTaskAtomの数を算 出した値を表示している。 タスクにチェックを入れると Selectorが更新され、Selectorを購 読しているコンポーネントに再レン ダリングが走る。 completedCountSelector 16
Slide 17
Slide 17 text
© DMM.com ざっくりRecoil Recoil使うと何がいいのか ❏ 低コストで学習・導入可能 ❏ 再レンダリングの条件が明快で課題に対処可能 ❏ Hooksなので扱いやすい 17
Slide 18
Slide 18 text
© DMM.com リリースしてみた 18
Slide 19
Slide 19 text
© DMM.com Productionへリリースするまで 19
Slide 20
Slide 20 text
© DMM.com Productionへリリースするまで 20
Slide 21
Slide 21 text
© DMM.com Productionへリリースするまで 実際に導入してみてよかった点 ❏ Store設計でほとんど困らなかった ❏ UIに対して正直なStoreを立てられたため ❏ 実用までがとにかく早い ❏ 学習から導入、設計、実用までスピーディーな進捗が出たため ❏ パフォーマンスさっくさく ❏ Next上でも普通に動いた 21
Slide 22
Slide 22 text
© DMM.com Productionへリリースするまで 実際に導入してみて辛かった点 ❏ Warningあたりまえ ❏ 色々ない ❏ SSR(0.0.11から対応開始) ❏ 型定義(0.0.10から導入済) ❏ ボイラー・ベスプラ ❏ 参考ドキュメント ❏ DevTool(コミュニティで開発され始めた) ❏ 活用に至るプロダクトを選ぶ 22
Slide 23
Slide 23 text
© DMM.com ❏ 高速化 ❏ SSR ❏ Example ❏ Devtool ❏ React Native ❏ ナレッジのBlog公開 ❏ ドキュメントの充実化 ❏ など おまけ 最近のRecoil事情 23
Slide 24
Slide 24 text
© DMM.com おわり 24