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
はじめての npm パッケージ作り
Search
Tajima Sachiko
August 22, 2020
Programming
0
290
はじめての npm パッケージ作り
#Zli_CA_LT
Tajima Sachiko
August 22, 2020
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.1k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.8k
CLUB p1ass を作った
schktjm
0
240
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
610
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
390
vuexとvue-routerとあれこれ
schktjm
0
1.4k
秋の大LT2019 in Aizu
schktjm
0
130
Treasure体験記
schktjm
1
520
Other Decks in Programming
See All in Programming
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
20250708_JAWS_opscdk
takuyay0ne
2
150
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
Go製CLIツールをnpmで配布するには
syumai
0
780
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
Reactの歴史を振り返る
tutinoko
1
150
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Balancing Empowerment & Direction
lara
1
510
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Done Done
chrislema
184
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
はじめての npm パッケージ作り 2020-08-22 Zli x CA 合同LT
はじめまして & こんにちは! ﹡ Sachiko Tajima ◦ twitter: schktjm ◦
github: schktjm ﹡ 会津大学 B4 ◦ s1250117 ﹡ フロントエンド とか ﹡ カタンが好き(new!) 2 最近はこっち
npm にcliで動かせるパッ ケージをあげた話をします! nanika kakkoii somewords
おさらい npmって? 4
npm とは ﹡ Node Package Manager の略 ﹡ JavaScript 系のパッケージを管理するツー
ル。 ﹡ https://docs.npmjs.com/about-npm/ 自分用便利パッケージを公開する 難易度は低め 5
それではやってみよう! yatteiki!
slackmoji 絵文字の入力がめんどくさくなった時用 に、:heart: とかを ❤ に変えてくれるcli 今回作ったのは 7 (ほんとはこれゴール予定だったけど正規表現書いたら終わったので公開することにしました)
最低限必要なステップは3つ! 1. cli をつくる! 2. npm をごにょごにょする! 3. npm publishする!
8
最低限必要なステップは3つ! 1. cli をつくる! 2. npm をごにょごにょする! 3. npm publishする!
9
1. まずはcliをつくる まずはcliを作ります。今回はこんな感じ 10 引数をとる 文字列を変換する 出力
1. まずはcliをつくる うまくいきました。 11
最低限必要なステップは3つ! 1. cli をつくる! 2. npm をごにょごにょする! 3. npm publishする!
12
2. npmをごにょごにょする 実際のコマンドのように動かせるようにします。 ここで行うのは3つ。 1. npm init -y 2. 実行ファイルをつくる
3. package.json の bin にコマンドの設定 13
2. npmをごにょごにょする npm init -y package.json が必要なので npm の init
コマンドで初期化しま す。 -y でなく逐一入力しても問題ないです。 14
2. npmをごにょごにょする 実行ファイルを作る bin/cli.js をつくります。また先ほどの lib/index.js を外部から扱 えるようにモジュール化します。 15
2. npmをごにょごにょする package.json の bin にコマンドの設定 package.json の bin フィールドでコマンドとファイルのマッピング
ができるらしいです。(https://docs.npmjs.com/files/package.json#bin) 16
2. npm をごにょごにょする これでコマンドの出来上がりです! 17
最低限必要なステップは3つ! 1. cli をつくる! 2. npm をごにょごにょする! 3. npm publishする!
18
3. npm にぱぶりっしゅする! 最後に誰でもこのコマンドを使えるように publish します! 1. npm にログインする 2.
package.json の name とpublishConfig を編集 3. npm publish 19
3. npm にぱぶりっしゅする! npm にログインする npm にログインしていることを確認します。 なかったらアカウントを作りましょう! Creating a
new user account on the public registry terminal で npm whoami と打った時に自分の名前が出れば成 功です。 20
3. npm にぱぶりっしゅする! package.json の name と publishConfig を編集 name
は @<ユーザー名>/<パッケージ名> に publishConfig は 状況に合わせて! see: https://docs.npmjs.com/files/package.json#publishconfig 21
3. npm にぱぶりっしゅする! npm publish 打つとnpmでパッケージを確認することができました! 22
所感 初めてパッケージ公開しましたがとても簡単 & やってみた 記事が多く難易度が低めでした! 自分用の便利パッケージとか作るのもいいかも。 23
Thanks! https://github.com/schktjm/slackmoji https://www.npmjs.com/package/@schktjm/slackmoji