Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.  ίϯηϓτΛܾΊΔ  σβΠϯΛ࡞Δ  ࣮૷͢Δ 

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

    +FU#SBJOT 1MBTNB 8F8PSL   1SJODJQMFTϖʔδ 1. ίϯηϓτΛܾΊΔ
  3. ©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 ·ͩૣ͔ͬͨ ࠓޙʹͱͯ΋ظ଴ʂ
  4. ©2018 Wantedly, Inc. w 8FC͚ͩͰे෼ͳΒɺ$44Λ࢖ͬͯ։ൃ͢Δ 4BTTͳͲΛؚ Ή  w $44ΛJNQPSUͯ͠ద੾ͳDMBTT໊Λ͚ͭΕ͹ɺελΠϧ͕౰ͯΒΕΔ

    w 3FBDU΍7VFͳͲͷ༷ʑͳ6*ϥΠϒϥϦʹରԠͨ͠΋ͷΛ࡞ Ε͹ɺ͞Βʹศར w ៉ྷͳ$44Λॻٕ͘ज़͸ࣦΘΕͭͭ͋Δʁ CSS
  5. ©2018 Wantedly, Inc. w 3FBDU/BUJWF͕ಈ͘؀ڥʹରԠͰ͖Δ w J04 "OESPJE 8FC 8JOEPXT

    73ͳͲ͔ͳΓଟ͍ w $44͸࢖͑ͳ͍ͷͰɺଞͷ8FCͱͷڞଘ͸೉͍͠ w 3FBDUʹৼΓ੾͍ͬͯΔνʔϜͳΒ༗ޮ React Native
  6. ©2018 Wantedly, Inc. w 3FBDU/BUJWFͰ࣮૷͠Α͏ʂ w 3FBDUͷՕॴ͕૿͑ɺ3FBDU͔͚Δਓ΋ͲΜͲΜ૿͍͑ͯΔ w ࠓޙͷ8FC։ൃ͸3FBDUͰ౷Ұ͞Ε͍ͯ͘งғؾ w

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

    େมIPWFSͱ͔ MBTUDIJMEͱ͔ w ͙͢ʹωΠςΟϒͰ࢖Θͳͯ͘΋ɺ3FBDU/BUJWFͷॻ͖ํʹ ରԠ͓͍ͯͨ͠΄͏͕҆৺ Wantedlyͷબ୒
  8. ©2018 Wantedly, Inc. w ཁ݅ͷ੔ཧ  8FCͱ/BUJWFͰಉ͡Α͏ʹ࢖͑Δ  5ZQF4DSJQUͰܕνΣοΫ͍ͨ͠ 

    ࢖͏ଆͰ໘౗ͳઃఆ͸ͨ͘͠ͳ͍ React Native (for Web) Ͱͷ࣮૷Λ࢝ΊΑ͏ʂ
  9. ©2018 Wantedly, Inc. w .JDSPTPGU͕ɺ4LZQFΛ3FBDUͰΫϥεϓϥοτϑΥʔϜʹ ։ൃͨ࣌͠ʹੜ·Εͨ w 8FC J04 "OESPJEBOE8JOEPXT

    w ϥΠϒϥϦ޲͖Ͱ͸ͳ͍ w 91NFBOTDSPTTQMBUGPSN OPUB8JOEPXTWFSTJPO  w ࠔͬͨΒ͜͜ΛݟΕ͹ɺԿ͔͠Βͷղܾࡦ͕ݟ͔ͭΔ ΫϩεϓϥοτϑΥʔϜͷ࠷ऴܗଶ: ReactXP
  10. ©2018 Wantedly, Inc.  (SBEBUJPO  "OJNBUJPO  "DDFTTJCJMJUZ 

    5IFNF ϘλϯҰͭͰߟ͑Δ͜ͱଟ͗͢Δ ձࣾશମͰ࢖ΘΕΔ൚༻ϥΠϒϥϦ͔ͩΒͦ͜ ͔ͬ͠Γߟ͑ͯஸೡʹ࣮૷͢Δඞཁ͕͋Δ
  11. ©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.
  12. ©2018 Wantedly, Inc. w ؆୯ͳηοτΞοϓ w σϑΥϧτͰ5ZQF4DSJQUʹରԠ w NEYͱ͍͏NBSLEPXOͱ+49Λ૊Έ߹Θͤͨܗࣜ w

    ී௨ʹυΩϡϝϯτΛॻ͘ײ֮Ͱɺ్தͰ3FBDUίϯϙʔωϯ τΛඳըͰ͖Δ w ଟػೳ͔ͭɺ଎͍ϖʔεͰਐԽ doczͷັྗ
  13. ©2018 Wantedly, Inc. w XFC͸ɺEJTUJOEFYXFCKTΛग़ྗ͍͕ͯͨ͠ w XFCQBDLͷઃఆ͕ඞཁ DSFBUFSFBDUBQQͰ͸ରԠࡁΈ  w

    JOEFYKT͸XFCKTΛSFRVJSF͢ΔΑ͏ʹॻ͘΂͖ w ωΠςΟϒ͸ɺJPTKT BOESPJEKTʹ͓͚ͯ͠͹ɺSFBDUOBUJWFΛී௨ʹηο τΞοϓ͍ͯ͠Ε͹໰୊ͳ͘࢖͑Δ w SFBDUOBUJWFSFBDUOBUJWFXFC΁ͷBMJBTઃఆ w ϥΠϒϥϦଆͰॻ͖׵͔͑ͯΒ഑෍͢Δ΂͖ εϜʔζʹಋೖͰ͖ͳ͍ɻɻ
  14. ©2018 Wantedly, Inc. w ରԠ͍ͨ͠ϓϥοτϑΥʔϜͱɺ૊৫ঢ়ଶʹΑͬͯΞʔΩςΫ νϟΛબͿ w ૊৫಺Ͱڞ௨Ͱ࢖ΘΕΔϥΠϒϥϦ͔ͩΒͦ͜ɺࡉ͔͍ͱ͜Ζ ·Ͱߟ࣮͑ͯ૷͠Α͏ w

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