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

複雑な画面をリファクタした話

1c2b62114ede7d8cb897bf19b999d233?s=47 Muttsu
February 12, 2020

 複雑な画面をリファクタした話

1c2b62114ede7d8cb897bf19b999d233?s=128

Muttsu

February 12, 2020
Tweet

Transcript

  1. ෳࡶͳը໘ΛϦϑΝΫλͨ͠࿩ © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . גࣜձࣾΞτϥΤ ZFOUB ࠤ౻ເੵ 5XJUUFS!NVUUVT@
  2. 2 ࠤ౻ເੵ .VUTVNJ  
 גࣜձࣾΞτϥΤ೥৽ଔೖࣾ ZFOUB "OESPJEΞϓϦΤϯδχΞࣾ಺Ͱਓ ॳ-5 5XUJUUFS!NVUUTV@

    (JUIVC!NVUUTV © 2 0 1 9 A t r a e , I n c . A l l r i g h t s r e s e r v e d .
  3. ࢿຊۚ ԯ ສԁ גࣜձࣾΞτϥΤ ˞(SFBU1MBDFUP8PSLš*OTUJUVUF+BQBO࣮ࢪʢैۀһʙ໊ͷ෦ʣ ԯԁ ࣌Ձ૯ֹ ࣾһ਺ ໊ ౦ূϚβʔζ্৔

    ೥݄ ೥݄ ౦ূҰ෦ʹࢢ৔มߋ ࠃ಺ϥϯΩϯά ΞδΞϥϯΩϯά ೥൛ʮಇ͖͕͍ͷ͋Δձࣾʯ Ґ Ґ ΞτϥΤઃཱ ೥݄ ౦ূҰ෦্৔ɿ Ԋֵ ࣌఺ © 2 0 1 9 A t r a e , I n c . A l l r i g h t s r e s e r v e d . 3 ձࣾ֓ཁ
  4. 4 1FPQMF5FDI$PNQBOZͱࣗࣾΛ࠶ఆٛ ୯ͳΔ)3ྖҬͰ͸ͳ͘ ςΫϊϩδʔʹΑͬͯ ਓͷՄೳੑΛ֦͛ΔࣄۀΛ૑଄ νʔϜྗΛݺͼى͜͢ ૊৫վળϓϥοτϑΥʔϜ ϏδωεΛՃ଎ͤ͞Δ ग़ձ͍ΛੜΈग़͢ "*ϏδωεϚονϯάΞϓϦ

    ʮਓͱ૊৫Λݩؾʹ͢Δʯ ੒ޭใुܕٻਓϝσΟΞ ձࣾ֓ཁ#VTJOFTT © 2 0 1 9 A t r a e , I n c . A l l r i g h t s r e s e r v e d .
  5. ࣄۀ঺հZFOUB ϏδωεΛՃ଎ͤ͞Δ ग़ձ͍ΛੜΈग़͢ "*ϏδωεϚονϯάΞϓϦ ؇΍͔ͳ৘ใަ׵͔Βɺىۀɾఏ ܞɾग़ࢿɾ࠾༻·ͰɺZFOUBΛ௨ ͯ͡ʮϏδωεΛՃ଎ͤ͞Δग़ձ ͍ʯ͕਺ଟ͘ੜ·Ε͍ͯ·͢ɻ ϏδωεΛՃ଎ͤ͞Δग़ձ͍Λ ©

    2 0 1 9 A t r a e , I n c . A l l r i g h t s r e s e r v e d . 5
  6. 6 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . w ࿩͢಺༰ w ZFOUBʹ͓͚Δϝοηʔδը໘ͷ৚݅෼ذ w աڈ w ղܾํ๏
  7. 7 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . w ϝοηʔδϦΫΤετΛڐՄ͍ͯ͠ͳ͍৔߹ɺ
 ೖྗϨΠΞ΢τΛมߋ w ӡӦ#PU͔Βͷϝοηʔδͷ৔߹΋ผϨΠΞ΢τʹมߋ w ϝοηʔδ͕ڐՄ͞Ε͍ͯͳ͍৔߹͸ফ͢ w ભҠݩ͕༑ୡҰཡͷ৔߹ɺඇදࣔϝχϡʔΛফ͢ ৚݅෼ذͷྫ
  8. 8 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . #PUϝοηʔδऔಘ ϝοηʔδະڐՄϦΫΤετड৴ͷ৔߹ͷϝοηʔδऔಘ ͦͷଞͷ৔߹ͷϝοηʔδऔಘ ৚݅෼ذͷྫ
  9. 9 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . "DUJWJUZ'SBHNFOU "DUJWJUZ w ϝχϡʔˡ৚݅෼ذ w 7JFX1BHFS .FTTBHF'SBHNFOU 1SPpMF'SBHNFOU  w ΠϯϓοτϨΠΞ΢τˡ৚݅෼ذ 'SBHNFOU w ϝοηʔδऔಘɾૹ৴ˡ৚݅෼ذ w FNQUZ Ұཡදࣔ w ৚݅෼ذ͕ଟ͍ w ௨৴΋"DUJWJUZ 'SBHNFOUͰߦͳ͍ͬͯͨ աڈͷ࣮૷ํ๏
  10. 10 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ՝୊  "DUJWJUZ'SBHNFOUͰ
 ඳըɺ௨৴ͳͲ΋͢΂ͯߦͳ͍ͬͯͨͨΊ
 ίʔυྔ͕૿͍͑ͯͨɻ  JGจ͕ଟ͘ɺಉ͡৚݅෼ذ͕ଟ༻͞Ε͍ͯͯɺ
 ίʔυΛಡΈղ͖վम͢Δ͜ͱʹ͕࣌ؒ
 ͔͔Γ͍͗ͯͨ͢ɻ ՝୊ͱղܾํ๏
  11. 11 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ՝୊  "DUJWJUZ'SBHNFOUͰ
 ඳըɺ௨৴ͳͲ΋͢΂ͯߦͳ͍ͬͯͨͨΊ
 ίʔυྔ͕૿͍͑ͯͨɻ  JGจ͕ଟ͘ɺಉ͡৚݅෼ذ͕ଟ༻͞Ε͍ͯͯɺ
 ίʔυΛಡΈղ͖վम͢Δ͜ͱʹ͕࣌ؒ
 ͔͔Γ͍͗ͯͨ͢ɻ ݪҼ w 6*Ͱڞ௨ͳ෦෼͕ଟ͘ɺ
 ڞ௨ԽΛҙࣝ͗ͯ͢͠Լखʹ৚݅෼ذ͕૿͑ͨɻ ՝୊ͱղܾํ๏
  12. 12 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ղܾࡦ  .77.ʹͯ͠ɺඳըɺϏδωεϩδοΫɺ
 σʔλ௨৴Λ෼͚ͨ  ৚݅෼ذΛJGͰॻ͔ͣɺผϑΝΠϧʹ෼͚ͨ  ϝχϡʔද͕ࣔ"DUJWJUZΛෳ਺  ୟ͘"1* ΠϯϓοτϨΠΞ΢τ͕ҧ͏
 'SBHNFOUΛෳ਺  &NQUZ Ұཡ͸ڞ௨ͳͷͰɺ
 Ұஈਂ͍֊૚ͷ'SBHNFOUΛ࡞੒ ՝୊ͱղܾํ๏ ՝୊  "DUJWJUZ'SBHNFOUͰ
 ඳըɺ௨৴ͳͲ΋͢΂ͯߦͳ͍ͬͯͨͨΊ
 ίʔυྔ͕૿͍͑ͯͨɻ  JGจ͕ଟ͘ɺಉ͡৚݅෼ذ͕ଟ༻͞Ε͍ͯͯɺ
 ίʔυΛಡΈղ͖վम͢Δ͜ͱʹ͕࣌ؒ
 ͔͔Γ͍͗ͯͨ͢ɻ ݪҼ w 6*Ͱڞ௨ͳ෦෼͕ଟ͘ɺ
 ڞ௨ԽΛҙࣝ͗ͯ͢͠Լखʹ৚݅෼ذ͕૿͑ͨɻ
  13. 13 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ղܾࡦ  .77.ʹͯ͠ɺඳըɺϏδωεϩδοΫɺ
 σʔλ௨৴Λ෼͚ͨ  ৚݅෼ذΛJGͰॻ͔ͣɺผϑΝΠϧʹ෼͚ͨ  ϝχϡʔද͕ࣔ"DUJWJUZΛෳ਺  ୟ͘"1* ΠϯϓοτϨΠΞ΢τ͕ҧ͏
 'SBHNFOUΛෳ਺  &NQUZ Ұཡ͸ڞ௨ͳͷͰɺ
 Ұஈਂ͍֊૚ͷ'SBHNFOUΛ࡞੒ ɹɹˢͷ࿩Λ͠·͢ ՝୊ͱղܾํ๏ ՝୊  "DUJWJUZ'SBHNFOUͰ
 ඳըɺ௨৴ͳͲ΋͢΂ͯߦͳ͍ͬͯͨͨΊ
 ίʔυྔ͕૿͍͑ͯͨɻ  JGจ͕ଟ͘ɺಉ͡৚݅෼ذ͕ଟ༻͞Ε͍ͯͯɺ
 ίʔυΛಡΈղ͖վम͢Δ͜ͱʹ͕࣌ؒ
 ͔͔Γ͍͗ͯͨ͢ɻ ݪҼ w 6*Ͱڞ௨ͳ෦෼͕ଟ͘ɺ
 ڞ௨ԽΛҙࣝ͗ͯ͢͠Լखʹ৚݅෼ذ͕૿͑ͨɻ
  14. 14 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ղܾͷϙΠϯτ w ৚݅෼ذ͕ಉ͡΋ͷ͸ಉ͡ϨΠϠʔʹͯ͠
 ৚݅෼ذ͝ͱʹϑΝΠϧΛ࡞੒͢Δɻ
  15. 15 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . "DUJWJUZ w ϝχϡʔˡ৚݅෼ذ w 7JFX1BHFS .FTTBHF'SBHNFOU 1SPpMF'SBHNFOU  w ΠϯϓοτϨΠΞ΢τˡ৚݅෼ذ 'SBHNFOU w ϝοηʔδऔಘɾૹ৴ˡ৚݅෼ذ w FNQUZ Ұཡදࣔ ղܾͷϙΠϯτ
  16. 16 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . "DUJWJUZ w ϝχϡʔˡ৚݅෼ذ w 7JFX1BHFS .FTTBHF'SBHNFOU 1SPpMF'SBHNFOU  w ΠϯϓοτϨΠΞ΢τˡ৚݅෼ذ 'SBHNFOU w ϝοηʔδऔಘɾૹ৴ˡ৚݅෼ذ w FNQUZ Ұཡදࣔ ৚݅෼ذͷ਺
 "DUJWJUZΛෳ਺࡞੒ ղܾͷϙΠϯτ
  17. 17 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ಉ͡৚݅ͳͷͰ·ͱΊ
 'SBHNFOUΛෳ਺࡞੒ ղܾͷϙΠϯτ "DUJWJUZ'SBHNFOU "DUJWJUZ w ϝχϡʔˡ৚݅෼ذ w 7JFX1BHFS .FTTBHF'SBHNFOU 1SPpMF'SBHNFOU  w ΠϯϓοτϨΠΞ΢τˡ৚݅෼ذ 'SBHNFOU w ϝοηʔδऔಘɾૹ৴ˡ৚݅෼ذ w FNQUZ Ұཡදࣔ
  18. 18 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ղܾͷϙΠϯτ "DUJWJUZ'SBHNFOU "DUJWJUZ w ϝχϡʔˡ৚݅෼ذ w 7JFX1BHFS .FTTBHF'SBHNFOU 1SPpMF'SBHNFOU  w ΠϯϓοτϨΠΞ΢τˡ৚݅෼ذ 'SBHNFOU w ϝοηʔδऔಘɾૹ৴ˡ৚݅෼ذ w FNQUZ Ұཡදࣔ "DUJWJUZ 'SBHNFOU 'SBHNFOU
  19. 19 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ݱࡏͷ࣮૷ํ๏ "DUJWJUZ'SBHNFOU "DUJWJUZ ະڐՄະϝοηʔδ #PU ͦͷଞ  w ϝχϡʔ 'SBHNFOU ະڐՄϦΫΤετड৴ #PU༻ ͦͷଞ  w ϝοηʔδऔಘɾૹ৴ˠ%#ʹϝοηʔδΛอଘ w 7JFX1BHFS w ΠϯϓοτϨΠΞ΢τ 'SBHNFOU w FNQUZ Ұཡදࣔˡ%#Λ؂ࢹ͠ɺϝοηʔδऔಘ
  20. 20 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ϝϦοτ w ϝχϡʔɺσʔλऔಘɺ&NQUZɾҰཡදࣔ
 ͦΕͧΕͷϨΠϠʔͰਖ਼͠͞Λ֬ೝͰ͖Δɻ w ෳ਺ϑΝΠϧʹ෼͚͓͔ͨ͛Ͱɺ
 ҧ͏৚݅ͷ΋ͷʹӨڹ͕ग़ʹ͍͘ɻ
  21. 21 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . σϝϦοτ w ෼͚Δͷ͸ͱΓ͋͑ͣΊΜͲ͍͘͞ɻ w ಉ͡ίʔυ͕ෳ਺ϑΝΠϧʹଘࡏͯ͠͠·͏ɻ
 ͜Ε͸Ұ୴͠ΐ͏͕ͳ͍ͱڐ༰ʜ
  22. 22 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ֶͼ w ৚݅෼ذ͚ͩͰ੍ޚ͢Δͷʹ͸ݶք͕͋Δɻ
 ͷͰɺผͳ΋ͷ͸ผͱׂΓ੾Δɻ w "DUJWJUZ΍'SBHNFOUࣗମ΋੹຿ʹΑͬͯ
 ֊૚Λ෼͚͍ͯ͘͜ͱʹΑͬͯ'BUʹͳΓʹ͍͘
 ͔΋͠Εͳ͍
  23. 23 © 2 0 1 9 A t r a

    e , I n c . A l l r i g h t s r e s e r v e d . ઈࢍΤϯδχΞืूதͰ͢