友田 陽大
日本語English

訪日外国人向け 飲食店マッチング・予約プラットフォーム

スワイプUI × 5言語 × 生成AIデータ基盤 ｜ Go/Echo クリーンアーキテクチャ + Next.js 16 + AWSサーバーレス ｜ フルスタック（フロント／API／認証／データ基盤）を横断

クライアント

観光・インバウンド領域のサービス（ホテル客室のQRから利用する、訪日外国人向けの飲食店コンシェルジュ）｜ 開発体制: GitHubベースのチーム開発 ｜ 提供: 東京都心エリアの提携飲食店

私の役割

GitHubベースのチーム開発において、フロントエンド（Next.js 16 / React 19）・バックエンドAPI（Go / Echo）・認証基盤（Cognitoカスタム認証）・データ基盤（Python / 生成AI）を横断するフルスタックエンジニアとして参画。多言語ドメインモデル、スワイプUI、パスワードレス認証、AIによる店舗データ多言語化パイプラインの設計・実装に携わりました。

課題（Situation & Task）

訪日外国人は、言語の壁と情報の非対称により「自分の好みに合う飲食店」を見つけにくく、メニューが読めず、予約手段（電話・日本語サイト）も使いづらい。一方でホテル側は多忙で、全ゲストへ多言語で丁寧なレコメンドと予約代行を提供できませんでした。

「言語の壁の解消」を、UI文言だけでなくデータ・認証・運用まで貫く必要がありました。本質的な難所は以下の4点です。

  1. データまで含めた多言語化（5言語）: 日本語・英語・簡体字・繁体字・韓国語で、UI文言だけでなく店名・住所・説明・コース・看板料理・アレルゲン(28種)まで多言語化が必要。数千店舗規模を人手で翻訳するのはコスト・品質・鮮度のいずれも破綻します。

  2. 言語非依存の発見体験: 日本語グルメサイトは情報過多で、外国人には使いづらい。母国語が何であれ直感的に選べる操作（スワイプ）と、時間帯・現在地・予算・ジャンルを踏まえた実用的な提案を両立する必要がありました。

  3. ログイン摩擦の排除: 数日で去る旅行者にパスワード管理を強いると離脱します。Cognito標準のパスワード認証は、低摩擦・多言語という要件に合いませんでした。

  4. 少人数で保つ本番運用品質: 客室QRからの流入をさばくスケーラビリティ、店舗データの鮮度、予約ステータスの整合と通知を、小さなチームで保守可能な形に収める必要がありました。

技術選定の理由（Rationale）

  • Go 1.24 + Echo v4 + google/wire（クリーンアーキテクチャ × DI）: domain / usecase / infrastructure / handler を明確に層分離し、DIで結線。ARM64 Lambdaで低コスト・高速起動、ローカルでは:8080のHTTPサーバとしても起動する二面構成で開発体験を担保

  • MySQL 8.0 + sqlc（型安全な生SQL）: 複雑な店舗検索SQL（19クエリ・約2,250行）をコンパイル時に型検査。ORMの隠蔽を避け、クエリを明示的かつ安全に扱う

  • MultiLanguageText 型をドメインモデルに内蔵: 5言語（ja / en / 簡体字 / 繁体字 / 韓国語）を後付けではなく設計の中心に据え、全テキストフィールドを構造的に多言語化

  • スワイプUIは @react-spring/web + @use-gesture/react: 言語に依存しない直感操作を、ネイティブに近いジェスチャ物理で実現（Like / Nope / SuperLike）

  • パスワードレス認証（Cognito CUSTOM_AUTH）: メールのマジックリンクで、旅行者にパスワードを課さない低摩擦サインインを実現

  • 生成AIによるデータ基盤（OpenAI GPT-4o 構造化出力）: 店舗情報の5言語補完・料理ドメインを踏まえた文脈翻訳・読み仮名生成を、Pydanticスキーマで型安全に。人手では不可能な規模と品質を両立

  • Next.js 16 App Router + Vercel: 多環境（dev / staging / prod）の自動デプロイと、画像最適化・動的インポートによる体感速度の最適化

実施したこと（Action）

  • 【データまで貫く5言語化】 店名・住所・説明・コース・看板料理・アレルゲン(28種)・発見用ハッシュタグ(84種)まで、UI文言に留まらずデータ全体を5言語化。フロントは外部i18nライブラリに頼らず、JSON辞書＋独自の getTranslator / useTranslation フック＋Zustandの言語ストアで、ドット記法キー・パラメータ差込・英語フォールバックを実装

  • 【言語非依存の発見体験】 @react-spring/web ＋ @use-gesture/react でスワイプ（Like / Nope / SuperLike）を実装。画像中心・テキスト最小で、母国語を問わず直感的に選べるUXに設計

  • 【実用的なレコメンドロジック】 バックエンドの店舗抽出で、営業日境界（朝5時）・祝日／祝前日・当日／事前予約を判定し、現在地からの距離（徒歩圏）・予算レンジ・ジャンルで候補を絞ったうえでランダム抽出し、提案の多様性を担保

  • 【パスワードレス認証】 Cognito CUSTOM_AUTH の3トリガー（DefineAuthChallenge / CreateAuthChallenge / VerifyAuthLink）をGoで実装。SESで5言語のメールマジックリンクを送信し、リンク検証で email_verified を更新。リンクパラメータは url.QueryEscape で無害化し、注入を防止

  • 【生成AIデータ基盤】 公開されている店舗情報を収集・正規化（レート制御・重複排除で数千店舗規模へ整備）し、GPT-4o構造化出力で5言語補完・文脈翻訳・読み仮名生成を実施。Streamlitのレビュー画面でスタッフが確認してAPIへ投入、画像はS3へ体系的に整理

  • 【型安全とテスト】 Go側は sqlc で型安全SQL、39のテストファイルで table-driven ＋ gomock、CIは -race -shuffle で競合と順序依存を検出。フロントは TypeScript strict ＋ zod ＋ Storybook / Vitest でコンポーネント品質を担保

  • 【サーバーレス運用】 API・予約ステータス更新（EventBridge Scheduler）・Slack通知（SQS）を3つのARM64 Lambdaに分離。構造化JSONログにリクエストID／トレースIDを付与し、秘匿値はSSM Parameter Store の SecureString で管理。CI/CDは GitHub Actions＋golangci-lint（約40ルール）

プロダクトを貫く設計思想は、「言語の壁の解消」を表層のUIではなく、データ・認証・運用まで含めて構造で担保することでした。

多言語をドメインの中心に据える: バックエンドは MultiLanguageText 型（5言語）をドメインモデルに内蔵し、店舗・コース・アレルゲンまで全テキストを構造的に多言語化。フロントは外部i18nライブラリに依存せず、独自フック＋Zustandで軽量に言語切替を実現しました。人手では不可能な数千店舗規模の翻訳は、OpenAI GPT-4oの構造化出力（Pydanticで型付け）と料理ドメインの文脈翻訳・読み仮名生成で品質と規模を両立しています。

摩擦を消す認証と、言語に依存しない操作: 短期滞在の旅行者に最適化するため、Cognito CUSTOM_AUTH のパスワードレス・メールマジックリンクをGoの3 Lambdaトリガーで実装。発見体験は @react-spring/web ＋ @use-gesture/react のスワイプで、画像中心・テキスト最小に振り切りました。

型安全とサーバーレスで、少人数でも本番品質を保つ: Goは Echo＋google/wire のクリーンアーキテクチャに sqlc の型安全SQLを組み合わせ、39のテストをCIで -race -shuffle 実行して回帰を防止。API・予約ステータス更新（EventBridge）・通知（SQS）を3つのARM64 Lambdaへ分離し、構造化ログ・トレースID・SSMの秘匿管理まで作り込むことで、小さなチームでも保守できる本番運用品質を担保しました。

技術選定の理由

  • Go + Echo + google/wire: DIで結線するクリーンアーキテクチャ（ARM64 Lambda ／ ローカルHTTPの二面構成）

  • MySQL 8.0 + sqlc: 生SQLをコンパイル時に型検査し、複雑な店舗検索を安全に

  • MultiLanguageText（5言語）をドメインに内蔵: UIだけでなくデータまで多言語化

  • @react-spring/web + @use-gesture/react: 言語非依存のスワイプUX

  • Cognito CUSTOM_AUTH パスワードレス: メールマジックリンクでログイン摩擦を排除

  • OpenAI GPT-4o 構造化出力: 店舗データの5言語補完・文脈翻訳・読み仮名生成を型安全に

担当領域

  • フロントエンド開発（Next.js 16 / React 19 / styled-components / TanStack Query / Zustand）
  • バックエンドAPI開発（Go / Echo / google/wire / sqlc / MySQL）
  • 認証基盤の実装（Cognitoカスタム認証・パスワードレス・SES）
  • 生成AIデータ基盤の実装（Python / OpenAI GPT-4o / Streamlit / S3）
  • 多言語ドメイン設計（5言語 MultiLanguageText）とスワイプUXの設計
  • サーバーレス運用（AWS Lambda / EventBridge / SQS）とテスト・CI/CD

使用技術

Go
Echo
google/wire
sqlc
MySQL
Next.js
React
TypeScript
styled-components
@react-spring/web
@use-gesture/react
TanStack Query
Zustand
zod
react-hook-form
Python
OpenAI GPT-4o
Streamlit
Pydantic
AWS Lambda
Amazon Cognito
Amazon SES
Amazon SQS
Amazon EventBridge
Amazon S3
AWS SSM Parameter Store
Google Maps
Terraform
Vercel
GitHub Actions
golangci-lint
Vitest
Storybook
gomock

数字で見る成果

対応言語
5言語日・英・簡体字・繁体字・韓国語。UI文言だけでなく店舗データまで多言語化
自動テスト（API）
39ファイルtable-driven ＋ gomock。CIで -race / -shuffle 実行し競合・順序依存を検出

成果

  • UI文言だけでなく店舗・コース・アレルゲンまで5言語（日・英・簡体字・繁体字・韓国語）に対応し、言語の壁を構造的に解消
  • 生成AI（GPT-4o 構造化出力）で数千店舗規模のデータを多言語補完・構造化し、人手では不可能なコンテンツ基盤を構築
  • 言語非依存のスワイプUI（@react-spring/web ＋ @use-gesture/react）で、母国語を問わず直感的に選べる発見体験を実現
  • パスワードレス（メールマジックリンク／Cognito CUSTOM_AUTH）で、短期滞在の旅行者のログイン摩擦を排除
  • Go/Echoのクリーンアーキテクチャ＋sqlc型安全SQL＋39テスト（CIで `-race -shuffle`）で、回帰に強いAPIを実装
  • API・予約ステータス更新（EventBridge）・通知（SQS）を3つのARM64サーバーレスLambdaに分離し、低コストで運用
  • Next.js 16 / Vercel の多環境CI/CD（dev / staging / prod）と画像最適化・動的インポートで体感速度を最適化

同様の課題、抱えていませんか？

あなたのビジネス課題も、最新の技術で解決できます。 まずは30分の無料技術相談から、状況をお聞かせください。

自社の課題もSaaS化できるか相談する

プロジェクト単位（請負）・技術顧問、どちらにも対応可能です

全ケーススタディを見る