新卒研修でRecoil導入アプリをリリースしてみた【DMM.com】

Transcript

1. © DMM.com 新卒研修でRecoil導入アプリをリリースし てみた。 合同会社DMM.com 動画配信事業部 EC-Growth Team 毛利 哲太

2. © DMM.com ❏ 所属：動画配信事業部 EC-Growth Team （2020年4月に新卒入社） ❏ 領域：フロントエンドその他 ❏

   大事にしていること ❏ 負債と開発の闇に立ち向かう勇気と楽しさ ❏ 最近のココが大変！ ❏ お酒やめられないんだけど ❏ 最近のココが気になる！ ❏ ChromeOSのアプデ（楽しいよね） プロフィール 　 毛利 哲太 もーりてった （例の女装カメラ。意外とうまくいったので味をしめて使っている。） 2

3. © DMM.com イントロダクション ❏ 今日話すこと ❏ FEから見た弊社の新卒研修 ❏ ざっくりRecoil ❏

   Recoil入りアプリをProductionリリースした件 ❏ おまけ、最近のRecoil事情 ❏ 今日話さないこと ❏ 新卒研修1つ1つの詳細 ❏ Twitterなどで聞いていただければ〜〜〜 ❏ Recoilの深堀り ❏ ブログ書くのでみてねー 3

4. © DMM.com 4

5. © DMM.com FEから見た弊社の新卒研修 主な研修目的 ❏ DMMエンジニアとして専門性を発揮するための広範囲な知識を身につ ける 5

6. © DMM.com ❏ 専門領域を頂点とした山なりの スキルマップ ❏ 知識のマッピング ❏ プロダクト開発の基礎知識・運用 技術・周辺の学習

   FEから見た弊社の新卒研修 6

7. © DMM.com FEから見た弊社の新卒研修 Frontend/SM Backend/Infra Mobile Backend/AI Backend/ Algorithm Design/PO

   7 私

8. © DMM.com FEから見た弊社の新卒研修 企画 ヒアリング リーン/ ブラッシュアップ モック スクラム リリース

   最終成果発表 8

9. © DMM.com FEから見た弊社の新卒研修 全部おまかせの引越しタスク管理アプリをつくりました。 9

10. © DMM.com ざっくりRecoil 10

11. © DMM.com ざっくりRecoil Recoilとは ❏ Facebook発 ❏ 今年の5月末に爆誕 ❏ React向け状態管理ライブラリ

    11

12. © DMM.com ざっくりRecoil 特徴 ❏ 分散型である ❏ React hooks like

    ❏ （今現在は）状態操作がめちゃんこシンプル ❏ State更新による再レンダリングが明快 ❏ 学習・導入敷居の低さ 12

13. © DMM.com 最低限のナレッジ ざっくりRecoil Atom Selector ・・・ ・・・ 分散したStore1つ1つを指す。 StoreのKeyはユニークです。

    AtomのValueから計算された値を取得できる機構。 （ReduxとかMobx使ってると出てきますよねー） AtomFamily ・・・ IDによって同じKeyのAtomを Collection形式で管理している。 13

14. © DMM.com ざっくりRecoil Atom ✅ タスク１ ☑ タスク２ ☑ タスク３

    ☑ タスク４ Task Atom F(1) Task Atom F(2) Task Atom F(3) Task Atom F(4) TasksAtom 各AtomはAtomFamilyとして Collectionで管理。 => 個々の変更で起きる再レ ンダリング範囲はタスクごと。 それ以上の影響は基本的に ない。 14

15. © DMM.com Atom Task.tsx Tasks.tsx store/task/atom.ts 15

16. © DMM.com ざっくりRecoil Selector ✅ タスク１ ✅ タスク２ ☑ タスク３

    ☑ タスク４ completed: 2 completedなTaskAtomの数を算 出した値を表示している。 タスクにチェックを入れると Selectorが更新され、Selectorを購 読しているコンポーネントに再レン ダリングが走る。 completedCountSelector 16

17. © DMM.com ざっくりRecoil Recoil使うと何がいいのか ❏ 低コストで学習・導入可能 ❏ 再レンダリングの条件が明快で課題に対処可能 ❏ Hooksなので扱いやすい

    17

18. © DMM.com リリースしてみた 18

19. © DMM.com Productionへリリースするまで 19

20. © DMM.com Productionへリリースするまで 20

21. © DMM.com Productionへリリースするまで 実際に導入してみてよかった点 ❏ Store設計でほとんど困らなかった ❏ UIに対して正直なStoreを立てられたため ❏ 実用までがとにかく早い

    ❏ 学習から導入、設計、実用までスピーディーな進捗が出たため ❏ パフォーマンスさっくさく ❏ Next上でも普通に動いた 21

22. © DMM.com Productionへリリースするまで 実際に導入してみて辛かった点 ❏ Warningあたりまえ ❏ 色々ない ❏ SSR（0.0.11から対応開始）

    ❏ 型定義（0.0.10から導入済） ❏ ボイラー・ベスプラ ❏ 参考ドキュメント ❏ DevTool（コミュニティで開発され始めた） ❏ 活用に至るプロダクトを選ぶ 22

23. © DMM.com ❏ 高速化 ❏ SSR ❏ Example ❏ Devtool

    ❏ React Native ❏ ナレッジのBlog公開 ❏ ドキュメントの充実化 ❏ など おまけ 最近のRecoil事情 23

24. © DMM.com おわり 24