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
Princess APIのAPIクライアントをTypeScriptで作ってnpmで公開してみた
Search
uutan1108
June 03, 2023
Technology
1
1.6k
Princess APIのAPIクライアントをTypeScriptで作ってnpmで公開してみた
IM@S Engineer MeetUp REBURNでLTした時のスライドです。
https://imas.connpass.com/event/256931/
uutan1108
June 03, 2023
Tweet
Share
More Decks by uutan1108
See All by uutan1108
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
18
6.1k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
50
デザインって“感覚”だけじゃないVibe Codingからの気づき
ohmori_yusuke
3
79
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
140
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
520
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
340
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
170
学びは趣味の延長線
ohmori_yusuke
0
100
言葉にするとやる気を再確認できる
ohmori_yusuke
1
52
Other Decks in Technology
See All in Technology
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
160
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
350
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
230
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
420
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
320
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
110
Language Update: Java
skrb
2
290
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
463
140k
Side Projects
sachag
455
43k
Gamification - CAS2011
davidbonilla
81
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Code Review Best Practice
trishagee
70
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Adaptive Systems
keathley
43
2.7k
Transcript
Princess APIのAPIクライアントを TypeScriptで作ってnpmで公開し てみた IM@S Engineer MeetUp REBURN うーたん
自己紹介
うーたんです • 名前 ◦ うーたん ◦ 大森裕介 • 副業は新卒サーバーサイドエンジニア •
矢吹 可奈を担当
SNS • Twitter ◦ @uutan1108 • GitHub ◦ OHMORIYUSUKE
参加したきかけ
今回、初参加です! 大学2年のころのイベントに参加したかったが参加でき なかった。今回は、3年前よりレベルアップしたのでオフ ラインで参加!!
作ったもの
TypeScriptでAPIクライアントを作っ た • Princess — Public REST APIの TypeScriptのAPIクライアント •
ひたすら型定義をしてテストをたく さん書いた • Princess — Public REST APIは アイドルの情報が取得できる WEB API https://github.com/OHMORIYUSUKE/princess-api -sdk/tree/main
Princess — Public REST API • アイドルの情報やゲームの イベント情報が取得できる • 20個以上のエンドポイント
モチベーション 1. イベントをconpassで発見する 2. 何か作って発表したい!! 3. 前に使ったことがあるアイマス関連のAPIクライアントを作ろ う! 4. どうせならnpmに公開したい(公開するのムズそう)
5. テストも書きたいし、ドキュメントも書きたい 6. そして、自分で作ったnpmパッケージを使って満足感を感じた い!
実装
これだけでnpmにリリースできた • semantic-release ◦ パッケージ公開 ◦ バージョン管理 ◦ リリースノートの作成を自動化
テストをChatGPTに教わりな がら書いた • GPTに構造体を教えて、テ ストを書いてと頼んだら書い てくれる。 • 勝手に謎のパッケージを定 義してくるので注意してあげ た
• JSONから構造体も作ってく れる
おしゃれなドキュメント(typedoc) • READMEをおしゃれに表示してくれる • コードに書き込んだ メソッドのコメントを ドキュメントに変換
感想
感想 • 意外と簡単にnpmに公開できた • ひたすら型を定義するのは辛い • エンドポイントが多くて実装が間に合わなかった • ChatGPTにJSONを教えて型を作ってもらうとサボれる •
TestもChatGPTに質問しながら書いた(Testを書いたの初めて かも)
package.jsonに名前が入るのがいい • Node.jsのパッケージ(ライブラリ)管理ファイルに自分のパッ ケージ名が書き込まれる嬉しさ • importするたびに感じる 「npmからインストール したパッケージだぁ」感
完成させられなかったけ ど、npmにも公開できた し、テストも書けた、ド キュメントも書けたし、よ し!
次にやりたいこと
色々なところに表示してるアイドルの誕生日を自分のパッケージに変更 する • 今回、公開したパッケージでアイドルの情報を取得して 各ページに誕生日を表示したい! ホームページ GitHubトップ
ご清聴ありがとう ございました!!