AVITA株式会社が開発するAVACOMは、リアルとWEBで利用できるオンライン接客サービスです。
この記事ではAVACOMのWEBの開発でフロントエンドではどのような技術を採用しているかご紹介します。
SkyWay (WebRTC)
接客サービスで通信をする部分はSkyWayを利用して開発を行っています。SkyWayは2023年1月31日に大幅なリニューアルをしていていますが、AVACOMではリニューアル前からSkyWay利用していたので、このリニューアルにも追従して開発を行っています。
GraphQL
APIサーバーとの通信はGraphQLを利用した通信を行っています。サービス開発当初はApollo Clientを利用して開発していましたが、現在は部分的にurqlの採用も行っています。
Next.js の app directory や RSC (React Server Components)へのサポート状況等を考慮し、利用する通信ライブラリを変える可能性はあるだろうと思っています。
React, Next.js, TypeScript
サービスの開発当初から、React, Next.js, TypeScriptを利用しています。メインの開発ではチーム全体で一貫してReactを利用しており、現在ではフロントエンドエンジニア全員にReactのナレッジが溜まるようになっています。
Package Manager
サービス開発初期はyarn 1 を利用していましたが、記事執筆時点ではpnpmへの移行を順次進めています。
後述のインフラの影響で、デプロイ時におけるpnpmの利点を完全に活かしきれていませんが、yarn 2やyarn 3への移行はpnpmへの移行よりも難しい部分があると判断して見送っています。
インフラ
AWS Amplify ホスティング で、 Next.js をホスティングしています。lambda の影響で symbolic linkを使えないため、 pnpmを利用している Next.js のホスティングでは node-linker=hoisted を有効化して利用しています。
（参考）
- https://docs.aws.amazon.com/amplify/latest/userguide/monorepo-configuration.html#turborepo-pnpm-monorepo-configuration
- https://pnpm.io/npmrc#node-linker
状態管理
サービスの開発当初はフロントエンド専任のエンジニアが少なかったため、巷の情報量が多いことと人によるバラツキを軽減できそうなことから、@reduxjs/toolkit を採用していました。ただし、一部WebRTC由来の non-serializable values の値は useContext を利用して管理しておりました。
現在はフロントエンド専任のエンジニアが増え新しい技術の利用を採用する余裕ができた為、前述のWebRTCのSaaSのバージョンアップに伴って、状態管理はRecoilへの移行を進めております。
ユニットテスト
カバレッジをCIで検知していて、設定されている閾値を下がらないように開発をしています。CIでの検知は開発の途中段階で導入しましたが、現在は少なめの閾値で65%以上を担保しています。
CI
テストのカバレッジの計測や静的解析をCIで実施することで、機械的なコードの品質の担保をしています。機械的な検知を行うことで、コードレビュー時の負担を軽減することも目的の一つにしています。
最後に
AVITAでは、フロントエンドエンジニアを積極的に募集しております。
ぜひ一度カジュアル面談でお話しませんか？
詳しくはこちら → Wantedly
Discussion