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

Transcript

1. ΧδϡΞϧͳ
   ϑϩϯτΤϯυͰ
   ͜ͷઌੜ͖ͷ͜Δʹ͸ "ZVNV
   4BUP
   0DU
   
   
   'SPOUSFOE
   *O
   ,BOB[BXB QIPUP
   IUUQTXXXGMJDLSDPNQIPUPT!/

2. ࠤ౻
   า ͞ͱ͏ ͋ΏΉ

3. ϋϯυϧωʔϜ BIPNV !

4. IUUQ BIPNV ೥ؒҡ࣋අ
   ˇ 

5. None

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. ೖΕସΘΓ͕
    ૣ͗͢ͳ͍͔

17. None
18. None

19. ރΕΔલʹ࣍ͷٕज़΁
    ৐Γ׵͍͑ͯ͘ ࠓ·ͰͷܦݧΛશࣺͯͯΔΘ͚Ͱ͸ͳ͍͕
    ͍͘Β͔ͷֶशίετ͸ඞཁʹͳΔ

20. ͳͥʁ ʮރΕٕͨज़ʯͷϝϦοτΛ͋·Γ׆͔ͦ͏ͱ͠ͳ͍ͷ͔ʁ

21. ࣮ߦ؀ڥͷଟ༷Խ
    σόΠεͷੑೳ޲্ ߴੑೳʹͳΕ͹දݱ͕޿͕Γɺ࡞Δ෺͕มΘΕ͹࡞Γํ΋มΘΔ

22. ྲྀߦΓഇΓͱ
    ্खʹ෇͖߹͍͍ͨ

23. ݱࡏͷτϨϯυͱ
    બఆͷࢹ఺ QIPUP
    IUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW

24.  λεΫϥϯφʔ
     $44ϓϩηοα
     +BWB4DSJQUϥΠϒϥϦ
     ύοέʔδ؅ཧ
     ඪ४࢓༷
    

    )5.-$44+BWB4DSJQU

25. ! ࠷΋ॏཁͳͷ͸
    ࢹ఺ ͲΜͳϝϦοτΛڗड͢ΔͨΊʹɺͲΜͳΞϓϩʔνΛબͿͷ͔
    ࢹ఺͓͑͑͞͞Ε͹ɺࣗ෼Ͱ൑அͰ͖Δ

26. λεΫϥϯφʔ
    ք۾

27. None

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ϓϩηοα
    ք۾

38. None

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ϥΠϒϥϦ ք۾

54. None

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. ύοέʔδ؅ཧˍ
    ϞδϡʔϧγεςϜ
    ք۾

66. None

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. ͚ͩ͜͜
    ී௨ʹ࣌੎ͷ࿩Ͱ͢

80. None

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

87. None
88. None

89. 5FNQMBUFT $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0. <template></template> Document#registerElement() <link rel=“import” href=“…”> Element#createShadowRoot()

90. None

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