デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018

Transcript

1. ©2018 Wantedly, Inc.
   σβΠϯγεςϜΛಋೖͯ͠
   UIʹடংΛऔΓ໭͢
   Rejectcon 2018ʢbuilderscon tokyo 2018 ൪֎ฤʣ
   29.Sep.2018 - Kento Moriwaki
   React (Native)ฤ
   

   View Slide

2. ©2018 Wantedly, Inc.
   w ,FOUP.PSJXBLJ
   w UXJUUFS!LFOUP@USBOT@MV
   w 8BOUFEMZͷΤϯδχΞ
   w ओʹϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢
   ࣗݾ঺հ
   

   View Slide

3. ©2018 Wantedly, Inc.
   8BOUFEMZ7JTJU͸
   ࡀͰ͢
   ಥવͰ͕͢ɺ
   

   View Slide

4. ©2018 Wantedly, Inc.
   iOS 6
   6೥લͱͷൺֱ
   http://kakinokoshi.hatenablog.jp/entry/2016/07/24/121647
   iOS 12
   

   View Slide

5. ©2018 Wantedly, Inc.
   ΤϯδχΞਓ
   σβΠφʔਓ
   ೖΕସΘΓ΍ΠϯλʔϯͳͲΛؚΊΔͱ
   ΋ͬͱͨ͘͞Μ͍·͢
   ͦͷؒʹɺ
   

   View Slide

6. ©2018 Wantedly, Inc.
   ૿͑ଓ͚Δը໘΍ϓϩμΫτɺࢭ·Βͳ͍6*ͷਐԽ
   ΍τϨϯυͷҠΓมΘΓɺσβΠφʔͷೖΕସΘΓɺ
   ͳͲͳͲ
   ܦ೥มԽͰࣦΘΕΔUIͷ౷Ұײ
   શը໘ͷ6*ͷ౷ҰײΛอͭͷ͸ෆՄೳ
   

   View Slide

7. ©2018 Wantedly, Inc.
   σβΠφʔෆ଍ʹΑΓɺσβΠϯνΣοΫΛ௨Βͣʹ
   ϓϩμΫγϣϯʹ౤ೖ͞ΕΔػೳͨͪ
   ͞Βʹࠅ͍࣌͸ɺ
   ͋ͷࠒ͸ຊ౰ʹ͝ΊΜͳ͍͞
   

   View Slide

8. ©2018 Wantedly, Inc.
   ܦ೥มԽͰࣦΘΕͨ
   6*ͷடংΛऔΓ໭ͦ͏ʂ
   

   View Slide

9. ©2018 Wantedly, Inc.
   σβΠϯγεςϜΛ
   ಋೖ͠Α͏ʂ
   ͱ͍͏͜ͱͰɺ
   

   View Slide

10. ©2018 Wantedly, Inc.
    What is a Design System?
    10
    

    View Slide

11. ©2018 Wantedly, Inc.
    w ͨͩͷίϯϙʔωϯτूͱ͸ҧ͏
    w ݪଇ΍ن໿ͱ͍ͬͨσβΠϯʹର͢Δߟ͑ํ͕ϕʔεʹ͋Δ
    w ࣮૷ΛؚΉඞཁ͸ͳ͍͕ɺ࣮૷͕͋ΔͱकΒΕ΍͍͢
    What is a Design System
    

    View Slide

12. ©2018 Wantedly, Inc.
    w "EFMFʹ͸ݸҎ্ͷσβΠϯγεςϜ͕ެ։͞Ε͍ͯΔ
    w ΋ͪΖΜ͜͜ʹ͸ࡌ͍ͬͯͳ͍΋ͷ΍ɺެ։͞Ε͍ͯͳ͍΋ͷɺܗʹ·ͱ·ͬ
    ͍ͯ΋ͷ΋ؚΊΕ͹ɺձࣾ΍ϓϩμΫτͷ਺͚ͩ͋Δͱߟ͑ΒΕΔ
    Examples of Design System
    

    View Slide

13. ©2018 Wantedly, Inc.
    6*ΫΦϦςΟͷϕʔεϥΠϯʹϒϥϯυදݱɾݟͨ໨ͱৼΔ
    ෣͍ͷҰ؏ੑΛ֬อ
    ϑϩϯτΤϯυߏஙϝϯςφϯεͷޮ཰Խ
    σβΠϯΞ΢τϓοτͷޮ཰Խ
    ૒ํͷίϛϡχέʔγϣϯίετͷ࡟ݮ
    σβΠϯγεςϜ͕ղܾ͢Δ໰୊
    

    View Slide

14. ©2018 Wantedly, Inc.
    6*ΫΦϦςΟͷϕʔεϥΠϯʹϒϥϯυදݱɾݟͨ໨ͱৼΔ
    ෣͍ͷҰ؏ੑΛ֬อ
    σβΠϯγεςϜ͕ղܾ͢Δ໰୊
    ϖʔδ΍ػೳؒͷݟͨ໨͚ͩ͡Όͳͯ͘ɺ
    w ϓϩμΫτؒͰڞ௨͢Δ8BOUFEMZΒ͠͞
    w ΞΫγϣϯͨ࣌͠ͷৼΔ෣͍ͳͲ΋ؚΉ
    

    View Slide

15. ©2018 Wantedly, Inc.
    ϑϩϯτΤϯυߏஙϝϯςφϯεͷޮ཰Խ
    σβΠϯγεςϜ͕ղܾ͢Δ໰୊
    طଘͷίϯϙʔωϯτΛ࢖͍ճͤΔ͜ͱͰɺੜ࢈ੑ্͕͕Δ
    ॳΊ͔Β࠶ར༻Λҙࣝͯ͠ίϯϙʔωϯτΛ࡞͍ͬͯͳ͍ͱɺগ
    ͠֎ΕΔͱ͙͢ʹ৽͍͠ίϯϙʔωϯτΛ࡞ͬͯ͠·͍͕ͪ
    

    View Slide

16. ©2018 Wantedly, Inc.
    σβΠϯΞ΢τϓοτͷޮ཰Խ
    σβΠϯγεςϜ͕ղܾ͢Δ໰୊
    4LFUDIͳͲʹΑΔσβΠϯ΋ɺίϯϙʔωϯτԽ͞ΕΔ͜ͱͰɺ
    σβΠφʔͷੜ࢈ੑ΋্͕Δ
    ৗʹɺ࠷৽ͷϘλϯ͕ɺ෼͔Δͱ͜Ζʹଘࡏ͢Δ
    

    View Slide

17. ©2018 Wantedly, Inc.
    ૒ํͷίϛϡχέʔγϣϯίετͷ࡟ݮ
    σβΠϯγεςϜ͕ղܾ͢Δ໰୊
    ͋ͷϘλϯΛɺ͋ͷ৭Ͱɺ͋ͷTIBEPXͰɺͱ͍͑͹఻ΘΔΑ͏
    ͳڞ௨ೝ͕ࣝ࡞ΕΔ
    ίʔυϨϏϡʔͷίετ΋ݮΔ
    

    View Slide

18. ©2018 Wantedly, Inc.
    ૣ଎࡞ͬͯΈΑ͏ʂ
    

    View Slide

19. ©2018 Wantedly, Inc.
    ίϯηϓτΛܾΊΔ
    σβΠϯΛ࡞Δ
    ࣮૷͢Δ
    ಋೖ͢Δ
    ӡ༻͢Δ
    σβΠϯγεςϜͷಋೖεςοϓ
    

    View Slide

20. ©2018 Wantedly, Inc.
    ΠέͯΔσβΠϯγεςϜʹڞ௨͢Δ͜ͱ
    ڽ໊ͬͨલ
    w /BDIPT 5SFMMP
    3JOH6* +FU#SBJOT
    1MBTNB 8F8PSL
    
    1SJODJQMFTϖʔδ
    1. ίϯηϓτΛܾΊΔ
    

    View Slide

21. ©2018 Wantedly, Inc.
    ඞཁͳίϯϙʔωϯτΛચ͍ग़ͯ͠ɺݪଇʹैͬͯσβΠϯΛ࡞
    Δ
    w ৭΍ϑΥϯτͳͲͷϓϦϛςΟϒͳ΋ͷ͔ΒɺϘλϯ΍Ϧετɺ
    ΧʔυͳͲɺ༷ʑͳϨϕϧͷ΋ͷ͕͋Δ
    2. σβΠϯΛ࡞Δ
    

    View Slide

22. ©2018 Wantedly, Inc.
    8BOUFEMZͷ
    σβΠϯγεςϜͷ໊લ͸ɺ
    

    View Slide

23. ©2018 Wantedly, Inc.
    ·ܾͩ·ͬͯ·ͤΜ
    ίϯηϓτ΍σβΠϯ΋ؚΊͯɺࠓޙެ։͢Δ༧ఆͰ͢ʂ
    

    View Slide

24. ©2018 Wantedly, Inc.
    ࠓ೔͸ٕज़ͷ࿩Λ͠·͢
    8BOUFEMZͷσβΠϯγεςϜΛࢧ͑Δٕज़
    

    View Slide

25. ©2018 Wantedly, Inc.
    Ͳ͏͍͏ٕज़Λ࢖͏΂͖͔͸ʢ౰ͨΓલ͚ͩͲʣ
    w ͲͷϓϥοτϑΥʔϜʹରԠ͍͔ͨ͠
    w ͲͷΑ͏ͳΤϯδχΞମ੍͔
    ʹΑܾͬͯ·Δ
    Step 3. ࣮૷͢Δ
    

    View Slide

26. ©2018 Wantedly, Inc.
    Lona
    https://github.com/airbnb/Lona
    26
    શͯͷϓϥοτϑΥʔϜʹͰ͖Δ͚ͩ؆୯ʹରԠ͍ͨ͠ʁ
    

    View Slide

27. ©2018 Wantedly, Inc.
    w DPNQPOFOUϑΝΠϧͱ͍͏ɺΫϩεϓϥοτϑΥʔϜͳίϯ
    ϙʔωϯτͷఆٛ
    w ͦͷDPNQPOFOUϑΝΠϧΛ࡞੒͢Δ4LFUDIͷΑ͏ͳ(6*πʔ
    ϧ
    w DPNQPOFOUϑΝΠϧ͔Βɺ֤ϓϥοτϑΥʔϜͷ6*ίʔυΛ
    ੜ੒͢Δ
    Lona by Airbnb
    

    View Slide

28. ©2018 Wantedly, Inc.
    w ཁ͢Δʹɺ-POBͷ(6*ͰίϯϙʔωϯτΛ࡞Ε͹ɺ༷ʑͳϓ
    ϥοτϑΥʔϜͰωΠςΟϒʹಈ͘ίϯϙʔωϯτΛࣗಈੜ੒
    Ͱ͖Δເͷٕज़
    w 4XJGUGPSJ04NBD04
    w ,PUMJOGPS"OESPJE
    w +BWB4DSJQUGPS3FBDU
    Lona by Airbnb
    

    View Slide

29. ©2018 Wantedly, Inc.
    > his project is still in a very early stage. We don't provide any support of any
    kind. You shouldn't use this for production unless you really know what you're
    doing.
    Lona by Airbnb
    ·ͩૣ͔ͬͨ
    ࠓޙʹͱͯ΋ظ଴ʂ
    

    View Slide

30. ©2018 Wantedly, Inc.
    Theo
    https://github.com/salesforce-ux/theo
    30
    ֤ϓϥοτϑΥʔϜΛ͔͚ΔΤϯδχΞ͸े෼͍Δ͔Β
    ڞ௨Խ͢΂͖ม਺͚ͩ؅ཧ͍ͨ͠ʁ
    

    View Slide

31. ©2018 Wantedly, Inc.
    w ֤ϓϥοτϑΥʔϜ͸ωΠςΟϒͰͪΌΜͱॻ͖͍ͨਓ޲͚
    w ৭΍αΠζͳͲΛZBNMܗࣜͰॻ͘ͱɺ֤ϓϥοτϑΥʔϜͰ
    ࢖͍΍͍͢ܗʹม׵ͯ͘͠ΕΔ
    w 8FCͳΒ$44΍ɺ"OESPJEͳΒYNMɺJ04ͳΒ+40/
    
    Theo by Salesforce
    

    View Slide

32. ©2018 Wantedly, Inc.
    CSS
    32
    खͬऔΓૣ͘Web͚ͩରԠ͍ͨ͠ʁ
    

    View Slide

33. ©2018 Wantedly, Inc.
    w 8FC͚ͩͰे෼ͳΒɺ$44Λ࢖ͬͯ։ൃ͢Δ 4BTTͳͲΛؚ
    Ή
    
    w $44ΛJNQPSUͯ͠ద੾ͳDMBTT໊Λ͚ͭΕ͹ɺελΠϧ͕౰ͯΒΕΔ
    w 3FBDU΍7VFͳͲͷ༷ʑͳ6*ϥΠϒϥϦʹରԠͨ͠΋ͷΛ࡞
    Ε͹ɺ͞Βʹศར
    w ៉ྷͳ$44Λॻٕ͘ज़͸ࣦΘΕͭͭ͋Δʁ
    CSS
    

    View Slide

34. ©2018 Wantedly, Inc. 34
    UI։ൃ͸ReactͰ౷Ұ͍ͨ͠ʁ
    

    View Slide

35. ©2018 Wantedly, Inc.
    w 3FBDU/BUJWF͕ಈ͘؀ڥʹରԠͰ͖Δ
    w J04 "OESPJE 8FC 8JOEPXT 73ͳͲ͔ͳΓଟ͍
    w $44͸࢖͑ͳ͍ͷͰɺଞͷ8FCͱͷڞଘ͸೉͍͠
    w 3FBDUʹৼΓ੾͍ͬͯΔνʔϜͳΒ༗ޮ
    React Native
    

    View Slide

36. ©2018 Wantedly, Inc.
    w 3FBDU/BUJWFGPS8FC
    w 3FBDU/BUJWFͷίʔυΛ8FCͰಈ͔ͨ͢ΊͷϥΠϒϥϦ
    w ASFBDUOBUJWFAͱಉ͡ΠϯλʔϑΣʔεΛ΋ͭϥΠϒϥϦͰɺ
    8FCޓ׵ͷॲཧʹม͑ͯ͘ΕΔ
    w ׬શʹಉ͡Ͱ͸ͳ͍͕ɺ׳ΕΕ͹ڐ༰Ͱ͖Δൣғ
    React NativeΛWebͰಈ͔ٕ͢ज़
    

    View Slide

37. ©2018 Wantedly, Inc.
    ๻Β͕બΜͩͷ͸ɺ
    

    View Slide

38. ©2018 Wantedly, Inc.
    w 3FBDU/BUJWFͰ࣮૷͠Α͏ʂ
    w 3FBDUͷՕॴ͕૿͑ɺ3FBDU͔͚Δਓ΋ͲΜͲΜ૿͍͑ͯΔ
    w ࠓޙͷ8FC։ൃ͸3FBDUͰ౷Ұ͞Ε͍ͯ͘งғؾ
    w ࣾ಺Ͱ΋3FBDU/BUJWFͷಋೖࣄྫ΋Ͱ͖ɺظ଴஋্͕͕ͬͯ
    ͍Δ
    w ΞϓϦͰͷϓϩτλΠϐϯά΋͸΍͘ͳΔ
    Wantedlyͷબ୒
    

    View Slide

39. ©2018 Wantedly, Inc.
    w 3FBDU/BUJWFͰॻ͍ͨίʔυΛ8FCͰಈ͔͢؆୯
    w 3FBDU$44Ͱॻ͍ͨίʔυΛωΠςΟϒͰಈ͔͢େม
    w $44ͷදݱྗ͕ߴ͍ͨΊɺ/BUJWFʹରԠ͢ΔͨΊʹ௿Ϩϕϧ΁ͷॻ͖׵͕͑
    େมIPWFSͱ͔ MBTUDIJMEͱ͔
    w ͙͢ʹωΠςΟϒͰ࢖Θͳͯ͘΋ɺ3FBDU/BUJWFͷॻ͖ํʹ
    ରԠ͓͍ͯͨ͠΄͏͕҆৺
    Wantedlyͷબ୒
    

    View Slide

40. ©2018 Wantedly, Inc.
    3FBDU/BUJWF GPS8FC
    Ͱͷ
    ࣮૷Λ࢝ΊΑ͏
    

    View Slide

41. ©2018 Wantedly, Inc.
    w ཁ݅ͷ੔ཧ
    8FCͱ/BUJWFͰಉ͡Α͏ʹ࢖͑Δ
    5ZQF4DSJQUͰܕνΣοΫ͍ͨ͠
    ࢖͏ଆͰ໘౗ͳઃఆ͸ͨ͘͠ͳ͍
    React Native (for Web) Ͱͷ࣮૷Λ࢝ΊΑ͏ʂ
    

    View Slide

42. ©2018 Wantedly, Inc.
    εςοϓͰ࢖͑Δ 8FCͰ΋/BUJWFͰ΋
    
    ׬੒Πϝʔδ
    Step. 1 Step. 2
    

    View Slide

43. ©2018 Wantedly, Inc.
    શ͘ಉ͡Α͏ʹಈ͘Θ͚Ͱ͸ͳ͍ͷͰɺϓϥοτϑΥʔϜؒͷҧ
    ͍Λٵऩ͢Δඞཁ͕͋Δ
    w ෼ذ͕૿͑Δͱɺϝϯςφϯεੑ͕Լ͕Δ
    w Ͱ͖Δ͚ͩڞ௨Խͯ͠ɺ෼ذ͸࠷௿ݶʹ཈͑ɺॻ͚Δ৔ॴ΋ݶ
    ఆ͢Δ
    ΫϩεϓϥοτϑΥʔϜରԠͷํ਑
    

    View Slide

44. ©2018 Wantedly, Inc.
    ؆୯ʹϓϥοτϑΥʔϜ͝ͱͷڍಈΛม͑ΒΕΔ
    w ϓϥοτϑΥʔϜݻ༗ͷελΠϧͷϓϩύςΟͩͬͨΓ
    ඍົͳࠩҟ͸ɺPlatformϞδϡʔϧͰ෼ذ
    

    View Slide

45. ©2018 Wantedly, Inc.
    ϓϥοτϑΥʔϜ໊Λ֦ுࢠલʹ͚ͭͯɺϏϧυ࣌ʹద੾ʹղܾ
    w JOEFYXFCKT JOEFYOBUJWFKT JOEFYJPTKTͳͲ
    w ॻ͍ͯྑ͍ͷ͸ɺNPEVMFTҎԼʹݶఆ
    େ͖͘ҧ͏΋ͷ͸ɺϑΝΠϧ͝ͱʹ෼͚Δ
    

    View Slide

46. ©2018 Wantedly, Inc.
    .JDSPTPGUSFBDUYQ
    ΫϩεϓϥοτϑΥʔϜͷ࠷ऴܗଶ
    https://microsoft.github.io/reactxp/
    

    View Slide

47. ©2018 Wantedly, Inc.
    w .JDSPTPGU͕ɺ4LZQFΛ3FBDUͰΫϥεϓϥοτϑΥʔϜʹ
    ։ൃͨ࣌͠ʹੜ·Εͨ
    w 8FC J04 "OESPJEBOE8JOEPXT
    w ϥΠϒϥϦ޲͖Ͱ͸ͳ͍
    w 91NFBOTDSPTTQMBUGPSN OPUB8JOEPXTWFSTJPO
    
    w ࠔͬͨΒ͜͜ΛݟΕ͹ɺԿ͔͠Βͷղܾࡦ͕ݟ͔ͭΔ
    ΫϩεϓϥοτϑΥʔϜͷ࠷ऴܗଶ: ReactXP
    

    View Slide

48. ©2018 Wantedly, Inc.
    Ϙλϯͷ࣮૷Λ࢝ΊΑ͏
    

    View Slide

49. ©2018 Wantedly, Inc.
    (SBEBUJPO
    "OJNBUJPO
    "DDFTTJCJMJUZ
    5IFNF
    ϘλϯҰͭͰߟ͑Δ͜ͱଟ͗͢Δ
    ձࣾશମͰ࢖ΘΕΔ൚༻ϥΠϒϥϦ͔ͩΒͦ͜
    ͔ͬ͠Γߟ͑ͯஸೡʹ࣮૷͢Δඞཁ͕͋Δ
    

    View Slide

50. ©2018 Wantedly, Inc.
    άϥσʔγϣϯͷ࣮ݱํ๏͕ҧ͏
    Gradation
    8FCͰ͸ɺ$44ͷMJOFBSHSBEJFOU͕࢖͑Δ
    

    View Slide

51. ©2018 Wantedly, Inc.
    Gradation
    /BUJWFͰ͸ɺωΠςΟϒ࣮૷ΛؚΉ֎෦ϥΠϒϥϦ͕ඞཁ
    

    View Slide

52. ©2018 Wantedly, Inc.
    ந৅Խͯ͠ڞ௨ͷΠϯλʔϑΣʔεΛ࡞Δ
    ❌$44ʹدͤΔ
    w ωΠςΟϒͷTUZMF࣮૷Λม͑Δͷ͸ݫ͍͠ɻMJOFBSHSBEJFOUͷจࣈྻΛղੳ
    ͢Δͷ΋ΊΜͲ͍͘͞
    ⭕/BUJWFʹدͤΔ
    w ಉ͡QSPQTΛड͚ͯɺMJOFBSHSBEJFOUͷจࣈྻΛੜ੒͢Ε͹ྑ͍
    Gradation
    

    View Slide

53. ©2018 Wantedly, Inc.
    Gradation
    modules/linear-gradient/index.web.tsx
    

    View Slide

54. ©2018 Wantedly, Inc.
    ந৅ϨΠϠʔΛ͖ͪΜͱઃܭͯ͋͛͠Δ͜ͱͰɺϓϥοτϑΥʔ
    Ϝ͝ͱͷ࣮૷ΛӅṭ͢Δ
    Gradation
    

    View Slide

55. ©2018 Wantedly, Inc.
    ϗόʔ΍λοϓ࣌ʹɺTIBEPX΍৭Λ;Θͬͱม͍͑ͨ
    w ΄΅શͯͷίϯϙʔωϯτʹ5SBOTJUJPOΞχϝʔγϣϯ͕͍ͭ
    ͍ͯΔ
    w ීஈ͚ͭ๨Ε͕ͪͳͷͰɺσβΠϯγεςϜͰ͔ͬ͠Γ࣮૷͠
    ͓ͯ͘͜ͱ͸େࣄ
    Animation
    

    View Slide

56. ©2018 Wantedly, Inc.
    Ξχϝʔγϣϯͷ࣮ݱํ๏͕ҧ͏
    Animation
    8FCͰ͸ɺ$44ͷUSBOTJUJPO͕࢖͑Δ
    

    View Slide

57. ©2018 Wantedly, Inc.
    Animation
    /BUJWFͰ͸ɺ"OJNBUFEϞδϡʔϧΛ࢖͏
    

    View Slide

58. ©2018 Wantedly, Inc.
    w "OJNBUFE͸SFBDUOBUJWFXFCʹ΋͋Δ
    w SFRVFTU"OJNBUJPO'SBNFΛ༻͍ͨ+4Ξχϝʔγϣϯ࣮૷
    w Ḯ৭ͳ͍͜ͱ΋ଟ͍͕ɺ$44ͷ5SBOTJUJPOͷํ͕CFUUFS
    CSS Transition vs Animated
    https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance
    > Even given the test results above, we'd argue that
    CSS animations are the better choice. But how? The
    key is that as long as the properties we want to
    animate do not trigger reflow/repaint (read CSS
    triggers for more information), we can move those
    sampling operations out of the main thread.
    

    View Slide

59. ©2018 Wantedly, Inc.
    ந৅Խͯ͠ڞ௨ͷΠϯλʔϑΣʔεΛ࡞Γ͍͕ͨɺ(SBEBUJPO΄
    Ͳ୯७Ͱ͸ͳ͍
    w 5JNJOHGVODUJPO΋ॻ͖ํ͕͍Ζ͍ΖͰ͖Δ
    w 8FCͰ͸5SBOTJUJPOΛ్தͰࢭΊͨΓͰ͖ͳ͍
    w *OUFSQPMBUJPOͳͲ΋͋Δ
    Animation
    ࣮૷͸͔ͳΓେม
    

    View Slide

60. ©2018 Wantedly, Inc.
    w 3FBDU91ʹ͸ɺͦΕΛ࣮૷ͨ͠39"OJNBUFE͕͋Δ
    w "OJNBUFEͷΑ͏ʹॻ͘ͱɺ$44Ͱ͸5SBOTJUJPOΛ࢖ͬͯ࠷
    దԽͯ͘͠ΕΔ
    w ΋ͪΖΜ੍ݶ͸͋Δ
    w ϥΠϒϥϦͱͯ͠੾Γग़͞Ε͓ͯΒͣɺਅࣅ࣮ͯ͠૷͢Δʹ͸
    େมͳྔ
    RX.Animated
    

    View Slide

61. ©2018 Wantedly, Inc.
    ύϑΥʔϚϯεΛٻΊΔͱɺ8FC͸$44Ͱॻ͘ͷ͕࠷ద͕ͩɺ
    w ΄ͱΜͲͷίϯϙʔωϯτʹ͸͋ΔͷͰɺͦΕΒΛશͯॻ͖׵͑Δඞཁ͕͋Δͷ
    ͸ݱ࣮తͰ͸ͳ͍
    w ந৅ϨΠϠʔΛ࡞Δͷ΋؆୯Ͱ͸ͳ͍
    Animationͷํ਑
    جຊ͸"OJNBUFEͰॻ͍ͯɺ
    Ͳ͏ͯ͠΋ؾʹͳΔ෦෼͸$44Ͱ࠷దԽ͢Δ
    

    View Slide

62. ©2018 Wantedly, Inc.
    w 5FYUͷ໰୊
    w 8FCͰ͸ςΩετΛදݱ͢Δλά͕ଟ͋͘Δ
    w શ෦ΛEJWʹ͢Δͷ͸ɺ4&0ͳͲͰݒ೦͕͋Δ
    Accessibility
    

    View Slide

63. ©2018 Wantedly, Inc.
    w BDDFTTJCJMJUZ3PMFͱBSJBMFWFMͷQSPQTΛ࢖͑͹ɺग़ྗͤ͞
    ΔλάΛม͑Δ͜ͱ͕Ͱ͖Δ
    Accessibility
    

    View Slide

64. ©2018 Wantedly, Inc.
    w Ϙλϯͷ໰୊
    w $MJDLBCMFͳ7JFX#VUUPOͰ͸ͳ͍
    w 5"#ΩʔͰબ୒ঢ়ଶʹͳΒͳ͍ɺ&/5&3ԡͯ͠΋ΫϦοΫʹͳΒͳ͍ɺඍົ
    ʹ࢖͍ʹ͍͘Ϙλϯ͕ग़དྷ্͕Δ
    w 7JFX #VUUPO 5PVDIBCMFͳͲΛ͖ͪΜͱ࢖͍෼͚Δ
    Accessibility
    

    View Slide

65. ©2018 Wantedly, Inc.
    Ϙλϯ͸࣮͸ɺҰछྨ͡Όͳ͍
    Theming
    7JTJU
    1FPQMF
    /PSNBM *OWFSTF
    

    View Slide

66. ©2018 Wantedly, Inc.
    w UIFNFQSPQTͰରԠ
    Theming
    ͜ͷ.PEBMҎԼ͸UIFNFΛม͑Δͱ͔ɺΊͪΌͪ͘Όେม
    

    View Slide

67. ©2018 Wantedly, Inc.
    w UIFNFQSPQTͰରԠ
    Theming
    ͜ͷ.PEBMҎԼ͸UIFNFΛม͑Δͱ͔ɺΊͪΌͪ͘Όେม
    

    View Slide

68. ©2018 Wantedly, Inc.
    w SFBDUOBUJWFXFCͰUIFNFͱ͍͑͹ɺ5XJUUFS-JUF
    w IUUQTJUT[FSPCMPHJNQMFNFOUJOHOJHIUNPEFPO
    UXJUUFSMJUFIUNM
    w $POUFYUͰ෇͚ସ͑ΒΕΔΑ͏ʹ޻෉
    w ݁ՌΛΩϟογϡ͢Δͯ͠ɺύϑΥʔϚϯεվળ
    Theming
    

    View Slide

69. ©2018 Wantedly, Inc.
    ෼͔Γ΍͍͢υΩϡϝϯτΛ
    ࡞Ζ͏
    

    View Slide

70. ©2018 Wantedly, Inc.
    w ͲΜͳίϯϙʔωϯτ͕͋Δͷ͔෼͔Δ
    w Ͳ͏΍ͬͯ࢖͏͔͕෼͔Δ
    w ݟͨ໨͕៉ྷͰಡΈ΍͍͢
    ෼͔Γ΍͍͢υΩϡϝϯτ
    

    View Slide

71. ©2018 Wantedly, Inc.
    EPD[
    ෼͔Γ΍͍͢υΩϡϝϯτΛ࡞Ζ͏
    https://www.docz.site/
    

    View Slide

72. ©2018 Wantedly, Inc.
    w ؆୯ͳηοτΞοϓ
    w σϑΥϧτͰ5ZQF4DSJQUʹରԠ
    w NEYͱ͍͏NBSLEPXOͱ+49Λ૊Έ߹Θͤͨܗࣜ
    w ී௨ʹυΩϡϝϯτΛॻ͘ײ֮Ͱɺ్தͰ3FBDUίϯϙʔωϯ
    τΛඳըͰ͖Δ
    w ଟػೳ͔ͭɺ଎͍ϖʔεͰਐԽ
    doczͷັྗ
    

    View Slide

73. ©2018 Wantedly, Inc.
    .mdx
    

    View Slide

74. ©2018 Wantedly, Inc.
    PropsTable
    5ZQF4DSJQUͷܕ͔Β
    1SPQTͷઆ໌Λ
    ඒ͍͠ςʔϒϧͰදࣔ
    

    View Slide

75. ©2018 Wantedly, Inc.
    Playground
    ͜͜Λฤू͢Δͱଈ࠲ʹ൓ө͞ΕΔ
    

    View Slide

76. ©2018 Wantedly, Inc.
    w ಠࣗςʔϚΛ࣮૷ͨ͠
    w طଘͷςʔϚΛϕʔεʹɺσβΠϯγεςϜଆͷςʔϚͷ੾Γସ͑ͳͲΛ࣮૷
    w ͜ͷEPD[ͷςʔϚࣗମΛσβΠϯγεςϜͰ࣮૷͢Δ͜ͱ΋Ͱ͖Δ
    doczͷΧελϜςʔϚ
    

    View Slide

77. ©2018 Wantedly, Inc.
    w NEY͸+49ʹม׵͞ΕΔ͚ͩͳͷͰɺඳը͢Δίϯϙʔωϯ
    τΛม͑Ε͹3FBDU/BUJWFͰ΋ಈ͔ͤΔ͸ͣ
    w ࠓ౓΍ͬͯΈΑ͏ͱࢥ͍ͬͯͨΒɺ͖ͬ͞ௐ΂ͨΒରԠͨͬ͠
    Ά͍ɻ·ͩಈ͔ͤͯͳ͍Ͱ͢ɻ
    doczͷReact NativeରԠ
    

    View Slide

78. ©2018 Wantedly, Inc.
    ࣮૷Ͱ͖ͨͷͰ
    ಋೖ͠Α͏ʂ
    

    View Slide

79. ©2018 Wantedly, Inc.
    w OQNʹQVCMJTIͯ͋͠ΔͷͰɺJOTUBMM͢Ε͹࢖͑Δ
    εϜʔζʹಋೖͰ͖Δ͔
    

    View Slide

80. ©2018 Wantedly, Inc.
    w QSJWBUFQBDLBHFʹͨ͠ͷͰɺOQNͷઃఆ͕ඞཁͩͬͨ
    w ΈΜͳͷΞΧ΢ϯτ؅ཧ΋ඞཁ
    w $*Ͱ΋ಈ͘Α͏ʹ͠ͳ͍ͱ
    w ಛʹݟΒΕͯࠔΔ΋ͷͰ΋ͳ͍ͷͰɺQVCMJDʹͨ͠ΒΑ͔ͬͨ
    εϜʔζʹಋೖͰ͖ͳ͍ɻɻ
    

    View Slide

81. ©2018 Wantedly, Inc.
    w XFC͸ɺEJTUJOEFYXFCKTΛग़ྗ͍͕ͯͨ͠
    w XFCQBDLͷઃఆ͕ඞཁ DSFBUFSFBDUBQQͰ͸ରԠࡁΈ
    
    w JOEFYKT͸XFCKTΛSFRVJSF͢ΔΑ͏ʹॻ͘΂͖
    w ωΠςΟϒ͸ɺJPTKT BOESPJEKTʹ͓͚ͯ͠͹ɺSFBDUOBUJWFΛී௨ʹηο
    τΞοϓ͍ͯ͠Ε͹໰୊ͳ͘࢖͑Δ
    w SFBDUOBUJWFSFBDUOBUJWFXFC΁ͷBMJBTઃఆ
    w ϥΠϒϥϦଆͰॻ͖׵͔͑ͯΒ഑෍͢Δ΂͖
    εϜʔζʹಋೖͰ͖ͳ͍ɻɻ
    

    View Slide

82. ©2018 Wantedly, Inc.
    ӡ༻࣌ͷ஫ҙ఺
    

    View Slide

83. ©2018 Wantedly, Inc.
    w ·ͩͦͷஈ֊·Ͱདྷ͍ͯͳ͍͕ɺ
    w ΞοϓσʔτΛ҆શʹߦ͏࢓૊Έ͕ཉ͍͠
    w Ұ൪ා͍ͷ͸ɺ8FC͚ͩม͑ͨͭ΋Γ͕ɺωΠςΟϒ΋όάͬ
    ͯ͠·͏໰୊
    w εφοϓγϣοτςετɺεΫϦʔϯγϣοτςετɺFFς
    ετͳͲͷಋೖΛݕ౼͢΂͖
    ӡ༻࣌ͷ஫ҙ఺
    

    View Slide

84. ©2018 Wantedly, Inc.
    ·ͱΊ
    

    View Slide

85. ©2018 Wantedly, Inc.
    w ରԠ͍ͨ͠ϓϥοτϑΥʔϜͱɺ૊৫ঢ়ଶʹΑͬͯΞʔΩςΫ
    νϟΛબͿ
    w ૊৫಺Ͱڞ௨Ͱ࢖ΘΕΔϥΠϒϥϦ͔ͩΒͦ͜ɺࡉ͔͍ͱ͜Ζ
    ·Ͱߟ࣮͑ͯ૷͠Α͏
    w ෼͔Γ΍͍͢υΩϡϝϯτΛಋೖ͠Α͏
    w ࢖͏ਓ͕٧·Βͳ͍Α͏ʹɺϏϧυͷΊΜͲ͘͞͞͸ϥΠϒϥ
    ϦଆͰٵऩ͠Α͏
    σβΠϯγεςϜ࣮૷࣌ʹؾʹ͢΂͖͜ͱ·ͱΊ
    

    View Slide