JavaScriptフロントエンド開発の昨今

+BWB4DSJQUϑϩϯτΤϯυ ։ൃͷࡢࠓ !OBPZB@JUP

͜Μʹͪ͸

࿩ͷྲྀΕ •  )5.-ΞϓϦέʔγϣϯΞηϯϒϥ •  ˢΛݟΔͱ+4։ൃͷτϨϯυ͕Θ͔Δ •  .7˓ϑϨʔϜϫʔΫ •  ςετ • 
·ͱΊϑϩϯτΤϯυ։ൃ࣮ࡍͷͱ͜Ζ

ΞϓϦέʔγϣϯαΠτΞηϯϒϥ ϑϩϯτΤϯυΞϓϦέʔγϣϯ੩తαΠτͷ ఆ൪ΞηοτΛ·ͱΊͯηοτΞοϓ $ middleman init -‐–template=slim

.JEEMFNBOͰͰ͖ͯ·͢

˓˓Ξηϯϒϥ •  NBTN HBT •  αΠτΞηϯϒϥ – .JEEMFNBO •  ελςΟοΫαΠτδΣωϨʔλ • 
ΞϓϦέʔγϣϯΞηϯϒϥ – :FPNBO #SVODIJP •  +BWB4DSJQUΞϓϦέʔγϣϯʹൺॏ

ZPXFCBQQ

$ yo webapp $ grunt server $ grunt
test $ grunt build

:FPNBOHFOFSBUPSXFCBQQ •  (SVOUpMFKT •  CPXFSSD •  #PPUTUSBQGPS4BTT •  3FRVJSF+4 • 
.PEFSOJ[S • 

ΞϓϦέʔγϣϯΞηϯϒϥͷ࣮ࡍ •  ։ൃ΍ͬͯΔͱͦͷ͏ͪඞཁʹͳΔಓ۩͕ ೖ͍ͬͯΔ – ϕετɾϓϥΫςΟε •  ͢ͳΘͪߏ੒͔ΒτϨϯυ͕ݟ͑Δ

:FPNBOͷߏ੒ཁૉ •  (SVOUλεΫϥϯφʔ •  #PXFSύοέʔδ؅ཧ •  :P4DB⒎PME Ξηοτͷੜ੒

(SVOUͬͯ •  /PEFKTϕʔεͷλεΫϥϯφʔ – $P⒎FF΍4BTTΛίϯύΠϧ͢Δ – ϛχϑΝΠ͢Δ – ಈ࡞֬ೝ༻ͷ)551αʔόʔ্ཱͪ͛Δ – -JWF3FMPBEͰߋ৽ʹ߹Θͤͯϒϥ΢βΛࣗ ಈͰϦϩʔυ͢Δ – σϓϩΠ༻ͷ֤छλεΫΛ·ͱΊ࣮ͯߦ͢Δ

(SVOUʹ͍ͭͯৄ͘͠͸ŋŋŋ ൃചͷ8&# %#13&44Λ଴ͯ

#PXFS •  ϥΠϒϥϦͷόʔδϣϯɾґଘؔ܎؅ཧ – ཁ͸ϑϩϯτΤϯυΞϓϦ༻ͷ#VOEMFS $ cat bower.json {
"name": "myapp", "version": "0.0.0", "dependencies": { "sass-‐bootstrap": "~3.0.0", "requirejs": "~2.1.8", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "devDependencies": {} } $ bower install

/PEFKT ŋŋŋͱ͍͏Θ͚Ͱ࠷ۙͷϑϩϯτΤϯυ։ൃ ͸/PEFKTʹΑͬͯࢧ͑ΒΕ͍ͯ·͢

:FPNBOHFOFSBUPS •  ZPHFOFSBUPSOBNF •  ͍Ζ͍Ζ͋Δ

"OHVMBS+4ͷ͕Ұ൪ਓؾ

HFOFSBUPSBOHVMBS •  "OHVMBS+4.7 ϑϨʔϜϫʔΫ •  ςετؔ࿈ –  LBSNBϦϞʔτςετϥϯφʔ –  +BTNJOFςεςΟϯάϑϨʔϜϫʔΫ
–  1IBOUPN+4ϔουϨεϒϥ΢β –  USBWJTZNMܧଓతΠϯςάϨʔγϣϯ •  (SVOUpMFKT •  CPXFSSD •  KTIJOUSD •  FEJUPSDPOpH

ͳΜ͔͍Ζ͍Ζ͋Γ·͢Ͷ

.7˓ϑϨʔϜϫʔΫ ͔Βݟ͍͖ͯ·͠ΐ͏

.7˓ϑϨʔϜϫʔΫ h"p://www.slideshare.net/OmasaYusaku/angular-‐js-‐orbackbonejs

h"p://wazanova.jp/post/63527486760/ruby-‐on-‐rails-‐angularjs-‐node-‐js

JO 0DU ͋Μ·Γ ؾʹ͠ͳ͍

ͳͥ.7˓ϑϨʔϜϫʔΫ •  γϯάϧϖʔδΞϓϦέʔγϣϯ •  K2VFSZ஍ࠈ •  όϦσʔγϣϯ
•  QVTI4UBUF

σʔλόΠϯσΟϯά͕ॏཁ ˞ݸਓతݟղͰ͋ΓࣾΛ୅ද͢ΔҎԼུ

ཁ͸ɺ͜Ε͕͍ͨ͠ Model View View Ϟσϧ͕มߋ͞ΕͨΒŋŋŋ ը໘Λߋ৽ ը໘Λߋ৽ ੲͱҧͬͯ+4Ͱը໘͙Γ͙Γߋ৽͢ΔΑ͏ʹͳͬͨ͠ Πϕϯτ

#BDLCPOFKT.PEFMͱ 7JFXͷόΠϯυ class TagsView extends Backbone.View tagName: 'ul'
initialize: () -‐> @listenTo @collection, 'add', @addTag addTag: (tag) -‐> tagView = new TagView model:tag @$el.append tagView.render().el render: @collection.each (tag) => @addTag tag return @ # Tags extends Backbone.Collection tags = new Tags [] tagsView = new TagsView collection:tags $('#tags-‐view').html tagsView.render().el

TagsView Backbone.View Tags Backbone.Collection ೖྗΠϕϯτ Ϟσϧߋ৽Πϕϯτ

"OHVMBS+4૒ํ޲σʔλόΠ ϯσΟϯά <ul> <li ng-‐repeat="todo in todo_list">
<input type="checkbox" ng-‐model="todo.state" /> {{todo.title}} </li> </ul> var controller = app.controller('TodoCtrl', function ($scope, todo_list) { $scope.todo_list = todo_list; $scope.addTodo = function() { $scope.todo_list.push( { "title": $scope.todo.title, "state": $scope.todo.state } ); }; });

<li ng-‐repeat="todo in todo_list"> {{todo.title}} </li> $scope.
todo_list όΠϯυ

+4.7˓ϑϨʔϜϫʔΫ •  ݸਓతͳݟཱͯͰ͸ŋŋŋ –  ʮ.ˠ7΁ͷ௨஌ʯͷύλʔϯΛओ࣠ʹपลΛݻΊͨ΋ͷ •  όΠϯσΟϯάΛ͠΍͘͢㱺ΞϓϦέʔγϣϯߏ଄Խ •  ͦͷ΄͔ศརػೳ – 
ϧʔςΟϯά –  ςϯϓϨʔτ –  όϦσʔγϣϯ –  ը໘ભҠ •  ΑͬͯɺσʔλϞσϧͷߋ৽ʹରͯ͠ը໘͕Ͳͷఔ౓ͲͷΑ ͏ʹ࿈ಈ͢Δඞཁ͕͋Δ͔ɺͱ͍͏ࢹ఺Ͱબఆ͢Δͱྑ͍

ૄ݁߹Λࢧ͑Δٕज़ •  #BDLCPOFKT –  0CTFSWFSʹΑΔ.PEFM7JFXͷ෼཭ –  #BDLCPOFKTͷ௨஌ύλʔϯ •  "OHVMBS+4 – 
૒ํ޲σʔλόΠϯσΟϯά –  %FQFOEFODZ*OKFDUJPO –  ϑϨʔϜϫʔΫͷڧΊͷ੍໿ •  &NCFSKT –  ͳΜ͔σʔλόΠϯσΟϯάपΓ͕͍͚ͯΔΒ͍͠ •  0CKFDUPCTFSWF –  J04ͷ,70Έ͍ͨͳͷɻ࣍ੈ୅+BWB4DSJQU –  ݱঢ়Ͳ͏ͳͬͯΔΜͰ͠ΐ͏

ςετ͠қ͘ͳͬͪΌ͍·ͨ͠ ͱ͜ΖͰΞϓϦέʔγϣϯߏ଄ԽʹΑͬͯ

ͦ͏ͩɺ +4΋ ςετ͠Α͏

HFOFSBUPSBOHVMBS •  "OHVMBS+4.7 ϑϨʔϜϫʔΫ •  ςετؔ࿈ –  LBSNBϦϞʔτςετϥϯφʔ –  +BTNJOFςεςΟϯάϑϨʔϜϫʔΫ
–  1IBOUPN+4ϔουϨεϒϥ΢β –  USBWJTZNMܧଓతΠϯςάϨʔγϣϯ •  (SVOUpMFKT •  CPXFSSD •  KTIJOUSD •  FEJUPSDPOpH

ϞοΫ ϥΠϒϥϦ Ξαʔγϣϯ ϥΠϒϥϦ ςεςΟϯά ϑϨʔϜϫʔΫ ϦϞʔτ
ςετϥϯφʔ ࣮ߦ ؀ڥ Jasmine Sinon.JS QUnit, JsUnit expect.js Chai Mocha Testem, Karma JsTestDriver Buster.JS ࣮ϒϥ΢β IE, Chrome, FirefoxͳͲ ϔουϨεϒϥ΢β PhantomJS ϒϥ΢βγϛϡϨʔλ Node.js + jsdom Rhino + Envjs ʰ8&# %#13&447P+BWB4DSJQU׆༻࠷લઢୈճʱΑΓ

ϞοΫ ϥΠϒϥϦ Ξαʔγϣϯ ϥΠϒϥϦ ςεςΟϯά ϑϨʔϜϫʔΫ ϦϞʔτ
ςετϥϯφʔ ࣮ߦ ؀ڥ Jasmine Sinon.JS QUnit, JsUnit expect.js Chai Mocha Testem / Karma JsTestDriver Buster.JS ࣮ϒϥ΢β IE, Chrome, FirefoxͳͲ ϔουϨεϒϥ΢β PhantomJS ϒϥ΢βγϛϡϨʔλ Node.js + jsdom Rhino + Envjs

ςεςΟϯάϑϨʔϜϫʔΫ •  #%%ελΠϧ͕ਓؾ Լ͸+BTNJOF describe('Controller: TodoCtrl', function () {
beforeEach(module('angularApp')); var TodoCtrl, scope; beforeEach(inject(function($controller, $rootScope) { scope = $rootScope.$new(); TodoCtrl = $controller('TodoCtrl', { $scope: scope }); })); it('should attach a list of todos to the scope', function () { expect(scope.todo_list.length).toBe(1); }); });

+BTNJOF .PDIB •  શ෦ೖΓͷ+BTNJOF •  BHOPTUJDͳ.PDIB – ϞοΫελϒ4JOPO+4 – ΞαʔγϣϯFYQFDUKTɺ$IBJ ࣗ෼͸NPDIB FYQFDUKT
4JOPO+4Λ࢖ͬͯ·͢

ϦϞʔτςετϥϯφʔ •  ίʔυߋ৽ͷͨͼɺ࣮ϒϥ΢β΍ 1IBOUPN+4Ͱςετ – LBSNB چ5FTUBDVMBS – UFTUFN ͲͪΒ΋/PEFKTϕʔεͰಉ͡Α͏ͳػೳΛఏڙɻ5FTUBDVMBS͸ͦ ΋ͦ΋"OHVMBS+4ͷͨΊʹ࡞ΒΕͨͷͰɺ"OHVMBS+4ͱηοτͰ
࢖ΘΕΔ͜ͱ͕ଟ͍ɺ͔΋ɻ

UFTUFN

LBSNB 5SBWJT$*

USBWJTZNM language: node_js node_js: -‐ '0.8'
-‐ '0.10' before_script: -‐ 'npm install -‐g bower grunt-‐cli' -‐ 'bower install' -‐ export DISPLAY=:99.0 -‐ sh -‐e /etc/init.d/xvfb start script: -‐ karma start -‐-‐reporters dots -‐-‐browsers Firefox,PhantomJS -‐-‐single-‐run

LBSNB JTUBOCVM •  LBSNB͸JTUBOCVM࿈ܞͰΧόϨοδϨϙʔτ Λ؆୯ʹ௥ՃͰ͖Δ

Ϣχοτςετͱ&&ςετ •  Ϣχοτςετ – \LBSNB UFTUFN^ \+BTNJOF .PDIB^ – ϑϨʔϜϫʔΫͷ͓͔͛ͰϞσϧͷςετॻ ͚Δ͠ॻ͘ɻ7JFX͸૬มΘΒͣগ͠೉͍͠ Ͱ͢Ͷ
•  &&ςετ – ŋŋŋ

+4ͷ&&ςετ΋ׂͱΧ δϡΞϧʹॻ͘Έ͍ͨͰ͢ ೝࣝΛվΊ·ͨ͠ŋŋŋ

&&ςετ •  LBSNB Կ͔ – "OHVMBS+4ŋŋŋ&&ςετϑϨʔϜϫʔΫ Λ಺แ •  $BTQFS+4 – 1IBOUPN+4ͷάουϥούʔ – +4ͷ&&ςετ͕+4͚ͩͰ؆୯ʹॻ͚Δŋŋŋ
•  ςετϑϨʔϜϫʔΫɺΞαʔγϣϯ΋ఏڙͯ͠ ͍Δ •  ϩάΠϯͷ͋ΔςετͳͲ΋؆୯

$BTQFS+4 casper = require('casper').create() ## amazlet top page
casper.start 'http://app.amazlet.com/', () -‐> @echo @getCurrentUrl() @echo @getTitle() @fill 'form', keyword: casper.cli.args[0] @click 'form input[type="submit"]' ## search result casper.then -‐> @echo @getCurrentUrl() # click on 1st result link @click 'a.minibutton' ## get affiliate tag for first item casper.then -‐> @echo @getCurrentUrl() @echo @evaluate -‐> document.getElementById('standard').value do casper.run

$BTQFS+4Ͱ&&ςετ casper.test.begin 'トップページから検索して貼り付けHTMLを取得', 7, (test) -‐> casper.start 'http://app.amazlet.com/',
-‐> test.assertHttpStatus 200 test.assertTitleMatch /^amazlet/, "タイトル文字列が期待通り" test.assertExists 'form', "メインフォームがある" @fill 'form', keyword: "chef solo" @click 'form input[type="submit"]' casper.then -‐> test.assertHttpStatus 200 test.assertExists 'p.title', '検索結果が一つ以上ある' @click 'a.minibutton' casper.then -‐> test.assertHttpStatus 200 result = @evaluate -‐> document.getElementById('standard').value test.assertMatch result, /^<div/, 'HTMLタグが取得できた' casper.run -‐> do test.done

$BTQFS+4Ͱ$* •  $BTQFS+4Ͱ΋$*Մೳ – $BTQFS+4ࣗ৴͸1IBOUPN+4ʹ͔͠ґଘ ͍ͯ͠ͳ͍ – 5SBWJT$*ʹ΋1IBOUPN+4͸ೖͬͯΔ – ΋ͪΖΜ+FOLJOTͰ΋0,

ʮͰ΋Πϯετʔϧͱ͔໘౗ͳΜ Ͱ͠ΐ͏ ʯ $ brew install casperjs -‐-‐ devel

࣮ײ •  :FPNBO৔߹ʹΑΔ •  (SVOUඞਢ •  #PXFSSFRVJSFKT৔߹ʹΑΔ •  ϑϨʔϜϫʔΫجຊ࢖͏ • 
ςετ – ϦϞʔτςετϥϯφʔඞਢ – Ϣχοτςετ.पΓඞਢ •  .͕ෳࡶͰͳ͍৔߹͸&&͋Ε͹ͦΕͰ͍͍͔ – $*ඞਢ – &&ςετ؆୯ʹͳͬͨ͠ॻ͍ͨํ͕ಘ

·ͱΊ •  :FPNBO΍#VSODIJP͔ΒτϨϯυ •  /PEFKT͕ࢧ͑Δ •  ϑϨʔϜϫʔΫ͸σʔλόΠϯσΟϯάॏཁ •  +4΋ςετΛॻ͍ͯ$*͢Δ • 
&&ςετ΋ݱ࣮తʹ –  ͜Μͳʹ؆୯ʹॻ͚Δͱ͸ŋŋŋ •  ϑϩϯτΤϯυ։ൃ͸੒ख़ظʹ –  ͍ͣΕͷπʔϧ؀ڥ΋೉ͳ͘࢖͑·͢

JavaScriptフロントエンド開発の昨今

JavaScriptフロントエンド開発の昨今

More Decks by Naoya Ito

Other Decks in Technology

Featured

Transcript