著名な開発者Simon Willison氏は、過去2年間でLLMを用いて150以上の「HTMLツール」を開発してきました。「単一ファイルHTML + ネイティブブラウザ機能 + AIプログラミング」を組み合わせた彼の経験は、検討する価値があります。 Simon氏は最新のブログ記事「HTMLツール構築に役立つパターン」で、非常に軽量で実用的、そしてメンテナンスが容易なソフトウェア開発パターン「HTMLツール」を紹介しています。これは、HTML、JavaScript、CSSをすべて1つのファイルにまとめ、バックエンドサーバーなしで実行できる小型アプリケーションを指します。 https://t.co/SCvbUyXZ1p 「HTML ツール」とは何ですか? • 単一ファイルアーキテクチャ：すべてのコード（HTML/JS/CSS）が1つのファイルにまとめられています。Webpackやnpmなどの複雑なビルドプロセスは不要で、サーバーへのデプロイも不要です。ファイルはブラウザで直接開いたり、コピー＆ペーストするだけで配布できます。 • LLM駆動型：これらのツールの大部分は、ChatGPT、Claude、GeminiなどのAIの支援を受けて作成されています。単一ファイル構造は、AIがコードコンテキスト全体を一度に読み込んだり生成したりできるため、LLMに適しています。 コアとなる建築パターンとテクニック Simon 氏は、複雑さを軽減し、使いやすさを向上させるための、効率的な開発の「ベスト プラクティス」を次のようにまとめました。 • 複雑なフレームワークを避ける：著者は、AI生成コードを使用する場合は「No React」と表示することを強く推奨しています。Reactのようなフレームワークはコンパイル手順を必要とするため、単一ファイルアプリケーションの移植性が損なわれ、デバッグとデプロイの難易度が高まります。ネイティブJavaScriptまたはシンプルなCDNライブラリの方が適しています。 • LLM の「キャンバス」機能を使用したプロトタイピング: ChatGPT Canvas または Claude Artifacts を使用してインタラクティブなプロトタイプをすばやく生成します。 • CDN 依存性: サードパーティのライブラリ (PDF 処理やグラフ描画など) が必要な場合は、CDN リンクを介して直接インポートすることで、ローカル コードをクリーンな状態に保ち、依存性を排除できます。 • 巧みな状態管理: • URL パラメータ: ツールのステータス (編集中の構成など) を URL に保存し、ユーザーが共有リンクを介して現在の作業ステータスを共有できるようにします。 • localStorage: 機密データ (API キーなど) や大量のテキストを保存するために使用されます。これにより、データはユーザーのブラウザ上にのみ保存され、サーバーにアップロードされないため、プライバシーが保護されます。 • ネイティブブラウザ機能を活用: • CORS API: バックエンド転送なしで、ブラウザのフロントエンドからクロスドメイン リクエストをサポートするパブリック API を直接呼び出します。 • ファイル処理: `` を使用して、ファイルをクラウドにアップロードせずに、ローカルでファイルを読み取って処理します (画像の切り取り、OCR 認識など)。 • WebAssembly と Pyodide: WebAssembly を使用すると、Python データ分析 (Pandas) や複雑な C++ ライブラリ (FFmpeg や Tesseract など) をブラウザーで実行できるため、フロントエンド ツールの機能が大幅に拡張されます。 このモデルはなぜ重要なのでしょうか? これは、AI 時代におけるソフトウェア開発パラダイムの変化を示しています。 • 参入障壁の低減: 開発者は、特定の問題点 (JSON を特定の形式に変換する、画像からテキストを抽出する、API をデバッグするなど) を解決する小さなツールを非常に低コスト (数分以内) で構築できます。 • データ主権とプライバシー: ツールは静的であり、ローカルで実行されるため、ユーザーは個人データをサードパーティのサーバーに送信することについて心配する必要がありません。 • 再利用性とリミックス: コードがシンプルで独立しているため、古いツールのコードを「コンテキスト」として AI に簡単に提供でき、既存の機能に基づいて新しいツールを迅速に開発できます。
