採用技術/ Selected technologies

松葉 / Matsuba は、TypeScript と Go を主言語として、Next.js 16 / Hono / Better Auth / Prisma 7 / Supabase Postgres / Google Cloud Run / ClamAV といった、現在の Web アプリケーション開発で主流かつ実績のある技術の組み合わせで構築します。本ページでは、レイヤごとの採用技術の全景、特に重要な 5 つの根幹技術の選定理由、TypeScript と Go 間の型共有方針、そして「あえて採用しなかった技術」とその理由を整理してお伝えします。

採用技術の全景Stack at a glance

フロントエンドからインフラ・運用までを 17 のカテゴリで一望します。各行のアイコンは Simple Icons（オープンソースの公式ブランドアイコン集）から、ブランドカラーではなく松葉 / Matsuba のテーマカラー Teal #0E7C75 で配色しています。Simple Icons に未登録の技術（Cloud Run、Pub/Sub、Better Auth、Buf、Turborepo など）は、頭文字のチップで表示しています。

カテゴリ	採用技術	主要ロゴ
Web フロントWeb frontend	Next.js 16（App Router） / React 19 / TypeScript 5.1+。`cacheComponents` + 部分プリレンダリング（PPR）を全体で有効化。
UI・スタイリングUI & styling	Tailwind CSS v4（`@theme inline` でトークン宣言） / shadcn/ui / Radix UI。松葉トークンで上書きして「テンプレート感」を排除。
フォーム・状態Forms & state	React Hook Form + Zod（スキーマ駆動バリデーション） / Zustand（クライアント状態） / nuqs（URL クエリ状態、サーバサイド優先） / TanStack Query v5（サーバ状態キャッシュ）。	TQ
アイコン・プレビューIcons & preview	React Icons（一覧 20 px は vsc + si） / react-file-icon（詳細 64〜128 px、Teal 単色統一） / @react-pdf-viewer/core / react-player / @hello-pangea/dnd。	PDF
バックエンド APIBackend API	Hono 4+ on Node.js 22 / OpenAPIHono + zod-openapi で OpenAPI スキーマ自動生成 / クリーンアーキテクチャ 4 層構成。
認証・認可Auth	Better Auth 1.3+。`organization` / `admin` / `jwt` / `twoFactor` / `emailOTP` プラグインで、社内 SSO・社外メール OTP・JWT 発行・Box 認可を一括管理。	BA
データベースDatabase	Supabase Postgres 16+（東京リージョン、Pro プラン）。DB のみ利用し、認証は Better Auth で別管理。
ORM・スキーマ共有ORM & shared schema	Prisma 7 + `@prisma/adapter-pg` Driver Adapter。`packages/shared` に Zod スキーマ・型・定数・ユーティリティを集約し、FE / BE で再定義禁止。
ストレージObject storage	Google Cloud Storage。5 バケット分離（未検査 / 検査済み / 隔離 / ミラー（ウイルス定義） / 共有 ZIP）、V4 Signed URL、Resumable Upload、Object Versioning。
ウイルススキャンAnti-virus	ClamAV 1.4（オープンソースのウイルスチェックエンジン） + freshclam（シグネチャを 6 時間ごとに自動更新）。Google Cloud 公式リファレンス実装に準拠。	AV
メッセージング・ジョブMessaging & jobs	Cloud Pub/Sub（DLQ 設定、指数バックオフで上限回数まで再試行） / Eventarc（GCS の `object.finalized` を Push） / Cloud Tasks（時間遅延付き HTTP コール） / Cloud Scheduler（cron 相当）。	P/S
Drive 同期ワーカーDrive sync worker	Go 1.23+ + `google.golang.org/api/drive/v3`。Pub/Sub Push Subscriber、Resumable Upload、`appProperties` での突合、日次の補修バッチ。
メールEmail	Resend + react-email（メール本文を TSX で記述、プレビュー可）。Webhook で `delivered` / `bounced` / `complained` をリアルタイム反映。SMS は採用しません。
ホスティングHosting	Google Cloud Run × 4 サービス（web / api / sync / scanner） + Cloud Run Jobs × 1（`docshare-batch` に 18 種統合）。すべて東京リージョン `asia-northeast1`。	CR
CI/CDCI/CD	GitHub Actions + Workload Identity Federation（鍵レスデプロイ） + Turborepo（差分ビルドキャッシュ） + Docker マルチステージビルド。	TB
IaC（構成のコード化）Infrastructure as code	Terraform。`infra/terraform/{modules, envs/prod}` 構成、state は GCS（Object Versioning ON）。PR で `terraform plan`、main マージで `apply`。
監視・ログObservability	Cloud Monitoring（メトリクス・アラート） + Cloud Logging（構造化 JSON、hot / cold の 2 段で保持） + Cloud Error Reporting（例外集約）。通知は Resend メールに統一。
シークレット管理Secret management	Secret Manager。すべてのシークレットを集約し、年次一括ローテ（Better Auth JWKS のみ自動・旧鍵を一定期間並行公開）。`.env` 平文管理は禁止。
テストTesting	Vitest（TS 単体・統合） + Playwright（E2E、クリティカルパス 20 シナリオ以内） + Go testing。モック原則禁止、実 Postgres / fake-gcs-server / Pub/Sub emulator を使用。	Playwright
モノレポ管理Monorepo tooling	pnpm workspace（TS パッケージ依存） + go workspace（Go モジュール） + Turborepo（並列・キャッシュ実行） + Buf CLI（Protocol Buffers の TS / Go 一括生成）。	TBBUF

選定理由 — 5 つの根幹技術Five foundational choices

採用した技術のうち、本サービスの性格を決定づけている 5 つを取り上げます。「なぜそれを選んだか」を、選定時の判断材料とともにお示しします。

Next.js 16

Web Framework

App Router の Cache Components と部分プリレンダリング（PPR）を全体で有効化することで、静的なシェル部分と動的なデータ部分を 1 ページの中で分離して配信できます。社外ユーザの初回ロードを高速化しつつ、利用状況の高い画面（Box 一覧やファイル詳細）も Server Components 中心で軽量に保ちます。最新の React 19 を含む第一線の Web 技術の恩恵を、業務アプリの安定性と両立できる選択肢です。

Better Auth 1.3+

Auth Library

organization / admin / jwt / twoFactor / emailOTP という、本サービスに必要なプラグインが 1 つのライブラリで揃います。特に organization.additionalFields を用いて、Box（共有箱）を organizations テーブルで単一管理する設計と相性が良く、独自に boxes / box_members テーブルを切らずに済みます。社内 SSO の hd 強制とサーバ側ドメイン再検証、社外メール OTP MFA、JWT 鍵の年次ローテも標準機能で実現できます。

Hono + Hono RPC

API Framework

TypeScript ファースト・軽量・Node.js / Cloud Run と相性の良い API フレームワークです。hc<AppType>() の RPC 機構により、Web（Next.js）と API（Hono）の間で TypeScript の型を実行時依存ゼロで共有でき、API のレスポンス型とクライアントが構造的に一致します。Next.js の API Routes は使わず、Hono を経由する一貫した設計で開発速度を確保します。

ClamAV + 5 バケット

Defense in Depth

アップロードされたファイルは、未検査 / 検査済み / 隔離 / ミラー（ウイルス定義） / 共有 ZIP の 5 つに分離された Cloud Storage バケットを経由します。ClamAV 1.4 と freshclam（シグネチャ更新を 6 時間ごとに実行）は Google Cloud 公式リファレンス実装に準拠し、月次の EICAR テスト（無害な検知用文字列での E2E 検証）でスキャナの動作も毎月確かめます。

Workload Identity Federation

Keyless Deploy

GitHub Actions から Google Cloud にデプロイする際、サービスアカウントキー（JSON）を発行せず、GitHub の OIDC（OpenID Connect）トークンを GCP の STS で交換してサービスアカウントを「なりすまし」する方式を採用します。リポジトリ条件（repository_owner == '<owner>' など）でアクセスを制限でき、鍵が GitHub Secrets に保管されないため、鍵の漏洩リスクを減らせます。アプリ実行時のシークレットも Secret Manager から --update-secrets で注入し、平文の .env ファイルを使いません。

採用しなかった技術と理由Considered but not adopted

検討の途中で見送った技術もお示しします。「採用しなかった」ことも設計の一部です。

Not Adopted · MFA

SMS による多要素認証（MFA）

理由: ランニングコスト（1 通あたりの送信費用が高く、社外ユーザ全員の運用で無視できない金額になる）に加え、SIM スワップ攻撃への対応コストが運用面の負担となります。本サービスは メール OTP のみを採用し、信頼デバイス 30 日とバックアップコード 10 個で日常的な負担を軽減します。

Not Adopted · DnD

dnd-kit（ドラッグ & ドロップ）

理由: ドラッグ操作のライブラリとして dnd-kit と @hello-pangea/dnd を比較した結果、後者を採用しました。@hello-pangea/dnd は react-beautiful-dnd の継承版で、キーボード操作によるアクセシビリティが標準で整っており、本サービスの WCAG 2.2 AA 必達という要件に対する追加実装が少なくて済みます。

Not Adopted · Alerting

Slack / PagerDuty への通知

理由: 監視・アラートの通知先を、Slack や PagerDuty などの外部 SaaS に分散させず、Resend のメール 1 経路に集約します。system_admin 全員が同じメールで受け取り、対応ステータス（対応中 / 完了 / 無視）はアプリ内の /admin/alerts で管理します。経路をシンプルに保つことで、運用初期の見落としや設定ミスを減らします。

Not Adopted · Storage

Google Drive を一次ストレージにする構成

理由: Drive 単独運用は Drive API のレート制限と、社内ユーザによる Drive 上での直接編集（誤操作）リスクの両方を抱えます。本サービスは Google Cloud Storage を一次保管とし、Drive は scan_clean 後の片方向ミラーとして位置付けます。Box ごとに同期 ON / OFF を切り替えられ、社内アーカイブも同時に整います。