Protocol BuffersとNuxt3で開発生産性を上げるためのスキーマファースト開発の紹介

Vue Fes Japan 2024のLTで発表したスライドです。デモアプリケーションはこちらです: https://github.com/tokuda109/nuxt3-protobuf-project-template

Transcript

1. Protocol BuffersとNuxt3で開発生産性を上 げるためのスキーマファースト開発の紹介 Vue Fes Japan 2024 株式会社メルペイ, Tsuyoshi Tokuda (@tokuda109)
2. • 話すこと ◦ スキーマファースト開発のメリット • 話さないこと ◦ Protocol Buffers(スキーマ)とは何か ◦ 細かい実装方法 今日話すこと / 話さないこと
3. 1. バックエンドの開発が終わるまで先にデザインだけ起こしておく?? 2. バックエンドの開発が終わるとAPI実装と画面組み込みをする 従来の開発の流れ BE: バックエンド開発 FE: マークアップ Designer: デザイン FE: APIの組み込み 組み込み難易度が想 定外に高いことが発 覚することが稀にあ る...
4. 1. バックエンドとフロントエンドでスキーマを定義する 2. Protocol BuffersからAPI実装を生成する a. どこのエンドポイントにリクエストするのか、どのような型のデータ をやりとりするのかは、実装として生成されている b. モックサーバーと BEサーバーのインターフェースは同じ 3. 生成されたAPI実装を使って、画面の開発をする スキーマファースト開発の流れ BE: バックエンド開発 Designer: デザイン TEST環境で確認 FE: フロントエンド開発 BE&FE: Proto定義 ↕ 並行して開発できる
5. • ほとんどのライブラリがスキーマをTypeScriptの型に変換するだけの 機能を提供している • Merpayで使っている protoc-gen-jsonpb-ts は、カスタムオプショ ンを使ってエンドポイントの情報を追加で定義 している Proto => TSの選択肢
6. • ここまで紹介した内容を実際に試すデモアプリケーションを作成しまし た • 詳しい説明は nuxt3-protobuf-project-template の README に 書いているので、触ってみて下さい デモアプリケーション
7. • Merpayのフロントエンドチームは現在エンジニアを採用中です、もし興 味があれば採用サイトを見てみて下さい https://apply.workable.com/mercari/j/B0886945CD/ 最後に