Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
October 18, 2014

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

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

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

October 18, 2014
Tweet

Transcript

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

  2. ࠤ౻า ͞ͱ͏ ͋ΏΉ

  3. ϋϯυϧωʔϜ BIPNV !

  4. IUUQ BIPNV ೥ؒҡ࣋අˇ 

  5. None
  6. 1SPGJMF גࣜձࣾαΠόʔΤʔδΣϯτ Ξϝʔόࣄۀຊ෦ 8FCϑϩϯτΤϯυΤϯδχΞ 'SPOUFOE /PEF "OESPJE "84 )5.-&YQFSUTKQ൒༓ྶ෦һ

  7. ϑϩϯτΤϯυͷதͰ΋ ςΫχΧϧͳ໘ʹ ภ͓ͬͨ࿩Ͱ͢

  8. "HFOEB ϑϩϯτΤϯυͷྲྀߦΓഇΓͱڑ཭ײ ݱࡏͷτϨϯυͱબఆͷࢹ఺ ϑϩϯτΤϯμͷऔࣺબ୒

  9. ϑϩϯτΤϯυͷ ྲྀߦΓഇΓͱڑ཭ײ QIPUPIUUQTXXXGMJDLSDPNQIPUPTLJULBQIPUPHJSM

  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. ݱࡏͷτϨϯυͱ બఆͷࢹ఺ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW

  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. 8FC4UBSUFS,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. EJBMPHFMFNFOU.PEBMTNBEFFBTZ IUUQVQEBUFTIUNMSPDLTDPNEJBMPHFMFNFOU.PEBMTNBEFFBTZ

  84. 4FMFDUPST-FWFM IUUQEFWXPSHDTTXHTFMFDUPST

  85. $4441&$*'*$"5*0/4 IUUQXXXXPSH4UZMF$44DVSSFOUXPSL

  86. "MM4UBOEBSETBOE%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. ϑϩϯτΤϯμͷ औࣺબ୒ QIPUPIUUQTXXXGMJDLSDPNQIPUPTKNW

  96. ٕज़͸ٕज़Ͱ͔͠ͳ͘ ͦΕΛҎͯͳʹΛ͢Δ͔

  97. τϨϯυͷऔࣺબ୒

  98. ϩʔϧϞσϧʹ߹ͬͨ τϨϯυΛֶͼଓ͚Δ

  99. ಘҙͷΞχϝʔγϣϯͰ ήʔϜΛ࡞Δͻͱʁ

  100. σβΠϯͷཱҊ͔Β ࣮૷·ͰϫϯετοϓͰ ߦ͑Δͻͱʁ

  101. શମͷΞʔΩςΫτΛ ౿·͑ͯϑϩϯτྖҬΛ ؅ཧͰ͖Δͻͱʁ

  102. ΞΫηγϏϦςΟ࣮૷ͷ ઐ໳Ոʁ

  103. ٕज़ɾσβΠϯɾϏδωεͷ ؒΛऔΓ࣋ͬͯ σΟϨΫγϣϯͰ͖Δͻͱʁ

  104. ֶश͢΂͖͸ ٕज़τϨϯυ͚ͩͰ͸ ͳ͍ͷ͔΋͠Εͳ͍

  105. ແҙࣝʹ͍ͯ͠Δ൑அΛ ໌֬Խ͢Δ͚ͩͰ ීஈͷֶͼ͕มΘΔ

  106. ·ͱΊ

  107.  ϑϩϯτͷྲྀߦ͸೥͘Β͍લ͔Βɹɹɹ ٸ଎ʹมԽ͢ΔΑ͏ʹͳ͍ͬͯΔ  ࣗΒͷࢹ఺ͱ൑அΛ࣋ͬͯτϨϯυʹɹɹɹ ྲྀ͞Εͯ͠·Θͳ͍Α͏ʹ͢Δ  ϩʔϧϞσϧ͔Βٯࢉͯࣗ͠෼ʹͱͬͯ ຊ౰ʹඞཁͳٕज़τϨϯυΛֶͿ

  108. ೥ઌͷͨΊ ࠓ਎ʹ͚͍ͭͨ͜ͱ

  109. ࣗ෼ͷϩʔϧϞσϧ͔Β ٯࢉֶͯ͠ͼଓ͚Δ͜ͱ

  110. ೥ઌੜ͖ͷ͜Δʂ ϩʔϧϞσϧ΋೥ͷؒʹΞοϓσʔτ͠ଓ͚Α͏ʂ

  111. 2VFTUJPOT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW