WEBエンジニア勉強会 #01 (開会〜発表1)

2017年06月02日(金)に開催された「WEBエンジニア勉強会 #01」の開会〜発表1「2000年以降のWEBを振り返り、近年のWEBのキーワードに触れてみる 」までの発表資料です。

[イベントHP]
https://connpass.com/event/57201/

Transcript

1. 8ΤϯδχΞษڧձ
   

   View Slide

2. 8ΤϯδχΞษڧձ
   © OSCA
   ໨త
   • 8ٕज़ͷڞ༗ͱֶश
   • ීஈͷऔΓ૊ΈΛൃදͰ͖Δ৔ͷఏڙ
   • 8ΤϯδχΞͷ༑ୡ΍஥ؒΛ࡞Δ
   

   View Slide

3. ձ৔Ҋ಺ ॾ஫ҙ
   © OSCA
   • τΠϨ͸࿓Լʹ͋Γ·͢ɻ
   • ېԎʹ͝ڠྗ͍ͩ͘͞ɻ
   • ͜ͷି͠ձٞࣨͷແྉ 8J'J͕ར༻Ͱ͖·͢ɻ
   • ҿ৯͸ࣗ༝Ͱ͢ɻ
   • ࢀՃඅԁΛ͓ࢧ෷͍͍ͩ͘͞ɻ
   • '͸ֶशक़ɾ'͸ࣗशࣨͰ͢ɺ૽Իʹ഑ྀئ͍͠·͢ɻ
   • ࿓ԼͰͷ௨࿩͸͝ԕྀ͍ͩ͘͞ɻ
   • ϚΠΫ͕ར༻Ͱ͖·ͤΜɺྃ͝ঝ͍ͩ͘͞ɻ
   

   View Slide

4. ओ࠵ऀ ࣗݾ঺հ
   
   © OSCA
   04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ
   
   4*FS ϓϩδΣΫτϦʔμʔ
   • +BWB 1)1
   • αʔόʔαΠυΤϯδχΞ
   • ࠷ۙ͸ਓ޻஌ೳ "*
   ػցֶशΛษڧத
   • ͘͞Βͷ714आΓͯ8αʔϏεΛӡӦ
   • ໷ܠࣸਅՈ
   • ෣඿ࡏॅ
   

   View Slide

5. ओ࠵ऀ ࣗݾ঺հ
   
   © OSCA
   04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ
   
   4*FS ϓϩδΣΫτϦʔμʔ
   ᖛ໺
   ౦ژ ࣗࣾ
   
   ϕτφϜ ԭೄ
   ސ٬
   தࠃਓνʔϜ
   

   View Slide

6. ओ࠵ऀ ࣗݾ঺հ
   
   © OSCA
   04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ
   
   4*FS ϓϩδΣΫτϦʔμʔ
   ᖛ໺
   ౦ژ ࣗࣾ
   
   ϕτφϜ ԭೄ
   ސ٬
   ओͳ࢓ࣄ
   • ސ٬ંি
   • ࢓༷ௐ੔
   • ϕϯμʔϚωʔδϝϯτ
   தࠃਓνʔϜ
   

   View Slide

7. 8ΤϯδχΞษڧձ
   © OSCA
   04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ
   
   4*FS ϓϩδΣΫτϦʔμʔ
   ࡀఆ೥આ
   • தؒ؅ཧΛձࣾʹٻΊΒΕɺΤϯδχΞͰ͖ͳ͍ɻ
   • ྑ͍ޙഐΛҭͯΔɾྑ͍ϏδωεύʔτφʔΛ࣋ͭ͜ͱ
   ͕ධՁʹͭͳ͕Δɻ
   • ͲΜͲΜपΓ͔Βʮٕज़͕޷͖ʯͱ͍͏ਓ͕͍ͳ͘ͳͬ
   ͍ͯ͘ɻ
   

   View Slide

8. 8ΤϯδχΞษڧձ
   © OSCA
   04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ
   
   4*FS ϓϩδΣΫτϦʔμʔ
   ૝͍
   • ΤϯδχΞͱͯ͠΋ݱ໾Ͱ͍͍ͨ
   • ΤϯδχΞͰډଓ͚ΒΕΔํ๏Λ໛ࡧ͍ͨ͠
   • ΤϯδχΞͷ͓༑ୡཉ͍͠
   • ޙഐ΍एऀʹ஌ࣝΛڞ༗͍ͨ͠
   

   View Slide

9. 8ΤϯδχΞษڧձ
   © OSCA
   ࠓ೔ͷൃද
   ̎̌̌̌೥Ҏ߱ͷ8ΛৼΓฦΓɺ
   ۙ೥ͷ8ͷΩʔϫʔυʹ৮ΕͯΈΔ
   !FOHJOFFS@PTDB
   
   0"VUIΛ͔Έͩ͘͘
   !HBSCBHFUPXO
   
   XFCΤϯδχΞॳ৺ऀΛεϜʔζʹड͚ೖΕΔͨΊʹ
   ϨΨγʔΞϓϦέʔγϣϯͷΞʔΩςΫτͱͯ͠౒ྗ
   ͍ͯ͠Δ͜ͱ
   !OBCFEHF
   
   

   View Slide

10. 8ΤϯδχΞษڧձ
    © OSCA
    ࠓ೔ͷ-5
    • ΤϯδχΞʹͳͬͯϲ݄ܦͬͯࢥ͏͜ͱ !BLND[
    
    • ࣾ಺ͰϑϨʔϜϫʔΫΛ޿͛Δ·Ͱ ![VDLFZ@
    
    • େاۀͰ΋8ΤϯδχΞϦϯά͕͍ͨ͠ !SFOKJLBSJ
    
    

    View Slide

11. OSCA (濱野 一二三)
    ೥Ҏ߱ͷ8ΛৼΓฦΓɺ
    ۙ೥ͷ8ͷΩʔϫʔυʹ৮ΕͯΈΔ
    

    View Slide

12. 8
    © OSCA
    ブラウザ サーバー
    HTTPリクエスト
    HTTPレスポンス
    

    View Slide

13. 8ΠϯλʔϑΣʔε
    © OSCA
    • )5.-קࠂ
    • 9)5.-קࠂ
    • 9)5.-קࠂ
    • "DUJPO4DSJQU
    • 8"KBY ςΟϜɾΦϥΠϦʔ
    
    • "EPCF͕.BDSPNFEJBΛങऩ "DUJPO4DSJQU
    • .JDSPTPGU4JMWFSMJHIU
    • "EPCF"JS
    

    View Slide

14. 8ΠϯλʔϑΣʔε
    © OSCA
    • )5.-υϥϑτ
    • "QQMF J1IPOF(ൃച
    • "QQMF J1IPOF 4BGBSJ
    Ͱ'MBTIͷඇରԠΛൃද
    • )5.-קࠂ
    • )5.-קࠂ
    

    View Slide

15. 8ΠϯλʔϑΣʔε
    © OSCA
    )5.-
    • QJDUVSF
    • JOQVUUZQFlEBUFUJNFMPDBMzʙ
    • JOQVUUZQFlXFFLzʙ
    • JOQVUUZQFlNPOUIzʙ
    • Πϕϯτ PODVU PODPQZ POQBTUF ͷ௥Ճ
    

    View Slide

16. 8ΠϯλʔϑΣʔε
    © OSCA
    )5.-QJDUVSFλά
    
    
    
    
    
    

    View Slide

17. 8ΠϯλʔϑΣʔε
    © OSCA
    )5.-JOQVUλά
    • JOQVUUZQFlEBUFUJNFMPDBMzʙ
    • JOQVUUZQFlXFFLzʙ
    • JOQVUUZQFlNPOUIzʙ
    

    View Slide

18. 8ΠϯλʔϑΣʔε
    © OSCA
    )5.-
    

    View Slide

19. 8ϒϥ΢β
    © OSCA
    • *OUFSOFU&YQMPSFS
    • *OUFSOFU&YQMPSFS
    • *OUFSOFU&YQMPSFS ೥ʹ91޲͚αϙʔτ׬શऴྃ
    
    • .P[JMMB'JSFGPY
    • "QQMF4BGBSJ
    • *OUFSOFU&YQMPSFS
    • (PPHMF$ISPNF
    • *OUFSOFU&YQMPSFS
    • *OUFSOFU&YQMPSFS
    • *OUFSOFU&YQMPSFS
    • *OUFSOFU&YQMPSFS
    • &EHF
    

    View Slide

20. 8ϒϥ΢β
    © OSCA
    ϒϥ΢βංେԽ໰୊
    ϒϥ΢βʹඞཁͳػೳͱ͸ͳΜͳͷ͔ʁ
    • 8FC#MVFUPPUI"1*
    • (BNFQBE"1*
    • 8FC.*%*"1*
    

    View Slide

21. 8ϒϥ΢β
    © OSCA
    

    View Slide

22. ΫϥΠΞϯταΠυɾεΫϦϓτ
    © OSCA
    ECMAScript JavaScript
    実装
    言語仕様
    

    View Slide

23. ΫϥΠΞϯταΠυɾεΫϦϓτ
    © OSCA
    &$."4DSJQU &4
    
    • ೥ &$."4DSJQUTU&EJUJPO
    • ೥ &$."4DSJQUOE&EJUJPO
    • ೥ &$."4DSJQUSE&EJUJPO
    • ೥ &$."4DSJQUUI&EJUJPO
    • ೥ &$."4DSJQUUI&EJUJPO
    
    • ೥ &$."4DSJQU&EJUJPO
    • ೥ &$."4DSJQU&EJUJPO ࡦఆத
    
    

    View Slide

24. ΫϥΠΞϯταΠυɾεΫϦϓτ
    © OSCA
    +BWB4DSJQU
    • ೥ +BWB4DSJQU&$."4DSJQUTU OE
    • ೥ +BWB4DSJQU&$."4DSJQUSE
    • ೥ +BWB4DSJQU
    

    View Slide

25. ΫϥΠΞϯταΠυɾεΫϦϓτ
    © OSCA
    ECMAScript JavaScript
    実装
    言語仕様
    TypeScript
    拡張実装言語
    (Super set)
    コンパイル
    CoffeeScript
    

    View Slide

26. ΫϥΠΞϯταΠυɾεΫϦϓτ
    © OSCA
    ECMAScript JavaScript
    実装
    言語仕様
    TypeScript
    拡張実装言語
    (Super set)
    コンパイル
    CoffeeScript
    AltJS
    

    View Slide

27. ௨৴ )551 )5514
    
    © OSCA
    )551
    • ೥ )551
    • ೥ )551
    • ೥ )551
    • ೥ )551
    )5514
    • 44-5-4Ͱ҉߸Խ͞Εͨ)551௨৴
    

    View Slide

28. ௨৴ )551 )5514
    
    © OSCA
    )551
    ࣍ͷٕज़ʹΑΓɺ)551YΑΓ΋௨৴͕ߴ଎ʹͳΔɻ
    • )551ϔομͷѹॖ
    • 164)௨৴
    • )551ύΠϓϥΠϯ
    • )FBEPG-JOF )P-
    ϒϩοΩϯά໰୊ͷղফ
    )551͸ɺ)5514 )551PWFS5-4
    ௨৴͕લఏɻ
    

    View Slide

29. ௨৴ )551 )5514
    
    © OSCA
    )551
    )551αʔόʔͷରԠঢ়گ
    • "QBDIFʙ
    • OHJOY ʙ
    • **4 8JOEPXT
    ʙ
    ϒϥ΢βͷରԠঢ়گ
    • (PPHMF$ISPNFʙ
    • .P[JMMB'JSFGPYʙ
    • *OUFSOFU&YQMPSFSʙ .JDSPTPGU&EHF
    

    View Slide

30. ௨৴ )551 )5514
    
    © OSCA
    -FU`T&ODSZQU
    

    View Slide

31. ௨৴ )551 )5514
    
    © OSCA
    -FU`T&ODSZQU
    • αʔόʔ্ͰɺίϚϯυϥΠϯͰূ໌ॻͷൃߦཁٻΛߦ͏ɻ
    • ൃߦ͞ΕΔূ໌ॻͷλΠϓ͸%7ূ໌ॻɻ
    • ൃߦ͞ΕΔূ໌ॻͷ༗ޮظݶ͸ϲ݄ɻ
    • ίϚϯυΛDSPOͳͲʹొ࿥ͯ͠ɺ༗ޮظݶ੾ΕʹͳΓͦ
    ͏ͩͬͨΒࣗಈతʹߋ৽͢ΔΑ͏ʹ͢Δɻ
    

    View Slide

32. αʔόʔ
    © OSCA
    αʔόʔ؀ڥͷมԽ
    • ϗεςΟϯά
    • Ծ૝αʔόʔ 7.8BSF 7JSUVBM4FSWFS 9FO
    
    • Ϋϥ΢υ
    • ೥ "84&$ЌαʔϏε։࢝
    • ೥ "84&MBTUJD*1ͷొ৔ άϩʔόϧ*1ݻఆ
    
    • ೥ "8471$ ϓϥΠϕʔτωοτϫʔΫ
    
    • ೥ "84౦ژϦʔδϣϯ։ઃ
    

    View Slide

33. αʔόʔ
    © OSCA
    Ϋϥ΢υ࣌୅ʹͳͬͯมΘͬͨ͜ͱ
    • αʔόʔΠϯελϯε͸࢖͍ࣺͯʹ
    • "1*ܦ༝ͰωοτϫʔΫ΍αʔόʔ͕ߏஙͰ͖Δ
    

    View Slide

34. αʔόʔ
    © OSCA
    Ϋϥ΢υ࣌୅ͷΩʔϫʔυ
    • *OGSBTUSVDUVSFBT$PEF
    • *NNVUBCMF*OGSBTUSVDUVSF
    • #MVF(SFFO%FQMPZNFOU
    

    View Slide

35. ։ൃ؀ڥͷมԽ
    © OSCA
    όʔδϣϯ؅ཧγεςϜ
    όʔδϣϯ؅ཧγεςϜ͸෼ࢄܕ͕ओྲྀʹͳͬͨɻ
    • $74
    • 4VCWFSTJPO
    • (JU .FSDVSJDBM
    ϗεςΟϯάαʔϏε͕ొ৔ͨ͠ɻ
    • (JU)VC
    • #JU#VDLFU
    • 7JTVBM4UVEJP5FBN4FSWJDFT
    

    View Slide

36. ։ൃ؀ڥͷมԽ
    © OSCA
    ґଘؔ܎ͷղܾγεςϜ
    ΄ͱΜͲͷϓϩάϥϛϯάݴޠʹɺґଘϥΠϒϥϦͷղܾγ
    εςϜ͕ొ৔ͨ͠ɻ
    • .BWFO (SBEMF +BWB
    
    • #VOEMFS 3VCZ
    
    • $PNQPTFS 1)1
    
    • $1"/ 1FSM
    
    

    View Slide

37. ։ൃ؀ڥͷมԽ
    © OSCA
    ܧଓతΠϯςάϨʔγϣϯσϓϩΠ
    લड़ͷΑ͏ͳπʔϧͷొ৔ʹΑΓ
    • ϏϧυϓϩηεͷࣗಈԽ͕༰қʹͳͬͨɻ
    • Ϗϧυ΍σϓϩΠͷ͕࣌ؒ୹ॖ͞Εͨɻ
    

    View Slide

38. © OSCA
    ·ͱΊ
    

    View Slide

39. ࣍ճҎ߱ͷൃදީิ
    © OSCA
    ٕज़ωλ
    • )5.-
    • ".1
    • "MU+4
    ։ൃϓϩηε
    • ։ൃϓϩηεͷࣗಈԽ
    ಇ͖ํ
    • ΤϯδχΞͷΩϟϦΞύε
    

    View Slide

40. © OSCA
    օ͞ΜͷൃදΛ͓଴ͪͯ͠·͢ɻ
    

    View Slide