<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
acomo は、開発者のためのワークフロープラットフォームとして、申請・承認ワークフローの 
開発をより自由に、より気軽にすることを目指しています。ヘッドレス志向で設計された 
API ベースのプラットフォームとして、バックエンドとフロントエンドを切り離した柔軟な 
アーキテクチャを採用しています。
この記事では、acomo の技術スタックについて、詳しく解説します。
<h2 id="%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3%E6%A6%82%E8%A6%81" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3%E6%A6%82%E8%A6%81" aria-hidden="true"></a> アーキテクチャ概要</h2>
acomo は以下の特徴を実現するため、先進的な Web 技術とクラウドサービスを組み合わせた 
アーキテクチャを採用しています。
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">システム連携しやすい API</li>
<li data-line="15" class="code-line">セキュアな認証・認可</li>
<li data-line="16" class="code-line">スケーラブルな実行環境</li>
<li data-line="17" class="code-line">ワークフローの柔軟なモデリング UI</li>
<li data-line="18" class="code-line">フロントエンドからバックエンドまで TypeScript で統一された開発体験</li>
</ul>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--9OX8CLBU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/71f217d9e99324b4a449aa7a.png%3Fsha%3D39af7bfa1632c391acb580720ee9e264601e3586" alt="acomo のアーキテクチャ概要図" loading="lazy" class="md-img">
<h2 id="%E4%B8%BB%E8%A6%81%E6%8A%80%E8%A1%93%E8%A6%81%E7%B4%A0" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%BB%E8%A6%81%E6%8A%80%E8%A1%93%E8%A6%81%E7%B4%A0" aria-hidden="true"></a> 主要技術要素</h2>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> フロントエンド</h3>
acomo のフロントエンドは、Vue/Nuxt をベースに構築しています。この選択は、開発開始時点でのチーム状況を考慮したものでした。
<ul data-line="28" class="code-line">
<li data-line="28" class="code-line">チーム内にある Vue/Nuxt の豊富な開発経験</li>
<li data-line="29" class="code-line">効率的な開発立ち上げの実現</li>
<li data-line="30" class="code-line">TypeScript との親和性の高さ</li>
</ul>
acomo エコシステム本体は現在も Vue/Nuxt を継続採用している一方、周辺プロジェクトでは React/Next も積極的に活用しています。
主要な技術スタックは以下です。
<ul data-line="36" class="code-line">
<li data-line="36" class="code-line">
Nuxt 3 / Vue 3: フロントエンド・フレームワーク</li>
<li data-line="37" class="code-line">
Vuetify 3: UI コンポーネントライブラリ</li>
<li data-line="38" class="code-line">
Vue Flow: グラフ描画ライブラリ</li>
</ul>
特にワークフローの視覚化とモデリングにおいては、Vue Flow を活用することで、直感的な操作性と柔軟なカスタマイズを実現しています。
<h3 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> バックエンド</h3>
ワークフローエンジンおよび API 基盤の中核として、型安全性とスケーラビリティを重視したバックエンド構成を採用しています。
NestJS は重厚なフレームワークですが、複雑な認証・認可の実装や OpenAPI 仕様書の自動生成など、acomo に必要な機能を効率的に提供しています。 
また、Prisma により、データベース周りの開発体験（マイグレーション管理やクライアントコード生成）が大きく向上しています。
主要な技術スタックは以下です。
<ul data-line="51" class="code-line">
<li data-line="51" class="code-line">
NestJS: TypeScript ベースのバックエンドフレームワーク</li>
<li data-line="52" class="code-line">
Prisma: データベース ORM</li>
<li data-line="53" class="code-line">
OpenAPI Generator: API クライアント生成</li>
<li data-line="54" class="code-line">
Jest: テストフレームワーク</li>
</ul>
<h3 id="%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%83%81%E3%83%A3" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%83%81%E3%83%A3" aria-hidden="true"></a> インフラストラクチャ</h3>
多様な業務要件に対応可能な安定性とスケーラビリティを確保するため、Google Cloud を 
ベースとしたクラウドネイティブなインフラストラクチャを構築しています。
バックエンドサーバーは Cloud Run 上にコンテナベースで動作します。データベースには 
Cloud SQL 上の PostgreSQL を採用しています。データベース層では、SaaS としての運用を 
見据え、PostgreSQL の Row Level Security（RLS）を活用しています。これにより、 
マルチテナントアーキテクチャによる確実なテナント間のデータ分離を実現しています。
主要な技術スタックは以下です。
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">
Google Cloud
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line">Cloud Run: コンテナホスティング</li>
<li data-line="70" class="code-line">Cloud SQL (PostgreSQL): データベース</li>
<li data-line="71" class="code-line">Firebase Storage: ファイルストレージ</li>
</ul>
</li>
</ul>
<h3 id="%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" data-line="73" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 開発環境</h3>
開発効率と品質を両立するため、フロントエンドからバックエンドまで TypeScript を 
採用しています。また、モノレポ構成により型定義の共有と開発効率の向上を 
実現しています。
主要な技術スタックは以下です。
<ul data-line="81" class="code-line">
<li data-line="81" class="code-line">
Visual Studio Code: 統合開発環境</li>
<li data-line="82" class="code-line">
Docker: コンテナ化環境</li>
<li data-line="83" class="code-line">
Git: バージョン管理</li>
<li data-line="84" class="code-line">
ESLint/Prettier: コード品質管理</li>
</ul>
<h3 id="%E5%A4%96%E9%83%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-line="86" class="code-line">
<a class="header-anchor-link" href="#%E5%A4%96%E9%83%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" aria-hidden="true"></a> 外部サービス</h3>
セキュリティ、決済、コミュニケーションなど、専門的な機能は信頼性の高い外部サービスを 
活用しています。
認証基盤には SuperTokens を採用し、外部認証プロバイダーとの連携や API レベルでの 
認証管理を実現しています。また、OpenAI の LLM を活用し、ワークフローの自動生成など 
先進的な機能開発も進めています。
主要な技術スタックは以下です。
<ul data-line="97" class="code-line">
<li data-line="97" class="code-line">
SuperTokens: 認証基盤</li>
<li data-line="98" class="code-line">
Stripe: 決済プラットフォーム</li>
<li data-line="99" class="code-line">
Slack: コミュニケーション連携</li>
<li data-line="100" class="code-line">
SendGrid: メール配信サービス</li>
<li data-line="101" class="code-line">
OpenAI: 生成 AI 機能</li>
<li data-line="102" class="code-line">
GitLab/GitHub: ソース管理・CI/CD</li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A8%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%B1%95%E6%9C%9B" data-line="104" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A8%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%B1%95%E6%9C%9B" aria-hidden="true"></a> まとめと今後の展望</h2>
この記事では、acomo の技術スタックの全体像を紹介しました。フロントエンドから 
バックエンド、インフラまで、TypeScript を中心とした一貫した開発体験を提供する構成を 
実現しています。
今後は、各要素の詳細な実装や知見を共有していく予定です。
引き続き acomo の技術に関する情報を発信していきますので、ご期待ください。

acomo を支える技術 ～ 技術スタック紹介

nuxt

acomo を支える技術～技術スタック紹介

Discussion