カジュアルなフロントエンドでこの先生きのこるには

Frontrend in KANAZAWA http://labo.dmm.com/frontrend/ で使用したスライドです。本編40分。

Transcript

1. ΧδϡΞϧͳ
   ϑϩϯτΤϯυͰ
   ͜ͷઌੜ͖ͷ͜Δʹ͸ "ZVNV
   4BUP
   0DU
   
   
   'SPOUSFOE
   *O
   ,BOB[BXB QIPUP
   IUUQTXXXGMJDLSDPNQIPUPT!/
2. ࠤ౻
   า ͞ͱ͏ ͋ΏΉ
3. ϋϯυϧωʔϜ BIPNV !
4. IUUQ BIPNV ೥ؒҡ࣋අ
   ˇ 
6. 1SPGJMF גࣜձࣾαΠόʔΤʔδΣϯτ
   Ξϝʔόࣄۀຊ෦
   8FCϑϩϯτΤϯυΤϯδχΞ
   'SPOUFOE
   
   /PEF
   
   "OESPJE
   
   "84
   )5.-
   &YQFSUTKQ
   ൒༓ྶ෦һ
7. ϑϩϯτΤϯυͷதͰ΋
   ςΫχΧϧͳ໘ʹ
   ภ͓ͬͨ࿩Ͱ͢
8. "HFOEB ϑϩϯτΤϯυͷྲྀߦΓഇΓͱڑ཭ײ
   ݱࡏͷτϨϯυͱબఆͷࢹ఺
   ϑϩϯτΤϯμͷऔࣺબ୒
9. ϑϩϯτΤϯυͷ
   ྲྀߦΓഇΓͱڑ཭ײ QIPUP
   IUUQTXXXGMJDLSDPNQIPUPTLJULBQIPUPHJSM
10. ϑϩϯτΤϯυք۾ͷ
    ϓϩμΫτ
11. (SVOUʁ
    (VMQʁ
    :FPNBOʁ
    CSPDDPMJʁ
12. TUZMFEPDDPʁ
    ,44ʁ
    IPMPHSBNʁ
13. 4BTTʁ
    -&44ʁ
    4UZMVTʁ
    3FXPSLʁ
14. #BDLCPOFKTʁ
    ,OPDLPVU+4ʁ
    &NCFSKTʁ
    "OHVMBS+4ʁ
    3FBDUʁ
15. ೥͘Β͍લ͔Β
    ٸ଎ʹ૿Ճͯ͠
    ೖΕସΘΓଓ͚͍ͯΔ ˞ݸਓͷײ૝Ͱ͢
16. ೖΕସΘΓ͕
    ૣ͗͢ͳ͍͔
19. ރΕΔલʹ࣍ͷٕज़΁
    ৐Γ׵͍͑ͯ͘ ࠓ·ͰͷܦݧΛશࣺͯͯΔΘ͚Ͱ͸ͳ͍͕
    ͍͘Β͔ͷֶशίετ͸ඞཁʹͳΔ
20. ͳͥʁ ʮރΕٕͨज़ʯͷϝϦοτΛ͋·Γ׆͔ͦ͏ͱ͠ͳ͍ͷ͔ʁ
21. ࣮ߦ؀ڥͷଟ༷Խ
    σόΠεͷੑೳ޲্ ߴੑೳʹͳΕ͹දݱ͕޿͕Γɺ࡞Δ෺͕มΘΕ͹࡞Γํ΋มΘΔ
22. ྲྀߦΓഇΓͱ
    ্खʹ෇͖߹͍͍ͨ
23. ݱࡏͷτϨϯυͱ
    બఆͷࢹ఺ QIPUP
    IUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW
24.  λεΫϥϯφʔ
     $44ϓϩηοα
     +BWB4DSJQUϥΠϒϥϦ
     ύοέʔδ؅ཧ
     ඪ४࢓༷
    )5.-$44+BWB4DSJQU
25. ! ࠷΋ॏཁͳͷ͸
    ࢹ఺ ͲΜͳϝϦοτΛڗड͢ΔͨΊʹɺͲΜͳΞϓϩʔνΛબͿͷ͔
    ࢹ఺͓͑͑͞͞Ε͹ɺࣗ෼Ͱ൑அͰ͖Δ
26. λεΫϥϯφʔ
    ք۾
28.  ΤίγεςϜͷൃల۩߹
     ઃఆϑΝΠϧͬΆ͍ʁ
     εΫϦϓτͬΆ͍ʁ
29. (SVOU IUUQHSVOUKTDPN
30. grunt.initConfig({ sass: { // task dist: { // target options: { // options style: 'expanded' }, files: { // dest: source 'main.css': ‘main.scss’ } } } }); grunt.loadNpmTasks('grunt-contrib-sass');
31. grunt.initConfig sass: dist: options: style: 'expanded' files 'main.css': ‘main.scss’ ! grunt.loadNpmTasks 'grunt-contrib-sass'
32. (VMQ IUUQHVMQKTDPN
33. 8FC
    4UBSUFS
    ,JU IUUQTEFWFMPQFSTHPPHMFDPNXFCTUBSUFSLJUJOEFY
34. var gulp = require('gulp'); var sass = require(‘gulp-ruby-sass') ! gulp.task('sass', function () { gulp.src(‘./main.scss’) // source .pipe(sass({ // task style : ‘expanded' // options })) .pipe(gulp.dest(‘./‘));// dest });
35. grunt.initConfig({ coffeehint: { src: [‘main.coffee’] }, coffeescript: { files: { 'main.js': ‘main.coffee’ } }, uglify: { files: { ‘main.min.js': ‘main.js’ } } }); λεΫOର৅
    ͷؔ܎ ϑΝΠϧʹରͯ͠ద༻͞Ε͍ͯΔ
    ෳ਺ͷλεΫ͕ࢄཚͯ͠ྲྀΕΛ௥͍ͮΒ͍
36. ! gulp.task(‘jsbuild', function () { gulp.src(‘./main.coffee’) .pipe(coffeelint()) .pipe(coffee()) .pipe(uglify()) .pipe(gulp.dest(‘./‘)); }); OιʔεOλεΫ
    ͷؔ܎ ࢦఆͨ͠ιʔε͋Γ͖ͰλεΫΛ
    ྲྀΕΔΑ͏ʹద༻Ͱ͖ͯݟ௨͕͠ྑ͍
    ͔͠͠ɺ+BWB4DSJQUͬΆ͍
37. $44ϓϩηοα
    ք۾
39.  ࢖͍͍ͨݴޠػೳ
     $44͔ΒͷҠߦɾֶशίετ
     ϓϦϓϩηε
    PS
    ϙετϓϩηε
40. " " " DTT TBTT
    MFTT
    TUZM DTT ϓϦ
    ϓϩηε ϙετ
    ϓϩηε
41. ϓϦϓϩηε
42. 4"44 IUUQTBTTMBOHDPN
43. -JC4BTT IUUQMJCTBTTPSH
44. -FTT IUUQMFTTDTTPSH
45. 4UZMVT IUUQMFBSOCPPTUHJUIVCJPTUZMVT
46. SFXPSL IUUQTHJUIVCDPNSFXPSLDTTSFXPSL
47. TUZM IUUQTHJUIVCDPNWJTJPONFEJBTUZM
48. ϙετϓϩηε
49. 1PTU$44 IUUQTHJUIVCDPNQPTUDTTQPTUDTT
50. "VUPQSFGJYJFS IUUQTHJUIVCDPNQPTUDTTBVUPQSFGJYFS
51. /* Sass with Compass */ * { @include box-sizing(border-box); } ! /* CSS (compiled) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
52. /* CSS */ * { box-sizing: border-box; } ! /* CSS (autoprefixed) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
53. +BWB4DSJQUϥΠϒϥϦ ք۾
55. ʊਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹ͍·΍࠷΋༏Εͨɹʻ
    ʉ:?:?:?:?:?:?:?:?:ʉ
56. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ
    ʼɹ8FCΞϓϦ։ൃͷఆ൪ߏ੒ɹʻ
    ʉ:?:?:?:?:?:?:?:?:?:?:?:ʉ
57.  ղܾ͠Α͏ͱ͍ͯ͠Δൣғ
     ΞʔΩςΫνϟϞσϧ
     %0.ςϯϓϨʔςΟϯά
     %BUB
    #JOEJOH
     7JSUVBM
    %0.
     એݴత
    PS
    ໋ྩత
58. #BDLCPOF+4 IUUQCBDLCPOFKTPSH
59. <div> <button class=“js-ouch”><%= foo %></button> </div> ! Backbone.View.extend({ initialize: function() { this.render(); }, events: { ‘click .js-ouch’: ‘onOuch’ }, onOuch: function() { alert(‘ouch!!’); }, render: function() { var newHtml = ejsTmpl({foo: ‘bar’}); return this.$el.html(newHtml); } });
60. "OHVMBS+4 IUUQTBOHVMBSKTPSH
61. <div ng-contoller=“OuchCtrl”> <button ng-click=“onOuch()”>{{foo}}</button> </div> ! angular .module(‘app’) .controller(‘OuchCtrl’, function($scope) { ! $scope.foo = ‘bar’; ! $scope.onOuch = function() { alert(‘ouch!!’); }; });
62. 3FBDU IUUQGBDFCPPLHJUIVCJPSFBDU
63. <script type="text/jsx"> /** @jsx React.DOM */ var OuchComponent = React.createClass({ onOuch: function() { alert('ouch!!'); }, getInitialState: function() { return {foo: 'bar'}; }, render: function() { return ( <div> <button onClick={this.onOuch}> {this.state.foo}</button> </div> ); } }); </script>
64. /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ! ! var HelloMessage = React.createClass({ displayName: 'HelloMessage', render : function() { return React.DOM.div(null, "Hello ", this.props.name); } });
65. ύοέʔδ؅ཧˍ
    ϞδϡʔϧγεςϜ
    ք۾
67.  ৭ʑ͋Δ͚Ͳɺ໾ׂͷҧ͏πʔϧ͕ଟ͍
     ύοέʔδͷΠϯετʔϧิॿʁ
     ϥϯλΠϜ
    PS
    Ϗϧυ࣌ͷґଘղܾʁ
     ඪ४࢓༷ͱͷޓ׵ੑ͸ʁ
     ͦΕͱ΋྆ํͷ໾ׂΛͰ͖Δ΋ͷʁ
68. ύοέʔδ؅ཧ
69. OQN IUUQTXXXOQNKTPSH
70. #PXFS IUUQCPXFSJP
71. ϞδϡʔϧγεςϜ
72. 3FRVJSF+4 IUUQSFRVJSFKTPSH
73. # html <script src="require.js" data- main="main.js" async></script> ! # main.js define([‘module’], function(module) { alert(module.foo); // ‘bar’ }); ! # module.js define(function() { return {foo: ‘bar’} });
74. CSPXTFSJGZ IUUQCSPXTFSJGZPSH
75. #index.js ! // from node_modules var htmlparser = require(‘htmlparser’); // from local var module = require(‘./module’); // from bower ( recommend: debowerify ) var jquery = require(‘./bower_components/jquery/ dist/jquery.js’) ! - - - - - - - - - - - - - - - - - - - - - - - - ! #module.js ! module.exports = { foo: ‘bar’ };
76. XFCQBDL IUUQXFCQBDLHJUIVCJP
77. var path = require("path"); var CommonsChunkPlugin = require("../../lib/ optimize/CommonsChunkPlugin"); module.exports = { entry: { pageA: "./pageA", pageB: "./pageB" }, output: { path: path.join(__dirname, "js"), filename: "[name].bundle.js", chunkFilename: "[id].chunk.js" }, plugins: [ new CommonsChunkPlugin("commons.js") ] }
78. ඪ४࢓༷ͷք۾
79. ͚ͩ͜͜
    ී௨ʹ࣌੎ͷ࿩Ͱ͢
81. )5.-
    
    /JHIUMZ IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFS
82. ϨεϙϯγϒɾΠϝʔδɿ
    Ϣʔεέʔεͱೖ໳༻ͷίʔυαϯϓϧ IUUQTEFWPQFSBDPNBSUJDMFTKBSFTQPOTJWFJNBHFT
83. EJBMPH
    FMFNFOU
    .PEBMT
    NBEF
    FBTZ IUUQVQEBUFTIUNMSPDLTDPNEJBMPHFMFNFOU.PEBMTNBEFFBTZ
84. 4FMFDUPST
    -FWFM
     IUUQEFWXPSHDTTXHTFMFDUPST
85. $44
    41&$*'*$"5*0/4 IUUQXXXXPSH4UZMF$44DVSSFOUXPSL
86. "MM
    4UBOEBSET
    BOE
    %SBGUT IUUQXXXXPSH53
89. 5FNQMBUFT $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0. <template></template> Document#registerElement() <link rel=“import” href=“…”> Element#createShadowRoot()
91. &4
    &4OFYU
    IBSNPOZ IUUQXJLJFDNBTDSJQUPSHEPLVQIQ JEIBSNPOZTQFDJGJDBUJPO@ESBGUT
92. USBDFVSDPNQJMFS IUUQTHJUIVCDPNHPPHMFUSBDFVSDPNQJMFS
93. UP IUUQTHJUIVCDPNTFCNDLUP
94. ⏱ ͜ΕΒͷ৆ຯظݶ͕୹͍
    τϨϯυͱͷ޲͖߹͍ํ ঺հͨ͠಺༰͸೥΋࣋ͨͳ͍Α͏ͳτϨϯυ͕΄ͱΜͲ
    Ͳ͏͢΂͖͔ʁ
95. ϑϩϯτΤϯμͷ
    औࣺબ୒ QIPUP
    IUUQTXXXGMJDLSDPNQIPUPTKNW
96. ٕज़͸ٕज़Ͱ͔͠ͳ͘
    ͦΕΛҎͯͳʹΛ͢Δ͔
97. τϨϯυͷऔࣺબ୒
98. ϩʔϧϞσϧʹ߹ͬͨ
    τϨϯυΛֶͼଓ͚Δ
99. ಘҙͷΞχϝʔγϣϯͰ ήʔϜΛ࡞Δͻͱʁ
100. σβΠϯͷཱҊ͔Β
     ࣮૷·ͰϫϯετοϓͰ ߦ͑Δͻͱʁ
101. શମͷΞʔΩςΫτΛ
     ౿·͑ͯϑϩϯτྖҬΛ ؅ཧͰ͖Δͻͱʁ
102. ΞΫηγϏϦςΟ࣮૷ͷ
     ઐ໳Ոʁ
103. ٕज़ɾσβΠϯɾϏδωεͷ
     ؒΛऔΓ࣋ͬͯ
     σΟϨΫγϣϯͰ͖Δͻͱʁ
104. ֶश͢΂͖͸
     ٕज़τϨϯυ͚ͩͰ͸
     ͳ͍ͷ͔΋͠Εͳ͍
105. ແҙࣝʹ͍ͯ͠Δ൑அΛ
     ໌֬Խ͢Δ͚ͩͰ
     ීஈͷֶͼ͕มΘΔ
106. ·ͱΊ
107.  ϑϩϯτͷྲྀߦ͸೥͘Β͍લ͔Βɹɹɹ ٸ଎ʹมԽ͢ΔΑ͏ʹͳ͍ͬͯΔ
      ࣗΒͷࢹ఺ͱ൑அΛ࣋ͬͯτϨϯυʹɹɹɹ ྲྀ͞Εͯ͠·Θͳ͍Α͏ʹ͢Δ
      ϩʔϧϞσϧ͔Βٯࢉͯࣗ͠෼ʹͱͬͯ ຊ౰ʹඞཁͳٕज़τϨϯυΛֶͿ
108. ೥ઌͷͨΊ
     ࠓ਎ʹ͚͍ͭͨ͜ͱ
109. ࣗ෼ͷϩʔϧϞσϧ͔Β
     ٯࢉֶͯ͠ͼଓ͚Δ͜ͱ
110. ೥ઌੜ͖ͷ͜Δʂ ϩʔϧϞσϧ΋೥ͷؒʹΞοϓσʔτ͠ଓ͚Α͏ʂ
111. 2VFTUJPOT
     
     IUUQBIPNV
     
     
     !BIPNV
     
     
     HJUIVCDPNBIPNV
     ! ⌂ QIPUP
     IUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW