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
300
はじめての npm パッケージ作り
#Zli_CA_LT
Tajima Sachiko
August 22, 2020
Tweet
Share
More Decks by Tajima Sachiko
See All by Tajima Sachiko
エラーとアクセシビリティ
schktjm
0
980
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
3
1.2k
ゼロから始めるアクセシビリティ啓蒙活動
schktjm
2
2.9k
CLUB p1ass を作った
schktjm
0
240
E2E テスト入門
schktjm
0
480
Firebaseでお手軽OGP生成
schktjm
0
610
3時間でつくるいいかんじのポートフォリオサイト
schktjm
1
390
vuexとvue-routerとあれこれ
schktjm
0
1.5k
秋の大LT2019 in Aizu
schktjm
0
130
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
340
MLH State of the League: 2026 Season
theycallmeswift
0
220
tool ディレクティブを導入してみた感想
sgash708
1
160
Kiroで始めるAI-DLC
kaonash
2
540
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
410
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
4.9k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
為你自己學 Python - 冷知識篇
eddie
1
340
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Practical Orchestrator
shlominoach
190
11k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Into the Great Unknown - MozCon
thekraken
40
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
How STYLIGHT went responsive
nonsquared
100
5.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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