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

npm module つくった

npm module つくった

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

Daisuke Fujita

October 21, 2015
Tweet

More Decks by Daisuke Fujita

Other Decks in Programming

Transcript

  1. npm module

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

    View full-size slide

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

    εϐʔυͰٕज़ֵ৽͕ىͬͯ͜Δ

    • Electron ਓؾ

    • AWS Lambda ΋σϑΥϧτͰ JS αϙʔτ

    • React, Flux, Promise, ES6 ͱ͔ฉ͍ͨ͜ͱ͋Δ͚Ͳ
    ࣮ࡍԿͳͷ͔஌ΒΜ

    • ৐Δ͔͠ͳ͍͜ͷϏοά΢Σʔϒʹ

    View full-size slide

  3. npm
    • Node Package Manager

    • Ruby Ͱݴ͏ RubyGems

    • ϥΠϒϥϦ͔ΒίϚϯυϥΠϯπʔϧ·Ͱ

    View full-size slide

  4. ͭͬͨ͘΋ͷ
    • 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 full-size slide

  5. $ 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 full-size slide

  6. $ 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 full-size slide

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

    View full-size slide

  8. Mocha
    • ςετϑϨʔϜϫʔΫ

    • RSpec ͬΆ͍ه๏

    • describe , it
    mochajs/mocha
    assert = require 'power-assert'
    mocha = require 'mocha'
    describe '+' ->
    it 'should calculate 1 + 2' ->
    assert 1 + 2 == 3

    View full-size slide

  9. 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 full-size slide

  10. Power Assert
    • ୯७ͳ assertion

    • fail ͨ͠ͱ͖ʹΘ͔Γ΍͘͢

    දࣔ
    power-assert-js/power-assert

    View full-size slide

  11. gulp
    • Stream API Λར༻ͨ͠ϏϧυγεςϜ

    • ݁߹ͨ͠Γ minify ͨ͠Γ livereload ͨ͠Γ

    ςετ૸ΒͤͨΓ

    • ࠓճ͸ࣗಈςετͷ໨తͰར༻

    • gulp-mocha Ͱ mocha ૸Β͢

    • gulp-watch ͰϑΝΠϧมߋݕ஌ͯ͠ςετ࣮ߦ
    gulpjs/gulp

    View full-size slide

  12. 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 full-size slide

  13. Code Coverage
    • Istanbul ͕༗໊ͬΆ͍

    • CoffeeScript ͷΧόϨοδऔΕͳ͍ʁ

    • coffee-coverage + Istanbul

    • blanket

    • ͍Ζ͍Ζࢼ͚ͨ͠Ͳμϝͩͬͨ

    • ES6 Ҡߦ͔ͯ͠ΒվΊͯ΍Δ

    View full-size slide

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

    View full-size slide

  15. Code Climate
    • ͓ͳ͡Έ Metrics Checker as a Service

    • ݱࡏ͸લड़ͷࣄ৘Ͱ Code Coverage ͱͬͯͳ͍

    View full-size slide

  16. HTTP ୟ͍ͯ

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

    View full-size slide

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

    Ϩεϙϯεฦ͢

    View full-size slide

  18. HTTP ୟ͍ͯ

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

    View full-size slide

  19. Promise
    • ඇಉظॲཧΛ͏·͍ײ͡ʹѻ͏΍ͭ

    • resolve, reject ίʔϧόοΫΛఆٛͨ͠ Promise

    ΦϒδΣΫτΛ࡞੒

    • ඇಉظॲཧ͕ऴΘͬͨ͋ͱͷॲཧΛݺͼग़͠ଆͷ

    then, catch Ͱॲཧ͢Δ

    • ES5 ͔Β࢖͏ͳΒ bluebird ࢖͏

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. ES6
    ECMAScript 6

    View full-size slide

  23. ECMAScript 6
    • let, const ΩʔϫʔυʹΑΔม਺એݴ

    • class ΩʔϫʔυʹΑΔΫϥεએݴ

    • => ʹΑΔΞϩʔؔ਺

    • String interpolation

    • Promise αϙʔτ

    • import, export ʹΑΔϞδϡʔϧߏจ
    ͳͲͳͲ

    View full-size slide

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

    View full-size slide

  25. Namesh in ES6
    • To be continued…

    • Emacs ʹରԠ͍ͯ͠ΔϝδϟʔϞʔυ͕͋Δͷ͔

    • js2-mode ͕ ES6 ରԠ͍ͯ͠ΔΒ͍͚͠Ͳ

    View full-size slide

  26. $ npm publish
    $ npm publish
    + [email protected]

    View full-size slide

  27. ͓ΘΓʹ
    • RubyGem ࡞ΔϊϦͰ࢝ΊͨΒ݁ߏٽ͍ͨ

    • JavaScript ͷւ͸޿େͩΘ

    • ಛʹ։ൃπʔϧपΓͰɺ౷Ұͨ͠ιϦϡʔγϣϯ

    ͕ݟ͔ͭΒͳ͍

    • X as a Service ͸ Ruby ͱಉ͡Α͏ʹ࢖͑Δ΋ͷ͕

    ଟͯ͘Α͍

    View full-size slide