日本の感動体験を届けるサービス Otonami/Wabunkaを支える技術スタック

はじめに

こんにちは、はじめまして。J-CAT株式会社でエンジニアをしている前田です。

私たちは、「テクノロジーとクリエイティビティで、魅力あふれる日本の姿を世界へ」をミッションに掲げている観光テックカンパニーです。弊社では、特別な感動体験に出会える予約サイト「Otonami」と、日本の魅力を世界へ届けるインバウンド向け予約サービス 「Wabunka」を運営しています。

今回はJ-CATの2024年6月時点での技術スタックをご紹介していきます！

J-CATの組織やプロダクトについては、以下をご参照ください。

https://zenn.dev/jcat/articles/1c67f2d46a08c0

全体感・方針

まずは、J-CATの技術スタックの全体感を歴史的経緯を踏まえてお伝えできればと思います。

J-CATは2019年に創業されました。当初から優秀なエンジニアが2名いたのと、コロナ禍という時流も相まって、プロダクトをしっかり丁寧に作り込むフェーズが比較的長期間ありました。こうした背景によって、初期から「少人数で爆速開発」を目指した丁寧なアプリケーションアーキテクチャの設計がなされており、J-CATのプロダクトの土台になっています。特にBackendはgo + hexagonal architectureで重厚に作られており、プロダクトや組織が成長してもクリティカルな課題が少ないまま開発を続けることができています。まさに「質とスピードは両立する」を表す好例です。

一方で、Frontendに関しては、トレンドが5年で1周すると言われることもありますが、その例外に漏れず、設計の見直しを強いられる機会が(Backendに比べると)多いです。特に、2023年にはNuxt 3へのマイグレーションを経験し、その過程では大きな変更がありました。

現在のJ-CATでは「プロダクトの価値をいかに早くユーザーに届けるか」という観点を強く意識していますが、組織の拡大やプロダクトのフェーズに合わせて柔軟に新しい技術を取り入れる必要も出てきます。例えばIaaC導入の際には、メンバー全員に馴染みのあるtypescriptで書けるpulumiを選定しました。

初期の技術構成である「少人数で爆速開発」を目指した技術スタックを引き継ぎつつ、プロダクト志向で開発でき、そして柔軟に技術選定もできるのはJ-CATの今の強みになってます。

使用している技術

以下、簡単に各領域について、実際にJ-CATで使用されている技術を紹介いたします。

フロントエンド

言語はTypescript、アプリケーションフレームワークはVue 3 / Nuxt 3を採用しています。ロジック部の関心はcomposableにできるだけ分離しつつ、Atomic DesignベースでComponentの設計をしています。

テスト戦略としては、Testing Trophyというフレームワークを意識しています。StorybookベースのIntegration Testを厚くしつつ、詳細なロジックについてはUnit Testを書く方針です。また、重要な機能についてはPlaywrightベースのE2Eを書いています。

バックエンド

バックエンドは、Go言語を使用して構築されています。ルーティングフレームワークとしてEchoを採用しています。ORMにはSQLBoilerを使って、DBスキーマが正となるような設計をしています。冒頭でも触れた通り、アプリのアーキテクチャはヘキサゴナルアーキテクチャを採用していてます。各レイヤーが綺麗に分離されているため高い保守性・良い開発体験を実現できています。（一方で、キャッチアップに時間がかかる、という課題もあったりしますが…）

また、Docker化されており、1コマンドでマイグレーションからインテグレーションテストまでなんでも走るようになっています、便利。

API定義

J-CATのAPIはRESTで設計されていますが、FEとBEで利用している言語が違うため、型整合をとるのにひと工夫が必要になっています。

そこでAPI定義は、Protocol Buffer v3で書くことにして、それを元にTypeScriptとGoのコードを自動生成するようにしています（TypeScriptへの変換はts-proto、Goへの変換はprotoc-gen-goというライブラリを用いています）。

SwaggerもProtoから生成しており、Protoで書かれたスキーマが正となっていて、非常に明瞭です。

インフラ

GCP / Firebase / Cloudflare

インフラは、GCP, FIrebase, Cloudflareが中心となります。

以下に、利用している主要なコンポーネントを挙げてみます。

• Firebase Hosting / Firebase Functions Gen2: SSRを実現するフロントエンドの構成
• Cloud Run, App Engine: バックエンド
• Cloud SQL: DB
• Cloud Storage: ストレージ
• Cloud Loadbalancing: ロードバランサ

CI/CDはgithub actionsで構成されています。

また、Firebase Hosting, Cloud Runなどにはプレビュー環境を構成する機能があり、これを用いてPull Request単位の環境が立ち上がる構成にしています。QAや動作確認はこの環境で完結することが多いので、リリースまでのリードタイム短縮に大きく貢献しています。

↓こんな感じでPRに環境へのリンクがコメントされるようになっています。

ツール群

Github / Slack / Notion / Figma / Linear / Around

エンジニアが主に触るツールはこれらです。

コード管理やコーディングに関わるやり取りはGithub上、仕事全般のやり取りはSlackで行います。

ドキュメント管理はNotionで行いつつ、スクラムで消化するためのチケットなどはLinearに集約しています。

また、オンラインコミュニケーションツールとして、Aroundを利用しています。Miro製だけあってコラボレーションに特化していて、ペアプロなどがやりやすいです。また、リアルで近くにいるとスピーカーがSyncされるなどのすごい機能があったり、面白いGIFをチャットで送って盛り上がれる謎の機能があったり、ミーティングを盛り上げる役割もになってくれています。

おわりに

以上、J-CATの技術スタックやツール群について紹介いたしました。J-CATでの開発をなんとなく想像していただけたら幸いです。

J-CATはこれから新しいプロダクトをどんどん作っていくフェーズであり、技術スタックもどんどん変化していくと思います。そういった面白いフェーズに関心がある方は、ぜひWantedlyのストーリー、および、募集ページもご覧いただけると幸いです。

観光業界をリードしていくスタートアップで挑戦したい方、プロダクト愛を持って全力でやっていきたい方、事業を成長させるエンジニアリングチームでその専門性を発揮していきたい方、ぜひ一度カジュアル面談へお申し込みください！

プロダクトチーム一同、お待ちしております！

ご応募はこちらから↓
https://www.wantedly.com/projects/1721064