Sunday, April 13, 2025

VS Code GitHub Copilot + Claude 3.7 Sonnet (Thinking) HTML の内容をマークアップテキストで置きかえ

VS Code と GitHub Copilot + Claude 3.7 Sonnet (Thinking) で試しました。

Replace the current html contents with the markup text

Demo(Youtube): Replace the current html contents with the markup text, VSCode + Github Copilot + Claude 3.7 Sonnet

はじめに

Vibe Coding とか Cline とか AI を使ったコーディングすげー的な話があちこちから聞こえてくる。自然言語で指示するだけであとはAIが書いたコードで済ませていく世界観には懐疑的だが AIによる支援を受けたコーディングが業務プログラマにとって必須になるという実感はある。とくに Github Copilot でAIによるコード支援を受けていて関心するのは、 AIが単にそこにあるコードだけでなく、プログラマとしての一般知識を膨大にもっていること。

AI コーディング支援例をここでは考えます。

検証する例

この検証用のデモをつくるために想定した内容です。

もちろん AI にはこれらの内容は見せていません。

Microsoft
- Tablet: Surface Pro, Surface Go
- Laptop: Surface Laptop, Surface Laptop Go
- Desktop: Surface Studio

Apple:
- Tablet: iPad, iPad Air, iPad Pro
- Laptop: MacBook Air, MacBook Pro
- Desktop: Mac Mini, Mac Studio
- Phone: iPhone SE, iPhone Pro

(A), (B) でコンテンツの構造が同じでは簡単すぎるし実践的でもないので、わざと異なる構造にしています。具体的には意図的にネストしたサブ要素の数を変更しています。また、トップレベル要素では Apple 側にだけ（Microsoft にはない）Phone 要素を追加しています。

(A) を次のHTMLとして記述しておき、内容だけをあとからAIで(B)に差しかえるというタスクを考えました。

<html>
  <body>
    <h1>Microsoft</h1>
    <div>
      <ul>
        <li><b>Tablet</b></li>
        <ul>
          <li>Surface Pro</li>
          <li>Surface Go</li>
        </ul>
        <li><b>Laptop</b></li>
        <ul>
          <li>Surface Laptop</li>
          <li>Surface Laptop Go</li>
        </ul>
        <li><b>Desktop</b></li>
        <ul>
          <li>Surface Studio</li>
        </ul>
      </ul>
    </div>
  </body>
</html>

(B) のテキストに差しかえたいということをAIに伝えるために、HTMLの末尾にコメントとして、 (B) の内容を記述することにしました。できあがった HTML はこれです。

<html>
  <body>
    <h1>Microsoft</h1>
    <div>
      <ul>
        <li><b>Tablet</b></li>
        <ul>
          <li>Surface Pro</li>
          <li>Surface Go</li>
        </ul>
        <li><b>Laptop</b></li>
        <ul>
          <li>Surface Laptop</li>
          <li>Surface Laptop Go</li>
        </ul>
        <li><b>Desktop</b></li>
        <ul>
          <li>Surface Studio</li>
        </ul>
      </ul>
    </div>
  </body>
</html>

<!--
{newcontent}
Apple:
- Tablet: iPad, iPad Air, iPad Pro
- Laptop: MacBook Air, MacBook Pro
- Desktop: Mac Mini, Mac Studio
- Phone: iPhone SE, iPhone Pro
{/newcontent}
-->

AIへの指示を簡単にするために {newcontent} という疑似タグで対象のマークアップテキストを囲むことにしました。

これを VS Code で表示させた上で、 Claude 3.7 Sonnet Thinking に次の指示をしました。

replace the html body block with the {newcontent} on the bottom

実は Thinking ではなく、Claude 3.7 Sonet で実行しても同じ結果を得られました。ただ、適用するときに無印（without Thinking）の Claude では、html 要素から丸ごと置きかえたのに対して Thinking の方では変更が発生した該当部分だけ（つまり body 要素の内側のみ）変更を適用しています。一度しか試していないので、偶然かもしれません。しかし、AIはそこに気づいていて意図して処理している可能性もあります。

また、これとは少し異なる例で試した場合ですが、置きかえ前と後で構造が完全に一致している場合は、 AIが提案してきたコードを適用すると、このデモのように差しかえ対象の直後に挿入するのではなく、既存の内容に上書きしました。置きかえ前後の差分も表示されるので、変更点が一目瞭然です。もっともそれはAIの機能ではなく、VS Code の差分表示機能だとは思いますが、 AIは間違える可能性があるので、それをこちらでチェックしながら適用できるという点でとても助かります。

Replace the current html contents with the markup text

置きかえ完了後のHTMLです。

<html>
  <body>
    <h1>Apple</h1>
    <div>
      <ul>
        <li><b>Tablet</b></li>
        <ul>
          <li>iPad</li>
          <li>iPad Air</li>
          <li>iPad Pro</li>
        </ul>
        <li><b>Laptop</b></li>
        <ul>
          <li>MacBook Air</li>
          <li>MacBook Pro</li>
        </ul>
        <li><b>Desktop</b></li>
        <ul>
          <li>Mac Mini</li>
          <li>Mac Studio</li>
        </ul>
        <li><b>Phone</b></li>
        <ul>
          <li>iPhone SE</li>
          <li>iPhone Pro</li>
        </ul>
      </ul>
    </div>
  </body>
</html>

<!--
{newcontent}
Apple:
- Tablet: iPad, iPad Air, iPad Pro
- Laptop: MacBook Air, MacBook Pro
- Desktop: Mac Mini, Mac Studio
- Phone: iPhone SE, iPhone Pro
{/newcontent}
-->

まとめ

たとえば DTP 業務などでは流用元の在版をベースにして新しい内容をつくることがありますが、このような場合にAIに頼むだけで済む、という時代がくるのかもしれません。

もう差しかえスクリプトをつくる必要がなくなるのだ！（たぶん）