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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠤ౻า ͞ͱ͏ ͋ΏΉ

Slide 3

Slide 3 text

ϋϯυϧωʔϜ BIPNV !

Slide 4

Slide 4 text

IUUQ BIPNV ೥ؒҡ࣋අˇ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ϑϩϯτΤϯυͷ ྲྀߦΓഇΓͱڑ཭ײ QIPUPIUUQTXXXGMJDLSDPNQIPUPTLJULBQIPUPHJSM

Slide 10

Slide 10 text

ϑϩϯτΤϯυք۾ͷ ϓϩμΫτ

Slide 11

Slide 11 text

(SVOUʁ(VMQʁ :FPNBOʁCSPDDPMJʁ

Slide 12

Slide 12 text

TUZMFEPDDPʁ,44ʁ IPMPHSBNʁ

Slide 13

Slide 13 text

4BTTʁ-&44ʁ 4UZMVTʁ3FXPSLʁ

Slide 14

Slide 14 text

#BDLCPOFKTʁ ,OPDLPVU+4ʁ &NCFSKTʁ "OHVMBS+4ʁ 3FBDUʁ

Slide 15

Slide 15 text

೥͘Β͍લ͔Β ٸ଎ʹ૿Ճͯ͠ ೖΕସΘΓଓ͚͍ͯΔ ˞ݸਓͷײ૝Ͱ͢

Slide 16

Slide 16 text

ೖΕସΘΓ͕ ૣ͗͢ͳ͍͔

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ͳͥʁ ʮރΕٕͨज़ʯͷϝϦοτΛ͋·Γ׆͔ͦ͏ͱ͠ͳ͍ͷ͔ʁ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ྲྀߦΓഇΓͱ ্खʹ෇͖߹͍͍ͨ

Slide 23

Slide 23 text

ݱࡏͷτϨϯυͱ બఆͷࢹ఺ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

λεΫϥϯφʔ ք۾

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ΤίγεςϜͷൃల۩߹ ઃఆϑΝΠϧͬΆ͍ʁ εΫϦϓτͬΆ͍ʁ

Slide 29

Slide 29 text

(SVOU IUUQHSVOUKTDPN

Slide 30

Slide 30 text

grunt.initConfig({ sass: { // task dist: { // target options: { // options style: 'expanded' }, files: { // dest: source 'main.css': ‘main.scss’ } } } }); grunt.loadNpmTasks('grunt-contrib-sass');

Slide 31

Slide 31 text

grunt.initConfig sass: dist: options: style: 'expanded' files 'main.css': ‘main.scss’ ! grunt.loadNpmTasks 'grunt-contrib-sass'

Slide 32

Slide 32 text

(VMQ IUUQHVMQKTDPN

Slide 33

Slide 33 text

8FC4UBSUFS,JU IUUQTEFWFMPQFSTHPPHMFDPNXFCTUBSUFSLJUJOEFY

Slide 34

Slide 34 text

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 });

Slide 35

Slide 35 text

grunt.initConfig({ coffeehint: { src: [‘main.coffee’] }, coffeescript: { files: { 'main.js': ‘main.coffee’ } }, uglify: { files: { ‘main.min.js': ‘main.js’ } } }); λεΫOର৅ͷؔ܎ ϑΝΠϧʹରͯ͠ద༻͞Ε͍ͯΔ ෳ਺ͷλεΫ͕ࢄཚͯ͠ྲྀΕΛ௥͍ͮΒ͍

Slide 36

Slide 36 text

! gulp.task(‘jsbuild', function () { gulp.src(‘./main.coffee’) .pipe(coffeelint()) .pipe(coffee()) .pipe(uglify()) .pipe(gulp.dest(‘./‘)); }); OιʔεOλεΫͷؔ܎ ࢦఆͨ͠ιʔε͋Γ͖ͰλεΫΛ ྲྀΕΔΑ͏ʹద༻Ͱ͖ͯݟ௨͕͠ྑ͍ ͔͠͠ɺ+BWB4DSJQUͬΆ͍

Slide 37

Slide 37 text

$44ϓϩηοα ք۾

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

࢖͍͍ͨݴޠػೳ $44͔ΒͷҠߦɾֶशίετ ϓϦϓϩηεPSϙετϓϩηε

Slide 40

Slide 40 text

" " " DTT TBTT MFTT TUZM DTT ϓϦ ϓϩηε ϙετ ϓϩηε

Slide 41

Slide 41 text

ϓϦϓϩηε

Slide 42

Slide 42 text

4"44 IUUQTBTTMBOHDPN

Slide 43

Slide 43 text

-JC4BTT IUUQMJCTBTTPSH

Slide 44

Slide 44 text

-FTT IUUQMFTTDTTPSH

Slide 45

Slide 45 text

4UZMVT IUUQMFBSOCPPTUHJUIVCJPTUZMVT

Slide 46

Slide 46 text

SFXPSL IUUQTHJUIVCDPNSFXPSLDTTSFXPSL

Slide 47

Slide 47 text

TUZM IUUQTHJUIVCDPNWJTJPONFEJBTUZM

Slide 48

Slide 48 text

ϙετϓϩηε

Slide 49

Slide 49 text

1PTU$44 IUUQTHJUIVCDPNQPTUDTTQPTUDTT

Slide 50

Slide 50 text

"VUPQSFGJYJFS IUUQTHJUIVCDPNQPTUDTTBVUPQSFGJYFS

Slide 51

Slide 51 text

/* Sass with Compass */ * { @include box-sizing(border-box); } ! /* CSS (compiled) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Slide 52

Slide 52 text

/* CSS */ * { box-sizing: border-box; } ! /* CSS (autoprefixed) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Slide 53

Slide 53 text

+BWB4DSJQUϥΠϒϥϦ ք۾

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹ͍·΍࠷΋༏Εͨɹʻ ʉ:?:?:?:?:?:?:?:?:ʉ

Slide 56

Slide 56 text

ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ8FCΞϓϦ։ൃͷఆ൪ߏ੒ɹʻ ʉ:?:?:?:?:?:?:?:?:?:?:?:ʉ

Slide 57

Slide 57 text

ղܾ͠Α͏ͱ͍ͯ͠Δൣғ ΞʔΩςΫνϟϞσϧ %0.ςϯϓϨʔςΟϯά %BUB#JOEJOH 7JSUVBM%0. એݴతPS໋ྩత

Slide 58

Slide 58 text

#BDLCPOF+4 IUUQCBDLCPOFKTPSH

Slide 59

Slide 59 text

<%= foo %>

! 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); } });

Slide 60

Slide 60 text

"OHVMBS+4 IUUQTBOHVMBSKTPSH

Slide 61

Slide 61 text

! angular .module(‘app’) .controller(‘OuchCtrl’, function($scope) { ! $scope.foo = ‘bar’; ! $scope.onOuch = function() { alert(‘ouch!!’); }; });

Slide 62

Slide 62 text

3FBDU IUUQGBDFCPPLHJUIVCJPSFBDU

Slide 63

Slide 63 text

/** @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> ); } });

Slide 64

Slide 64 text

/** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return

Hello {this.props.name}

; } }); ! ! var HelloMessage = React.createClass({ displayName: 'HelloMessage', render : function() { return React.DOM.div(null, "Hello ", this.props.name); } });

Slide 65

Slide 65 text

ύοέʔδ؅ཧˍ ϞδϡʔϧγεςϜ ք۾

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

৭ʑ͋Δ͚Ͳɺ໾ׂͷҧ͏πʔϧ͕ଟ͍ ύοέʔδͷΠϯετʔϧิॿʁ ϥϯλΠϜPSϏϧυ࣌ͷґଘղܾʁ ඪ४࢓༷ͱͷޓ׵ੑ͸ʁ ͦΕͱ΋྆ํͷ໾ׂΛͰ͖Δ΋ͷʁ

Slide 68

Slide 68 text

ύοέʔδ؅ཧ

Slide 69

Slide 69 text

OQN IUUQTXXXOQNKTPSH

Slide 70

Slide 70 text

#PXFS IUUQCPXFSJP

Slide 71

Slide 71 text

ϞδϡʔϧγεςϜ

Slide 72

Slide 72 text

3FRVJSF+4 IUUQSFRVJSFKTPSH

Slide 73

Slide 73 text

# html ! # main.js define([‘module’], function(module) { alert(module.foo); // ‘bar’ }); ! # module.js define(function() { return {foo: ‘bar’} });

Slide 74

Slide 74 text

CSPXTFSJGZ IUUQCSPXTFSJGZPSH

Slide 75

Slide 75 text

#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’ };

Slide 76

Slide 76 text

XFCQBDL IUUQXFCQBDLHJUIVCJP

Slide 77

Slide 77 text

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") ] }

Slide 78

Slide 78 text

ඪ४࢓༷ͷք۾

Slide 79

Slide 79 text

͚ͩ͜͜ ී௨ʹ࣌੎ͷ࿩Ͱ͢

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

)5.-/JHIUMZ IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFS

Slide 82

Slide 82 text

ϨεϙϯγϒɾΠϝʔδɿ Ϣʔεέʔεͱೖ໳༻ͷίʔυαϯϓϧ IUUQTEFWPQFSBDPNBSUJDMFTKBSFTQPOTJWFJNBHFT

Slide 83

Slide 83 text

EJBMPHFMFNFOU.PEBMTNBEFFBTZ IUUQVQEBUFTIUNMSPDLTDPNEJBMPHFMFNFOU.PEBMTNBEFFBTZ

Slide 84

Slide 84 text

4FMFDUPST-FWFM IUUQEFWXPSHDTTXHTFMFDUPST

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

"MM4UBOEBSETBOE%SBGUT IUUQXXXXPSH53

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

5FNQMBUFT $VTUPN&MFNFOUT )5.-*NQPSUT 4IBEPX%0. Document#registerElement() Element#createShadowRoot()

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

&4 &4OFYU IBSNPOZ IUUQXJLJFDNBTDSJQUPSHEPLVQIQ JEIBSNPOZTQFDJGJDBUJPO@ESBGUT

Slide 92

Slide 92 text

USBDFVSDPNQJMFS IUUQTHJUIVCDPNHPPHMFUSBDFVSDPNQJMFS

Slide 93

Slide 93 text

UP IUUQTHJUIVCDPNTFCNDLUP

Slide 94

Slide 94 text

⏱ ͜ΕΒͷ৆ຯظݶ͕୹͍ τϨϯυͱͷ޲͖߹͍ํ ঺հͨ͠಺༰͸೥΋࣋ͨͳ͍Α͏ͳτϨϯυ͕΄ͱΜͲ Ͳ͏͢΂͖͔ʁ

Slide 95

Slide 95 text

ϑϩϯτΤϯμͷ औࣺબ୒ QIPUPIUUQTXXXGMJDLSDPNQIPUPTKNW

Slide 96

Slide 96 text

ٕज़͸ٕज़Ͱ͔͠ͳ͘ ͦΕΛҎͯͳʹΛ͢Δ͔

Slide 97

Slide 97 text

τϨϯυͷऔࣺબ୒

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

·ͱΊ

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

೥ઌͷͨΊ ࠓ਎ʹ͚͍ͭͨ͜ͱ

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

2VFTUJPOT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW