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
2
970
ゼロから始めるアクセシビリティ啓蒙活動
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
510
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
2
880
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Discover Metal 4
rei315
2
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
250
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Benchmark
sysong
0
280
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
Designing for Performance
lara
609
69k
The Cult of Friendly URLs
andyhume
79
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Thoughts on Productivity
jonyablonski
69
4.7k
Balancing Empowerment & Direction
lara
1
390
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