$30 off During Our Annual Pro Sale. View Details »

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

Naoya Ito
October 10, 2013

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

Naoya Ito

October 10, 2013
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

  1. ˓˓Ξηϯϒϥ •  NBTN HBT •  αΠτΞηϯϒϥ – .JEEMFNBO •  ελςΟοΫαΠτδΣωϨʔλ • 

    ΞϓϦέʔγϣϯΞηϯϒϥ – :FPNBO #SVODIJP •  +BWB4DSJQUΞϓϦέʔγϣϯʹൺॏ
  2. $  yo  webapp   $  grunt  server   $  grunt

     test   $  grunt  build   
  3. #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
  4. HFOFSBUPSBOHVMBS •  "OHVMBS+4.7 ϑϨʔϜϫʔΫ •  ςετؔ࿈ –  LBSNBϦϞʔτςετϥϯφʔ –  +BTNJOFςεςΟϯάϑϨʔϜϫʔΫ

    –  1IBOUPN+4ϔουϨεϒϥ΢β –  USBWJTZNMܧଓతΠϯςάϨʔγϣϯ •  (SVOUpMFKT •  CPXFSSD •  KTIJOUSD •  FEJUPSDPOpH
  5. #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
  6. "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  }            );      };       });  
  7. +4.7˓ϑϨʔϜϫʔΫ •  ݸਓతͳݟཱͯͰ͸ŋŋŋ –  ʮ.ˠ7΁ͷ௨஌ʯͷύλʔϯΛओ࣠ʹपลΛݻΊͨ΋ͷ •  όΠϯσΟϯάΛ͠΍͘͢㱺ΞϓϦέʔγϣϯߏ଄Խ •  ͦͷ΄͔ศརػೳ – 

    ϧʔςΟϯά –  ςϯϓϨʔτ –  όϦσʔγϣϯ –  ը໘ભҠ •  ΑͬͯɺσʔλϞσϧͷߋ৽ʹରͯ͠ը໘͕Ͳͷఔ౓ͲͷΑ ͏ʹ࿈ಈ͢Δඞཁ͕͋Δ͔ɺͱ͍͏ࢹ఺Ͱબఆ͢Δͱྑ͍
  8. ૄ݁߹Λࢧ͑Δٕज़ •  #BDLCPOFKT –  0CTFSWFSʹΑΔ.PEFM7JFXͷ෼཭ –  #BDLCPOFKTͷ௨஌ύλʔϯ •  "OHVMBS+4 – 

    ૒ํ޲σʔλόΠϯσΟϯά –  %FQFOEFODZ*OKFDUJPO –  ϑϨʔϜϫʔΫͷڧΊͷ੍໿ •  &NCFSKT –  ͳΜ͔σʔλόΠϯσΟϯάपΓ͕͍͚ͯΔΒ͍͠ •  0CKFDUPCTFSWF  –  J04ͷ,70Έ͍ͨͳͷɻ࣍ੈ୅+BWB4DSJQU –  ݱঢ়Ͳ͏ͳͬͯΔΜͰ͠ΐ͏ 
  9. HFOFSBUPSBOHVMBS •  "OHVMBS+4.7 ϑϨʔϜϫʔΫ •  ςετؔ࿈ –  LBSNBϦϞʔτςετϥϯφʔ –  +BTNJOFςεςΟϯάϑϨʔϜϫʔΫ

    –  1IBOUPN+4ϔουϨεϒϥ΢β –  USBWJTZNMܧଓతΠϯςάϨʔγϣϯ •  (SVOUpMFKT •  CPXFSSD •  KTIJOUSD •  FEJUPSDPOpH
  10. ϞοΫ   ϥΠϒϥϦ Ξαʔγϣϯ   ϥΠϒϥϦ ςεςΟϯά   ϑϨʔϜϫʔΫ ϦϞʔτ

      ςετϥϯφʔ ࣮ߦ   ؀ڥ 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׆༻࠷લઢୈճʱΑΓ
  11. ϞοΫ   ϥΠϒϥϦ Ξαʔγϣϯ   ϥΠϒϥϦ ςεςΟϯά   ϑϨʔϜϫʔΫ ϦϞʔτ

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

      ςετϥϯφʔ ࣮ߦ   ؀ڥ Jasmine Sinon.JS QUnit,   JsUnit expect.js   Chai Mocha   Testem  /  Karma JsTestDriver   Buster.JS ࣮ϒϥ΢β   IE,  Chrome,   FirefoxͳͲ   ϔουϨεϒϥ΢β   PhantomJS   ϒϥ΢βγϛϡϨʔλ   Node.js  +  jsdom   Rhino  +  Envjs  
  13. ςεςΟϯάϑϨʔϜϫʔΫ •  #%%ελΠϧ͕ਓؾ Լ͸+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);      });   });  
  14. 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  
  15. $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
  16. $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  
  17. ࣮ײ •  :FPNBO৔߹ʹΑΔ •  (SVOUඞਢ •  #PXFSSFRVJSFKT৔߹ʹΑΔ •  ϑϨʔϜϫʔΫجຊ࢖͏ • 

    ςετ – ϦϞʔτςετϥϯφʔඞਢ – Ϣχοτςετ.पΓඞਢ •  .͕ෳࡶͰͳ͍৔߹͸&&͋Ε͹ͦΕͰ͍͍͔ – $*ඞਢ – &&ςετ؆୯ʹͳͬͨ͠ॻ͍ͨํ͕ಘ
  18. ·ͱΊ •  :FPNBO΍#VSODIJP͔ΒτϨϯυ •  /PEFKT͕ࢧ͑Δ •  ϑϨʔϜϫʔΫ͸σʔλόΠϯσΟϯάॏཁ •  +4΋ςετΛॻ͍ͯ$*͢Δ • 

    &&ςετ΋ݱ࣮తʹ –  ͜Μͳʹ؆୯ʹॻ͚Δͱ͸ŋŋŋ •  ϑϩϯτΤϯυ։ൃ͸੒ख़ظʹ –  ͍ͣΕͷπʔϧ؀ڥ΋೉ͳ͘࢖͑·͢