完全クライアント生成型とは？Vercelデプロイで理解するフロントエンド完結アプリの考え方

2025-10-26 2025-10-26

最近のWebアプリ開発では、サーバーを使わずブラウザだけで全処理を完結する「完全クライアント生成型（Fully Client-Side Rendering）」という考え方が注目されています。
この記事では、筆者がMermaid図エクスポートアプリをVercelで公開する過程で得た知見をもとに、完全クライアント生成型の仕組みと実践ポイントをまとめます。

1. 完全クライアント生成型とは

完全クライアント生成型とは、すべての処理をユーザーのブラウザ（フロントエンド）で実行するアプリ構成のことを指します。

一般的なサーバー連携型のアプリでは、

データ処理や画像生成をサーバー側で実行
フロントはリクエストを送信して結果を受け取る

といった流れになります。

一方、完全クライアント生成型では、

ブラウザ上でJavaScript（やWebAssembly）を使って処理を完結
サーバーはHTML/CSS/JSを配信するだけ

という構成になります。
そのため、Vercelなどにデプロイしても、Vercelの役割は「静的ファイル配信（ホスティング）」に限定されます。

2. Vercelでの役割の変化

Vercelは本来、Next.jsなどのSSR（Server-Side Rendering）やAPI Routesを実行する機能を持っています。
しかし、完全クライアント生成型アプリでは、それらを一切使いません。

Vercel上で動くのは、単なる静的ホスティング機能です。
つまり、

/index.html
/main.js
/style.css
などを配信するだけで、ユーザーがアクセスして初めてブラウザ内でアプリが動くという仕組みです。

3. メリットとデメリット

✅ メリット

無料で運用できる（VercelやGitHub Pagesの無料枠で十分）
サーバー依存がないため構成がシンプル
パフォーマンスが良い（CDNキャッシュが効く）
デプロイが速い・壊れにくい

⚠️ デメリット

ブラウザの制約を強く受ける
- 例：クリップボードAPI、ファイルAPI、Canvasなどの挙動がブラウザごとに違う
重い処理に向かない
- 画像生成やPDF変換などCPU負荷が高い処理はブラウザでの実行に限界がある
セキュリティ制御が弱い
- APIキーなどの秘匿情報はクライアントに置けない

4. 実装のポイント

🧩 基本構成

public/
  ├── index.html
  ├── main.js
  ├── style.css

index.html：最小限のHTMLテンプレート
main.js：Canvas, jsPDF, File APIなどを使ってクライアント側で処理
style.css：TailwindやCSS ModulesでもOK

🧱 エクスポート処理の例

import jsPDF from 'jspdf';

function exportPDF(canvas) {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF({ orientation: 'landscape' });
  pdf.addImage(imgData, 'PNG', 0, 0);
  pdf.save('diagram.pdf');
}

このように、jsPDF や html2canvas を使えば、サーバーを経由せずPDF/PNG出力が可能です。

🌍 デプロイの例（Vercel）

npm run build
vercel --prod

vercel.json には特別な設定は不要です。
静的ファイルのみを /public に配置してデプロイすればOK。

5. まとめ

完全クライアント生成型は、「ブラウザで完結するWebアプリ」の理想形です。
Vercelのような静的ホスティング環境でも十分に実用的で、
サーバーの制約に悩まされることなく、自由にアプリを公開できます。

ただし、ブラウザAPIの制限やCPU負荷の大きい処理には注意が必要です。
そのようなケースでは、Cloud FunctionsやEdge Functionsと組み合わせる「ハイブリッド構成」も検討すると良いでしょう。

この記事が、同様の構成で悩んでいる方のヒントになれば幸いです。