Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

ohmori_yusuke

June 03, 2023
Tweet

More Decks by ohmori_yusuke

Other Decks in Technology

Transcript

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

    View Slide

  2. 自己紹介

    View Slide

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

    View Slide

  4. SNS
    ● Twitter
    ○ @uutan1108
    ● GitHub
    ○ OHMORIYUSUKE

    View Slide

  5. 参加したきかけ

    View Slide

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

    View Slide

  7. 作ったもの

    View Slide

  8. TypeScriptでAPIクライアントを作っ

    ● Princess — Public REST APIの
    TypeScriptのAPIクライアント
    ● ひたすら型定義をしてテストをたく
    さん書いた
    ● Princess — Public REST APIは
    アイドルの情報が取得できる
    WEB API
    https://github.com/OHMORIYUSUKE/princess-api
    -sdk/tree/main

    View Slide

  9. Princess — Public REST API
    ● アイドルの情報やゲームの
    イベント情報が取得できる
    ● 20個以上のエンドポイント

    View Slide

  10. モチベーション
    1. イベントをconpassで発見する
    2. 何か作って発表したい!!
    3. 前に使ったことがあるアイマス関連のAPIクライアントを作ろ
    う!
    4. どうせならnpmに公開したい(公開するのムズそう)
    5. テストも書きたいし、ドキュメントも書きたい
    6. そして、自分で作ったnpmパッケージを使って満足感を感じた
    い!

    View Slide

  11. 実装

    View Slide

  12. これだけでnpmにリリースできた
    ● semantic-release
    ○ パッケージ公開
    ○ バージョン管理
    ○ リリースノートの作成を自動化

    View Slide

  13. テストをChatGPTに教わりな
    がら書いた
    ● GPTに構造体を教えて、テ
    ストを書いてと頼んだら書い
    てくれる。
    ● 勝手に謎のパッケージを定
    義してくるので注意してあげ

    ● JSONから構造体も作ってく
    れる

    View Slide

  14. おしゃれなドキュメント(typedoc)
    ● READMEをおしゃれに表示してくれる
    ● コードに書き込んだ
    メソッドのコメントを
    ドキュメントに変換

    View Slide

  15. 感想

    View Slide

  16. 感想
    ● 意外と簡単にnpmに公開できた
    ● ひたすら型を定義するのは辛い
    ● エンドポイントが多くて実装が間に合わなかった
    ● ChatGPTにJSONを教えて型を作ってもらうとサボれる
    ● TestもChatGPTに質問しながら書いた(Testを書いたの初めて
    かも)

    View Slide

  17. package.jsonに名前が入るのがいい
    ● Node.jsのパッケージ(ライブラリ)管理ファイルに自分のパッ
    ケージ名が書き込まれる嬉しさ
    ● importするたびに感じる
    「npmからインストール
    したパッケージだぁ」感

    View Slide

  18. 完成させられなかったけ
    ど、npmにも公開できた
    し、テストも書けた、ド
    キュメントも書けたし、よ
    し!

    View Slide

  19. 次にやりたいこと

    View Slide

  20. 色々なところに表示してるアイドルの誕生日を自分のパッケージに変更
    する
    ● 今回、公開したパッケージでアイドルの情報を取得して
    各ページに誕生日を表示したい!
    ホームページ
    GitHubトップ

    View Slide

  21. ご清聴ありがとう
    ございました!!

    View Slide