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
260
はじめての npm パッケージ作り
#Zli_CA_LT
Tajima Sachiko
August 22, 2020
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
1
2.3k
CLUB p1ass を作った
schktjm
0
210
E2E テスト入門
schktjm
0
440
Firebaseでお手軽OGP生成
schktjm
0
550
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
360
vuexとvue-routerとあれこれ
schktjm
0
1.3k
秋の大LT2019 in Aizu
schktjm
0
100
Treasure体験記
schktjm
1
460
Other Decks in Programming
See All in Programming
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Why Prism?
kddnewton
4
1.7k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
Jakarta EE meets AI
ivargrimstad
1
520
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Securify_エンジニア採用資料
3shake
0
100
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Featured
See All Featured
Practical Orchestrator
shlominoach
185
10k
Ruby is Unlike a Banana
tanoku
96
11k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
For a Future-Friendly Web
brad_frost
174
9.3k
Designing for humans not robots
tammielis
248
25k
How GitHub (no longer) Works
holman
310
140k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Fireside Chat
paigeccino
31
2.9k
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