設計ポイントの 比較で知る Backbone.js

第1回JS-App勉強会　〜破綻しないWebアプリ開発のためのツール勉強会〜 でのLT資料。Backbone.jsとRuby on Railsの比較によりBackboneの特徴を知るという内容になります。

1. ઃܭϙΠϯτͷ ൺֱͰ஌Δ #BDLCPOFKT "UTVTIJ
   6DIJEB ୈҰճ JS-Appษڧձ@λωϚΩ ೥݄೔
2. ࣗݾ঺հ כϲ࡚ʙ౎಺΁௨͏ϑϦʔϥϯεΤϯδχΞ ݱࡏɺ3VCZɺ+BWBTDSJQUͰ࢓ࣄͯ͠·͢ +BWBTDSJQU͸࠷ۙɺຊࠊೖΕͯऔΓ૊Έத ͔ͳΓͷૣޱ ಺ా
   ರ೭ UXJUUFS
   !VUXBOH
3. ࠓ೔࿩͢಺༰ #BDLCPOFKTͱ3VCZ
   PO
   3BJMTͷ ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ ෦෼Λൺֱ͢Δ vs
4. ͳͥɺ͜ͷ࿩Λ͢Δ͔ ςʔϚʮഁ୼͠ͳ͍8FCΞϓϦ։ൃʯ  ઃܭΛ͢Δ͜ͱͰഁ୼Λ๷͙ ઃܭϙΠϯτ͔Β#BDLCPOFKTͷಛ௃Λ஌Δ αʔόαΠυͷ8FCϑϨʔϜϫʔΫ 3BJMT ͱ ൺֱ͢Δ͜ͱͰɺطଘͷ஌ࣝͱϚοϐϯά
5. #BDLCPOFKTͱ͸ 3&45GVMͳ+40/ΠϯλʔϑΣʔεΛඋ͑ͨ +BWB4DSJQUϥΠϒϥϦʢFOXJLJQFEJBPSHΑΓʣ %PDVNFOU$MPVE͕ެ։͍ͯ͠Δ044 w IUUQCBDLCPOFKTPSH ։ൃऀ
   +FSFNZ
   "TILFOBTࢯ w VOEFSTDPSFKT w $P⒎FF4DSJQU
6. #BDLCPOFͷΞʔΩςΫνϟ       %+.) <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)  
     w 3PVUFS
   7JFX
   .PEFM
   $PMMFDUJPOͰߏ੒͞ΕΔ w 7JFX͕ίϯτϩʔϥͷΑ͏ͳ໾ׂΛ࣋ͭ
7. ຊ୊ʹೖΔલʹʜ ීஈɺઃܭͯ͠·͔͢ʁ
8. ඞཁ࠷খݶͷઃܭ ઃܭ͢Δ͜ͱͰࣗ෼ͷ಄͕੔ཧ͞ΕΔ νʔϜ։ൃͰͦ͜ઃܭ͢Δ΂͖ w ΠϯλʔϑΣʔε෦෼Λڞ༗͓ͯ͘͠ͱɺ୲౰ͷείʔϓ ͕໌֬ w ௐ੔͕ඞཁʹͳͬͨͱ͖ͷ౔୆ʹͳΔ ΍Γ͗͢ݫېɺ׬ᘳΛ໨ࢦ͞ͳ͍͍ͯ͘ ʰͦͷ࣌఺Ͱͷඞཁ࠷খݶͷઃܭΛʱ
9. ͡Ό͋ɺԿΛઃܭ͢Δ͔ʁ f()
   C
   
   B
   º
   C f()
   B
   º
    xͱy͕Θ͔Δ͜ͱͰԿύλʔϯ͔ͷf()Λݕ౼Ͱ͖Δ y = f(x) y x γεςϜΛϒϥοΫϘοΫεͱΈͨ৔߹ γεςϜ  
   
   
10. 8FCͬΆ͍ϒϥοΫϘοΫε y = f(x) y x   γεςϜ       
    
        Կ͕͍͍͍͔ͨɾɾɾ γεςϜͷ*OQVUͱ0VUQVU͕໌֬ʹͳΕ͹ɺ γεςϜͷৼΔ෣͍Λݕ౼Ͱ͖Δ
11. 8FCΞϓϦͷ*OQVU0VUQVU )551ϦΫΤετʢ63-
    ύϥϝʔλʣ )5.-ʢը໘߲໨ʣ %#΁ͷ*0
    %#͸ϛυϧ΢ΣΞͷͨΊΞϓϦͷ ֎ଆͱΈΔ
12. ຊ୊ʹ໭Δ #BDLCPOFKTͱ3VCZ
    PO
    3BJMTͷ ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ ෦෼Λൺֱ͢Δ vs ࠓ͔Βൺ΂͍͖ͯ·͢
13. 3BJMTͷઃܭϙΠϯτ .PEFMͷΞʔΩςΫνϟ *OQVU0VUQVU͸Ͳ͔͜ʁ    $!               %
    "# 63-
    SFRVFTUύϥϝʔλ )5.- ςʔϒϧϨΠΞ΢τɺ ςʔϒϧؒͷؔ࿈ɺ ςʔϒϧͷ*0
14. #BDLCPOFͷઃܭϙΠϯτ #BDLCPOFͷΞʔΩςΫνϟ *OQVU0VUQVU͸Ͳ͔͜ʁ       %+.) <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)  
      63-ʢϑϥάϝϯτ
    PS
    QVTI4UBUFͷύεʣ )5.-
    BKBY௨৴࣌ͷ63-
    +40/σʔλͷϨΠΞ΢τ
15. 3PVUFSઃܭ 3PVUFSͷҧ͍       %+.) <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)  
      63-ʢϑϥάϝϯτ
    PS
    QVTI4UBUFͷύεʣ    $!               %
    "# 63-
    SFRVFTUύϥϝʔλ
    
    
    
    
    
    3PVUFSͰ%0.ͷ ɹɹIBTI$IBOHF
    QVTI4UBUF ΠϕϯτΛݕ஌ͯ͠ɺίʔϧ όοΫΛ࣮ߦɻίʔϧόοΫ಺ Ͱϖʔδ੾ସͷॲཧΛߦ͏ɻ
    
    
    
    
    
    
    3PVUFS͸ϦΫΤετ
    
    
    
    
    
    
    Λద੾ͳίϯτϩʔϥ ʹৼΓ෼͚Δɻ )5.-Λฦ͢͜ͱ ͰϖʔδΛ੾Γସ͑Δɻ
16. 3PVUFSઃܭ 63-ઃܭ ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͷఆٛ w Ͳ͏͍͏$POUSPMMFSʹͲ͏͍͏ΞΫγϣϯ͕ඞཁ͔ Λ໌֬ʹ͢Δ w ը໘ͷϦϯΫઌɺϑΥʔϜͷΞΫγϣϯʹࢦఆ͢Δ 63-΋໌֬ʹͳΔ ը໘໊ ϝιου 63- ίϯτϩʔϥΞΫγϣϯ πΠʔτҰཡ (&5 UXFFUT 5XFFUT$POUSPMMFSJOEFY ৽نπΠʔτ (&5 UXFFUTOFX 5XFFUT$POUSPMMFSOFX ৽نπΠʔτొ࿥ 1045 UXFFUT 5XFFUT$POUSPMMFSDSFBUF πΠʔτৄࡉ (&5 UXFFUTJE 5XFFUT$POUSPMMFSTIPX ྫʣ
17. 3PVUFSઃܭ 63-ઃܭ ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͷఆٛ w 63-͕੾Γସͬͨͱ͖ʹͲͷίʔϧόοΫΛ࣮ߦ͢Δ ͔Λ໌֬ʹ͢Δɻ w ը໘ͷϦϯΫઌ63-΋໌֬ʹͳΔɻ ը໘໊ 63- 3PVUFS
    
    ίʔϧόοΫ πΠʔτҰཡ UXFFUT "QQ3PVUFS
    JOEFY πΠʔτৄࡉ UXFFUTJE "QQ3PVUFS
    TIPX ৽نπΠʔτ UXFFUTOFX "QQ3PVUFS
    OFX ྫʣ
18. 7JFXઃܭ 7JFXͷҧ͍       %+.) <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)  
         $!               %
    "#
    
    
    
    
    
    ରԠ͢Δ%0.ཁૉ಺Ͱ
    
    
    
    
    
    ൃੜ͢ΔΠϕϯτͷ؂ࢹɺ %0.ૢ࡞ʹΑΓ)5.-ͷϨϯ μϦϯάɺ$44ͷ੾ସΛߦ͏ɻ .PEFMͷΠϕϯτ΋؂ࢹ
    
    
    
    
    
    
    7JFX͸$POUSPMMFS
    
    
    
    
    
    
    ͔Β౉͞ΕΔσʔλΛ 5FNQMBUFʹຒΊࠐΈɺ )5.-ΛϨϯμϦϯά͢ Δɻ )5.- )5.-
    
19. 7JFXઃܭ 3BJMT͸͏·͘.PEFMͱ࿈ܞͰ͖Δ࢓૊Έʹͳ͍ͬͯΔͨΊɺ .PEFMΛҙࣝ͠ͳ͕Βઃܭ͢Δɻ *OQVU0VUQVU߲໨Λ֬ೝ ը໘Ͱѻ͏σʔλͷ୯ҐΛݕ౼ w .PEFMؒͷؔ࿈ɺଟॏ౓Λݕ౼͢Δ
20. nav ul#side-nav div#content div#header div#index-table *OQVU0VUQVU߲໨ͷ֬ೝ %0.ཁૉͷ͏ͪ੩తಈతͳ΋ͷΛ೺Ѳ͢Δ #BDLCPOF
    7JFXͱରԠ͚ͮΔ%0.ཁૉΛఆٛ 7JFXઃܭ      
      
      
      
                   
21. .PEFMઃܭ .PEFMͷҧ͍       %+.) <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)  
         $!               %
    "#
    
    
    
    
    
    #BDLCPOFͷ.PEFM͸
    
    
    
    
    
    ରԠ͢Δ3&45
    "1* ΛϦιʔεͱͯ͠ѻ͏͜ͱ͕ Ͱ͖Δɻ Ϟσϧ
    
    Ϧιʔε<3&45
    "1*>
    
    
    
    
    
    .PEFM͸%#ͷͻͱͭ
    
    
    
    
    
    ͷςʔϒϧΛͻͱͭͷ Ϋϥεͱͯ͠ѻ͏͜ͱ͕ Ͱ͖ΔɻʢϞσϧ
    
    ςʔ ϒϧͷ03Ϛοϐϯάʣ BKBY௨৴࣌ͷ63-
    +40/σʔλͷϨΠΞ΢τ ςʔϒϧϨΠΞ΢τɺ ςʔϒϧؒͷؔ࿈ɺ ςʔϒϧͷ*0
22. .PEFMઃܭ ߲໨໊ λΠϓ ิ଍ VTFS@JE JOUFHFS DPOUFOU TUSJOH πΠʔτ಺༰ EBUF EBUF ೔෇ ྫʣ5XFFUϞσϧ WBMJEBUJPO wDPOUFOU
    จࣈҎ಺
    ඞਢ wEBUF
    ඞਢ wςʔϒϧϨΠΞ΢τΛܾΊΔ w.PEFMؒͷϦϨʔγϣϯΛܾΊΔ w੍໿ʢόϦσʔγϣϯʣΛݕ౼͢Δ ˞΄ͱΜͲςʔϒϧઃܭ
23. .PEFMઃܭ  w.PEFM͕΍ΓͱΓ͢Δ"1*ΤϯυϙΠϯτΛܾΊΔ w੍໿ʢόϦσʔγϣϯʣΛܾΊΔ ΦϒδΣΫτͷૢ࡞ ϝιου 63- UXFFUGFUDI (&5 BQJUXFFUT<JE> UXFFUTBWF 1045 BQJUXFFUT UXFFUTBWF 165 BQJUXFFUTJE UXFFUEFTUSPZ %&-&5& BQJUXFFUTJE 5XFFUϞσϧͷઃܭ ɹɾVSM
    
    BQJUXFFUT ɹɾόϦσʔγϣϯ ɹɹ
    DPOUFOU
    จࣈҎ಺
    ඞਢ ɹɹ
    EBUF
    ඞਢ .PEFMʹ"1*ΤϯυϙΠϯτ Λઃఆ͢Δͱɺ.PEFM͸ 3&45ΫϥΠΞϯτ "KBY ͱ ͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖Δɻ .PEFMͷWBMJEBUFϝιου ΛΦʔόʔϥΠυͯ͠ఆٛ ͢Δɻ WBS
    UXFFU
    
    OFX
    UXFFU.PEFM 
24. 5XFFUϞσϧͷઃܭʢଓ͖ʣ "1*͔Βฦ͞ΕΔ+40/͸ ඞͣ͠΋.PEFMͰѻ͍͍ͨ ϑΥʔϚοτͱ͸ݶΒͳ͍ ɾ"1*Ϩεϙϯε \
    
    UXFFU@EBUB
    
    
    
    
    \
    
    
    UXFFU@JE
    
    
    
    
    
    
    
    
    VTFS@JE
    
    
    
    
    
    
    
    
    DPOUFOU
    bηϛίϩϯ͚ͭ๨Εͯͨʔ`
    
    
    
    
    
    
    
    DSFBUFE@BU
    b
    `
    
    
    
    ^
    
    
    
    VTFS@EBUB
    
    
    
    \
    
    
    VTFS@JE
    
    
    
    
    
    
    
    
    OBNF
    b5
    :BNBEB`
    
    
    
    
    
    
    
    FNBJM
    bUZ!FYBNQMFDPN`
    
    
    
    ^ ^ ɾϓϩύςΟఆٛ ɹɹ\
    
    OBNF
    b5:BNBEB`
    
    
    
    
    
    
    
    
    DPOUFOU
    bηϛίϩϯ͚ͭ๨Εͯͨʔ`
    
    
    
    
    
    
    
    
    DSFBUFE@BU
    b
    `
    
    
    
    
    
    ^ .PEFMઃܭ  w"1*͔Βड͚औΔ+40/Λ΋ͱʹɺ .PEFMʹඞཁͱͳΔϓϩύςΟΛܾΊΔ
25. ·ͱΊ 3PVUFSઃܭɿ#BDLCPOFͰ͸ϑϥάϝϯτҎԼ ͷ63-Λઃܭ͢Δɻ 7JFXઃܭɿ#BDLCPOFͰ͸ϖʔδ୯ҐͰ͸ͳ ͘ɺ%0.ͷཁૉ୯ҐͰ7JFXΫϥεΛఆٛ͢Δɻ .PEFMઃܭɿ#BDLCPOFͰ͸.PEFM$PMMFDUJPO ͱϦιʔεͷ63-ΛରԠ͚ͮΔɻ.PEFMͷϓϩ ύςΟ͸ɺ"1*΁ͷύϥϝʔλɺ"1*͔ΒͷϨε ϙϯεΛݩʹܾΊΔɻ
26. #BDLCPOF͸41"޲͚ #BDLCPOFKTʹ͸4JOHMF1BHF"QQMJDBUJPOΛ ߏங͠΍͘͢͢Δ࢓૊Έ͕༻ҙ͞Ε͍ͯΔɻ ෦෼తͳϨϯμϦϯάΛ؅ཧ͠΍͘͢͢ΔͨΊʹ %0.ཁૉϨϕϧͰ7JFXΛఆٛͰ͖Δ .PEFMͷ$36%ϝιουΛ3&45
    "1*΁ͷϦΫΤ ετͱϚοϐϯά 7JFX͕.PEFMͷΠϕϯτΛ؂ࢹ͢Δ͜ͱͰ .PEFMͷ࠷৽ঢ়ଶΛ؆୯ʹ%0.ʹ൓өͰ͖Δ
27. ͓·͚ɿ͜ΕͰഁ୼͠ͳ͍͔ʁ #BDLCPOFΛಋೖͯ͠ɺ ʰͦͷ࣌఺Ͱඞཁ࠷খݶͷઃܭʱΛ࣮ફ͢Ε͹ɺ ʮഁ୼͠ͳ͍ +BWBTDSJQU 8FCΞϓϦ։ൃʯ͕ Ͱ͖Δ͔ʁ w#BDLCPOFͷ͓࡞๏Λڧ੍͞Ε͍ͯΔΘ͚Ͱ͸ͳ͍ͷ Ͱɺࠓ·Ͱ௨Γͷίʔυͷॻ͖ํ΋Ͱ͖ͯ͠·͏ w#BDLCPOFͳΒͰ͸ͷ໰୊఺΋͋Δ
28. #BDLCPOFͳΒͰ͸ͷ໰୊఺ w%0.ཁૉ୯ҐͰ7JFXΫϥεΛׂΓ౰ͯ ɹ㱺7JFXͷωετߏ଄͕ෳࡶʹͳΔ wن໛͕େ͖͘ͳΔͱ#BDLCPOFͰ؅ཧ͢ΔϑΝΠ ϧ਺͕ଟ͘ͳΓɺߏ੒ͷ೺Ѳ͕೉͘͠ͳΔ       #),' :9 48 65 #),' :9 3/
    12 07 - - $+&$ !       %.( $*#",' %0.ͱ7*FXͱ .PEFMͷؔ࿈Λ ໌֬ʹ͢Δ͜ͱ Ͱɺ؇࿨Ͱ͖ͦ ͏ɻ
29. %0.7JFX.PEFMͷؔ࿈              
       
      
     
                  ͜ͷΑ͏ͳਤͰߏ੒͕೺ѲͰ͖ΔͱΑ͍ Ͱ΋ɺ͜ͷਤΛඳ͘ͷ΋݁ߏେมɻ
30. %0.7JFX.PEFMͷؔ࿈ ͜ΕͩͬͨΒɺ΋͏গ͠ؾܰʹ࡞੒Ͱ͖ͦ͏ɻ 6.-Ϋϥεਤ ϚΠϯυϚοϓ ৽ن։ൃɺطଘγεςϜͷ෼ੳʹద༻ͯ͠Έͯɺ ༗ޮͩͬͨΒͲ͔͜Ͱ঺հ͠·͢ɻ ϚΠϯυϚοϓͷྫʣ
31. ͓ΘΓ