Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −

2015-02-17に行われた社内勉強会の内容です。

Transcript

1. ͱϑϩϯτΤϯυ
   ஌͓͔ͬͯͳ͚Ε͹ͳΒͳ͍ɺࠓͱະདྷͷ࿩
   @axross
   

   View Slide

2. ࿩͢ਓ
   ,PIFJ"TBJ
   !BYSPTT
   5SJGPSU *OD
   6*69EFTJHOEJWJTJPO
   $MJFOUTJEF+4 /PEF
   3FBDU "OHVMBS+4 FYQSFTT FUD
   

   View Slide

3. Nodeͱ͸
   

   View Slide

4. Α͋͘Δצҧ͍
   'Node.js' === 'ϦΞϧλΠϜʹڧ͍JavascriptαʔόαΠυॲཧܥ' // false
   ·ͩ͜Μͳஏ͔͍ͣ͠צҧ͍ͯ͠Δਓɺ͍·ͤΜΑͶʁ
   

   View Slide

5. (ͦΕͳΓʹ) ਖ਼͍͠ೝࣝ
   'Node.js' === ‘ϊϯϒϩοΩϯάI/OΛ࣋ͭJavascript CLI࣮ߦ؀ڥ'
   w $-*ɺ(PPHMF7
   w γϯάϧεϨουΠϕϯτϧʔϓ
   w ϊϯϒϩοΩϯά*0
   w ߴ͍࣍ݩͰͷϞδϡʔϥϏϦςΟ
   w ϦΞϧλΠϜ ؔ܎ͳ͍
   
   

   View Slide

6. Ͳ͏Ͱ΋͍͍஌ࣝ
   ਖ਼໊ࣜশ͸ʮ/PEFʯͰ͢
   When referring to the software or the project in general, it's
   Node.js or simply Node. It is a proper noun, so capitalize it. The
   .js appears with the first use, to disambiguate from other things
   called "Node", and Node (without the .js) afterwards. One way to
   think of this is that Node.js is the full name, and Node is the
   more familiar first name.
   

   View Slide

7. ͳͥ
   ϑϩϯτΤϯυΤϯδχΞͰ΋
   Nodeͳͷ͔
   

   View Slide

8. ͳͥ
   ϑϩϯτΤϯυΤϯδχΞͰ΋
   Nodeͳͷ͔
   w /PEFͷ"1*΍ΤίγεςϜ͕ΫϥΠΞϯταΠυ+4Ͱ
   ΋ར༻Ͱ͖Δ Α͏ʹͳΔ
   έʔε૿͖͑ͯͨ
   w +BWBTDSJQUͱ͍͏ط஌ͷݴޠʹΑΔ--ͱͯ͠ͷར༻
   w *TPNPSQIJD+BWBTDSJQUͱ͍͏ະདྷ
   

   View Slide

9. Nodeͷϊ΢ϋ΢͕
   ΫϥΠΞϯταΠυJSͰ΋
   ར༻Ͱ͖ΔΑ͏ʹͳΔ
   

   View Slide

10. require()ͱ͔ɺ
    ΋͏࢖ͬͯΔͰ͠ΐʁ
    $PNNPO+4ελΠϧͷϞδϡʔϧͷ࢓૊Έ
    

    View Slide

11. npmͰ΋
    OQNʹެ։͞Ε͍ͯΔύοέʔδͷதʹ͸ɺ
    /PEFͰ΋ΫϥΠΞϯταΠυ+4Ͱ΋
    ಉ͡Α͏ʹ࢖͑Δ΋ͷ͕૿͖͑ͯͨ
    

    View Slide

12. ωΠςΟϒAPI͢Β΋
    4USFBN"1* /PEFͰϑΝΠϧͷྲྀΕΛѻ͏
    
    ΫϥΠΞϯταΠυ+4ʹ΋࣮૷͢΂͘ɺ
    ࢓༷ࡦఆதͱͷ͜ͱɻ
    ৄ͍͠࿩͸·ͨࠓ౓
    

    View Slide

13. LLͱͯ͠ͷར༻
    

    View Slide

14. JavascriptɺಘҙͰ͠ΐʁ
    զʑ͸+BWBTDSJQUͱͱ΋ʹۤ͠Έɺ
    ࣌ʹ͸.JDSPT˔GUΛഃΓɺ
    ͍ΖΜͳۤ೰ͷ຤ʹ΍͖ͬͯͨ͸ͣ
    ΋͸΍+BWBTDSJQU͸ɺࣗ෼ͷख଍ͷΑ͏ʹಈ͔ͤΔ
    

    View Slide

15. ࣗಈԽ͍ͨ͜͠ͱ͸
    ͨ͘͞Μ͋Δ
    w "1*ୟ͖·ͬͯ͘σʔλΛऔΔ
    w 8FCεΫϨΠϐϯάɺαϯϓϧσʔλͷ࡞੒
    w ઃఆͷ੔උͱ͔
    w ։ൃ؀ڥΛΑ͠ͳʹ
    

    View Slide

16. ๻Βʹ΋Ͱ͖Δʂ
    3VCZJTU΍1ZUIPOJTUBɺ
    ൴Β͸ͦ͏͍͏λεΫΛίʔυͰߦ͍ͬͯΔ
    ԿͰ๻ͨͪ͸Ͱ͖ͳ͍ͷ͔ʁͰ͖ΔͩΖʁʂ
    ͦ͏ɺ/PEF͕͋Δʂ
    

    View Slide

17. Isomorphic Javascript
    

    View Slide

18. Javascript Lv.999
    +BWBTDSJQU͸΋͸΍ɺ
    ʮ૷০ͷͨΊͷεΫϦϓτʯͰ͸ͳ͍
    "KBYͷྲྀߦΛڥʹɺ%0.Λಈཱ͔͢৔ʹ
    ͦͯ͠΋͸΍ɺ%0.ͷੈքͷࢧ഑ऀͱ΋ݴ͑Δ
    

    View Slide

19. MVWͳ
    ΫϥΠΞϯταΠυWAFͷོ੝
    #BLDCPOFKT
    ,OPDLPVUKT
    &NCFSKT
    "OHVMBS+4
    7VFKT
    "VSFMJB
    3FBDUKT ͪΐͬͱҧ͏͚Ͳ
    
    3JPUKT ͪΐͬͱҧ͏͚Ͳ
    
    

    View Slide

20. Javascript Application
    ͦΕ͸ɺ
    ͢΂ͯͷ%0.ૢ࡞
    )551ϦΫΤετͷऔΓѻ͍
    ͢΂ͯΛ+BWBTDSJQU͕ߦ͍ɺ
    ΞϓϦέʔγϣϯΛߏ੒͢Δະདྷ
    

    View Slide

21. αʔόαΠυ΋NodeͩͬͨΒ
    ΫϥΠΞϯταΠυͱαʔόαΠυͷ֞ࠜΛഉআ
    ͍·ͭʹ෼͔Εͯ͠·͍ͬͯΔ
    ϏδωεϩδοΫΛͭʹͰ͖Δ
    ࠶ར༻ੑʂอकੑʂεέʔϥϏϦςΟΟΟʂʂʂ
    ๻ͨͪͷ8FC͸ݩདྷɺͦ͏͍͏΋ͷͩͬͨ͸ͣͩʂ
    

    View Slide

22. Isomorphicͳྫ
    w 7BMJEBUPS΍4FSWJDFͷ࢖͍ճ͠
    w ಉ͡΋ͷΛSFRVJSF
    ͢Δ͚ͩ
    w ಉ͡ϩδοΫ͕ผͷ࣮૷Ͱͭ͋Δͬͯͦ΋ͦ΋
    ͓͔͍͠ͷͰ͸
    w .PEFM૚ͷڞ௨Խ
    w αʔόʔͱΫϥΠΞϯτͰΠϯλʔϑΣʔε͕
    ౷Ұ͞ΕΔ
    w 4&0తͳΞϨ
    w +4"QQMJDBUJPOͷαʔόʔαΠυϨϯμϦϯά
    

    View Slide

23. ະདྷͩʂʂʂʂʂʂʂ1111
    

    View Slide

24. ΋͸΍ݴ͍༁͸ڐ͞Εͳ͍
    

    View Slide

25. ಀ͍͛ͯͨΒɺࢮ͵͚ͩ
    

    View Slide

26. GitHubͷσβΠφʔͷ࿩
    lσβΠφʔͱσϕϩούʔ͕
    ෼͔Ε͍ͯΔ࣌୅͸
    ͍ͣΕऴΘΔz
    

    View Slide

27. GitHubͷσβΠφʔͷ࿩ (2)
    ๻ͷதͰ͸ উखʹ
    ༗໊ͳ࿩
    ͢΂ͯΛͰ͖Ζɺͱ͸ݴΘͳ͍
    ΫϥΠΞϯταΠυɺαʔόαΠυͰ΋͍͍
    ͓ޓ͍ͷ෼໺Λ஌Γ߹͏͜ͱ͕େࣄ
    

    View Slide

28. GitHubͷσβΠφʔͷ࿩ (3)
    ΋ͬͱίϛϡχέʔγϣϯ͸͠΍͘͢ͳΔɺ
    ΋ͬͱ଎͘࡞ΕΔΑ͏ʹͳΔ
    ΋ͬͱνϟϨϯδϯάͰ
    ΋ͬͱΤΩαΠςΟϯάͰ
    Ձ஋͋ΔϓϩμΫτʹऔΓ૊ΊΔΑ͏ʹͳΔ
    

    View Slide

29. ͋͞ɺNodeΛ͸͡ΊΑ͏
    

    View Slide

30. ͱ͸͍͑ɺ
    ٸʹͦΜͳ͜ͱ
    ݴΘΕͯ΋ࠔΔ..
    

    View Slide

31. Node ϫʔΫγϣοϓ
    ΍Γ·͢ʂʂʂʂʂʂ
    ద౰ͳπʔϧ࡞ͬͯ/PEFͷجૅΛֶͿ
    ۙ೔༧ఆɺৄࡉະఆɺଞσΟϰΟδϣϯ׻ܴ
    ڵຯͷ͋Δਓ͸͝Ұใ͍ͩ͘͞
    6*69EJW๻·Ͱ
    

    View Slide

32. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide