Nuxt3×GraphQL×monorepoで新規プロダクト開発

Transcript

1. Nuxt3 × GraphQL × monorepoで新 規プロダクト開発 レバレジーズ株式会社　仲村 友希 2023/07/11
2. 自己紹介 仲村 友希 • 経歴 ◦ レバレジーズには 2022年の9月に中途入社 • 出身 ◦ 沖縄県読谷村 ▪ 紅芋タルト ▪ 泡盛 残波などが有名です 👀 • 趣味 ◦ 野球（観戦、実践、ゲーム） ◦ 柴犬の動画や投稿を見る ◦ 旅行
3. 目次 • プロダクトについて • 技術選定について • 実際に開発して良かったこと • 実際に開発して大変だったこと • 今後の展望
4. プロダクトについて 🎉新卒エンジニア向けスカウトサービスをリリースしました🎉 元々、エンジニアの就活エージェントの登録導線がメ イン機能だったプロダクトを、エンジニアの就職活動 のための就活サイトへと変革させました！
 スカウトサービス、イベント、エージェントの利用によ り更に、マネタイズできるプロダクトにするのが狙い です
5. 技術選定について フロントエンドの技術スタック（backendはNestJS） • Nuxt3 ◦ 元々のオウンドメディアが Nuxt/bridgeだった&Vue(Nuxt)の経験者が 多いこともあり、そのまま Nuxt3にバージョンアップ • TypeScript ◦ Nuxt3で強力にサポートされていることもあり、問答無用で採用 • GraphQL ◦ 他にもgRPCやRESTで実装する話も出ていましたが、フロントエンド メンバーがメインということもあり、画面ごとにエンドポイント設計が不 要なGraphQLを採用。また、別プロジェクトで grpc-web と Vite の相 性が悪いことも背景としてあった。 • monorepo ◦ toB側の実装も同じ Nuxt3で実装することが決まっていたこともあり、 共通コンポーネントを使用できる点や今後のメンテナンス、 リリース管 理を考えた結果monorepoを採用
6. 良かったこと • Nuxt3 × TypeScript ◦ 最初は自動インポートに抵抗があったが、使用していくうちにコードはスッキリするし、直感的にscript内部にそのまま記 述していけるので開発効率も上がった。 
 ◦ Viteを使用することによって、サーバーの起動だけでなく、ホットリロードも瞬時で開発ストレスが少ない！ 
 ◦ また組み込みのコンポーネントの自動サジェストや型推論も行ってくれるのでtypoやpropsの定義を間違えにくくなった。 
 ◦ script setup記法で簡潔にシンプルに書けるようになった
7. 良かったこと • GraphQL(クライアントはurql)
 ◦ デフォルトでキャッシュが効くので、そこまでパフォーマンスやキャッシュ周りの設計を考えなくても開発を進めることがで きた。(更新頻度が高い箇所は常にキャッシュしないなどの工夫は必要) ◦ Directives(ディレクティブス ) を使用することで、同じ queryでも柔軟にフィールドをスキップしたり、含めたりする事ができ たので柔軟性があった。 queryを２つ書かずに済む。参考 → https://graphql.org/learn/queries/#directives
8. 大変だったこと • Nuxt3 × TypeScript ◦ Nuxt3に対応している周辺ライブラリが少なく大変だった。 nuxt/sessionがNuxt3で動作しないので、自前で session基盤を 作成したり、デフォルトで用意されている redisドライバーがクラスターモードに対応していなかったりと、 Nuxt3自体のコー ドを読んだりNitroサーバー付近を入念に調査する必要があった！ ◦ Nuxt/bridgeでは動作していた GTM（Googleタグマネージャー）が同じトリガーで動作しなくなったりと、外部ツールの方に も影響が出た。(GTM側のイベントトリガーを変えることで解決した ) • GraphQL ◦ まだまだREST APIのように画面単位でエンドポイントを設計してしまっている部分がある。チームで GraphQLの設計を考 えていく必要がある。 • monorepo ◦ 最新への追従が強制されることと。 toB,toCで同じGraphQLのschemaを使用しているので、バージョンを常に合わせない といけない。(toC側で起きた大規模なの schemaのコンフリクトが toB側にも大きく影響してしまうなど )
9. 今後の展望 • 現状のスカウト受信画面をGraphQLのsubscriptionを使用して、チャット機能にアップデートする予定！ ◦ 開発状況や優先度によっては、リアルタイム通信ではなく、その都度メッセージを取得する形式にする。本当に必 要な機能かどうかはチームで相談中です...👀 • Amplify StudioでLP(ランディングページ)を量産していく予定... ◦ 今回詳細は省きますが、、社内でAmplify Studioを使用して爆速でLPを作成するナレッジが溜まっているので Amplify Studio ✖ React ✖ GraphQLでLPを作成して集客をしていく予定です！