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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
Meshy Proプラン課金した
henjin0
0
250
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
570
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
empitsu
4
1.3k
Tebiki Engineering Team Deck
tebiki
0
24k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
890
データ民主化のための LLM 活用状況と課題紹介(IVRy の場合)
wxyzzz
2
680
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
430
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
1
130
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
140
Data Hubグループ 紹介資料
sansan33
PRO
0
2.7k
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
180
Featured
See All Featured
Optimizing for Happiness
mojombo
379
71k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Mind Mapping
helmedeiros
PRO
0
78
Everyday Curiosity
cassininazir
0
130
[SF Ruby Conf 2025] Rails X
palkan
1
740
Chasing Engaging Ingredients in Design
codingconduct
0
110
Amusing Abliteration
ianozsvald
0
96
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
580
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
77
Between Models and Reality
mayunak
1
180
How to train your dragon (web standard)
notwaldorf
97
6.5k
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 • ʮৄ͘͠ʯ • ʮͱΓ͋͑ͣ༡ͼʹߦͬͯΈ͍ͨʂʯ • ʮԶ͕ೖΒͣ୭͕ೖΔʂʯ ੋඇੋඇʂʂ