【JavaScript】{{変数名}}から動的フォームを生成してプロンプトを穴埋め量産する単一HTMLツール

プロンプトエンジニアリングや定型業務の効率化を目的とした、正規表現による変数自動抽出＆動的UI生成ツールです。外部通信なし・ライブラリ不要の単一HTMLで動作します。

実装ポイント
正規表現による変数抽出: {{([^}]+)}}|[([^\]]+)] により二重中括弧・角括弧の変数を自動抽出。

動的フォームバインディング: 抽出された変数キーをもとに入力フォームを動的に生成し、入力イベントで即座に置換実行。

完全ローカル: 個人情報や機密プロンプトが外部サーバーへ送信されない設計。

AI Prompt Template Builder - プロンプト変数テンプレート化ツール

⚡ AIプロンプト変数テンプレート化ツール

{{変数名}} や [変数名] を自動検出し、フォーム入力だけで実用プロンプトを即生成

📝 プロンプトテンプレート

-- プリセットを選択 -- ブログ記事構成作成 コードレビュー依頼 ビジネスお詫びメール SNSバズ投稿作成

  <textarea id="templateInput" style="height:150px;" placeholder="ここにテンプレートを入力... 例:

あなたはプロの{{role}}です。
テーマ: {{theme}}
ターゲット層: {{target}}
条件: {{condition}}
について解説してください。" oninput="detectVariables()">

  <div style="margin-top:12px; display:flex; justify-content:space-between; align-items:center;">
    <span style="font-size:0.85rem; font-weight:bold; color:var(--text-muted);">自動生成された入力フォーム</span>
    <span id="varCount" style="font-size:0.75rem; color:var(--text-muted);">検出変数: 0 件</span>
  </div>

  <div class="variable-panel" id="variablesContainer">
    <div class="empty-msg">テンプレート内に {{変数名}} または [変数名] を記述すると、ここに自動で入力欄が生成されます。</div>
  </div>

  <div class="btn-bar">
    <button class="btn-secondary" onclick="clearAll()">クリア</button>
  </div>
</div>

<!-- 右：完成プロンプト生成結果 -->
<div class="card">
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
    <label style="font-weight:bold; font-size:0.9rem;">🚀 完成プロンプト (即コピー可)</label>
    <span style="font-size:0.8rem; color:var(--success);">✅ リアルタイム反映</span>
  </div>

  <textarea id="outputPrompt" style="height:380px;" readonly placeholder="変数を入力すると、ここに完成プロンプトが自動生成されます..."></textarea>

  <div class="btn-bar">
    <button class="btn-primary" onclick="copyPrompt()">完成プロンプトをコピー</button>
    <button class="btn-accent" onclick="saveToStorage()">ブラウザに一時保存</button>
  </div>
</div>

クリップボードにコピーしました