情報化社会を この先生きのこるためには / Layzie@Frontrend in Kanazawa

2014/10/18 FRONTREND IN KANAZAWAでのセッション"情報化社会をこの先生きのこるためには"のスライドです。

http://labo.dmm.com/frontrend/

# 参考URL

- [Life goes on](http://layzie.hatenablog.com/)
- [Presentations by HIRAKI Satoru // Speaker Deck](https://speakerdeck.com/layzie)
- [Amazon.co.jp： 開発効率をUPする Git逆引き入門](http://www.amazon.co.jp/dp/4863541465/)
- [Amazon.co.jp： フロントエンドエンジニア養成読本](http://www.amazon.co.jp/dp/4774165786/)
- [Amazon.co.jp： Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール](http://www.amazon.co.jp/dp/4844337009/)
- [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ja/)
- [非同期JavaScriptプログラミング - HTML5アプリケーションの為の$.Deferredのパワー - HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/async/deferred/)
- [enja-oss](https://github.com/enja-oss)
- [html5j英語部](https://github.com/html5j-english)
- [Stack Overflow](http://stackoverflow.com/)
- [Pinboard: bookmarks for Layzie](https://pinboard.in/u:Layzie)
- [JSer.info](http://jser.info/)
- [ワザノバ | wazanova](http://wazanova.jp/)
- [POSTD | 海外の最新テクノロジー系ニュースを日本語で](http://postd.cc/)
- [Hacker News](https://news.ycombinator.com/)
- [JavaScript Weekly: A Free, Weekly Email Newsletter](http://javascriptweekly.com/)
- [HTML5 Weekly: A Free, Weekly Email Newsletter](http://html5weekly.com/)
- [Node Weekly: A Free, Weekly Email Newsletter](http://nodeweekly.com/)
- [feedly](https://feedly.com/)
- [Reeder for iOS](http://reederapp.com/ios/)
- [Reeder for Mac](http://reederapp.com/mac/)
- [Put the internet to work for you. - IFTTT](https://ifttt.com/)
- [A Free Web & Mobile App for Reading Comfortably — Readability](https://www.readability.com/)
- [Pinboard bookmarks tagged javascript](https://pinboard.in/t:javascript/)
- [feedly.opml](http://layzie.d.pr/RkBt)

Transcript

1. ∏
   ৘ใԽࣾձΛ
   ͜ͷઌੜ͖ͷ͜ΔͨΊʹ͸
   'SPOUSFOEJO,BOB[BXB
   )*3",*4BUPSV
   1IPUPIUUQTqJDLSQO,L38
   

   View Slide

2. HIRAKI Satoru a.k.a Layzie
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Agenda
    1. ৘ใऩूͬͯ?
    2. ೳಈత৘ใऩूͷ৺ಘ
    3. डಈత৘ใऩूͷ৺ಘ
    4. ·ͱΊ
    

    View Slide

13. ৘ใऩूͬͯ?
    

    View Slide

14. Web Development
    υοάΠϠʔͱݺ͹ΕΔ͘Β͍ʹ͸ҠΓมΘΓ͕ܹ͍͠
    

    View Slide

15. ͜Ε͔Β10೥ઌ΋࢒ΔͰ͋Ζ
    ͏ٕज़
    ✦ TCP / IPɾHTTPͳͲͷωοτϫʔΫؔ࿈
    ✦ ίϯϐϡʔλΞϧΰϦζϜ
    ✦ SQL
    ✦ Linux / Unix
    ✦ UI / UX
    

    View Slide

16. υοάΠϠʔΛ৐Γ੾ΔͨΊ
    ͷ৘ใऩू
    ͦ΋ͦ΋͜ͷ৘ใաଟͷ࣌୅ʹͲΕ͚ͩྑ͍
    ৘ใΛઁऔ͢Δ͔͕ॏཁɻ͜Ε͕Ͱ͖Ε͹৐
    Γ੾ΕΔ!
    

    View Slide

17. ৘ใऩू͕ͳͥॏཁ͔?
    1IPUPIUUQTqJDLSQCD6B%
    

    View Slide

18. ࿩ඈΜͰࣗ෼ͷ͜Ε·Ͱ
    ✦೥ྸͷΘΓʹۀքྺ͘͢͝୹͔͍
    ✦Կ΍Δͷ͔෼͔Βͳ͍··WebσΟϨΫ
    λʔΛ΍Β͞Εͨ
    ✦ࠓ͔Β࿩͢͜ͱΛ৺͕͚ͯੜ͖͍ͯ·͢
    

    View Slide

19. 2छྨͷ৘ใऩू
    ✦ೳಈత৘ใऩू
    ✦डಈత৘ใऩू
    

    View Slide

20. ೳಈత৘ใऩू
    1IPUPIUUQTqJDLSQU'"
    

    View Slide

21. ೳಈత৘ใऩूͱ͸
    Կ͔ͷ໨త(όάͷ৘ใ΍ɺAPIͷ࢖͍ํͳͲ)
    Λ࣋ͬͯɺࣗ෼͔Βੵۃతʹ৘ใΛऩू͢Δ
    ͜ͱ
    

    View Slide

22. 1͚ͭͩ΍ͬͯΔॏཁͳ͜ͱ
    

    View Slide

23. ӳޠͰݕࡧ͢Δ͜ͱ
    

    View Slide

24. ӳޠͱ೔ຊޠͰ͸ݕࡧͰಘΒ
    ΕΔ৘ใ͕͔ͳΓҧ͏
    ྫ͑͹ɺʮJavaScriptͰ഑ྻΛ௥Ճ͢Δͷͬ
    ͯͲ͏͢ΔΜ͚ͩͬ?ʯͱ͍͏৔߹Λߟ͑ͯΈ
    ·͢
    

    View Slide

25. ೔ຊޠͰݕࡧͨ͠৔߹
    ݕࡧʹ͸ʮjavascript ഑ྻ ௥ՃʯͱೖΕ·͢
    

    View Slide

26. View Slide

27. ʊਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹ஌Βͳ͍63-͔͠ͳ͍ɹʻ
    ʉ:?:?:?:?:?:?:?:?:?:ʉ
    

    View Slide

28. ӳޠͰݕࡧͨ͠৔߹
    ݕࡧʹ͸ʮjavascript array addʯͱೖΕ·͢
    

    View Slide

29. View Slide

30. View Slide

31. ʊਓਓਓਓਓਓਓਓਓʊ
    ʼɹ.%/͕͋ͬͨΑɹʻ
    ʉ:?:?:?:?:?:?:?:ʉ
    

    View Slide

32. ͦ΋ͦ΋ಘΒΕΔ৘ใͷ࣭͕
    શવҧͬͯ͘Δ
    MozillaͷMDN͸৴པ͕ஔ͚ΔͰ͋Ζ͏৘ใ
    ݯͰ͕͢ɺ೔ຊޠͩͱશવ্Ґʹώοτͯ͠
    ͖·ͤΜɻ(࣮ࡍʹ͸8൪໨ʹग़͖ͯ·͢)
    

    View Slide

33. ӳޠͱ೔ຊޠͰ͸࿩ऀ਺͕ઈ
    ରతʹҧ͏
    ΋ͬͱϚΠφʔͳϑϨʔϜϫʔΫ΍όάͳͲ
    ʹͳΔͱ೔ຊޠͩͱɺ༗༻ͳ৘ใʹΞΫηε
    ͢Δͷ΋Ұۤ࿑͢Δ
    

    View Slide

34. ઌఔͷྫ୊Ͱ΋ݦஶʹग़ͯΔ
    

    View Slide

35. View Slide

36. ೔ຊޠͰݕࡧ
    ໿ 503,000 ݅
    

    View Slide

37. View Slide

38. ӳޠͰݕࡧ
    ໿ 17,100,000 ݅
    

    View Slide

39. ӳޠͷ৘ใͷѹ౗త෺ྔ
    

    View Slide

40. ϜϦϠϦӳޠͰݕࡧͯ͠ಡΜ
    ͩ΄͏͕ྑ͍
    JavaScriptͳͲҰఆͷ෼໺Ͱ͸೔ຊޠͷ৘ใ
    ͕AjaxҎલͷݹ͍৘ใͳͲ͕දࣔ͞ΕΔ͜ͱ
    ͕ଟ͍
    

    View Slide

41. ݕࡧ݁Ռ͕ଟ͍ͱൺֱݕ౼͕
    ͠΍͍͢
    ΋ͪΖΜɺ਺͕ଟ͍ͱ࣭͕ѱ͍৘ใ΋தʹ͸
    ͋ΔͷͰ͕͢ɺٯʹͦ͜͸ࣗ෼Ͱൺֱݕ౼͠
    ΍͍͚ͩ͢ͷ਺͕͋Γ·͢
    

    View Slide

42. தʹ͸ྫ֎΋͋Γ·͢
    

    View Slide

43. ೔ຊಠࣗͷ৘ใ
    

    View Slide

44. 1IPUPIUUQTqJDLSQ&V);
    

    View Slide

45. ౰ͨΓ·͑Ͱ͕͢ɺ೔ຊͷΈ
    ͷ৘ใͳͲ͸ྫ֎
    ✦ ೔ຊޠͷऔΓѻ͍
    ✦ ΨϥύΰεAndroid୺຤
    ✦ ೔ຊͷ೔෇ɾٳ೔ͷऔΓѻ͍
    

    View Slide

46. όάͳͲͷղܾ๏ͳͲʹ΋ӳ
    ޠͰݕࡧ͸༗ޮ
    ӳޠͩͱେମ͜͏͍͏৔߹͸࠷ڧͷQ&AαΠ
    τͰ͋ΔStack Overflow͕݁Ռʹग़͖ͯͨ
    ΓɺϥΠϒϥϦͳͲͰ͋Ε͹ɺGitHubͷ
    Issue͕ग़͖ͯ΍͍͢
    

    View Slide

47. ΋͏1ͭ஫ҙͯ͠Δ͜ͱ
    

    View Slide

48. هࣄͷ೔෇͸ඞͣ֬ೝ
    

    View Slide

49. ݕࡧ݁Ռͷهࣄͷ౤ߘɾߋ৽
    ೔࣌͸ඞͣνΣοΫ
    ͜ΕΛ͠ͳ͍ͱɺಛʹϥΠϒϥϦͳͲͰ͸Ҏ
    લͷόʔδϣϯͷղܾ๏ͳͲΛಡΜͰ্ख͘
    ղܾͰ͖ͳ͍ͱ͍͏͜ͱ΋ଟʑ͋Δ
    

    View Slide

50. ͋ͱ΋͏1ͭ஫ҙͯ͠Δ͜ͱ
    

    View Slide

51. Ͳ͏ͤͳΒؔ࿈͢Δ΋ͷ΋ݕࡧ
    

    View Slide

52. ͔ͤͬ͘ͷνϟϯεͳΜͰؔ
    ࿈͢Δࣄฑ΋͓֮͑ͯ͘
    ݸਓతʹ͸ʮݕࡧνΣʔϯϝιουʯͱݺΜ
    Ͱ·͕͢ɺ͔ͤͬ͘ௐ΂ͨΩʔϫʔυ͸ղܾ
    ͯ͠ऴΘΓʹͤͣɺؔ࿈͢ΔΩʔϫʔυ΋֮
    ͓͑ͯ͘ͱྑ͍Ͱ͢
    

    View Slide

53. ؔ࿈͢ΔΩʔϫʔυ?
    ✦ ݕࡧ݁Ռͷ3~5ϖʔδ͘Β͍·Ͱ͸ோΊͯ໘ന
    ͦ͏ͳهࣄΛಡΉ
    ✦ ಡΜͩهࣄͷதͰؾʹͳΔΩʔϫʔυΛ࠶ݕ
    ࡧ
    ✦ Googleͷʮؔ࿈͢ΔΩʔϫʔυʯΛௐ΂Δ
    

    View Slide

54. গ͠Ͱ΋఺ͷ஌ࣝΛઢʹ͢Δ
    

    View Slide

55. ࠷ޙʹ஫ҙͯ͠Δ͜ͱ
    

    View Slide

56. ݕࡧͨ͠هࣄ͸
    ιʔγϟϧϒοΫϚʔΫ΁
    

    View Slide

57. ݕࡧ݁Ռ͸ඞͣࣗ෼ͷϒοΫ
    ϚʔΫʹλά෇͚ͯ͠ه࿥
    ͸ͯϒ΍PinboardͳͲʹه࿥͓ͯ͘͜͠ͱʹ
    ΑͬͯɺޙͰಉ͡Α͏ͳݕࡧ͢Δͱ͖ʹάά
    ΔΑΓਫ਼౓͕֨ஈʹߴ·Δ
    

    View Slide

58. View Slide

59. डಈత৘ใऩू
    1IPUPIUUQTqJDLSQCC4T
    

    View Slide

60. डಈత৘ใऩूͱ͸
    Կ͔໨త͕͋ͬͯͰ͸ͳ͘ɺΩʔϫʔυͳͲ
    ΍αΠτͷRSSͰྲྀΕͯ͘Δ৘ใΛఆ఺؍ଌ
    ͢Δ͜ͱ
    

    View Slide

61. ͳΜͰ͜Μͳ͜ͱ͕ඞཁ?
    কདྷͷࣗ෼΁ͷ౤ࢿͱɺࠓͷτϨϯυΛΩϟον
    

    View Slide

62. डಈత৘ใऩूͷίπ
    

    View Slide

63. ࠓ͸໾ʹཱͨͳ͍͔΋
    ͠Εͳ͍৘ใ΋ੵۃతʹઁऔ
    

    View Slide

64. ͦͯ͠΍ͬͺΓӳޠ
    1IPUPIUUQTqJDLSQDP+P
    

    View Slide

65. ͜ͷۀքͷੑ্࣭ɺͲ͏ͯ͠
    ΋ӳޠ͕1࣍৘ใʹͳͬͯ͘Δ
    ಛఆͷδϟϯϧͷୈҰਓऀͳͲ͸ӳޠΛ࢖ͬ
    ͯΔ͜ͱ͕ଟ͍ͨΊʹɺडಈత৘ใऩूͷͱ
    ͖ʹ΋ɺ΍ͬͺΓӳޠ͕ඞཁʹͳͬͯ͘Δ
    

    View Slide

66. ΋ͪΖΜ೔ຊޠͰ΋ϑΥϩʔ
    ͢΂͖৘ใݯ͸͍ͬͺ͍
    Կ͔ͩΜͩͱ೔ຊޠͰ৴པͰ͖Δ৘ใΛൃ৴
    ͯ͘͠Ε͍ͯΔͷ͸҆৺Ͱ͖·͢
    

    View Slide

67. ৴པͰ͖Δ৘ใݯͬͯ
    Ͳ͏͍͏΋ͷͩΖ͏?
    

    View Slide

68. ৘ใͷ৴པ౓͸৭ʑͳଆ໘͕
    ͋Γ·͢
    ✦ݕূͯ͋͠ΔΦϦδφϧͷهࣄΛॻ͍ͯΔ
    ✦χϡʔεΛ఻͑ͯΔ৔߹ʹ͸ɺࣗ෼ͷײ૝ͱࣄ࣮Λ
    ͖ͪΜͱ۠ผ͍ͯ͠Δ
    ✦ஶ໊ͳ૊৫ɾஶ໊ਓ
    ✦౪࡞ͳͲΛͯ͠ͳ͍
    ✦ޡใͳͲͯ͠΋ͪΌΜͱमਖ਼͍ͯ͠Δ
    

    View Slide

69. ΍ͬͺΓ࠷ޙ͸
    ࣗ෼ͷ൑அʹͳΓ·͕͢
    

    View Slide

70. ݸਓతʹ͸ආ͚͍ͨαΠτ
    

    View Slide

71. େਓͷࣄ৘Ͱඇެ։
    

    View Slide

72. ݸਓతʹྑ͍ͳͱࢥ͏αΠτ
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. Ͱ͸Ͳ͔͜Β৘ใऩू͢Δ͔
    1IPUPIUUQTqJDLSQ$LY1I
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. ৘ใऩूͷϫʔΫϑϩʔ
    1IPUPIUUQTqJDLSQ"6TP-
    

    View Slide

82. View Slide

83. ؾʹͳͬͨαΠτͷRSSΛ
    Feedlyʹ์ΓࠐΉ
    

    View Slide

84. View Slide

85. ҠಈதʹiOS൛ReederͰಡΉ
    ؾʹͳͬͨهࣄ͸StarΛ෇͚͓ͯ͘
    

    View Slide

86. View Slide

87. ͕࣌ؒऔΕ࣍ୈReeder for
    MacͰهࣄਫ਼ࠪ
    Ҡಈதʹ෇͚ͨStarͨ͠هࣄΛத৺ʹνΣοΫ
    

    View Slide

88. View Slide

89. ޙͰಡΈͦ͏ͳهࣄ͸
    PinboardʹϒοΫϚʔΫ
    ݱঢ়໾ʹཱͨͳͦ͏Ͱ΋ɺকདྷ͸࢖͏͔΋?͘Β͍Ͱ
    

    View Slide

90. View Slide

91. IFTTTͰPinboardͷλά෇͚
    ͨ͠΋ͷΛ֎෦αʔϏε࿈ܞ
    Pinboardͷλά͚ͩͷૢ࡞ͰReadabilityͳͲͱ࿈ܞͰ͖Δ
    

    View Slide

92. View Slide

93. ͔ͬ͠ΓಡΉ΂͖هࣄ͸
    Readabilty΁
    Pinboard͔Βλά෇͚͚ͩͰಡΊΔ
    

    View Slide

94. ࿈ܞ͢Ε͹Readability΋
    ReederͰಡΊΔ
    

    View Slide

95. ೳಈతʹௐ΂Δͱ͖͸
    Pinboard͔Β
    ͢Ͱʹಉ͡Α͏ͳ໰୊͕͋ͬͨΒ࣌ؒ୹ॖ
    

    View Slide

96. View Slide

97. άάΔ࣌ʹ͸Evernote΋׆༻
    Pinboard͔ΒࣗಈͰ࿈ܞ͢ΔͱɺChrome֦ு࢖͑͹
    ͜ͷΑ͏ʹҎલࣅͨݕࡧΛ͍ͯͨ͠Βදࣔ͞ΕΔ
    

    View Slide

98. View Slide

99. View Slide

100. ιʔγϟϧϒοΫϚʔΫͷ
     λάΛ؍ଌ
     ΞʔϦʔΞμϓλʔͷಈ޲͕෼͔Γ΍͍͢
     

     View Slide

101. ιʔγϟϧϒοΫϚʔΫͷ
     ྑ͍ޮՌ
     ࣗ෼ͷ؍ଌൣғ֎ͷ৘ใʹΞΫηε͠΍͍͢
     

     View Slide

102. ৘ใऩूͷ஫ҙ఺
     

     View Slide

103. ඞͣݪయΛࣗ෼ͰಡΉ
     ೳಈతͰ΋डಈతͰ΋ಉ༷͕ͩɺ
     ͜ΕΛ͠ͳ͍ͱ࠷ѱӕΛ௫·͞ΕΔ
     

     View Slide

104. ࣗ෼ͷϑΟʔυ͸͜ΕͰ͢
     http://layzie.d.pr/RkBt
     

     View Slide

105. ࠓճͷ࿩ͷ·ͱΊ
     

     View Slide

106. 10೥৐Γ੾Δ৘ใऩू
     • ͳΔ΂͘ **ӳޠ** Ͱ৘ใऩू
     • ΋ͪΖΜ೔ຊޠͷ৘ใ΋దٓʹ
     • ͲͪΒʹ͠Ζ1࣍৘ใ͕େࣄ
     • ͜Ε·Ͱ͜ͷํ๏Ͱ৐Γ੾ͬͨͷͰɺ͜Ε͔Β
     ΋πʔϧͳͲ͸มΘͬͯ΋جຊมΘΒͳ͍Μ͡Ό
     ͳ͍Ͱ͠ΐ͏͔
     

     View Slide

107. ࢀߟURL!
     ! •! Life goes on!
     ! •! Presentations by HIRAKI Satoru // Speaker Deck!
     ! •! Amazon.co.jpɿ ։ൃޮ཰ΛUP͢Δ GitٯҾ͖ೖ໳!
     ! •! Amazon.co.jpɿ ϑϩϯτΤϯυΤϯδχΞཆ੒ಡຊ!
     ! •! Amazon.co.jpɿ Web੍࡞ऀͷͨΊͷGitHubͷڭՊॻ νʔϜͷޮ཰Λ࠷େԽ͢Δڞಉ։ൃπʔϧ!
     ! •! JavaScript Garden!
     ! •! ඇಉظJavaScriptϓϩάϥϛϯά - HTML5ΞϓϦέʔγϣϯͷҝͷ$.Deferredͷύϫʔ - HTML5 Rocks!
     ! •! enja-oss!
     ! •! html5jӳޠ෦!
     ! •! Stack Overflow!
     ! •! Pinboard: bookmarks for Layzie!
     ! •! JSer.info!
     ! •! ϫβϊό | wazanova!
     ! •! POSTD | ւ֎ͷ࠷৽ςΫϊϩδʔܥχϡʔεΛ೔ຊޠͰ!
     ! •! Hacker News!
     ! •! JavaScript Weekly: A Free, Weekly Email Newsletter!
     ! •! HTML5 Weekly: A Free, Weekly Email Newsletter!
     ! •! Node Weekly: A Free, Weekly Email Newsletter!
     ! •! feedly!
     ! •! Reeder for iOS!
     ! •! Reeder for Mac!
     ! •! Put the internet to work for you. - IFTTT!
     ! •! A Free Web & Mobile App for Reading Comfortably — Readability!
     ! •! Pinboard bookmarks tagged javascript!
     ! •! feedly.opml!
     

     View Slide

108. 1IPUPIUUQTqJDLSQ1G-U.
     Thank you! :)
     

     View Slide