hello npm

初夏のJavaScript祭で発表したスライドです

Transcript

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