Save 37% off PRO during our Black Friday Sale! »

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

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

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

9f7012b2d49a8a7fd07c3b8a2fffcbd9?s=128

Atsushi Uchida (utwang)

April 28, 2013
Tweet

Transcript

  1. ઃܭϙΠϯτͷ ൺֱͰ஌Δ #BDLCPOFKT "UTVTIJ6DIJEB ୈҰճ JS-Appษڧձ@λωϚΩ ೥݄೔

  2. ࣗݾ঺հ כϲ࡚ʙ౎಺΁௨͏ϑϦʔϥϯεΤϯδχΞ ݱࡏɺ3VCZɺ+BWBTDSJQUͰ࢓ࣄͯ͠·͢ +BWBTDSJQU͸࠷ۙɺຊࠊೖΕͯऔΓ૊Έத ͔ͳΓͷૣޱ ಺ాರ೭ UXJUUFS!VUXBOH

  3. ࠓ೔࿩͢಺༰ #BDLCPOFKTͱ3VCZPO3BJMTͷ ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ ෦෼Λൺֱ͢Δ 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ͱ3VCZPO3BJMTͷ ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ ෦෼Λൺֱ͢Δ vs ࠓ͔Βൺ΂͍͖ͯ·͢

  13. 3BJMTͷઃܭϙΠϯτ .PEFMͷΞʔΩςΫνϟ *OQVU0VUQVU͸Ͳ͔͜ʁ    $!   

               %  "# 63- SFRVFTUύϥϝʔλ )5.- ςʔϒϧϨΠΞ΢τɺ ςʔϒϧؒͷؔ࿈ɺ ςʔϒϧͷ*0
  14. #BDLCPOFͷઃܭϙΠϯτ #BDLCPOFͷΞʔΩςΫνϟ *OQVU0VUQVU͸Ͳ͔͜ʁ       %+.)

    <; 6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)     63-ʢϑϥάϝϯτPSQVTI4UBUFͷύεʣ )5.- BKBY௨৴࣌ͷ63-  +40/σʔλͷϨΠΞ΢τ
  15. 3PVUFSઃܭ 3PVUFSͷҧ͍       %+.) <;

    6: 87 %+.) <; 5134  29 / / &-(& #" !  '0* &,%$.)     63-ʢϑϥάϝϯτPSQVTI4UBUFͷύεʣ    $!               %  "# 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 "QQ3PVUFSJOEFY πΠʔτৄࡉ UXFFUTJE "QQ3PVUFSTIPX ৽نπΠʔτ UXFFUTOFX "QQ3PVUFSOFX ྫʣ
  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.ཁૉͷ͏ͪ੩తಈతͳ΋ͷΛ೺Ѳ͢Δ #BDLCPOF7JFXͱରԠ͚ͮΔ%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Ϟσϧͷઃܭ ɹɾVSMBQJUXFFUT ɹɾόϦσʔγϣϯ ɹɹDPOUFOUจࣈҎ಺ ඞਢ ɹɹEBUFඞਢ .PEFMʹ"1*ΤϯυϙΠϯτ Λઃఆ͢Δͱɺ.PEFM͸ 3&45ΫϥΠΞϯτ "KBY ͱ ͯ͠ৼΔ෣͏͜ͱ͕Ͱ͖Δɻ .PEFMͷWBMJEBUFϝιου ΛΦʔόʔϥΠυͯ͠ఆٛ ͢Δɻ WBSUXFFUOFXUXFFU.PEFM 
  24. 5XFFUϞσϧͷઃܭʢଓ͖ʣ "1*͔Βฦ͞ΕΔ+40/͸ ඞͣ͠΋.PEFMͰѻ͍͍ͨ ϑΥʔϚοτͱ͸ݶΒͳ͍ ɾ"1*Ϩεϙϯε \UXFFU@EBUB \UXFFU@JE VTFS@JE DPOUFOUbηϛίϩϯ͚ͭ๨Εͯͨʔ` DSFBUFE@BUb`

    ^ VTFS@EBUB \VTFS@JE OBNFb5:BNBEB` FNBJMbUZ!FYBNQMFDPN` ^ ^ ɾϓϩύςΟఆٛ ɹɹ\OBNFb5:BNBEB` DPOUFOUbηϛίϩϯ͚ͭ๨Εͯͨʔ` DSFBUFE@BUb` ^ .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. ͓ΘΓ