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

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