microCMS × OpenAPIで高速かつ安全な開発を行う話

2022年4月21日に行われた microCMS Online Meetup の発表資料です。
https://microcms.connpass.com/event/240629/

発表のアーカイブをYouTubeで公開しています。こちらもあわせてご覧ください。
https://www.youtube.com/watch?v=2BBsCR1Mop8&t=3540s

Transcript

1. #microcms_meetup
   

   View Slide

2. 目次
   2
   ● そもそも OpenAPI とは？
   ● microCMS の OpenAPI 連携機能の紹介
   ● microCMS の API の未来について
   #microcms_meetup
   

   View Slide

3. 自己紹介
   ● 入沢翼 (@lambdasawa)
   ● https://www.lambdasawa.me/
   ● microCMS のバックエンドエンジニア
   3
   #microcms_meetup
   

   View Slide

4. 目次
   4
   ● そもそも OpenAPI とは？
   ● microCMS の OpenAPI 連携機能の紹介
   ● microCMS の API の未来について
   #microcms_meetup
   

   View Slide

5. そもそも OpenAPI とは？
   ● RESTful API の仕様を表現するための仕様
   ● 言語非依存 & 機械可読 (JSON or YAML)
   ● 人間に優しいフォーマットにも変換できる
   5
   #microcms_meetup
   

   View Slide

6. 想定する API の例
   6
   

   View Slide

7. OpenAPI 定義ファイル
   7
   

   View Slide

8. OpenAPI 定義ファイル
   8
   

   View Slide

9. OpenAPI 定義ファイル
   9
   

   View Slide

10. OpenAPI 定義ファイル (paths)
    10
    

    View Slide

11. OpenAPI 定義ファイル (paths)
    11
    

    View Slide

12. OpenAPI 定義ファイル (paths)
    12
    

    View Slide

13. OpenAPI 定義ファイル (paths)
    13
    

    View Slide

14. OpenAPI 定義ファイル (components)
    14
    

    View Slide

15. OpenAPI 定義ファイル (components)
    15
    

    View Slide

16. OpenAPI 定義ファイル (components)
    16
    

    View Slide

17. OpenAPI 定義ファイル (components)
    17
    

    View Slide

18. OpenAPI 定義ファイル (components)
    18
    

    View Slide

19. OpenAPI 定義ファイル (components)
    19
    

    View Slide

20. OpenAPI を使うメリット
    ● 曖昧さが無い
    ● 「foo が空になる」とは？
    ○ {“foo”: “”} なのか？
    ○ {“foo”: null} なのか？
    ○ {} なのか？
    20
    #microcms_meetup
    

    View Slide

21. OpenAPI を使うメリット
    ● 豊富なエコシステムと連携できる
    ● コード生成 (openapi-generator など)
    ● ドキュメント生成 (Swagger UI, ReDoc, RapiDoc)
    ● モックサーバ生成 (Prism)
    ● 自動バリデーション (committee-rails, express-openapi-validator)
    ● GUI エディター (Stoplight Studio)
    21
    #microcms_meetup
    

    View Slide

22. 目次
    22
    ● そもそも OpenAPI とは？
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup
    

    View Slide

23. microCMS の OpenAPI 連携機能の紹介
    23
    (画面は開発中のものです)
    

    View Slide

24. コード生成をするコマンド
    24
    #microcms_meetup
    

    View Slide

25. API 一覧の補完
    25
    #microcms_meetup
    

    View Slide

26. API 一覧の補完 (確定後)
    26
    #microcms_meetup
    

    View Slide

27. クエリストリングの補完と型チェック
    27
    #microcms_meetup
    

    View Slide

28. レスポンスボディの補完
    28
    #microcms_meetup
    

    View Slide

29. リクエストボディの補完と型チェック
    29
    #microcms_meetup
    

    View Slide

30. 目次
    30
    ● そもそも OpenAPI とは？
    ● microCMS の OpenAPI 連携機能の紹介
    ● microCMS の API の未来について
    #microcms_meetup
    

    View Slide

31. API v2 を開発中
    ● よりキレイな API に
    ● OpenAPI と自動バリデーションを活用してより堅牢な API に
    ● OpenAPI 連携機能は API v2 から提供される予定
    31
    #microcms_meetup
    

    View Slide

32. API v2 のリリース スケジュール (予定)
    32
    #microcms_meetup
    

    View Slide

33. マネジメント API を強化
    ● コンテンツ API 同様に RESTful な API として提供予定
    ● 管理画面で出来ることはなんでも API でも出来るように
    33
    #microcms_meetup
    

    View Slide

34. マネジメント API として提供されるもの
    ● 例) メディアの検索、アップロード、削除
    ● 例) API スキーマの CRUD
    ○ OpenAPI 以外のアプローチでコード生成
    ○ 逆に TypeScript から API スキーマ生成
    ● 例) レビューの CRUD
    ○ 放置されたレビューを Slack でリマインド
    34
    #microcms_meetup
    

    View Slide

35. 35
    #microcms_meetup
    

    View Slide

36. ご清聴ありがとうございました
    36
    https://microcms.io
    Copyright © microCMS All rights reserved.
    #microcms_meetup
    

    View Slide