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
1
720
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.8k
CLUB p1ass を作った
schktjm
0
240
E2E テスト入門
schktjm
0
470
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
510
Other Decks in Programming
See All in Programming
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
570
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
130
がんばりすぎないコーディングルール運用術
tsukakei
1
210
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
430
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
460
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.3k
型安全RESTで爆速プロトタイピング – Hono RPC実践
tacke_jp
0
110
Use Perl as Better Shell Script
karupanerura
0
680
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
450
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
21
5.7k
無関心の谷
kanayannet
0
140
從零到一:搭建你的第一個 Observability 平台
blueswen
0
640
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
How GitHub (no longer) Works
holman
314
140k
A Tale of Four Properties
chriscoyier
159
23k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
95
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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