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

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

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

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

Atsushi Uchida (utwang)

April 28, 2013
Tweet

More Decks by Atsushi Uchida (utwang)

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. ࠓ೔࿩͢಺༰
    #BDLCPOFKTͱ3VCZPO3BJMTͷ
    ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ
    ෦෼Λൺֱ͢Δ
    vs

    View full-size slide

  4. ͳͥɺ͜ͷ࿩Λ͢Δ͔
    ςʔϚʮഁ୼͠ͳ͍8FCΞϓϦ։ൃʯ
    ઃܭΛ͢Δ͜ͱͰഁ୼Λ๷͙
    ઃܭϙΠϯτ͔Β#BDLCPOFKTͷಛ௃Λ஌Δ
    αʔόαΠυͷ8FCϑϨʔϜϫʔΫ 3BJMT
    ͱ
    ൺֱ͢Δ͜ͱͰɺطଘͷ஌ࣝͱϚοϐϯά

    View full-size slide

  5. #BDLCPOFKTͱ͸
    3&45GVMͳ+40/ΠϯλʔϑΣʔεΛඋ͑ͨ
    +BWB4DSJQUϥΠϒϥϦʢFOXJLJQFEJBPSHΑΓʣ
    %PDVNFOU$MPVE͕ެ։͍ͯ͠Δ044
    w IUUQCBDLCPOFKTPSH
    ։ൃऀ+FSFNZ"TILFOBTࢯ
    w VOEFSTDPSFKT
    w $P⒎FF4DSJQU

    View full-size slide

  6. #BDLCPOFͷΞʔΩςΫνϟ






    %+.)
    <;
    6: 87
    %+.)
    <;
    5134
    29
    /
    /
    &-(&
    #"
    !

    '0*
    &,%$.)


    w 3PVUFS 7JFX .PEFM $PMMFDUJPOͰߏ੒͞ΕΔ
    w 7JFX͕ίϯτϩʔϥͷΑ͏ͳ໾ׂΛ࣋ͭ

    View full-size slide

  7. ຊ୊ʹೖΔલʹʜ
    ීஈɺઃܭͯ͠·͔͢ʁ

    View full-size slide

  8. ඞཁ࠷খݶͷઃܭ
    ઃܭ͢Δ͜ͱͰࣗ෼ͷ಄͕੔ཧ͞ΕΔ
    νʔϜ։ൃͰͦ͜ઃܭ͢Δ΂͖
    w ΠϯλʔϑΣʔε෦෼Λڞ༗͓ͯ͘͠ͱɺ୲౰ͷείʔϓ
    ͕໌֬
    w ௐ੔͕ඞཁʹͳͬͨͱ͖ͷ౔୆ʹͳΔ
    ΍Γ͗͢ݫېɺ׬ᘳΛ໨ࢦ͞ͳ͍͍ͯ͘
    ʰͦͷ࣌఺Ͱͷඞཁ࠷খݶͷઃܭΛʱ

    View full-size slide

  9. ͡Ό͋ɺԿΛઃܭ͢Δ͔ʁ
    f()C BºC

    f()Bº
    xͱy͕Θ͔Δ͜ͱͰԿύλʔϯ͔ͷf()Λݕ౼Ͱ͖Δ
    y = f(x)
    y
    x
    γεςϜΛϒϥοΫϘοΫεͱΈͨ৔߹
    γεςϜ



    View full-size slide

  10. 8FCͬΆ͍ϒϥοΫϘοΫε
    y = f(x) y
    x


    γεςϜ








    Կ͕͍͍͍͔ͨɾɾɾ
    γεςϜͷ*OQVUͱ0VUQVU͕໌֬ʹͳΕ͹ɺ
    γεςϜͷৼΔ෣͍Λݕ౼Ͱ͖Δ

    View full-size slide

  11. 8FCΞϓϦͷ*OQVU0VUQVU
    )551ϦΫΤετʢ63- ύϥϝʔλʣ
    )5.-ʢը໘߲໨ʣ
    %#΁ͷ*0 %#͸ϛυϧ΢ΣΞͷͨΊΞϓϦͷ
    ֎ଆͱΈΔ

    View full-size slide

  12. ຊ୊ʹ໭Δ
    #BDLCPOFKTͱ3VCZPO3BJMTͷ
    ΞϓϦέʔγϣϯઃܭ࣌ͷϙΠϯτͱͳΔ
    ෦෼Λൺֱ͢Δ
    vs
    ࠓ͔Βൺ΂͍͖ͯ·͢

    View full-size slide

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



    $!













    %
    "#
    63- SFRVFTUύϥϝʔλ
    )5.-
    ςʔϒϧϨΠΞ΢τɺ
    ςʔϒϧؒͷؔ࿈ɺ
    ςʔϒϧͷ*0

    View full-size slide

  14. #BDLCPOFͷઃܭϙΠϯτ
    #BDLCPOFͷΞʔΩςΫνϟ
    *OQVU0VUQVU͸Ͳ͔͜ʁ






    %+.)
    <;
    6: 87
    %+.)
    <;
    5134
    29
    /
    /
    &-(&
    #"
    !

    '0*
    &,%$.)


    63-ʢϑϥάϝϯτPSQVTI4UBUFͷύεʣ
    )5.-
    BKBY௨৴࣌ͷ63-
    +40/σʔλͷϨΠΞ΢τ

    View full-size slide

  15. 3PVUFSઃܭ 3PVUFSͷҧ͍







    %+.)
    <;
    6: 87
    %+.)
    <;
    5134
    29
    /
    /
    &-(&
    #"
    !

    '0*
    &,%$.)


    63-ʢϑϥάϝϯτPSQVTI4UBUFͷύεʣ



    $!













    %
    "#
    63- SFRVFTUύϥϝʔλ
    3PVUFSͰ%0.ͷ
    ɹɹIBTI$IBOHF QVTI4UBUF
    ΠϕϯτΛݕ஌ͯ͠ɺίʔϧ
    όοΫΛ࣮ߦɻίʔϧόοΫ಺
    Ͱϖʔδ੾ସͷॲཧΛߦ͏ɻ
    3PVUFS͸ϦΫΤετ
    Λద੾ͳίϯτϩʔϥ
    ʹৼΓ෼͚Δɻ
    )5.-Λฦ͢͜ͱ
    ͰϖʔδΛ੾Γସ͑Δɻ

    View full-size slide

  16. 3PVUFSઃܭ 63-ઃܭ

    ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͷఆٛ
    w Ͳ͏͍͏$POUSPMMFSʹͲ͏͍͏ΞΫγϣϯ͕ඞཁ͔
    Λ໌֬ʹ͢Δ
    w ը໘ͷϦϯΫઌɺϑΥʔϜͷΞΫγϣϯʹࢦఆ͢Δ
    63-΋໌֬ʹͳΔ
    ը໘໊ ϝιου 63- ίϯτϩʔϥΞΫγϣϯ
    πΠʔτҰཡ (&5 UXFFUT 5XFFUT$POUSPMMFSJOEFY
    ৽نπΠʔτ (&5 UXFFUTOFX 5XFFUT$POUSPMMFSOFX
    ৽نπΠʔτొ࿥ 1045 UXFFUT 5XFFUT$POUSPMMFSDSFBUF
    πΠʔτৄࡉ (&5 UXFFUTJE 5XFFUT$POUSPMMFSTIPX
    ྫʣ

    View full-size slide

  17. 3PVUFSઃܭ 63-ઃܭ

    ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͷఆٛ
    w 63-͕੾Γସͬͨͱ͖ʹͲͷίʔϧόοΫΛ࣮ߦ͢Δ
    ͔Λ໌֬ʹ͢Δɻ
    w ը໘ͷϦϯΫઌ63-΋໌֬ʹͳΔɻ
    ը໘໊ 63- 3PVUFSίʔϧόοΫ
    πΠʔτҰཡ UXFFUT "QQ3PVUFSJOEFY
    πΠʔτৄࡉ UXFFUTJE "QQ3PVUFSTIPX
    ৽نπΠʔτ UXFFUTOFX "QQ3PVUFSOFX
    ྫʣ

    View full-size slide

  18. 7JFXઃܭ 7JFXͷҧ͍







    %+.)
    <;
    6: 87
    %+.)
    <;
    5134
    29
    /
    /
    &-(&
    #"
    !

    '0*
    &,%$.)





    $!













    %
    "#
    ରԠ͢Δ%0.ཁૉ಺Ͱ
    ൃੜ͢ΔΠϕϯτͷ؂ࢹɺ
    %0.ૢ࡞ʹΑΓ)5.-ͷϨϯ
    μϦϯάɺ$44ͷ੾ସΛߦ͏ɻ
    .PEFMͷΠϕϯτ΋؂ࢹ

    7JFX͸$POUSPMMFS
    ͔Β౉͞ΕΔσʔλΛ
    5FNQMBUFʹຒΊࠐΈɺ
    )5.-ΛϨϯμϦϯά͢
    Δɻ
    )5.- )5.-

    View full-size slide

  19. 7JFXઃܭ
    3BJMT͸͏·͘.PEFMͱ࿈ܞͰ͖Δ࢓૊Έʹͳ͍ͬͯΔͨΊɺ
    .PEFMΛҙࣝ͠ͳ͕Βઃܭ͢Δɻ
    *OQVU0VUQVU߲໨Λ֬ೝ
    ը໘Ͱѻ͏σʔλͷ୯ҐΛݕ౼
    w .PEFMؒͷؔ࿈ɺଟॏ౓Λݕ౼͢Δ

    View full-size slide

  20. nav
    ul#side-nav
    div#content
    div#header
    div#index-table
    *OQVU0VUQVU߲໨ͷ֬ೝ
    %0.ཁૉͷ͏ͪ੩తಈతͳ΋ͷΛ೺Ѳ͢Δ
    #BDLCPOF7JFXͱରԠ͚ͮΔ%0.ཁૉΛఆٛ
    7JFXઃܭ













    View full-size slide

  21. .PEFMઃܭ .PEFMͷҧ͍







    %+.)
    <;
    6: 87
    %+.)
    <;
    5134
    29
    /
    /
    &-(&
    #"
    !

    '0*
    &,%$.)





    $!













    %
    "#
    #BDLCPOFͷ.PEFM͸
    ରԠ͢Δ3&45"1*
    ΛϦιʔεͱͯ͠ѻ͏͜ͱ͕
    Ͱ͖Δɻ
    ϞσϧϦιʔε<3&45"1*>

    .PEFM͸%#ͷͻͱͭ
    ͷςʔϒϧΛͻͱͭͷ
    Ϋϥεͱͯ͠ѻ͏͜ͱ͕
    Ͱ͖ΔɻʢϞσϧςʔ
    ϒϧͷ03Ϛοϐϯάʣ
    BKBY௨৴࣌ͷ63-
    +40/σʔλͷϨΠΞ΢τ
    ςʔϒϧϨΠΞ΢τɺ
    ςʔϒϧؒͷؔ࿈ɺ
    ςʔϒϧͷ*0

    View full-size slide

  22. .PEFMઃܭ
    ߲໨໊ λΠϓ ิ଍
    VTFS@JE JOUFHFS
    DPOUFOU TUSJOH πΠʔτ಺༰
    EBUF EBUF ೔෇
    ྫʣ5XFFUϞσϧ
    WBMJEBUJPO
    wDPOUFOUจࣈҎ಺ ඞਢ
    wEBUFඞਢ
    wςʔϒϧϨΠΞ΢τΛܾΊΔ
    w.PEFMؒͷϦϨʔγϣϯΛܾΊΔ
    w੍໿ʢόϦσʔγϣϯʣΛݕ౼͢Δ
    ˞΄ͱΜͲςʔϒϧઃܭ

    View full-size slide

  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

    View full-size slide

  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ʹඞཁͱͳΔϓϩύςΟΛܾΊΔ

    View full-size slide

  25. ·ͱΊ
    3PVUFSઃܭɿ#BDLCPOFͰ͸ϑϥάϝϯτҎԼ
    ͷ63-Λઃܭ͢Δɻ
    7JFXઃܭɿ#BDLCPOFͰ͸ϖʔδ୯ҐͰ͸ͳ
    ͘ɺ%0.ͷཁૉ୯ҐͰ7JFXΫϥεΛఆٛ͢Δɻ
    .PEFMઃܭɿ#BDLCPOFͰ͸.PEFM$PMMFDUJPO
    ͱϦιʔεͷ63-ΛରԠ͚ͮΔɻ.PEFMͷϓϩ
    ύςΟ͸ɺ"1*΁ͷύϥϝʔλɺ"1*͔ΒͷϨε
    ϙϯεΛݩʹܾΊΔɻ

    View full-size slide

  26. #BDLCPOF͸41"޲͚
    #BDLCPOFKTʹ͸4JOHMF1BHF"QQMJDBUJPOΛ
    ߏங͠΍͘͢͢Δ࢓૊Έ͕༻ҙ͞Ε͍ͯΔɻ
    ෦෼తͳϨϯμϦϯάΛ؅ཧ͠΍͘͢͢ΔͨΊʹ
    %0.ཁૉϨϕϧͰ7JFXΛఆٛͰ͖Δ
    .PEFMͷ$36%ϝιουΛ3&45"1*΁ͷϦΫΤ
    ετͱϚοϐϯά
    7JFX͕.PEFMͷΠϕϯτΛ؂ࢹ͢Δ͜ͱͰ
    .PEFMͷ࠷৽ঢ়ଶΛ؆୯ʹ%0.ʹ൓өͰ͖Δ

    View full-size slide

  27. ͓·͚ɿ͜ΕͰഁ୼͠ͳ͍͔ʁ
    #BDLCPOFΛಋೖͯ͠ɺ
    ʰͦͷ࣌఺Ͱඞཁ࠷খݶͷઃܭʱΛ࣮ફ͢Ε͹ɺ
    ʮഁ୼͠ͳ͍ +BWBTDSJQU
    8FCΞϓϦ։ൃʯ͕
    Ͱ͖Δ͔ʁ
    w#BDLCPOFͷ͓࡞๏Λڧ੍͞Ε͍ͯΔΘ͚Ͱ͸ͳ͍ͷ
    Ͱɺࠓ·Ͱ௨Γͷίʔυͷॻ͖ํ΋Ͱ͖ͯ͠·͏
    w#BDLCPOFͳΒͰ͸ͷ໰୊఺΋͋Δ

    View full-size slide

  28. #BDLCPOFͳΒͰ͸ͷ໰୊఺
    w%0.ཁૉ୯ҐͰ7JFXΫϥεΛׂΓ౰ͯ
    ɹ㱺7JFXͷωετߏ଄͕ෳࡶʹͳΔ
    wن໛͕େ͖͘ͳΔͱ#BDLCPOFͰ؅ཧ͢ΔϑΝΠ
    ϧ਺͕ଟ͘ͳΓɺߏ੒ͷ೺Ѳ͕೉͘͠ͳΔ






    #),'
    :9
    48 65
    #),'
    :9
    3/12

    07
    -
    -
    $+&$
    !





    %.(
    $*#",'
    %0.ͱ7*FXͱ
    .PEFMͷؔ࿈Λ
    ໌֬ʹ͢Δ͜ͱ
    Ͱɺ؇࿨Ͱ͖ͦ
    ͏ɻ

    View full-size slide

  29. %0.7JFX.PEFMͷؔ࿈





















    ͜ͷΑ͏ͳਤͰߏ੒͕೺ѲͰ͖ΔͱΑ͍
    Ͱ΋ɺ͜ͷਤΛඳ͘ͷ΋݁ߏେมɻ

    View full-size slide

  30. %0.7JFX.PEFMͷؔ࿈
    ͜ΕͩͬͨΒɺ΋͏গ͠ؾܰʹ࡞੒Ͱ͖ͦ͏ɻ
    6.-Ϋϥεਤ
    ϚΠϯυϚοϓ
    ৽ن։ൃɺطଘγεςϜͷ෼ੳʹద༻ͯ͠Έͯɺ
    ༗ޮͩͬͨΒͲ͔͜Ͱ঺հ͠·͢ɻ
    ϚΠϯυϚοϓͷྫʣ

    View full-size slide