npm module つくった

#w8lt 第五回 (2015-10-21) の発表資料です
http://w8lt.connpass.com/event/21227/

Transcript

1. npm module

   ͭͬͨ͘
   2015-10-21
   W8LT #5
   @dtan4
   

   View Slide

2. ಙాݚ M2
   

   View Slide

3. JavaScript
   • Πϯϑϥք۾ͱಉ͘͡Β͍ɺ͍΍ͦΕҎ্ͷ

   εϐʔυͰٕज़ֵ৽͕ىͬͯ͜Δ
   
   • Electron ਓؾ
   
   • AWS Lambda ΋σϑΥϧτͰ JS αϙʔτ
   
   • React, Flux, Promise, ES6 ͱ͔ฉ͍ͨ͜ͱ͋Δ͚Ͳ
   ࣮ࡍԿͳͷ͔஌ΒΜ
   
   • ৐Δ͔͠ͳ͍͜ͷϏοά΢Σʔϒʹ
   

   View Slide

4. npm
   • Node Package Manager
   
   • Ruby Ͱݴ͏ RubyGems
   
   • ϥΠϒϥϦ͔ΒίϚϯυϥΠϯπʔϧ·Ͱ
   

   View Slide

5. ͭͬͨ͘΋ͷ
   • namesh
   • ౦ژΞϝογϡͷ

   ΫϥΠΞϯτϥΠϒϥϦ
   
   • ೔෇ͷҰཡฦ͚ͩ͢
   Namesh = require 'src/namesh'
   Namesh.indices().then (value) ->
   console.log value
   [ '201510211605',
   '201510211600',
   '201510211555',
   '201510211550',
   '201510211545',
   '201510211540',
   '201510211535',
   '201510211530',
   '201510211525',
   '201510211520',
   '201510211515',
   '201510211510',
   '201510211505',
   '201510211500',
   '201510211455',
   '201510211450',
   '201510211445',
   '201510211440',
   '201510211435',
   '201510211430',
   '201510211425',
   '201510211420',
   '201510211415',
   '201510211410',
   '201510211405' ]
   

   View Slide

6. $ npm init
   $ npm init
   …
   Press ^C at any time to quit.
   name: (namesh)
   version: (1.0.0) 0.1.0
   description: Node.js Client for Tokyo-Amesh
   entry point: (index.js)
   test command:
   git repository: https://github.com/dtan4/namesh.git
   keywords:
   author: Daisuke Fujita
   license: (ISC) MIT
   About to write to /Users/fujita/tmp/namesh/package.json:
   

   View Slide

7. $ npm init
   {
   "name": "namesh",
   "version": "0.1.0",
   "description": "Node.js Client for Tokyo-Amesh",
   "main": "index.js",
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
   "type": "git",
   "url": "git+https://github.com/dtan4/namesh.git"
   },
   "author": "Daisuke Fujita",
   "license": "MIT",
   "bugs": {
   "url": "https://github.com/dtan4/namesh/issues"
   },
   "homepage": "https://github.com/dtan4/namesh#readme"
   }
   

   View Slide

8. Testing
   BDD-style Test | Automated Test | CI
   

   View Slide

9. Mocha
   • ςετϑϨʔϜϫʔΫ
   
   • RSpec ͬΆ͍ه๏
   
   • describe , it
   mochajs/mocha
   assert = require 'power-assert'
   mocha = require 'mocha'
   describe '+' ->
   it 'should calculate 1 + 2' ->
   assert 1 + 2 == 3
   

   View Slide

10. Nock
    • HTTP mocking library
    
    • Ruby Ͱݴ͏webmock
    
    • μϛʔͷ HTTP ϨεϙϯεΛฦ͢
    pgte/nock
    describe 'Namesh', ->
    urlBase = 'http://tokyo-ame.jwa.or.jp'
    body =
    'Amesh.setIndexList(["201510190110","201510190105","201510190100","201510190055","2015
    10190050","201510190045","201510190040","201510190035","201510190030","201510190025","
    201510190020","201510190015","201510190010","201510190005","201510190000","20151018235
    5","201510182350","201510182345","201510182340","201510182335","201510182330","2015101
    82325","201510182320","201510182315","201510182310"]);'
    describe '#indices', ->
    beforeEach( ->
    nock(urlBase)
    .get '/scripts/mesh_index.js'
    .reply 200, body
    )
    

    View Slide

11. Power Assert
    • ୯७ͳ assertion
    
    • fail ͨ͠ͱ͖ʹΘ͔Γ΍͘͢

    දࣔ
    power-assert-js/power-assert
    

    View Slide

12. gulp
    • Stream API Λར༻ͨ͠ϏϧυγεςϜ
    
    • ݁߹ͨ͠Γ minify ͨ͠Γ livereload ͨ͠Γ

    ςετ૸ΒͤͨΓ
    
    • ࠓճ͸ࣗಈςετͷ໨తͰར༻
    
    • gulp-mocha Ͱ mocha ૸Β͢
    
    • gulp-watch ͰϑΝΠϧมߋݕ஌ͯ͠ςετ࣮ߦ
    gulpjs/gulp
    

    View Slide

13. gulp (gulpfile.coffee)
    gulpjs/gulp
    gulp = require "gulp"
    mocha = require "gulp-mocha"
    gulp.task "test", ->
    require "espower-coffee/guess"
    gulp.src("test/**/*.coffee")
    .pipe(mocha())
    gulp.task "watch", ->
    gulp.watch(["src/**", "test/**"], ["test"])
    

    View Slide

14. Code Coverage
    • Istanbul ͕༗໊ͬΆ͍
    
    • CoffeeScript ͷΧόϨοδऔΕͳ͍ʁ
    
    • coffee-coverage + Istanbul
    
    • blanket
    
    • ͍Ζ͍Ζࢼ͚ͨ͠Ͳμϝͩͬͨ
    
    • ES6 Ҡߦ͔ͯ͠ΒվΊͯ΍Δ
    

    View Slide

15. Travis CI
    • ͓ͳ͡Έ CI as a Service
    

    View Slide

16. Code Climate
    • ͓ͳ͡Έ Metrics Checker as a Service
    
    • ݱࡏ͸લड़ͷࣄ৘Ͱ Code Coverage ͱͬͯͳ͍
    

    View Slide

17. HTTP ୟ͍ͯ

    Ϩεϙϯεฦ͢
    (&5TDSJQUTNFTI@JOEFYKT
    1SFUUJGZUP"SSBZ
    3FTQPOTF
    

    View Slide

18. request = require 'request'
    Namesh = {}
    Namesh.indices = ->
    request INDICES_URL, (error, response, body) ->
    if !error && response.statusCode is 200
    return body.replace(...).replace ...
    HTTP ୟ͍ͯ

    Ϩεϙϯεฦ͢
    

    View Slide

19. HTTP ୟ͍ͯ

    Ϩεϙϯεฦ͢
    request = require 'request'
    Namesh = {}
    Namesh.indices = ->
    request INDICES_URL, (error, response, body) ->
    if !error && response.statusCode is 200
    return body.replace(...).replace ...
    ͍ͭ͜Λฦͯ͠΄͍͠
    

    View Slide

20. Promise
    

    View Slide

21. Promise
    • ඇಉظॲཧΛ͏·͍ײ͡ʹѻ͏΍ͭ
    
    • resolve, reject ίʔϧόοΫΛఆٛͨ͠ Promise

    ΦϒδΣΫτΛ࡞੒
    
    • ඇಉظॲཧ͕ऴΘͬͨ͋ͱͷॲཧΛݺͼग़͠ଆͷ

    then, catch Ͱॲཧ͢Δ
    
    • ES5 ͔Β࢖͏ͳΒ bluebird ࢖͏
    

    View Slide

22. Promise
    promise = require 'bluebird'
    request = require 'request'
    Namesh = {}
    Namesh.indices = (callback) ->
    getIndices = new promise (resolve, reject) ->
    request(INDICES_URL, (error, response, body) ->
    if !error && response.statusCode == 200
    resolve body.replace(…).split …
    else
    reject error
    )
    

    View Slide

23. Promise
    Namesh = require 'Namesh'
    Namesh.indices().then((value) ->
    console.log value
    ).catch((value) ->
    )
    

    View Slide

24. ES6
    ECMAScript 6
    

    View Slide

25. ECMAScript 6
    • let, const ΩʔϫʔυʹΑΔม਺એݴ
    
    • class ΩʔϫʔυʹΑΔΫϥεએݴ
    
    • => ʹΑΔΞϩʔؔ਺
    
    • String interpolation
    
    • Promise αϙʔτ
    
    • import, export ʹΑΔϞδϡʔϧߏจ
    ͳͲͳͲ
    

    View Slide

26. ES6 -> ES5 τϥϯεύΠϥ
    

    View Slide

27. Namesh in ES6
    • To be continued…
    
    • Emacs ʹରԠ͍ͯ͠ΔϝδϟʔϞʔυ͕͋Δͷ͔
    
    • js2-mode ͕ ES6 ରԠ͍ͯ͠ΔΒ͍͚͠Ͳ
    

    View Slide

28. $ npm publish
    $ npm publish
    + namesh@0.1.0
    

    View Slide

29. View Slide

30. ͓ΘΓʹ
    • RubyGem ࡞ΔϊϦͰ࢝ΊͨΒ݁ߏٽ͍ͨ
    
    • JavaScript ͷւ͸޿େͩΘ
    
    • ಛʹ։ൃπʔϧपΓͰɺ౷Ұͨ͠ιϦϡʔγϣϯ

    ͕ݟ͔ͭΒͳ͍
    
    • X as a Service ͸ Ruby ͱಉ͡Α͏ʹ࢖͑Δ΋ͷ͕

    ଟͯ͘Α͍
    

    View Slide