本文へ移動
Matsuba Inside

Technology

使用技術

松葉を構成する技術を、フロントエンドから Google Cloud のサービスまで分類ごとに、バージョンと用途つきで示します。主要な技術は常に表示し、補助的な技術は分類ごとに開いて読めます。

全体像

言語
TypeScript / Go / SQL
アプリケーション
5
共有パッケージ
12
画面
68
API エンドポイント
375
テーブル
61

2026-09-17 時点の数値とバージョン（開発期間の終わりのソースコード）

動かす技術

利用者が触れる画面から、API・非同期処理・データ・認証・メールまで、松葉を動かしている技術です。

フロントエンド

利用者と管理者が使う Web アプリです。Next.js の App Router に shadcn/ui の部品を組み合わせ、サーバ状態は TanStack Query、フォームは React Hook Form と zod で扱います。

  • Next.js16.3.5Web アプリの基盤（App Router・Cache Components・standalone の出力）
  • React19.3.0UI の描画（React DOM を含む）
  • TypeScript5.9.3言語（strict の設定を全ワークスペースで共有）
  • Tailwind CSS4.3.3スタイル（色・角丸・影はトークンの CSS 変数で管理）
  • shadcn/ui4.21.0UI 部品の土台（CLI で生成し、規約に合わせて調整）
  • TanStack Query5.102.8サーバ状態の取得とキャッシュ
  • zod4.6.3入力の検証スキーマ（API と同じ定義を共有）
フロントエンドの補助の技術（35 項目）

  • 状態とフォーム

    • React Hook Form7.88.0フォームの状態と検証（resolver で zod と接続）
    • Zustand5.0.15クライアント状態
    • nuqs2.10.1URL のクエリで持つ状態

  • UI 部品

    • Radix UI1.6.7アクセシブルなプリミティブ（ダイアログ・メニューなど）
    • Base UI1.8.0コンボボックス・数値入力のプリミティブ（Radix と併用）
    • react-icons5.7.0画面のアイコンの主な供給元（Feather・ファイルの種類・製品ロゴ）
    • Lucide1.45.0shadcn/ui の部品が内部で使うアイコン
    • motion12.43.0アニメーション
    • next-themes0.4.6ライトとダークのテーマの切替
    • Embla Carousel8.6.0カルーセル
    • input-otp1.5.0ワンタイムコードの入力欄
    • React Day Picker10.0.1日付の選択
    • React Resizable Panels4.12.4分割パネル

  • ファイル操作

    • Pragmatic drag and drop2.0.2ファイルとフォルダのドラッグ & ドロップ（自動スクロールと読み上げの補助を含む）
    • Headless Tree1.7.0フォルダのツリー
    • hash-wasm4.12.0ブラウザでのハッシュ値の計算（転送中の改変をスキャン時に照合）
    • file-type22.1.0ファイルの種類の判定
    • react-easy-crop6.2.3画像の切り抜き（アバター）
    • Papa Parse5.7.0CSV の解析（プレビューと利用者の一括取り込み）
    • encoding-japanese2.3.0日本語の文字コードの判定（Shift_JIS・EUC-JP）

  • プレビュー

    • PDF.js5.4.296PDF のプレビュー（React PDF と組み合わせ）
    • React PDF10.5.0PDF のページの描画
    • Media Chrome4.19.2動画・音声のプレビューの操作部
    • react-zoom-pan-pinch4.2.0画像の拡大とパン
    • TanStack Virtual3.14.12CSV のプレビューの表の仮想スクロール

  • ヘルプと本文

    • Fumadocs16.15.9アプリ内ヘルプ（MDX の記事）
    • MDX3.1.1ヘルプの本文の形式
    • Orama3.1.18ヘルプの全文検索（ブラウザ内）
    • react-lite-youtube-embed3.7.0ヘルプ記事の動画の埋め込み（再生するまで読み込まない）
    • react-markdown10.1.0お知らせ・規約・Markdown ファイルのプレビューなどの描画（サニタイズつき）
    • Linkify4.3.3コメント本文の URL の自動リンク

  • 編集と表示

    • CodeMirror6.7.2通知テンプレートの編集欄
    • Recharts3.10.1管理ダッシュボードの図表
    • diff9.0.0差分の表示
    • date-fns4.4.0日時の処理（タイムゾーンの拡張を含む）

API

Node.js の Hono で作った HTTP API です。スキーマ駆動で OpenAPI を生成し、Cloud Run のサービスとして動きます。

  • Hono4.13.7API サーバ（Node.js アダプタで Cloud Run のサービスとして起動）
  • Node.js22.23.2Web・API・サムネイル生成の実行環境（コンテナのイメージも同じバージョン）
  • Hono Zod OpenAPI1.6.3zod のスキーマからルーティングと OpenAPI を生成（生成物をコミットし差分を単体テストで固定）
  • google-auth-library9.15.1OIDC トークンの検証とサービスアカウントでの認証
  • sharp0.35.4画像の変換（サムネイル生成の側でも使用）
APIの補助の技術（15 項目）

  • 実行と配布

    • tsup8.5.1ビルド
    • tsx4.23.13開発時の実行
    • Swagger UI0.6.1API 仕様の表示（システム管理者だけに公開）

  • 機能の補助

    • yazl3.3.1ZIP の生成（一括ダウンロード）
    • pg-copy-streams7.0.0監査ログの CSV の書き出し
    • croner10.0.1cron 式の解釈
    • p-limit7.3.2並列数の制御
    • maxmind5.0.7IP アドレスからの地域の推定（MaxMind DB 形式のデータを読む）
    • GeoLite2 City地域の推定に使うデータ（ip-location-db の npm パッケージ）
    • Bowser2.14.1User-Agent の解析
    • i18n-iso-countries7.14.0国名の表示

  • Google Cloud のクライアント

    • @google-cloud/storage7.22.0Cloud Storage のクライアント
    • @google-cloud/pubsub4.11.0Pub/Sub のクライアント
    • @google-cloud/tasks6.3.0Cloud Tasks のクライアント
    • @google-cloud/scheduler6.1.0Cloud Scheduler の宣言と実機の照合（スクリプト）

非同期処理

時間のかかる処理と定期の処理です。Go の同期とスキャンのサービスと Node.js のサムネイル生成はイベントで動き、API と同じイメージのジョブ群は Cloud Scheduler と API から起動します。

  • Go1.26.8共有ドライブへの同期とウイルススキャンのサービス
  • ClamAV1.4.6アップロードされたファイルのスキャン（定義は別のジョブで更新）
  • PDFium2.1.13PDF の先頭ページのサムネイル描画（WebAssembly で実行）
  • FFmpeg動画のポスターフレームの抽出（サムネイル生成サービス）
  • @bufbuild/protobuf2.15.0Pub/Sub のメッセージの型（同じ定義から Node.js と Go のコードを生成）
非同期処理の補助の技術（12 項目）

  • Go のライブラリ

    • pgx5.11.0Go からの PostgreSQL 接続
    • google.golang.org/api0.297.0Drive API・Cloud Run Admin API・Cloud Monitoring・ID トークン
    • cloud.google.com/go/storage1.67.1Cloud Storage のクライアント（Go）
    • cloud.google.com/go/pubsub1.51.1Pub/Sub のクライアント（Go）
    • google.golang.org/protobuf1.36.12Go 側の生成コード
    • google/uuid1.6.0UUID v7 の採番
    • mimetype1.4.15ファイルの種類の判定

  • サムネイル生成

    • libheif1.23.4HEIC の読み込み（ソースからビルド）
    • libde2651.1.2HEVC のデコード（ソースからビルド）
    • libvips8.18.6sharp が使う画像処理ライブラリ（ソースからビルド）

  • 実行イメージ

    • Distroless同期サービスの最小の実行イメージ（静的バイナリ用・非 root で実行）
    • cvdupdateClamAV の定義ファイルの取得とミラー

データ層

Supabase のマネージド PostgreSQL に Prisma で接続し、行レベルセキュリティで可視範囲をデータベース側で強制します。日本語の全文検索は PGroonga です。

  • PostgreSQL17主データストア（Supabase のマネージド・コネクションプーラ経由と直接の接続）
  • Prisma7.10.0ORM（ドライバアダプタで pg に接続し、Enum を zod に再利用）
  • PGroonga3.2.5日本語の全文検索の拡張（CI も同じバージョン）
  • Row Level Securityテーブルごとのポリシーで行の可視範囲をデータベースで強制
データ層の補助の技術（3 項目）
  • pg8.23.0Node.js の PostgreSQL ドライバ
  • @prisma/adapter-pg7.10.0Prisma のドライバアダプタ
  • Table partitioning監査ログを月ごとのレンジパーティションに分割（pg_partman と pg_cron で保守）

認証・認可

Better Auth を土台に、Google アカウントでのサインインと 2 段階認証を備え、共有スペースごとの役割で権限を扱います。

  • Better Auth1.6.22認証の基盤（管理者・2 段階認証・メール OTP・共有スペースを表す組織のプラグイン）
  • Google OAuthGoogle アカウントでのサインイン
  • Role-based access閲覧者・投稿者・編集者・オーナーの役割で共有スペースごとに操作を許可
認証・認可の補助の技術（1 項目）
  • OIDC ID tokenPub/Sub と Eventarc の push の認証（ID トークンの署名・宛先・送信元を検証）

メール

通知メールは React Email で組み、Handlebars で差し込み、外部サービスの Resend から送ります。

  • React Email1.0.12メールのテンプレートを React で記述
  • Handlebars4.7.9本文への差し込み（API と共有）
メールの補助の技術（2 項目）
  • @react-email/render2.1.0テンプレートを HTML に描画
  • react-email CLI6.9.5テンプレートのプレビュー（開発用）

全体像へ戻る

基盤

松葉が動く場所です。Google Cloud のサービスと、それ以外の外部サービスに分けています。

Google Cloud

実行基盤は Cloud Run です。ストレージ・メッセージング・スケジューリング・シークレット・観測・配信の各サービスを使い、コンソールで構築した設定を宣言ファイルと照合しています。

  • 実行

    • Cloud Run servicesWeb・API・スキャン・同期・サムネイル生成の各サービス
    • Cloud Run jobsAPI のバッチ・Drive 同期のバッチ・ClamAV の定義の更新

  • ストレージ

    • Cloud Storage用途ごとのバケット（未検査・検査済み・隔離・サムネイルなど）と署名付き URL での直接の送受信

  • メッセージング

    • Pub/Subドメインイベントの配送（Outbox から発行し購読側で処理・デッドレターつき）
    • EventarcCloud Storage への書き込みをスキャンのサービスへ通知（OIDC で検証）
    • Cloud Tasks通知メールの送信キュー

  • スケジューリング

    • Cloud Scheduler定期のジョブの起動（宣言ファイルと実機の差分を日次で検査）

  • シークレットと認証

    • Secret Manager機密の設定値をサービスに渡す（デプロイ時に由来を検査）
    • Workload Identity FederationGitHub Actions から鍵を持たずに認証（OIDC）

  • 観測

    • Cloud Logging構造化ログの収集と、ログの一致によるアラート
    • Cloud Monitoringアラートポリシーを宣言ファイルで管理し実機と照合

  • 配信と防御

    • Cloud Load BalancingWeb と API を同じオリジンで配信（/api 配下を API のサービスへ振り分け）
Google Cloudの補助の技術（7 項目）

  • 実行

    • Artifact Registryコンテナイメージの保管
    • Cloud Build初回のイメージの作成だけに使用
    • Cloud Run Admin APIAPI と同期サービスからのジョブの起動（ZIP の作成・監査ログの書き出し・同期など）

  • シークレットと認証

    • IAM / service accounts署名用・Drive 用など、用途ごとのサービスアカウント

  • 観測

    • Error Reporting未捕捉の例外の自動集約（デプロイしたバージョンごと）

  • 配信と防御

    • Cloud Armorロードバランサの前段の WAF（OWASP のルールセットと送信元ごとのレート制限）
    • Cloud DNSドメインの DNS の管理（送信ドメインのレコードを宣言から適用し照合）

外部サービス

Google Cloud 以外に利用している外部のサービスです。

  • Supabaseマネージド PostgreSQL（コネクションプーラ経由と直接の接続）
  • Resend6.28.0トランザクションメールの送信と、配信結果の Webhook での受信
  • Google Drive共有ドライブへのアーカイブの同期（Drive API v3）
  • GitHubソース管理・CI/CD（Actions）・依存の更新（Dependabot）
外部サービスの補助の技術（2 項目）
  • Google Workspace Admin SDKWorkspace のアカウントの停止を日次で観測し、セッションを失効して管理者へ通知
  • buf.buildProtocol Buffers のリモート生成（プラグインをローカルに置かない）

全体像へ戻る

品質

壊さずに変え続けるための仕組みです。テスト・静的解析・CI/CD・観測性に分けています。

テスト

モックを原則使わず、実際の PostgreSQL と Cloud Storage の代替を CI のコンテナで動かして検証します。

  • Vitest4.1.11単体・結合・行レベルセキュリティ・性能の各テスト（API は設定を分けて実行）
  • Playwright1.63.0E2E（未認証・認証済み・メンテナンスモードのプロジェクトに分けて実行・不安定なテストは隔離）
  • go testGo のサービスのテスト
テストの補助の技術（2 項目）
  • groonga/pgroonga3.2.5CI のサービスコンテナ（Supabase と同じバージョンの PGroonga を入れた PostgreSQL）
  • fake-gcs-serverCI で Cloud Storage を代替するサービスコンテナ

静的解析

ESLint の flat config に独自の禁止規則を足し、設計上の約束はテストで機械的に守ります。

  • ESLint9.39.5flat config（base・nextjs・node・api の共有設定と、独自の禁止構文・import の制限）
  • typescript-eslint8.65.0TypeScript の構文解析と規則
  • Architecture testsバレルの禁止・機能間の循環参照の禁止・live region の構造などの約束をテストで検査
静的解析の補助の技術（2 項目）
  • eslint-config-next16.3.5Next.js の規則
  • Prettier3.9.6整形

CI/CD

GitHub Actions で検証とデプロイを分け、鍵を持たずに Cloud Run へ配ります。依存の更新は Dependabot です。

  • GitHub ActionsCI（lint・型・テスト・E2E）と、変更のあったアプリケーションだけを配る CD
  • Docker各アプリケーションのコンテナイメージ（CD がランナー上で組み立てて Artifact Registry へ）
  • Dependabotnpm・Go・GitHub Actions・Docker の依存の更新
CI/CDの補助の技術（11 項目）
  • actions/checkoutv7リポジトリの取得
  • actions/setup-nodev7Node.js の準備
  • actions/setup-gov7Go の準備
  • pnpm/action-setupv6pnpm の準備（バージョンは package.json から）
  • actions/cachev6Turborepo と Playwright のブラウザのキャッシュ
  • actions/upload-artifactv7テスト結果の保存
  • dorny/paths-filterv4変更のあったアプリケーションの検知
  • bufbuild/buf-setup-actionv1buf の準備
  • google-github-actions/authv3Workload Identity Federation での認証
  • google-github-actions/setup-gcloudv3gcloud の準備
  • docker/login-actionv4Artifact Registry へのログイン

観測性

構造化ログを Cloud Logging に集め、監視とスケジューラの宣言ファイルを実機と照合して差分を検知します。

  • Structured loggingJSON 形式の構造化ロガー（Web はサーバとブラウザの例外も記録）
  • Drift detection監視・スケジューラ・Pub/Sub・送信ドメインの DNS の宣言と実機を照合（日次のジョブと CD）
  • In-app alertsアプリ内のアラートをテーブルに記録し管理画面に表示

全体像へ戻る

開発基盤

複数のアプリケーションとパッケージを同じリポジトリで扱うための道具です。

モノレポ

pnpm のワークスペースと Turborepo で Node.js のアプリケーションとパッケージを、go.work で Go のモジュールをまとめ、Protocol Buffers の生成は buf で行います。

  • pnpm9.15.4パッケージ管理とワークスペース（推移的な依存の脆弱性は overrides で手当て）
  • Turborepo2.10.12タスクの実行順とキャッシュ
  • go.workGo のモジュールのワークスペース
  • buf1.73.0Protocol Buffers の lint とコード生成
モノレポの補助の技術（1 項目）
  • Docker Compose同期・スキャンのサービスのローカル起動

全体像へ戻る