hello npm
by
Muyuu Fujita
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
hello npm!
Slide 2
Slide 2 text
ࣗݾհ me = { name: "muyuu", twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer" };
Slide 3
Slide 3 text
ओͳࣄ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞
Slide 4
Slide 4 text
ओͳࣄ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ࠓճͬͪ͜ͷ
Slide 5
Slide 5 text
Α͘ࢥ͏͜ͱ • ੍࡞ظ͕͍ؒҊ͕݅ଟ͍ • htmlcssjsಉ͡Α͏ͳهड़͕ଟ͍ • JSͰͷUI࣮େମࣗ࡞ͷͷʹͳΔ • ϥΠϒϥϦͷղੳɾΧελϜʹ͔͚Δ࣌ؒͰ࡞ΕΔ
Slide 6
Slide 6 text
Α͘Δ࡞ۀ • ҎલͷҊ݅Ͱॻ͍ͨUIͷϦιʔεΛ͍͍ͨ • ֘Ҋ݅ϑΥϧμ͔Β֘ϑΝΠϧΛ୳͢ • ֘ՕॴΛҊ݅ʹίοϖ
Slide 7
Slide 7 text
Ͳ͏ʹ͔ ͳΒΜͷ͔
Slide 8
Slide 8 text
ͦ͏ͩ ϞδϡʔϧԽͩ
Slide 9
Slide 9 text
Ϟδϡʔϧ • ύʔπͷͻͱ·ͱ·ΓΛϞδϡʔϧͱͯ͠ߟ͑ɺϑΝΠϧΛ ׂ͍ͯ͘͠ • ࡞ͬͨϞδϡʔϧΛ͔Γ͘͢ɺ͍ճ͍͢͠Α͏ʹ ஔ͢Δ
Slide 10
Slide 10 text
Ϟδϡʔϧ project_root └ htdocs/ └ src/ └ html/ (index.jadeͱ͔ॾʑ) └ css/ (style.sassͱ͔ॾʑ) └ js/ (main.jsͱ͔ॾʑ) └ modules/ └ tab/ _tab.sass tab.js
Slide 11
Slide 11 text
Ϟδϡʔϧ • σΟϨΫτϦຖίοϖͰ͢Ή • srcʹஔ͢ΔͳΒʮ͍ͭ͏ηοτʯʹͯ͠ྑ͍
Slide 12
Slide 12 text
…੯͍͠
Slide 13
Slide 13 text
…݁ہίοϖɻ
Slide 14
Slide 14 text
ͦ͜Ͱ npmͩ
Slide 15
Slide 15 text
what is npm?
Slide 16
Slide 16 text
what is npm? • JavaScriptͷύοέʔδϚωʔδϟʔ • ੈքதͷσϕϩούʔ͕࡞ͬͨύοέʔδΛ͑Δ • ύοέʔδͷґଘؔɺόʔδϣϯͷཧ • ݩʑNodeJSͰͷ༻͕ϝΠϯͩͬͨ • ͕ࣗ࡞ͬͨύοέʔδΛެ։͢Δ͜ͱͰ͖Δ
Slide 17
Slide 17 text
ඞཁͳͷͱྲྀΕ • npmΞΧϯτΛ࡞ • ύοέʔδ໊ΛܾΊΔ • ࣮͢Δ • ࣮Λஔ͍ͨGithubʢ͡Όͳ͍͍͚ͯ͘ͲʣϦϙδτϦ • package.jsonΛ༻ҙͯ͠npmͷྲّྀʹ߹ΘͤΔ
Slide 18
Slide 18 text
npmΞΧϯτΛ࡞ • npmͷެࣜϖʔδ͔ΒαΠϯΞοϓ • https://www.npmjs.com/signup
Slide 19
Slide 19 text
npmΞΧϯτΛ࡞ • λʔϛφϧͰnpm adduserΛ࣮ߦ • username, passwod, emailaddressΛฉ͔ΕΔ͔Β͑Δ
Slide 20
Slide 20 text
໊લΛܾΊΔ • ͢Ͱʹnpmʹొ͞Ε͍ͯΔ໊લ͚ͭΒΕͳ͍ • ໊લ͕URLʹؚ·ΕΔ • https://www.npmjs.com/package/${name}
Slide 21
Slide 21 text
࣮͢Δ • ී௨ʹgulpϏϧυͨ͠ΓόϕͬͨΓ͢Δͱ͍͍ • common.jsελΠϧͰॻ͘ͱ৭ʑָͰ͖͓ͯ͢͢Ί • githubͰϗεςΟϯά
Slide 22
Slide 22 text
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "name": "Ϟδʔϧ໊", "version": "1.0.0", "description": "֓ཁจ", "author": "࡞ऀ໊", "license": "ϥΠηϯεܗࣜ", "main": "ϞδϡʔϧຊମϑΝΠϧ", "repository": {"type": "ϦϙδτϦ","url": "ϦϙδτϦURL"} }
Slide 23
Slide 23 text
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "scripts": {"εΫϦϓτ໊": "ίϚϯυ"} "dependencies": "͜ͷύοέʔδ͕ґଘ͢ΔϞδϡʔϧ", "devDependencies": "͜ͷύοέʔδ͕։ൃ࣌ʹͷΈґଘ͢ΔϞδϡʔϧ", }
Slide 24
Slide 24 text
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "files": ["npmʹެ։͍ͨ͠ϑΝΠϧɾσΟϨΫτϦ"] } ϒϥοΫϦετํࣜʹ͍ͨ͠߹ϧʔτσΟϨΫτϦ ʹ .npmignore Λ༻ҙ
Slide 25
Slide 25 text
ެ։
Slide 26
Slide 26 text
npm publish!
Slide 27
Slide 27 text
Ξοϓσʔτ • ࣮(͡Όͳ͍͜ͱ͋ΔͩΖ͏͚Ͳ)Λߋ৽͢Δ • όʔδϣϯΛมߋ͢Δ • ϦϙδτϦʹpush • npm publish!
Slide 28
Slide 28 text
όʔδϣϯͬͯ Ͳ͏͍͏ج४Ͱ Ͳ͏ม͑Ε͍͍ͷʁ
Slide 29
Slide 29 text
όʔδϣϯΛܾΊΔ • ηϚϯςΟοΫόʔδϣχϯά • http://semver.org/lang/ja/
Slide 30
Slide 30 text
όʔδϣϯΛܾΊΔ • 1.1.1 • (ϝδϟʔ).(ϚΠφʔ).(ύον) • ޙํޓੑͷͳ͍มߋΛؚΉ߹ϝδϟʔόʔδϣϯ • ޙํޓੑ͕͋ΓػೳՃΛؚΉ߹ϚΠφʔόʔδϣϯ • ޙํޓੑ͕͋Γόάमਖ਼ͷ߹ύονόʔδϣϯ
Slide 31
Slide 31 text
npm publish!
Slide 32
Slide 32 text
ެ։ͨ͠ ύοέʔδΛ ͏
Slide 33
Slide 33 text
ެ։ͨ͠ύοέʔδΛ͏(scriptλά) • npm install packagename -D htmlʹεΫϦϓτλάهड़
Slide 34
Slide 34 text
ެ։ͨ͠ύοέʔδΛ͏(concat) • npm install packagename -D • gulpfile.jsͰconcat͢ΔϑΝΠϧʹؚΊΔ gulp.task("concat", =>{ gulp.src([ 'node_modules/pkg/pkg.js', 'src/js/main.js' ]) .pipe(concat('app.js')) .pipe(gulp.dest('./htddocs/')); });
Slide 35
Slide 35 text
ެ։ͨ͠ύοέʔδΛ͏(browseiry) • npm install packagename -D • main.jsͰrequire͢Δ var pkg = require('pakegename'); pkg();
Slide 36
Slide 36 text
࠷ޙʹগ͠ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ͪΐͬͱͬͪ͜ͷ
Slide 37
Slide 37 text
࠷ޙʹগ͠ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ͪΐͬͱͬͪ͜ͷ
Slide 38
Slide 38 text
גࣜձࣾSpeee σβΠφʔɾϑϩϯτΤϯυΤϯδχΞΛืूͯ͠·͢
Slide 39
Slide 39 text
גࣜձࣾSpeee • ͓͠ΌΕϥϯδ͕͋Δ • SplatoonΠϕϯτͬͯΔ • ΦϥΠϦʔશ͋Δ • ΤϯδχΞυϦϒϯͳײ͡ • Ϟμϯ։ൃڥ • RailsϝΠϯͷձࣾ(RubyͷύύʢMatzʣ͕ٕज़ސ)
Slide 40
Slide 40 text
גࣜձࣾSpeee • ʮৄ͘͠ʯ • ʮͱΓ͋͑ͣ༡ͼʹߦͬͯΈ͍ͨʂʯ • ʮԶ͕ೖΒͣ୭͕ೖΔʂʯ
Slide 41
Slide 41 text
גࣜձࣾSpeee • ʮৄ͘͠ʯ • ʮͱΓ͋͑ͣ༡ͼʹߦͬͯΈ͍ͨʂʯ • ʮԶ͕ೖΒͣ୭͕ೖΔʂʯ ੋඇੋඇʂʂ