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

20451aa93aace2f5279f5ea2e7a9c89d?s=47 Kento Moriwaki
September 29, 2018

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

20451aa93aace2f5279f5ea2e7a9c89d?s=128

Kento Moriwaki

September 29, 2018
Tweet

Transcript

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

    29.Sep.2018 - Kento Moriwaki React (Native)ฤ
  2. ©2018 Wantedly, Inc. w ,FOUP.PSJXBLJ w UXJUUFS!LFOUP@USBOT@MV w 8BOUFEMZͷΤϯδχΞ w

    ओʹϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢ ࣗݾ঺հ
  3. ©2018 Wantedly, Inc. 8BOUFEMZ7JTJU͸ ࡀͰ͢ ಥવͰ͕͢ɺ

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

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

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

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

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

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

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

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

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

    Design System
  13. ©2018 Wantedly, Inc.  6*ΫΦϦςΟͷϕʔεϥΠϯʹϒϥϯυදݱɾݟͨ໨ͱৼΔ ෣͍ͷҰ؏ੑΛ֬อ  ϑϩϯτΤϯυߏஙϝϯςφϯεͷޮ཰Խ  σβΠϯΞ΢τϓοτͷޮ཰Խ

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

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

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

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

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

  19. ©2018 Wantedly, Inc.  ίϯηϓτΛܾΊΔ  σβΠϯΛ࡞Δ  ࣮૷͢Δ 

    ಋೖ͢Δ  ӡ༻͢Δ σβΠϯγεςϜͷಋೖεςοϓ
  20. ©2018 Wantedly, Inc. ΠέͯΔσβΠϯγεςϜʹڞ௨͢Δ͜ͱ  ڽ໊ͬͨલ w /BDIPT 5SFMMP 3JOH6*

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

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

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

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

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

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

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

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

    ,PUMJOGPS"OESPJE w +BWB4DSJQUGPS3FBDU Lona by Airbnb
  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 ·ͩૣ͔ͬͨ ࠓޙʹͱͯ΋ظ଴ʂ
  30. ©2018 Wantedly, Inc. Theo https://github.com/salesforce-ux/theo 30 ֤ϓϥοτϑΥʔϜΛ͔͚ΔΤϯδχΞ͸े෼͍Δ͔Β ڞ௨Խ͢΂͖ม਺͚ͩ؅ཧ͍ͨ͠ʁ

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

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

  33. ©2018 Wantedly, Inc. w 8FC͚ͩͰे෼ͳΒɺ$44Λ࢖ͬͯ։ൃ͢Δ 4BTTͳͲΛؚ Ή  w $44ΛJNQPSUͯ͠ద੾ͳDMBTT໊Λ͚ͭΕ͹ɺελΠϧ͕౰ͯΒΕΔ

    w 3FBDU΍7VFͳͲͷ༷ʑͳ6*ϥΠϒϥϦʹରԠͨ͠΋ͷΛ࡞ Ε͹ɺ͞Βʹศར w ៉ྷͳ$44Λॻٕ͘ज़͸ࣦΘΕͭͭ͋Δʁ CSS
  34. ©2018 Wantedly, Inc. 34 UI։ൃ͸ReactͰ౷Ұ͍ͨ͠ʁ

  35. ©2018 Wantedly, Inc. w 3FBDU/BUJWF͕ಈ͘؀ڥʹରԠͰ͖Δ w J04 "OESPJE 8FC 8JOEPXT

    73ͳͲ͔ͳΓଟ͍ w $44͸࢖͑ͳ͍ͷͰɺଞͷ8FCͱͷڞଘ͸೉͍͠ w 3FBDUʹৼΓ੾͍ͬͯΔνʔϜͳΒ༗ޮ React Native
  36. ©2018 Wantedly, Inc. w 3FBDU/BUJWFGPS8FC w 3FBDU/BUJWFͷίʔυΛ8FCͰಈ͔ͨ͢ΊͷϥΠϒϥϦ w ASFBDUOBUJWFAͱಉ͡ΠϯλʔϑΣʔεΛ΋ͭϥΠϒϥϦͰɺ 8FCޓ׵ͷॲཧʹม͑ͯ͘ΕΔ

    w ׬શʹಉ͡Ͱ͸ͳ͍͕ɺ׳ΕΕ͹ڐ༰Ͱ͖Δൣғ React NativeΛWebͰಈ͔ٕ͢ज़
  37. ©2018 Wantedly, Inc. ๻Β͕બΜͩͷ͸ɺ

  38. ©2018 Wantedly, Inc. w 3FBDU/BUJWFͰ࣮૷͠Α͏ʂ w 3FBDUͷՕॴ͕૿͑ɺ3FBDU͔͚Δਓ΋ͲΜͲΜ૿͍͑ͯΔ w ࠓޙͷ8FC։ൃ͸3FBDUͰ౷Ұ͞Ε͍ͯ͘งғؾ w

    ࣾ಺Ͱ΋3FBDU/BUJWFͷಋೖࣄྫ΋Ͱ͖ɺظ଴஋্͕͕ͬͯ ͍Δ w ΞϓϦͰͷϓϩτλΠϐϯά΋͸΍͘ͳΔ Wantedlyͷબ୒
  39. ©2018 Wantedly, Inc. w 3FBDU/BUJWFͰॻ͍ͨίʔυΛ8FCͰಈ͔͢؆୯ w 3FBDU $44Ͱॻ͍ͨίʔυΛωΠςΟϒͰಈ͔͢େม w $44ͷදݱྗ͕ߴ͍ͨΊɺ/BUJWFʹରԠ͢ΔͨΊʹ௿Ϩϕϧ΁ͷॻ͖׵͕͑

    େมIPWFSͱ͔ MBTUDIJMEͱ͔ w ͙͢ʹωΠςΟϒͰ࢖Θͳͯ͘΋ɺ3FBDU/BUJWFͷॻ͖ํʹ ରԠ͓͍ͯͨ͠΄͏͕҆৺ Wantedlyͷબ୒
  40. ©2018 Wantedly, Inc. 3FBDU/BUJWF GPS8FC Ͱͷ ࣮૷Λ࢝ΊΑ͏

  41. ©2018 Wantedly, Inc. w ཁ݅ͷ੔ཧ  8FCͱ/BUJWFͰಉ͡Α͏ʹ࢖͑Δ  5ZQF4DSJQUͰܕνΣοΫ͍ͨ͠ 

    ࢖͏ଆͰ໘౗ͳઃఆ͸ͨ͘͠ͳ͍ React Native (for Web) Ͱͷ࣮૷Λ࢝ΊΑ͏ʂ
  42. ©2018 Wantedly, Inc. εςοϓͰ࢖͑Δ 8FCͰ΋/BUJWFͰ΋ ׬੒Πϝʔδ Step. 1 Step. 2

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

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

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

    େ͖͘ҧ͏΋ͷ͸ɺϑΝΠϧ͝ͱʹ෼͚Δ
  46. ©2018 Wantedly, Inc. .JDSPTPGUSFBDUYQ ΫϩεϓϥοτϑΥʔϜͷ࠷ऴܗଶ https://microsoft.github.io/reactxp/

  47. ©2018 Wantedly, Inc. w .JDSPTPGU͕ɺ4LZQFΛ3FBDUͰΫϥεϓϥοτϑΥʔϜʹ ։ൃͨ࣌͠ʹੜ·Εͨ w 8FC J04 "OESPJEBOE8JOEPXT

    w ϥΠϒϥϦ޲͖Ͱ͸ͳ͍ w 91NFBOTDSPTTQMBUGPSN OPUB8JOEPXTWFSTJPO  w ࠔͬͨΒ͜͜ΛݟΕ͹ɺԿ͔͠Βͷղܾࡦ͕ݟ͔ͭΔ ΫϩεϓϥοτϑΥʔϜͷ࠷ऴܗଶ: ReactXP
  48. ©2018 Wantedly, Inc. Ϙλϯͷ࣮૷Λ࢝ΊΑ͏

  49. ©2018 Wantedly, Inc.  (SBEBUJPO  "OJNBUJPO  "DDFTTJCJMJUZ 

    5IFNF ϘλϯҰͭͰߟ͑Δ͜ͱଟ͗͢Δ ձࣾશମͰ࢖ΘΕΔ൚༻ϥΠϒϥϦ͔ͩΒͦ͜ ͔ͬ͠Γߟ͑ͯஸೡʹ࣮૷͢Δඞཁ͕͋Δ
  50. ©2018 Wantedly, Inc. άϥσʔγϣϯͷ࣮ݱํ๏͕ҧ͏ Gradation 8FCͰ͸ɺ$44ͷMJOFBSHSBEJFOU͕࢖͑Δ

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

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

    ಉ͡QSPQTΛड͚ͯɺMJOFBSHSBEJFOUͷจࣈྻΛੜ੒͢Ε͹ྑ͍ Gradation
  53. ©2018 Wantedly, Inc. Gradation modules/linear-gradient/index.web.tsx

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

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

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

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

  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.
  59. ©2018 Wantedly, Inc. ந৅Խͯ͠ڞ௨ͷΠϯλʔϑΣʔεΛ࡞Γ͍͕ͨɺ(SBEBUJPO΄ Ͳ୯७Ͱ͸ͳ͍ w 5JNJOHGVODUJPO΋ॻ͖ํ͕͍Ζ͍ΖͰ͖Δ w 8FCͰ͸5SBOTJUJPOΛ్தͰࢭΊͨΓͰ͖ͳ͍ w

    *OUFSQPMBUJPOͳͲ΋͋Δ Animation ࣮૷͸͔ͳΓେม
  60. ©2018 Wantedly, Inc. w 3FBDU91ʹ͸ɺͦΕΛ࣮૷ͨ͠39"OJNBUFE͕͋Δ w "OJNBUFEͷΑ͏ʹॻ͘ͱɺ$44Ͱ͸5SBOTJUJPOΛ࢖ͬͯ࠷ దԽͯ͘͠ΕΔ w ΋ͪΖΜ੍ݶ͸͋Δ

    w ϥΠϒϥϦͱͯ͠੾Γग़͞Ε͓ͯΒͣɺਅࣅ࣮ͯ͠૷͢Δʹ͸ େมͳྔ RX.Animated
  61. ©2018 Wantedly, Inc. ύϑΥʔϚϯεΛٻΊΔͱɺ8FC͸$44Ͱॻ͘ͷ͕࠷ద͕ͩɺ w ΄ͱΜͲͷίϯϙʔωϯτʹ͸͋ΔͷͰɺͦΕΒΛશͯॻ͖׵͑Δඞཁ͕͋Δͷ ͸ݱ࣮తͰ͸ͳ͍ w ந৅ϨΠϠʔΛ࡞Δͷ΋؆୯Ͱ͸ͳ͍ Animationͷํ਑

    جຊ͸"OJNBUFEͰॻ͍ͯɺ Ͳ͏ͯ͠΋ؾʹͳΔ෦෼͸$44Ͱ࠷దԽ͢Δ
  62. ©2018 Wantedly, Inc. w 5FYUͷ໰୊ w 8FCͰ͸ςΩετΛදݱ͢Δλά͕ଟ͋͘Δ w શ෦ΛEJWʹ͢Δͷ͸ɺ4&0ͳͲͰݒ೦͕͋Δ Accessibility

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

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

    w 7JFX #VUUPO 5PVDIBCMFͳͲΛ͖ͪΜͱ࢖͍෼͚Δ Accessibility
  65. ©2018 Wantedly, Inc. Ϙλϯ͸࣮͸ɺҰछྨ͡Όͳ͍ Theming 7JTJU 1FPQMF /PSNBM *OWFSTF

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

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

  68. ©2018 Wantedly, Inc. w SFBDUOBUJWFXFCͰUIFNFͱ͍͑͹ɺ5XJUUFS-JUF w IUUQTJUT[FSPCMPHJNQMFNFOUJOHOJHIUNPEFPO UXJUUFSMJUFIUNM w $POUFYUͰ෇͚ସ͑ΒΕΔΑ͏ʹ޻෉

    w ݁ՌΛΩϟογϡ͢Δͯ͠ɺύϑΥʔϚϯεվળ Theming
  69. ©2018 Wantedly, Inc. ෼͔Γ΍͍͢υΩϡϝϯτΛ ࡞Ζ͏

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

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

  72. ©2018 Wantedly, Inc. w ؆୯ͳηοτΞοϓ w σϑΥϧτͰ5ZQF4DSJQUʹରԠ w NEYͱ͍͏NBSLEPXOͱ+49Λ૊Έ߹Θͤͨܗࣜ w

    ී௨ʹυΩϡϝϯτΛॻ͘ײ֮Ͱɺ్தͰ3FBDUίϯϙʔωϯ τΛඳըͰ͖Δ w ଟػೳ͔ͭɺ଎͍ϖʔεͰਐԽ doczͷັྗ
  73. ©2018 Wantedly, Inc. .mdx

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

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

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

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

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

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

  80. ©2018 Wantedly, Inc. w QSJWBUFQBDLBHFʹͨ͠ͷͰɺOQNͷઃఆ͕ඞཁͩͬͨ w ΈΜͳͷΞΧ΢ϯτ؅ཧ΋ඞཁ w $*Ͱ΋ಈ͘Α͏ʹ͠ͳ͍ͱ w

    ಛʹݟΒΕͯࠔΔ΋ͷͰ΋ͳ͍ͷͰɺQVCMJDʹͨ͠ΒΑ͔ͬͨ εϜʔζʹಋೖͰ͖ͳ͍ɻɻ
  81. ©2018 Wantedly, Inc. w XFC͸ɺEJTUJOEFYXFCKTΛग़ྗ͍͕ͯͨ͠ w XFCQBDLͷઃఆ͕ඞཁ DSFBUFSFBDUBQQͰ͸ରԠࡁΈ  w

    JOEFYKT͸XFCKTΛSFRVJSF͢ΔΑ͏ʹॻ͘΂͖ w ωΠςΟϒ͸ɺJPTKT BOESPJEKTʹ͓͚ͯ͠͹ɺSFBDUOBUJWFΛී௨ʹηο τΞοϓ͍ͯ͠Ε͹໰୊ͳ͘࢖͑Δ w SFBDUOBUJWFSFBDUOBUJWFXFC΁ͷBMJBTઃఆ w ϥΠϒϥϦଆͰॻ͖׵͔͑ͯΒ഑෍͢Δ΂͖ εϜʔζʹಋೖͰ͖ͳ͍ɻɻ
  82. ©2018 Wantedly, Inc. ӡ༻࣌ͷ஫ҙ఺

  83. ©2018 Wantedly, Inc. w ·ͩͦͷஈ֊·Ͱདྷ͍ͯͳ͍͕ɺ w ΞοϓσʔτΛ҆શʹߦ͏࢓૊Έ͕ཉ͍͠ w Ұ൪ා͍ͷ͸ɺ8FC͚ͩม͑ͨͭ΋Γ͕ɺωΠςΟϒ΋όάͬ ͯ͠·͏໰୊

    w εφοϓγϣοτςετɺεΫϦʔϯγϣοτςετɺFFς ετͳͲͷಋೖΛݕ౼͢΂͖ ӡ༻࣌ͷ஫ҙ఺
  84. ©2018 Wantedly, Inc. ·ͱΊ

  85. ©2018 Wantedly, Inc. w ରԠ͍ͨ͠ϓϥοτϑΥʔϜͱɺ૊৫ঢ়ଶʹΑͬͯΞʔΩςΫ νϟΛબͿ w ૊৫಺Ͱڞ௨Ͱ࢖ΘΕΔϥΠϒϥϦ͔ͩΒͦ͜ɺࡉ͔͍ͱ͜Ζ ·Ͱߟ࣮͑ͯ૷͠Α͏ w

    ෼͔Γ΍͍͢υΩϡϝϯτΛಋೖ͠Α͏ w ࢖͏ਓ͕٧·Βͳ͍Α͏ʹɺϏϧυͷΊΜͲ͘͞͞͸ϥΠϒϥ ϦଆͰٵऩ͠Α͏ σβΠϯγεςϜ࣮૷࣌ʹؾʹ͢΂͖͜ͱ·ͱΊ