できることを蓄積せよ

*[Agentic Engineering Patterns](https://simonwillison.net/guides/agentic-engineering-patterns/) >* コーディングエージェントと生産的に作業するための私の多くのヒントは、それらなしでも私がキャリアで有用だと見つけたアドバイスからの拡張です。その素晴らしい例の一つがこれです：**自分がやり方を知っていることは蓄積しておく**。 ソフトウェアを構築する際のスキルの大きな部分は、何が可能で何が不可能かを理解し、少なくともそれらをどのように達成できるかのおおよそのアイデアを持っていることです。 これらの質問は広範なものから非常にニッチなもののまで様々です。ウェブページが JavaScript だけで OCR（光学文字認識）操作を実行できますか？アプリが実行されていない状態でも iPhone アプリが Bluetooth デバイスとペアリングできますか？100GB の JSON ファイルを、まず全体をメモリに読み込まずに Python で処理できますか？ このような質問に対する答えをあなたがどれだけ多く持っていればいるほど、他の人がまだ考えていない方法で技術を展開して問題を解決する機会を見出す可能性が高まります。 何かが理論的に可能であることを知っていることと、実際に自分でそれを成し遂げたのを見ることは同じではありません。ソフトウェア専門家として育むべき重要な資産は、このような質問に対する深い回答のコレクションであり、できれば実行可能なコードによって裏付けられたものが理想的です。 私は、このような解決策をさまざまな方法で収集・蓄積しています。私の [blog](https://simonwillison.net) や [TIL blog](https://til.simonwillison.net) には、私がやり方を理解した事柄に関するノートがぎっしりと詰め込まれています。また、[1000 を超える GitHub リポジトリ](https://github.com/simonw) を持っており、そこにはさまざまなプロジェクトのために書いたコードや、重要なアイデアを実証する小規模な概念実装（proof-of-concepts）が多く含まれています。 最近では、LLM（大規模言語モデル）を活用して、興味深い問題に対するコード解決策のコレクションを拡大しています。 [tools.simonwillison.net](https://tools.simonwillison.net) は、私が LLM の支援を受けたツールやプロトタイプを収集した最大のコレクションです。ここでは、私は [HTML ツール](https://simonwillison.net/2025/Dec/10/html-tools/) と呼ぶものを集めています。これは JavaScript や CSS を埋め込み、特定の課題を解決する単一の HTML ページのことです。 私の [simonw/research](https://github.com/simonw) リポジトリには、より大規模で複雑な例が収められています。ここではコーディングエージェント（コード生成 AI）に問題調査を命じ、動作するコードと、その発見内容を詳細に記した報告書を作成させるという挑戦を行っています。 ## 蓄積したものから再構成する なぜこれほど多くのものを収集するのか？自分の能力を構築・拡張するのに役立つことに加え、この過程で生成された資産は、コーディングエージェントにとって極めて強力な入力となります。 私が最も好きなプロンプト（指示）のパターンの一つは、既存の動作する例を 2 つ以上組み合わせて、新しい何かを構築するようにエージェントに命じるというものです。 この手法の有効性を明確に示してくれたプロジェクトの一つが、私のツールコレクションに最初に追加したものであり、ブラウザベースの [OCR ツール](https://tools.simonwillison.net/ocr) です。詳細は [こちら](https://simonwillison.net/2024/Mar/30/ocr-pdfs-images/) で解説されています。 私は、PDF ファイルからのページを OCR 処理するための、手軽でブラウザ上で動作するツールを求めていました。特に、テキストバージョンが一切提供されておらず、スキャンされた画像のみで構成されている PDF を対象としていました。 以前、ブラウザ内で [Tesseract.js OCR ライブラリ](https://tesseract.projectnaptha.com/) の実行を試みたことがあり、非常に能力が高いと感じました。このライブラリは、成熟した Tesseract OCR エンジンの WebAssembly 版を提供しており、JavaScript から呼び出して画像からテキストを抽出することができます。 しかし、私は画像を扱うのではなく、PDF を扱いたかったのです。そこで思い出したのは、Mozilla の [PDF.js](https://mozilla.github.io/pdf.js/) ライブラリでも作業したことがあるという点です。このライブラリは、PDF の個々のページをレンダリングされた画像に変換する機能などを持っています。 私はこれらの両方のライブラリに関する JavaScript のスニペットをメモに残していました。 私がモデル（当時 Claude 3 Opus）に入力した完全なプロンプトは以下の通りです。これは私の二つの例を組み合わせて、私が探していた解決策を説明するものです： このコードは、PDF を開き、ページごとに画像に変換する方法を示しています： html> head> title>PDF to Imagestitle> script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js">script> style> .image-container img { margin-bottom: 10px; } .image-container p { margin: 0; font-size: 14px; color: #888; } style> head> body> input type="file" id="fileInput" accept=".pdf" /> div class="image-container">div> script> const desiredWidth = 800; const fileInput = document.getElementById('fileInput'); const imageContainer = document.querySelector('.image-container'); fileInput.addEventListener('change', handleFileUpload); pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js'; async function handleFileUpload(event) { const file = event.target.files[0]; const imageIterator = convertPDFToImages(file); for await (const { imageURL, size } of imageIterator) { const imgElement = document.createElement('img'); imgElement.src = imageURL; imageContainer.appendChild(imgElement); const sizeElement = document.createElement('p'); sizeElement.textContent = `Size: ${formatSize(size)}`; imageContainer.appendChild(sizeElement); } } async function* convertPDFToImages(file) { try { const pdf = await pdfjsLib.getDocument(URL.createObjectURL(file)).promise; const numPages = pdf.numPages; for (let i = 1; i < numPages; i++) { const page = await pdf.getPage(i); const viewport = page.getViewport({ scale: 1 }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = desiredWidth; canvas.height = (desiredWidth / viewport.width) * viewport.height; const renderContext = { canvasContext: context, viewport: page.getViewport({ scale: desiredWidth / viewport.width }), }; await page.render(renderContext).promise; const imageURL = canvas.toDataURL('image/jpeg', 0.8); const size = calculateSize(imageURL); yield { imageURL, size }; } } catch (error) { console.error('Error:', error); } } function calculateSize(imageURL) { <

できることを蓄積せよ

背景や根拠まで確認しますか？

関連記事

調べる

選ぶ

サイト