NFTマーケットプレイス「問茶会」

期間

2023-10〜2024-05

規模

• フロントエンド3名、バックエンド1名、オフショア開発者5名

実際に担当した業務

サーバーサイド以外におけるリードエンジニア/テックリード業務、画面設計、実装、コードレビュー、ペアプロ、Vercelインフラ効率化のためのCICD構築など 稼働全体の概ね80〜90％程度をこの業務に費やしました。

技術構成

• Frontend: Next.js, TypeScript, TailwindCSS
• Backend: Nest.js, Prisma, TypeScript
• Platform: Vercel, GitHub Actions, AWS ECS

成果とその内容

• 炎上していた本件にて途中から参画し、開発環境整備から行い、オーナーシップを取りつつフロント開発者をリードし、無事リリース可能な状態まで進めました
• Vercel CLIをハックすることで$20/member/month の課金額を極限まで減らし開発体験とコストの両立を実現しました(後述)
• 開発を通じてジュニアメンバーの成長促進を行いました

詳細

プロジェクトにおけるリードエンジニア・テックリードとして

本件はオフショア開発がほとんど炎上しかけている中、2023年10月より参画しました。当初のフロントのソースコードはES Lintも動かず、TypeScriptのBuildも失敗するようなコードが平気でMergeされるような状態でした。 私はこのプロジェクトの先行きに強い危機感を感じ、プロジェクト内の開発環境整備としてTurborepoやLinterなどの整備を開発リード業務と並行して行い、開発自体をスケール可能なものとするようにしました。

プロジェクトにおける技術的な課題とその解決策

課題

本プロジェクトにおける最大の技術的な課題は、フロントエンドアプリの配信環境に関してでした。 本プロジェクトではVercelを利用することで、フロントエンドアプリの配信環境を構築していましたが、Vercelの課金体系上、開発メンバー1人に対して課金されるため、コスト面でネックとなっていました。しかしながら、全社的にはインフラエンジニアが不足傾向であったため、代替策を見つけることが難しい状況でした。

解決策

この課題に対して、私はGitHub Actionsを利用して、VercelのGitHub Appの挙動を完全に再現したGitHub ActionsのCICDプロセスを構築しました。 まず、VercelへのデプロイをVercel CLIを利用してTokenを使って行う方法を調査し、その方法をGitHub Actions上で再現することで、BuildをGitHub Actions上で行い、Vercelへのデプロイを行うことができるようにしました。 また、その後この方法を社内でも展開し、次回以降の開発で利用可能となるようにしました。 その詳細についてはこちらを参照してください。

メンバーの育成

本件の開発を通じて、ジュニアメンバーを自律的に動けるように育成することにも意識して取り組みました。 フロントエンドメンバーには実装を一部委譲することに加え、流動的なオフショアメンバーのマネージメントや他の開発者やPM、クライアントとのコミュニケーションの取り方なども身に付けてもらうようにしました。 また、技術面ではコードレビューやペアプロなどを繰り返し行い、フロントエンド領域（Next.js）以外の知識や技術を習得できるような立ち回りを心がけました。 その結果、プロジェクトの後半ではメンバーが自ら動いて仕様や実装方針を決め、技術的な不明点を私に相談するという流れを確立し、プロジェクトを進めていきました。