Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
hello npm
Search
Muyuu Fujita
May 14, 2016
Technology
0
1.3k
hello npm
初夏のJavaScript祭で発表したスライドです
Muyuu Fujita
May 14, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
460
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
110
OCIjp_Oracle AI World_Recap
shinpy
1
180
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
360
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
AI時代、“平均値”ではいられない
uhyo
8
2.5k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
610
まだ間に合う! 2025年のhono/ssg事情
watany
3
660
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
RailsConf 2023
tenderlove
30
1.3k
Documentation Writing (for coders)
carmenintech
75
5.1k
Site-Speed That Sticks
csswizardry
13
920
For a Future-Friendly Web
brad_frost
180
10k
Fireside Chat
paigeccino
41
3.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
Making Projects Easy
brettharned
120
6.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Become a Pro
speakerdeck
PRO
29
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Transcript
hello npm!
ࣗݾհ me = { name: "muyuu", twitter: "@anticyborg", belongs: "freelance",
job: "Web Front-End Engineer" };
ओͳࣄ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞
ओͳࣄ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ࠓճͬͪ͜ͷ
Α͘ࢥ͏͜ͱ • ੍࡞ظ͕͍ؒҊ͕݅ଟ͍ • htmlcssjsಉ͡Α͏ͳهड़͕ଟ͍ • JSͰͷUI࣮େମࣗ࡞ͷͷʹͳΔ • ϥΠϒϥϦͷղੳɾΧελϜʹ͔͚Δ࣌ؒͰ࡞ΕΔ
Α͘Δ࡞ۀ • ҎલͷҊ݅Ͱॻ͍ͨUIͷϦιʔεΛ͍͍ͨ • ֘Ҋ݅ϑΥϧμ͔Β֘ϑΝΠϧΛ୳͢ • ֘ՕॴΛҊ݅ʹίοϖ
Ͳ͏ʹ͔ ͳΒΜͷ͔
ͦ͏ͩ ϞδϡʔϧԽͩ
Ϟδϡʔϧ • ύʔπͷͻͱ·ͱ·ΓΛϞδϡʔϧͱͯ͠ߟ͑ɺϑΝΠϧΛ ׂ͍ͯ͘͠ • ࡞ͬͨϞδϡʔϧΛ͔Γ͘͢ɺ͍ճ͍͢͠Α͏ʹ ஔ͢Δ
Ϟδϡʔϧ project_root └ htdocs/ └ src/ └ html/ (index.jadeͱ͔ॾʑ) └
css/ (style.sassͱ͔ॾʑ) └ js/ (main.jsͱ͔ॾʑ) └ modules/ └ tab/ _tab.sass tab.js
Ϟδϡʔϧ • σΟϨΫτϦຖίοϖͰ͢Ή • srcʹஔ͢ΔͳΒʮ͍ͭ͏ηοτʯʹͯ͠ྑ͍
…੯͍͠
…݁ہίοϖɻ
ͦ͜Ͱ npmͩ
what is npm?
what is npm? • JavaScriptͷύοέʔδϚωʔδϟʔ • ੈքதͷσϕϩούʔ͕࡞ͬͨύοέʔδΛ͑Δ • ύοέʔδͷґଘؔɺόʔδϣϯͷཧ •
ݩʑNodeJSͰͷ༻͕ϝΠϯͩͬͨ • ͕ࣗ࡞ͬͨύοέʔδΛެ։͢Δ͜ͱͰ͖Δ
ඞཁͳͷͱྲྀΕ • npmΞΧϯτΛ࡞ • ύοέʔδ໊ΛܾΊΔ • ࣮͢Δ • ࣮Λஔ͍ͨGithubʢ͡Όͳ͍͍͚ͯ͘ͲʣϦϙδτϦ •
package.jsonΛ༻ҙͯ͠npmͷྲّྀʹ߹ΘͤΔ
npmΞΧϯτΛ࡞ • npmͷެࣜϖʔδ͔ΒαΠϯΞοϓ • https://www.npmjs.com/signup
npmΞΧϯτΛ࡞ • λʔϛφϧͰnpm adduserΛ࣮ߦ • username, passwod, emailaddressΛฉ͔ΕΔ͔Β͑Δ
໊લΛܾΊΔ • ͢Ͱʹnpmʹొ͞Ε͍ͯΔ໊લ͚ͭΒΕͳ͍ • ໊લ͕URLʹؚ·ΕΔ • https://www.npmjs.com/package/${name}
࣮͢Δ • ී௨ʹgulpϏϧυͨ͠ΓόϕͬͨΓ͢Δͱ͍͍ • common.jsελΠϧͰॻ͘ͱ৭ʑָͰ͖͓ͯ͢͢Ί • githubͰϗεςΟϯά
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "name": "Ϟδʔϧ໊", "version": "1.0.0", "description": "֓ཁจ", "author":
"࡞ऀ໊", "license": "ϥΠηϯεܗࣜ", "main": "ϞδϡʔϧຊମϑΝΠϧ", "repository": {"type": "ϦϙδτϦ","url": "ϦϙδτϦURL"} }
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "scripts": {"εΫϦϓτ໊": "ίϚϯυ"} "dependencies": "͜ͷύοέʔδ͕ґଘ͢ΔϞδϡʔϧ", "devDependencies": "͜ͷύοέʔδ͕։ൃ࣌ʹͷΈґଘ͢ΔϞδϡʔϧ",
}
npmͷྲّྀʹ߹ΘͤΔ package.jsonʹඞཁࣄ߲هೖ { "files": ["npmʹެ։͍ͨ͠ϑΝΠϧɾσΟϨΫτϦ"] } ϒϥοΫϦετํࣜʹ͍ͨ͠߹ϧʔτσΟϨΫτϦ ʹ .npmignore Λ༻ҙ
ެ։
npm publish!
Ξοϓσʔτ • ࣮(͡Όͳ͍͜ͱ͋ΔͩΖ͏͚Ͳ)Λߋ৽͢Δ • όʔδϣϯΛมߋ͢Δ • ϦϙδτϦʹpush • npm publish!
όʔδϣϯͬͯ Ͳ͏͍͏ج४Ͱ Ͳ͏ม͑Ε͍͍ͷʁ
όʔδϣϯΛܾΊΔ • ηϚϯςΟοΫόʔδϣχϯά • http://semver.org/lang/ja/
όʔδϣϯΛܾΊΔ • 1.1.1 • (ϝδϟʔ).(ϚΠφʔ).(ύον) • ޙํޓੑͷͳ͍มߋΛؚΉ߹ϝδϟʔόʔδϣϯ • ޙํޓੑ͕͋ΓػೳՃΛؚΉ߹ϚΠφʔόʔδϣϯ •
ޙํޓੑ͕͋Γόάमਖ਼ͷ߹ύονόʔδϣϯ
npm publish!
ެ։ͨ͠ ύοέʔδΛ ͏
ެ։ͨ͠ύοέʔδΛ͏(scriptλά) • npm install packagename -D htmlʹεΫϦϓτλάهड़ <script src="/node_modules/pkg/pkg.js"></script> <script
src="/assets/js/app.js"></script>
ެ։ͨ͠ύοέʔδΛ͏(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/')); });
ެ։ͨ͠ύοέʔδΛ͏(browseiry) • npm install packagename -D • main.jsͰrequire͢Δ var pkg
= require('pakegename'); pkg();
࠷ޙʹগ͠ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ͪΐͬͱͬͪ͜ͷ
࠷ޙʹগ͠ • WebαʔϏεӡ༻ͷϑϩϯτ୲ • খنͷWebϖʔδ/LP੍࡞ ͪΐͬͱͬͪ͜ͷ
גࣜձࣾSpeee σβΠφʔɾϑϩϯτΤϯυΤϯδχΞΛืूͯ͠·͢
גࣜձࣾSpeee • ͓͠ΌΕϥϯδ͕͋Δ • SplatoonΠϕϯτͬͯΔ • ΦϥΠϦʔશ͋Δ • ΤϯδχΞυϦϒϯͳײ͡ •
Ϟμϯ։ൃڥ • RailsϝΠϯͷձࣾ(RubyͷύύʢMatzʣ͕ٕज़ސ)
גࣜձࣾSpeee • ʮৄ͘͠ʯ • ʮͱΓ͋͑ͣ༡ͼʹߦͬͯΈ͍ͨʂʯ • ʮԶ͕ೖΒͣ୭͕ೖΔʂʯ
גࣜձࣾSpeee • ʮৄ͘͠ʯ • ʮͱΓ͋͑ͣ༡ͼʹߦͬͯΈ͍ͨʂʯ • ʮԶ͕ೖΒͣ୭͕ೖΔʂʯ ੋඇੋඇʂʂ