$30 off During Our Annual Pro Sale. View Details »

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

Kento Moriwaki
September 29, 2018

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

Kento Moriwaki

September 29, 2018
Tweet

More Decks by Kento Moriwaki

Other Decks in Programming

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