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

IM@S Engineer MeetUp REBURNでLTした時のスライドです。

https://imas.connpass.com/event/256931/

Transcript

1. Princess APIのAPIクライアントを TypeScriptで作ってnpmで公開し てみた IM@S Engineer MeetUp REBURN うーたん
2. 自己紹介
3. うーたんです • 名前 ◦ うーたん ◦ 大森裕介 • 副業は新卒サーバーサイドエンジニア • 矢吹 可奈を担当
4. SNS • Twitter ◦ @uutan1108 • GitHub ◦ OHMORIYUSUKE
5. 参加したきかけ
6. 今回、初参加です！ 大学２年のころのイベントに参加したかったが参加でき なかった。今回は、３年前よりレベルアップしたのでオフ ラインで参加！！
7. 作ったもの
8. TypeScriptでAPIクライアントを作っ た • Princess — Public REST APIの TypeScriptのAPIクライアント • ひたすら型定義をしてテストをたく さん書いた • Princess — Public REST APIは アイドルの情報が取得できる WEB API https://github.com/OHMORIYUSUKE/princess-api -sdk/tree/main
9. Princess — Public REST API • アイドルの情報やゲームの イベント情報が取得できる • 20個以上のエンドポイント
10. モチベーション 1. イベントをconpassで発見する 2. 何か作って発表したい！！ 3. 前に使ったことがあるアイマス関連のAPIクライアントを作ろ う！ 4. どうせならnpmに公開したい(公開するのムズそう) 5. テストも書きたいし、ドキュメントも書きたい 6. そして、自分で作ったnpmパッケージを使って満足感を感じた い！
11. 実装
12. これだけでnpmにリリースできた • semantic-release ◦ パッケージ公開 ◦ バージョン管理 ◦ リリースノートの作成を自動化
13. テストをChatGPTに教わりな がら書いた • GPTに構造体を教えて、テ ストを書いてと頼んだら書い てくれる。 • 勝手に謎のパッケージを定 義してくるので注意してあげ た • JSONから構造体も作ってく れる
14. おしゃれなドキュメント(typedoc) • READMEをおしゃれに表示してくれる • コードに書き込んだ メソッドのコメントを ドキュメントに変換
15. 感想
16. 感想 • 意外と簡単にnpmに公開できた • ひたすら型を定義するのは辛い • エンドポイントが多くて実装が間に合わなかった • ChatGPTにJSONを教えて型を作ってもらうとサボれる • TestもChatGPTに質問しながら書いた(Testを書いたの初めて かも)
17. package.jsonに名前が入るのがいい • Node.jsのパッケージ(ライブラリ)管理ファイルに自分のパッ ケージ名が書き込まれる嬉しさ • importするたびに感じる 「npmからインストール したパッケージだぁ」感
18. 完成させられなかったけ ど、npmにも公開できた し、テストも書けた、ド キュメントも書けたし、よ し！
19. 次にやりたいこと
20. 色々なところに表示してるアイドルの誕生日を自分のパッケージに変更 する • 今回、公開したパッケージでアイドルの情報を取得して 各ページに誕生日を表示したい！ ホームページ GitHubトップ
21. ご清聴ありがとう ございました！！