プロトタイプの作り方の選択肢

この章でわかること: プロトタイプの作り方には大きく2つの路線があります。それぞれの 強み・弱みと、ブラウザで同じに見えて何が違うのかを押さえ、用途で選べるようにします。

2つの路線

	A. 単一ファイル構成	B. Next.js 構成
中身	HTML+CSS+JS(+React, React Router)	Next.js プロジェクト一式
動く場所	ブラウザの中だけで完結	ビルドして公開先(Vercel)で動く
渡し方	HTMLファイルを渡せばブラウザで開ける	URLを共有(デプロイ)
向き	超手軽・その場・配布したい	機能拡張・本番に育てる

A. 単一ファイル構成 ——「渡せる」手軽さ

React と React Router(HashRouter) を使うと、1ファイル構成でも複数画面を簡単に 扱えます。HashRouter は URL の # 以降で画面を切り替える方式で、サーバー設定が不要 なため、ファイルをそのまま開くだけで複数ページが動きます。

• 強み: ビルドや公開の準備なしで、HTMLファイルをそのまま顧客に渡せる。 メールやチャットで送って「開いてみて」が成立する
• データの仮置き: 保存が要るなら、ブラウザ内で完結する手段で仮組みできます (例: ブラウザの保存領域 localStorage、ブラウザ内で動く簡易DB pglite など)
• 弱み: あくまでブラウザ内完結。本格的なバックエンド処理や、複数人で共有する 本番データの保存には向かない

商談での使いどころ

「その場で見せて、そのままファイルを渡して持ち帰ってもらう」が効く場面では、 単一ファイル構成が軽快です。

AIにこう頼む(コピペ用)

HTML1ファイルで完結する形でプロトタイプを作って。React と React Router の
HashRouter を使い、CDN読み込みで1ファイルにまとめて。サーバーは使わず、
保存が要るところは localStorage で仮組みして。ファイルをダブルクリックで
ブラウザで開けて、相手にそのまま渡せる状態にして。

用語補足: CDN は「ライブラリをネット経由で読み込む仕組み」、 localStorage は「そのブラウザにデータを一時保存する簡易な入れ物」です (意味は用語集でも引けます)。

Vercelを使わずに公開することもできる

単一ファイル構成は「ファイルを渡す」だけでも見てもらえますが、URLで公開したい 場合は GitHub Pages(GitHub の無料ホスティング)に GitHub Actions で 自動公開する方法もあります。「このリポジトリを GitHub Pages に GitHub Actions で 公開して」と Claude Code に頼めば設定してくれます。

ただし GitHub Pages はクセに注意(あまり推奨しません)

手軽ですが、提案用途では次の弱点があります。

• 非公開リポジトリからの公開は有料プランが必要。無料でやるにはリポジトリを 公開(誰でもコードが見える)状態にする必要があります
• Basic認証のようなアクセス制限がかけられない(静的配信のみで、URLを知れば 誰でも見られる)。関係者だけに見せる限定共有には不向き

「とりあえず公開URLが欲しい個人練習」には手軽ですが、顧客向けや限定共有が要る場面 では、非公開のまま公開でき Basic認証も足せる Vercel(→デプロイ)の ほうが向いています。

B. Next.js 構成 —— 本格的に育てる

表も裏(フレームワークと Next.js)も作れ、データ保存・ログイン・ 外部連携など機能を足して本番に育てやすいのが強み。公開はデプロイで URLを共有します。

AIにこう頼む(コピペ用)

Next.js でプロトタイプを作って。まず動く1〜2画面から。あとで機能(保存・ログイン・
外部連携など)を足して育てたいので、その前提で構成して。完成したら GitHub に上げて
Vercel で公開する流れも教えて。

ブラウザで同じに見えて、何が違う?

どちらもブラウザには「HTML/CSS/JS」が表示され、見た目は同じに作れます。違いは裏側です。

• A(単一ファイル): すべてが利用者のブラウザの中で動く。サーバーが無い
• B(Next.js): 一部をサーバー側で動かせる(秘密の鍵を使う処理、サーバーでの データ保存など)。だからAPIキーのような秘密も安全に扱える

秘密情報は A では扱わない

単一ファイル構成は全部ブラウザ側=丸見えです。APIキーなどの秘密情報を使う処理は、 A では行わず、B(サーバーがある構成)で扱ってください。

どちらを選ぶ?

どちらが上位ということはありません。目的に合うほうを選ぶだけです。

• その場で見せて配りたい/超手軽に → A 単一ファイル構成
• 機能を足して本番に育てる/データを安全に扱う → B Next.js 構成
• 途中で路線を変えることもできます(Aで方向性を固めてからBで作り直す、など)

なぜ大事か

「どう作るか」を用途で選べると、提案のスピードと現実味が両立します。手軽さの A、 拡張の B——この2つを対等な引き出しとして持っておくと、案件に合わせて最短ルートを 選べます。

参考リンク(情報ソース)

• React Router 公式: https://reactrouter.com
• PGlite(ブラウザ内で動くPostgres): https://github.com/electric-sql/pglite