$30 off During Our Annual Pro Sale. View Details »

モダンWebシステム開発

 モダンWebシステム開発

Qcon Tokyo2015 での発表スライド

Naoya Ito

April 21, 2015
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

  1. Ϟμϯ8FCγεςϜ։ൃ
    /BPZB*UP
    ,BJ[FO1MBUGPSN *OD

    2$PO50,:0

    View Slide

  2. ,BJ[FO1MBUGPSN͔Βདྷ·ͨ͠

    View Slide

  3. ຊۀ͸Ე૊৫ϚωδϝϯτͰ͢
    ϚΠφϏͰϚωδϝϯ
    τஊٛ࿈ࡌத

    View Slide

  4. ຊ೔ͷ࿩ͷྲྀΕ
    •  ࡢࠓݸਓతʹؾʹͳͬͨΞʔΩςΫνϟɾ
    ύϥμΠϜ
    •  ͦΕΒ֓؍ΛݟͭͭʮϞμϯ8FCγες
    Ϝʯͷ܏޲Λߟ࡯
    ڞ௨ͨ͠Կ͔͕ݟ͍ͩͤ
    Δ͔ɺ൱͔

    View Slide

  5. Ϟμϯʮεέʔϥϒϧʯ΁ͷཁ੥
    •  Ϋϥ΢υωΠςΟϒ
    – յΕ΍͘͢ɺ'BJMVSF͠΍͘͢ɺԣʹεέʔ
    ϧ

    View Slide

  6. Πϯϑϥ
    •  *OGSBTUSVDUVSFBT$PEF
    –  $IFG "OTJCMF
    •  *NNVUBCMF*OGSBTUSVDUVSF
    •  ίϯςφܕΫϥ΢υ
    –  %PDLFS
    •  એݴతͳγεςϜ؅ཧπʔϧ
    –  5FSSBGPSN 3PBEXPSLFS

    View Slide

  7. ΞϓϦέʔγϣϯ
    •  .JDSPTFSWJDFT
    •  3FBDU
    •  'VODUJPOBM3FBDUJWF1SPHSBNNJOH

    View Slide

  8. ݁࿦ͱͯ͠Կ͕ݴ͍͍͔ͨ
    •  ࡢࠓͷΞʔΩςΫνϟ΍ύϥμΠϜͷഎޙʹ͋
    ΔςʔϚ͸ʮঢ়ଶʯ΍ʮґଘؔ܎ʯͱͲ͏ઓ͏
    ͔ ͕ɺଟ͍

    •  ྑ͍ύϥμΠϜɺΞʔΩςΫνϟ͸ͦ͜ʹճ౴
    Λ͍࣋ͬͯΔ
    Ϟμϯͱ͍͏͔ɺܭࢉػ
    ͷྺ࢙͕ͣͬͱͦ͏͍͏
    ΋ͷ͔΋

    View Slide

  9. *OGSBTUSVDUVSFBT$PEF

    View Slide

  10. *OGSBTUSVDUVSFBT$PEF
    •  ϓϩϏδϣχϯάϑϨʔϜϫʔΫ
    – $IFG
    – 1VQQFU
    – "OTJCMF

    View Slide

  11. αʔόʔͷʮঢ়ଶʯ ґଘؔ܎

    •  ͋Δ೔ೲ඼͞Εͨ3BJMTαʔόʔ
    –  9݄9೔ʹ%/4ΩϟογϡΛઃఆͨ͠
    –  :݄:೔ʹϓϩηε਺Λνϡʔχϯάͨ͠
    –  ;݄;೔ʹSVCZͷόʔδϣϯΛ্͛ͨ
    –  ŋŋŋ ͍Ζ͍Ζ܁Γฦ͠

    •  ͜ͷαʔόʔʹ൒೥ৼΓʹΞϓϦΛσϓϩΠ
    –  Ռͨͯ͠σϓϩΠ͸ਖ਼͘͠ऴΘΔͷ͔

    View Slide

  12. $IFG
    αʔόʔͷ͋Δ΂͖ঢ়ଶ
    Λએݴతʹهड़͢Δ

    View Slide

  13. ঢ়ଶ͕ίʔυʹͳΕ͹͋Δ΂͖ঢ়ଶ΁
    ͷऩଋ͸ࣗಈԽͰ͖Δ

    View Slide

  14. ঢ়ଶΛهड़͢Δ
    •  ϓϩϏδϣχϯά'8ΛͲ͏ݟΔ͔
    – ηοτΞοϓͷࣗಈԽ ŋŋŋ͜Ε͸ݶఆత
    – ຊ࣭ŋŋŋঢ়ଶͷ એݴతͳ
    هड़
    ͦΕ·Ͱهड़͞Ε͍ͯͳ
    ͍͕ͨΊʹϓϩάϥϜ͔
    ΒऔΓѻ͏͜ͱ͕Ͱ͖ͳ
    ͔ͬͨ΋ͷ

    View Slide

  15. Ͳ͔ͬͰݟͨͧ
    •  #VOEMFS
    – εΫϦϓτݴޠʹ͓͚ΔϥΠϒϥϦͷґଘؔ
    ܎໰୊ ͋Δ͋Δ

    View Slide

  16. #VOEMFSҎલ
    •  HFNJOTUBMMGPPCBS
    – άϩʔόϧͳྖҬʹΠϯετʔϧ
    – ΞϓϦέʔγϣϯͷಈ࡞ʹඞཁͳHFN͕Կ
    ͔໌ࣔతʹ͸෼͔Βͳ͍
    – HFN͕૿͑Δ㱺ϑΝΠϧγεςϜΛίϐʔ
    ͢ΔҎ֎ͷํ๏Ͱ؀ڥΛ࠶ݱ͢Δͷ͕ࠔ೉ʹ

    View Slide

  17. #VOEMFS

    View Slide

  18. #VOEMFSޙ
    •  ঢ়ଶͷ એݴతͳ
    هड़
    – ඞཁͳHFNΛ(FNpMFʹએݴ
    – ಉ͡ߏ੒Λ࠶ݱՄೳʹ
    •  ϕετϓϥΫςΟε
    – /PEFͷOQN 1FSMͷDQBOpMF

    View Slide

  19. ΋ͱ͍ɺ*OGSBTUSVDUVSFBT$PEF
    •  ͜Ε·Ͱҙࣝ͞Εͯ͜ͳ͔ͬͨʮঢ়ଶʯ΍ʮґଘؔ܎ʯ
    Λهड़͢Δ
    •  ႈ౳ੑ ΂͖ͱ͏ੑ

    –  ͋Δૢ࡞Λճߦͬͯ΋ෳ਺ճߦͬͯ΋݁Ռ͕ಉ͡Ͱ͋Δ͜
    ͱ 8JLJQFEJB

    –  ಉ͡ߏ੒ͷϊʔυΛ͍ͭͰ΋࠶ੜ࢈Ͱ͖Δ
    ݁ՌɺյΕ΍͘͢ɺԣʹ
    εέʔϧ͢Δ؀ڥʹద߹

    View Slide

  20. αʔόʔ؅ཧNFFUT(JU
    •  αʔόʔͷঢ়ଶ͕͢΂ͯίʔυͰهड़Ͱ͖
    ͨͳΒɺ(JUͰ؅ཧ͢Ε͹ྑ͍

    View Slide

  21. ΠϯϑϥNFFUT(JUIVC
    Πϯϑϥ΋QVMMSFRVFTUɺίʔυϨϏϡʔ

    View Slide

  22. ΠϯϑϥΛςετŋŋŋ4FSWFSTQFD

    View Slide

  23. NBTUFSʹมߋ
    QVMMSFRVFTU͕
    NFSHF͞ΕΔ

    $JSDMF$*͕ͦΕ
    Λݕ஌ͯ͠ɺίʔυ
    Λ(JU)VC͔Βऔಘ
    &$ʹରͯ͠
    $JSDMF$*͔Β$IFG
    ద༻
    มߋ͕൓ө͞Ε
    Δ
    Πϯϑϥ΋$*Λى఺ʹσϦόϦʔ

    View Slide

  24. 3PBEXPSLFS
    hosted_zone  "winebarrel.jp."  do  
       rrset  "winebarrel.jp.",  "A"  do  
           ttl  300  
           resource_records(  
               "127.0.0.1",  
               "127.0.0.2"  
           )  
       end  
     
       rrset  "winebarrel.jp.",  "MX"  do  
           ttl  300  
           resource_records(  
               "10  mx.winebarrel.jp",  
               "10  mx2.winebarrel.jp"  
           )  
       end  
    end
    $  roadwork -­‐-­‐apply  
    %/4ϨίʔυΛએݴతʹ
    هड़

    View Slide

  25. 5FSSBGPSN
    resource  "aws_instance"  "dev001_foobar_net"  {  
           ami                          =  "ami-­‐xxxxxxxx"  
           instance_type      =  "t2.micro"  
           key_name                =  "xxxxxxxxxxxxxxxx"  
           security_groups  =  ["sg-­‐xxxxxxxx"]  
           subnet_id              =  "subnet-­‐xxxxxxxx"  
           tags  {  
                   Name        =  "dev001.foobar.net"  
                   Role        =  "common"  
                   Service  =  "operator"  
                   Env          =  "dev"  
           }  
    }
    $  terraform apply  
    Πϯϑϥ Πϯελϯε΍
    ωοτϫʔΫ
    ߏ੒Λએݴ
    తʹهड़

    View Slide

  26. NBTUFSʹมߋ
    QVMMSFRVFTU͕
    NFSHF͞ΕΔ

    $JSDMF$*͕ͦΕ
    Λݕ஌ͯ͠ɺίʔυ
    Λ(JU)VC͔Βऔಘ
    "84ʹରͯ͠
    $JSDMF$*͔Β
    SPBEXPSLFS΍
    UFSSBGPSNΛద༻
    มߋ͕൓ө͞Ε
    Δ
    (JU)VCͰ؅ཧ͠$*Ͱద༻

    View Slide

  27. એݴతͳγεςϜ؅ཧπʔϧ
    •  5FSSBGPSN΍3PBEXPSLFSŋŋŋϓϩϏδϣ
    χϯά'8ͱൃ૝͸ಉ͡
    –  ঢ়ଶΛએݴతʹهड़
    –  ݁ՌɺϓϩάϥϚϒϧ͔ͭಉҰͷϫʔΫϑϩʔʹ

    View Slide

  28. ঢ়ଶΛ͏·͘ѻ͏
    •  ঢ়ଶΛ͏·͘ѻ͏ͱ༷ʑͳԸܙ
    – ࠶ݱՄೳੑ ϙʔλϏϦςΟ

    – ςελϏϦςΟ
    – Ϋϥ΢υ΁ͷద߹
    – ΑΓϓϩάϥϚϒϧʹ
    ͬ͘͟Γݴ͏ͱ
    ʮεέʔϥϒϧʯ

    View Slide

  29. *NNVUBCMF
    *OGSBTUSVDUVSF

    View Slide

  30. ঢ়ଶΛ؅ཧ͠ͳ͍
    •  ϓϩϏδϣχϯά'8͸ঢ়ଶΛద੾ʹهड़͢Δ
    ͜ͱΛ໨ࢦͨ͠
    –  ·ͣ·͢੒ޭͨ͠
    •  ͦ΋ͦ΋ঢ়ଶΛ؅ཧ͠ͳ͍ͱ͍͏ߟ͑ํ͸ͳ͍
    ͷ͔
    –  㱺*NNVUBCMF

    View Slide

  31. *NNVUBCMF*OGSBTUSVDUVSF
    •  %JTQPTBCMF$PNQPOFOUT
    •  ෆมͳɺঢ়ଶΛ࣋ͨͳ͍ɺഇغՄೳͳ

    View Slide

  32. *NNVUBCMFͱ͍͏ߟ͑ํ
    •  ϓϩάϥϛϯάͰ΋ѻΘΕΔ֓೦
    – ʮ*NNVUBCMFͳσʔλߏ଄ʯ
    –  جຊతʹ
    ྑ͍࡞๏
    ؔ਺ܕϓϩάϥϛϯά
    ʹ͓͚Δࢀরಁ໌ʹ΋
    ܨ͕Δߟ͑ํ

    View Slide

  33. #MVF(SFFO%FQMPZNFOU

    View Slide

  34. )FSPLV
    )FSPLV͸HJUQVTI͢Δຖɺ৽͍͠؀ڥ ίϯςφ
    Λ࡞Γɺݹ͍؀ڥΛغͯΔ

    View Slide

  35. 5SBWJT$*
    5SBWJT$*΋ςετΛ࣮ߦ͢ΔͨͼɺίϯςφΛ࡞ΓऴΘͬͨΒغͯΔ

    View Slide

  36. *NNVUBCMFΛ੍໿ʹ
    •  มߋŋŋŋغͯͯ৽͍͠΋ͷΛ༻ҙ͢Δ
    – ݁ՌతʹɺΑΓغͯ΍͘͢ɺΑΓ࠶ݱ͠΍͢
    ͍γεςϜʹ
    յΕ΍͘͢ɺԣʹεέʔ
    ϧ͢Δ؀ڥʹΑΓద߹

    View Slide

  37. *NNVUBCMFʙΛࢧ͑Δٕज़
    ίϯςφ

    View Slide

  38. %PDLFS

    View Slide

  39. View Slide

  40. https://speakerdeck.com/jbeda/containers-at-scale

    View Slide

  41. *NNVUBCMF૚
    ʮΞϓϦέʔγϣϯίʔ
    υʯ͕Քಇ͢Δ৔ॴ

    View Slide

  42. ύλʔϯ
    •  ϞμϯΠϯϑϥʹ͓͚Δঢ়ଶͷѻ͍
    – ঢ়ଶΛهड़͠؅ཧՄೳʹ͢Δ
    – ෆมΛલఏʹɺঢ়ଶΛ؅ཧ͠ͳ͍
    •  มߋŋŋŋݹ͍෺͸ഁغɺ৽͍͠΋ͷΛ༻ҙ
    ಘΒΕΔ΋ͷ
    εέʔϥϏϦςΟ

    View Slide

  43. .JDSPTFSWJDFT

    View Slide

  44. .JDSPTFSWJDFT
    •  Ұ࿈ͷখ͞ͳαʔϏεͰͭͷΞϓϦέʔγϣ
    ϯΛ։ൃ͢Δख๏
    –  ಠཱͨ͠খ͞ͳίϯϙʔωϯτ͕)551"1*Ͱ௨৴
    –  㲈40"ɺͨͩ͠6/*9ͷσβΠϯʹ͍ۙ

    View Slide

  45. source:  Scaling  with  Microservices  and  Ver6cal  Decomposi6on    
    h:p://dev.o:o.de/2014/07/29/scaling-­‐with-­‐microservices-­‐and-­‐ver6cal-­‐decomposi6on/

    View Slide

  46. ͳͥ.JDSPTFSWJDFT
    •  ϞϊϦγοΫͰ௕͘΍ͬͯΔͱͭΒ͍
    –  UZQP௚͢ͷʹશମϏϧυσϓϩΠ
    –  ͋ͦ͜มߋͨ͠Β༧૝֎ͷͱ͜Ζ͕յΕͨ
    –  "1*͚ͩεέʔϧ͍ͤͨ͞ͷʹશ෦ల։
    •  ಠཱͨ͠։ൃɾσϓϩΠαΠΫϧΛ֫ಘ͍ͨ͠
    –  ૄ݁߹
    –  ૊৫ͷಠཱੑΛߴΊΔ
    See  Also:  "Microservices"を読んだ  
    h:p://deeeet.com/wri6ng/2014/09/10/microservices/  

    View Slide

  47. .JDSPTFSWJDFTͷΞϓϩʔν
    •  ӨڹൣғΛہॴԽ͢Δ
    – 㲈ঢ়ଶΛؔ܎͋Δ෦෼͚ͩʹӅṭ͢Δ
    ͜Ε΋ܧଓతʹอक͍ͯ͠
    ͘γεςϜʹ͓͚Δʮঢ়
    ଶʯͷऔΓѻ͍΁ͷઓུͱ
    ݴ͑Δ

    View Slide

  48. .JDSPTFSWJFTͱ*NNVUBCMF
    *OGSBTUSVDUVSF
    •  .JDSPTFSWJFTԽʹΑͬͯͻͱͭͷγεςϜ͸୯Ұͷ໾
    ׂͷίϯϙʔωϯτʹ
    •  %PDLFSͳͲͷίϯςφΤϯδϯ΋୯Ұͷ໾ׂͷίϯ
    ϙʔωϯτ͕ڠௐಈ࡞͢ΔઃܭΛલఏ
    –  º'BUͳ%PDLFSΠϝʔδ
    –  ˓Ұͭͷ໾ׂΛ୲͏%PDLFSΠϝʔδ
    .JDSPTFSWJDFTʹΑΓঢ়ଶ
    ͷӨڹൣғΛہॴԽ͠ɺͦ
    ͷΠϯϑϥ͸ෆมͳ΋ͷͱ
    ͠ɺಠཱੑΛߴΊΔ

    View Slide

  49. ಘΒΕΔ΋ͷ
    •  ίϯϙʔωϯτͷಠཱੑ
    – ։ൃαΠΫϧ
    – σϓϩΠαΠΫϧ
    – ͦΕ͚ͩͰεέʔϦϯά
    ΍͸Γ
    ʮεέʔϥϒϧʯ

    View Slide

  50. 3FBDU

    View Slide

  51. 3FBDU

    View Slide

  52. 3FBDUKT
    •  'BDFCPPL
    •  ೥ࠒʹൃද
    •  +BWB4DSJQUͷ7JFXϥΠϒϥϦ
    •  ೥ࠒ͔Β࿩୊ʹ

    View Slide

  53. K2VFSZ
    ໋ྩతͳ%0.ૢ
    ࡞ίʔυ܈

    View Slide

  54. %0.ૢ࡞
    •  %0.ૢ࡞ͷ೉͠͞
    – %0.͕ঢ়ଶΛ͍࣋ͬͯΔ
    – άϩʔόϧ
    – ඇಉظ
    •  ໋ྩతͳίʔυ
    ͍ͭɺͲ͔͜Βॻ͖
    ׵͑ΒΕΔ͔Θ͔Β
    ͳ͍ঢ়ଶΛؒҧ͍ͳ
    ͘؅ཧ͠ͳ͚Ε͹ͳ
    Βͳ͍

    View Slide

  55. 3FBDU
    σʔλϞσϧͷ
    ঢ়ଶʹมߋΛ௨

    એݴతʹఆٛ͞
    Εͨ%0.ߏ଄͕
    Α͠ͳʹ࠶ඳը

    View Slide

  56. એݴత
    •  ໋ྩత
    –  $16ʹର͢Δ໋ྩͷखଓ͖Λॻ͘
    –  ίϚϯυΛ༩͑Δ
    •  એݴత
    –  ࣮ݱ͍ͨ͜͠ͱͦͷ΋ͷΛهड़͢Δ
    –  ͋Δ΂͖ঢ়ଶΛఆٛɺؔ܎ੑͷهड़FUD
    see  also:  宣言的プログラミングの「宣言的」って?  
    h:p://d.hatena.ne.jp/sh-­‐2/20091006/1254847253
    ΍΍ᐆດ͔ͭ૬ର
    తͳݴ༿Ͱ͸͋Δ
    ΋ͷͷ

    View Slide

  57. 3FBDU໋ྩతˠએݴత
    •  ໋ྩతͰ͋ͬͨ7JFXͷ૊Έཱͯ %0.ૢ࡞
    Λɺ
    એݴతͳύϥμΠϜʹ
    •  ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝
    ͱߋ৽ʯ
    –  αʔόʔαΠυ೴
    –  ඇޮ཰ͳ෦෼͸7JSUVBM%0.͕ղܾ
    ϑϩϯτΤϯυ6*։ൃΛɺ
    αʔόʔαΠυͱಉ͡෋
    ߽తϓϩάϥϛϯάελ
    Πϧʹ໭͢

    View Slide

  58. 7JSUVBM%0.
    •  3FBDUͷόοΫΤϯυʹ͋Δ
    %0.ߏ଄Λந৅Խͨ͠σʔλ
    ߏ଄
    •  σʔλϞσϧͷঢ়ଶมԽʹ߹Θ
    ͤͯ7JSUVBM%0.ͷલޙͷ
    EJ⒎Λࢉग़
    •  ੜ%0.࠶ඳըΛࠩ෼ͷ͋ͬͨ
    Օॴ͚ͩߦ͏
    source:  React’s  diff  algorithm  
    h:p://calendar.perfplanet.com/2013/diff/  

    View Slide

  59. 3FBDU͕ୡ੒ͨ͜͠ͱ
    •  6*։ൃʹ͓͚Δঢ়ଶ؅ཧ͔Βͷղ์
    •  ൃ໌
    – 7JSUVBM%0.
    – εςʔτϨείϯϙʔωϯτΛ࣮ݱ͢Δσʔ
    λϑϩʔ

    View Slide

  60. 'MVY

    View Slide

  61. 'MVY
    •  3FBDU͸7JFX͚ͩ
    •  'MVY͸Ϟσϧ 4UPSF
    ΛؚΊͨΞϓϦέʔ
    γϣϯશମͷΞʔΩςΫνϟ
    –  ॲཧͷهड़৔ॴΛఆΊΔ
    –  σʔλϑϩʔΛఆΊΔ
    •  Πϕϯτͷґଘؔ܎ͷෳࡶੑΛղফ
    –  Πϕϯτ΍σʔλϑϩʔͷํ޲ΛҰํ௨ߦʹ͢Δ

    View Slide

  62. 3FBDU/BUJWF
    •  3FBDUͱಉ͡࡞๏ͰJ04"OESPJE΋
    •  -FBSO0ODF 8SJUF"OZXIFSF

    View Slide

  63. View Slide

  64. '31
    'VODUJPOBM3FBDUJWF
    1SPHSBNNJOH

    View Slide

  65. ϦΞΫςΟϒϓϩάϥϛϯά
    •  ΋ͱ΋ͱ͸ҎԼͷΑ͏ͳ֓೦
    –  σʔλͷྲྀΕΛ௨ͯ͡มߋΛ఻ൖ
    –  σʔλͷྲྀΕʹ൓Ԡ
    –  㱺ΠϕϯτۦಈɺΦϒβʔόʔɺ"DUPSɺ'VUVSF
    •  ޿ٛͷɺڱٛͷŋŋŋ͕͋Δ
    –  ֦େղऍ͠Α͏ͱ͢ΔͱͲ͜·Ͱ΋͍͚Δ ཁ஫ҙ

    –  ݸਓతʹ͸'31ͷจ຺Ҏ֎Ͱ͸͋·Γݴٴ͠ͳ͍Α
    ͏ʹ͍ͯ͠Δ

    View Slide

  66. ʮ3FBDUJWFͬΆ͍ʯͱ͸
    •  σʔλϑϩʔΛએݴతʹѻ͏
    – σʔλͷؔ܎ੑΛએݴతʹද͍ͯ͠Δ͔
    source:  Reac6ve  Programming  in  JavaScript  
    h:p://ahomu.github.io/s/150221-­‐frontrend_conference/#39

    View Slide

  67. 'VODUJPOBM3FBDUJWF
    1SPHSBNNJOH
    •  ؔ਺ܕϦΞΫςΟϒ
    •  )BTLFMMˠ$-*/2ˠ3Y
    •  ͦͷޙ
    – 3Y+BWB
    – 3FBDUJWF$PDPB
    – 3Y+4 #BDPOKT
    – 

    View Slide


  68. ͱԡ͢ͱ
    Λԡ͢ͱ

    View Slide

  69. ໋ྩతʹॻ͘
    •  Χ΢ϯλม਺Λ༻ҙ
    •  ॳظ஋Λඳը
    •  Ϙλϯ͕ԡ͞ΕͨΒΧ΢ϯλΛͯ͠࠶ඳ
    ը
    •  Ϙλϯ͕ԡ͞ΕͨΒΧ΢ϯλΛͯ͠࠶ඳը

    View Slide

  70. View Slide

  71. σʔλϑϩʔʹண໨͢Δ
    + + + +
    ·ͣɺϘλϯͷΫϦοΫΠϕϯτΛ࣌ܥྻʹԊͬͯྲྀΕͯ͘ΔϦετ
    ετϦʔϜޙड़
    ͱߟ͑Δɻ
    Πϕϯτ͸ετϦʔϜΛྲྀΕΔ஋ͱΈͳͤΔ

    View Slide

  72. + + + +
    ϚΠφεϘλϯ΋ಉ༷ʹߟ͑Δ
    -­‐ -­‐

    View Slide

  73. + + + +
    ϘλϯΠϕϯτ͸ɺ͢Δ͜ͱɻ
    Ώ͑ʹͱ͍͏஋ʹม׵ 5SBOTGPSN
    ͯ͠ΈΔ
    1 1 1 1

    View Slide

  74. ϘλϯΠϕϯτ͸ɺ͢Δ͜ͱɻ
    Ώ͑ʹͱ͍͏஋ʹม׵ 5SBOTGPSN
    ͯ͠ΈΔ
    -­‐ -­‐
    -­‐1 -­‐1

    View Slide

  75. 1 1 1 1
    -­‐1 -­‐1
    1 1 1 1
    -­‐1 -­‐1
    ;ͨͭͷΠϕϯτ͸ඇಉظʹࠞͬͯ͟ಧ͘΋ͷͰ͋Δ
    Ώ͑ʹೋͭͷετϦʔϜΛϚʔδ͢Δ

    View Slide

  76. 1 1 1 1
    -­‐1 -­‐1
    1 1 2
    0 1 2
    Ϛʔδ͞ΕͨετϦʔϜΛɺҰͭલͷ஋ͱͷࢉज़݁Ռʹม׵

    View Slide

  77. 1 1 2
    0 1 2
    ஋͕มԽ͢Δຖʹը໘Λ࠶ඳը ෭࡞༻

    View Slide

  78. '31XJUI#BDPOKT

    View Slide

  79. + + + +
    Bacon.fromEvent(plusButton,  'click')

    View Slide

  80. + + + +
    -­‐ -­‐
    Bacon.fromEvent(minusButton,  'click')

    View Slide

  81. + + + +
    1 1 1 1
    plusClickStream.map(1)

    View Slide

  82. -­‐ -­‐
    -­‐1 -­‐1
    minusClickStream.map(-­‐1)

    View Slide

  83. 1 1 1 1
    -­‐1 -­‐1
    1 1 1 1
    -­‐1 -­‐1
    plusStream.merge(minusStream)

    View Slide

  84. 1 1 1 1
    -­‐1 -­‐1
    1 1 2
    0 1 2
    bothStream.scan(0,  (x  +  y)  =>  x  +  y)

    View Slide

  85. 1 1 2
    0 1 2
    counterBus.onValue(  /*  ը໘ඳը  */)

    View Slide

  86. ͳΜ͔ͩΘ͔ͬͨΑ͏ͳ
    Θ͔Βͳ͍Α͏ͳŋŋŋ

    View Slide

  87. ࠓճͷจ຺Ͱݴ͑͹
    ண໨͢΂͖͸ʮετϦʔϜʯ

    View Slide

  88. source:  Reac6ve  Programming  in  JavaScript  
    h:p://ahomu.github.io/s/150221-­‐frontrend_conference/#39

    View Slide

  89. ඇಉظσʔλετϦʔϜ
    •  શͯͷσʔλϑϩʔΛετϦʔϜͱͯ͠ѻ͏
    –  ୯Ұͷ஋΋ɺෳ਺ͷ஋΋ɺ1SPNJTF΋
    •  ετϦʔϜΛϦετͱΈͳ͢
    •  Ϧετૢ࡞㱺ؔ਺ܕͷΠσΟΦϜͰૢ࡞Ͱ͖Δ
    •  ؔ਺ܕ
    –  એݴత
    –  ୈڃߴ֊ؔ਺
    –  ࢀরಁ໌͔ͭ෭࡞༻Λආ͚Δ ہॴԽ͢Δ

    View Slide

  90. ࢥߟͷྲྀΕ
    •  ʮ࣌ؒͱڞʹมԽ͢Δ஋ͷσʔλܕ͕ཉ͍͠ʯ
    •  㱺ετϦʔϜΛಋೖ
    •  㱺Πϕϯτ΍ඇಉظॲཧ·ͰετϦʔϜʹ
    –  ʮ͋Εɺશ෦ετϦʔϜͰѻ͑Δ͡Όͳ͍ ʯ
    •  㱺શͯΛ౷Ұ͞ΕͨετϦʔϜͱ͍͏ΠϯλϑΣʔεͰ
    •  㱺ϦετΏ͑ʹؔ਺ܕͷΠσΟΦϜɺύϥμΠϜ
    –  ʮϦετૢ࡞Ͱ͢ΔͳΒؔ਺ܕ͕Ԡ༻Ͱ͖Δ͡Όͳ͍ʯ
    •  㱺෭࡞༻Λආ͚ͨએݴతͳهड़
    •  㱺ࢀরಁ໌ঢ়ଶ؅ཧ͔Βͷղ์

    View Slide

  91. "OESPJE΍J04Ͱ΋3FBDUJWF
    •  3Y+BWB΍3FBDUJWF$PDPBͷྲྀߦ
    •  ͨͩ͠ɺ'31Λਖ਼໘͔Βಋೖ͢ΔͷͰ͸ͳ͘ศརͳϥ
    ΠϒϥϦͱͯ͠ݶఆతʹಋೖ͢Δͱ͜Ζ͔Β࢝ΊΔྫΛ
    Α͘Έ͔͚Δ
    –  ศརͳίϨΫγϣϯૢ࡞ϥΠϒϥϦͱͯ͠
    –  .77.ͷσʔλόΠϯσΟϯά࣮૷ͱͯ͠

    View Slide

  92. ·ͱΊ

    View Slide

  93. τϨʔυΦϑ ྫ

    •  *OGSBTUSVDUVSFBT$PEFֶशίετ
    •  *NNVUBCMF*OGSBTUSVDUVSF؀ڥߏஙίετ
    •  .JDSPTFSWJDFTϞϊϦγοΫΑΓܥશମͷෳࡶੑ͸૿
    ͢
    •  3FBDUKTίʔυྔ૿͑Δ
    •  '31ֶशίετ

    View Slide

  94. εέʔϥϒϧŋŋŋঢ়ଶΛͲ͏ѻ͏͔
    •  എܠ
    –  ࣌୅ͷཁ੥
    •  Ϋϥ΢υωΠςΟϒ
    •  ඇಉظͳΞϓϦέʔγϣϯ
    •  ࣌ؒͱڞʹԿ͔ͱෳࡶԽ͠΍͍͢8FCγεςϜ
    •  ࢧ഑తͳϑΝΫλʔঢ়ଶͷѻ͍
    –  Ӆṭ
    –  એݴతʹهड़
    –  *NNVUBCMF
    େن໛τϥϑΟοΫ
    ͔ͩΒɺͱ͍͏࿩ͩ
    ͚Ͱͳ͘ͳ͖ͬͯͯ
    Δ

    View Slide

  95. ·ͱΊ
    •  ۙ೥ݸਓతʹண໨ͨ͠τϨϯυΛΈͨ
    –  *OGSBTUSVDUVSFBT$PEF
    –  *NNVUBCMF*OGSBTUSVDUVSF
    –  .JDSPTFSWJDFT
    –  3FBDU
    –  3FBDUJWF1SPHSBNNJOH
    •  ෳࡶੑ΁ͷରࡦͱͯ͠ͷঢ়ଶ؅ཧख๏ʹύλʔ
    ϯ͕ݟ͍ͩͤΔ

    View Slide

  96. 13࠾༻ͯ͠·͢
    ʮ,BJ[FO࠾༻ʯͰݕࡧɻڵ
    ຯ͋Δ͚ͩͰ΋Մɻͦͷ৔
    ߹͸8BOEUFEMZͰ

    View Slide