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

ෳࡶͳը໘ΛϦϑΝΫλͨ͠࿩ © 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 ࠤ౻ເੵ .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 .

ࢿຊۚ ԯ ສԁ גࣜձࣾΞτϥΤ ˞(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 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 .

ࣄۀ঺հ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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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ʹͳΓʹ͍͘  ͔΋͠Εͳ͍

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

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

Muttsu

More Decks by Muttsu

Other Decks in Programming

Featured

Transcript

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

2 ࠤ౻ເੵ .VUTVNJ   גࣜձࣾΞτϥΤ೥৽ଔೖࣾ ZFOUB "OESPJEΞϓϦΤϯδχΞࣾ಺Ͱਓ ॳ-5 5XUJUUFS!NVUUTV@

ࢿຊۚ ԯ ສԁ גࣜձࣾΞτϥΤ ˞(SFBU1MBDFUP8PSL*OTUJUVUF+BQBO࣮ࢪʢैۀһʙ໊ͷ෦ʣ ԯԁ ࣌Ձ૯ֹ ࣾһ਺ ໊ ౦ূϚβʔζ্৔

4 1FPQMF5FDI$PNQBOZͱࣗࣾΛ࠶ఆٛ ୯ͳΔ)3ྖҬͰ͸ͳ͘ ςΫϊϩδʔʹΑͬͯ ਓͷՄೳੑΛ֦͛ΔࣄۀΛ૑଄ νʔϜྗΛݺͼى͜͢ ૊৫վળϓϥοτϑΥʔϜ ϏδωεΛՃ଎ͤ͞Δ ग़ձ͍ΛੜΈग़͢ "*ϏδωεϚονϯάΞϓϦ

ࣄۀ঺հZFOUB ϏδωεΛՃ଎ͤ͞Δ ग़ձ͍ΛੜΈग़͢ "*ϏδωεϚονϯάΞϓϦ ؇΍͔ͳ৘ใަ׵͔Βɺىۀɾఏ ܞɾग़ࢿɾ࠾༻·ͰɺZFOUBΛ௨ ͯ͡ʮϏδωεΛՃ଎ͤ͞Δग़ձ ͍ʯ͕਺ଟ͘ੜ·Ε͍ͯ·͢ɻ ϏδωεΛՃ଎ͤ͞Δग़ձ͍Λ ©

6 © 2 0 1 9 A t r a

7 © 2 0 1 9 A t r a

8 © 2 0 1 9 A t r a

9 © 2 0 1 9 A t r a

10 © 2 0 1 9 A t r a

11 © 2 0 1 9 A t r a

12 © 2 0 1 9 A t r a

13 © 2 0 1 9 A t r a

14 © 2 0 1 9 A t r a

15 © 2 0 1 9 A t r a

16 © 2 0 1 9 A t r a

17 © 2 0 1 9 A t r a

18 © 2 0 1 9 A t r a

19 © 2 0 1 9 A t r a

20 © 2 0 1 9 A t r a

21 © 2 0 1 9 A t r a

22 © 2 0 1 9 A t r a

23 © 2 0 1 9 A t r a