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

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

Tech Leverages
July 20, 2023
3.1k

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

Tech Leverages

July 20, 2023
Tweet

More Decks by Tech Leverages

Transcript

  1. 自己紹介 仲村 友希 • 経歴 ◦ レバレジーズには 2022年の9月に中途入社 • 出身

    ◦ 沖縄県読谷村 ▪ 紅芋タルト ▪ 泡盛 残波などが有名です 👀 • 趣味 ◦ 野球(観戦、実践、ゲーム) ◦ 柴犬の動画や投稿を見る ◦ 旅行
  2. 技術選定について フロントエンドの技術スタック(backendはNestJS) • Nuxt3 ◦ 元々のオウンドメディアが Nuxt/bridgeだった&Vue(Nuxt)の経験者が 多いこともあり、そのまま Nuxt3にバージョンアップ •

    TypeScript ◦ Nuxt3で強力にサポートされていることもあり、問答無用で採用 • GraphQL ◦ 他にもgRPCやRESTで実装する話も出ていましたが、フロントエンド メンバーがメインということもあり、画面ごとにエンドポイント設計が不 要なGraphQLを採用。また、別プロジェクトで grpc-web と Vite の相 性が悪いことも背景としてあった。 • monorepo ◦ toB側の実装も同じ Nuxt3で実装することが決まっていたこともあり、 共通コンポーネントを使用できる点や今後のメンテナンス、 リリース管 理を考えた結果monorepoを採用
  3. 良かったこと • Nuxt3 × TypeScript ◦ 最初は自動インポートに抵抗があったが、使用していくうちにコードはスッキリするし、直感的にscript内部にそのまま記 述していけるので開発効率も上がった。 
 ◦

    Viteを使用することによって、サーバーの起動だけでなく、ホットリロードも瞬時で開発ストレスが少ない! 
 ◦ また組み込みのコンポーネントの自動サジェストや型推論も行ってくれるのでtypoやpropsの定義を間違えにくくなった。 
 ◦ script setup記法で簡潔にシンプルに書けるようになった
  4. 大変だったこと • 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側にも大きく影響してしまうなど )