Princess APIのAPIクライアントをTypeScriptで作ってnpmで公開してみた

Princess APIのAPIクライアントを TypeScriptで作ってnpmで公開してみた IM@S Engineer MeetUp REBURN うーたん

自己紹介

うーたんです • 名前 ◦ うーたん ◦ 大森裕介 • 副業は新卒サーバーサイドエンジニア •
矢吹可奈を担当

SNS • Twitter ◦ @uutan1108 • GitHub ◦ OHMORIYUSUKE

参加したきかけ

今回、初参加です！大学２年のころのイベントに参加したかったが参加できなかった。今回は、３年前よりレベルアップしたのでオフラインで参加！！

作ったもの

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トップ

ご清聴ありがとうございました！！

Princess APIのAPIクライアントをTypeScriptで作ってnpmで公開してみた

Princess APIのAPIクライアントをTypeScriptで作ってnpmで公開してみた

uutan1108

More Decks by uutan1108

Other Decks in Technology

Featured

Transcript