AngularJSからのリプレイスから学ぶアンチパターン

ngJapan OnAirでのトーク資料です。
AngularJSからAngula２系へリプレイスを行った際の方法や、ふり返ってみてこれはアンチパターンだった、もう少し良い方法があった等を紹介しています。

Transcript

1. $0/'*%&/5*"- "OHVMBS+4͔ΒͷϦϓϨΠε͔Β
   ֶͿΞϯνύλʔϯ OHKBQBO
   0O"JS
   
   
2. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ 1SPpMF LJUBHBXB !LJUBHBXBNBD 'SPOUFOE
   &OHJOFFS
3. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ
4. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ 5ZQFTDSJQU
   
   "OHVMBS
   
   (SVOU
    5ZQFTDSJQU
   
   "OHVMBS
   "OHVMBS$-*
   
   3YKT
   
   /HSY
    7FSTJPO ೥݄࣌఺ 7 7
5. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ  ಉػೳΛ࠶ߏங
    ϒϥ΢βαϙʔτ͸੍ݶ
   *&
   FEHFҎԼ͸ඇਪ঑
    ผ63-ʹਵ࣌ϦϦʔε͢Δ
   ϦϓϨΠεͷํ਑
6. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ ϦϓϨΠεํ๏ ஔ׵
   ࣸܦ
7. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ $PNQPOFOU $POUSPMMFS
   $PNQPOFOU $PNQPOFOU $POUBJOFS
   $PNQPOFOU 1SFTFOUBUJPO
8. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ $POUBJOFS$PNQPOFOUʹTUBUF؅ཧ΍SPVUF؅ཧ͕ूத͢ΔͷͰɺ'BUͳ$PNQPOFOUʹͳΓ΍͍͢ Ξϯνύλʔϯᶃ
   
   $POUBJOFS$PNQPOFOU
   
   ϖʔδ୯Ґ ❌
   #BE
9. $0/'*%&/5*"-
   
   5PSFUB
   *OD
   "MM
   3JHIU
   3FTFSWFEɹ Ξϯνύλʔϯᶃ
   
   $POUBJOFS$PNQPOFOU
   
   ϖʔδ୯Ґ
   #FUUFS $POUBJOFS$PNQPOFOUΛωετͯ͠ɺػೳ୯Ґͷཻ౓ʹ͢Δɻ
10. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 5FNQMBUF )5.-
    'JMUFS )5.-
    1JQF
11. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 5FNQMBUF ςϯϓϨʔτͷߏจΛม׵ OHJG OH*G OHDMBTT <OH$MBTT>
12. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶄ
    1JQFͷଟ༻ ❌
    #BE ม׵ॲཧͱͯ͠1JQFΛ4FSWJDF΍1JQFʹ%*ͯ͠QJQFΛར༻͢Δɻ
13. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶄ
    1JQFͷଟ༻ QJQFͷUSBOTGPSN಺ΛQVSFͳGVODUJPOͱͯ͠੾Γग़ͯ͠4FSWJDFͳͲͰར༻͢Δɻ
    #FUUFS
14. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 5FNQMBUF্ͷ1JQFͷσϝϦοτ
    ɾςετͮ͠Β͍
    ɾܕ҆શͰͳ͍ Ҿ਺͕BOZʹͳΔ Ξϯνύλʔϯᶄ
    1JQFͷଟ༻ 5FNQMBUF্Ͱ1JQFΛ࢖ͬͨม׵ΛͤͣʹɺDPQNPOFOU಺Ͱม׵Λߦ͔ͬͯΒUFNQMBUFʹ౉͢ɻ
    ·ͨ͸7JFX.PEFMΛར༻͢Δɻ
    #FUUFS
15. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ DPOUSPMMFS
     QSPQFSUZ TUBUF 4UBUF
    NBOBHFNFOU OHSY
    
    SFEVDFS
    
    BDUJPO
    
    FGGFDU
16. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 4UBUF
    NBOBHFNFOU ɾTUBUFΛ0CTFSWBCMFʹ DPNQPOFOU UFNQMBUF
17. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 4UBUF
    NBOBHFNFOU ɾ஋ͷมߋॲཧ͸BDUJPOSFEVDFSʹ ɾ֎෦"1*ͱͷσʔλͷ΍ΓͱΓ͸FGGFDUʹ
18. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶅ
    F⒎FDUͷଟ༻ FGGFDUΛൃՐ͢Δ͚ͩͷBDUJPOΛ࡞Ζ͏ͱ͍ͯͨ͠Β஫ҙɻ
    FGGFDU͸෭࡞༻Λදݱ͢Δ΋ͷͰ͋Γɺ෭࡞༻
    
    ඇಉظॲཧͰ͸ͳ͍ɻ
    ࡞༻͕ͳ͘෭࡞༻͚ͩͷ৔߹͸ݟ௚͢༨஍͋Γɻ ⚠
    8BSO 4UPSF <"DUJPO>
    -PBE-JTU &⒎FDU <"DUJPO>
    -PBE4VDDFTT
19. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶆ
    F⒎FDUͷଟ༻
    #FUUFS ඇಉظॲཧͰ͋ͬͯ΋SFEVDFS΍DPNQPOFOUͰBTZODBXBJUΛ࢖ͬͯදݱͰ͖Δɻ
20. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶆ
    DPNQPOFOU಺ͰͷPG5ZQF DPNQPOFOU಺ͰBDUJPOͷTVCTDSJCFΛߦ ͏ɻ
    EJTQBUDI͞ΕͨBDUJPO͕Ͳ͜Ͱ؂ࢹ͞Εͯ Δ͔೺Ѳ͕ࠔ೉ʹͳΔ ❌
    #BE
    #FUUFS DPNQPOFOUͰPG5ZQF͸ۃྗ࢖Θͳ͍ɻ
    TUPSFͷTUBUFͷTVCTDSJCFͰ୅༻ɻ
21. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ BOHVMBSVJSPVUFS 3PVUFS BOHVMBSSPVUFS
22. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ 3PVUFS SFTPMWF͸DBO"DUJWBUFʹม׵ɻ
    BOHVMBSSPVUFSͰ͸SFKFDU͢Δ͔ΛDBO"DUJWBUFͰ؅ཧ͞ΕΔɻ
23. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ Ξϯνύλʔϯᶇ
    HVBSEͰͷ෭࡞༻ DBO"DUJWBUF಺ʹ$PNQPOFOUͷॳظԽॲཧ Λࠞ߹͠ͳ͍Α͏ʹ஫ҙɻ ⚠
    8BSO
24. $0/'*%&/5*"-
    
    5PSFUB
    *OD
    "MM
    3JHIU
    3FTFSWFEɹ UJQTɾ࠷ॳʹ΍͓͖͍ͬͯͨ͜ͱ
    UTDPOpHͷઃఆ lTUSJDUz
    USVF
    BOZ͸ͳΔ΂͘ഉআ͢Δ
    ్த͔Βઃఆ͢Δ৔߹͸ɺcVOEGJOFE΍OVMM VOEFGJOFEνΣοΫΛ௥Ճͯ͠ΤϥʔΛແ͔ͯ͘͠Β ঃʑʹ֎͢
    #FUUFS
25. 5IBOL
    ZPV