Claude が知らない？？😱 最新バージョンのライブラリと向き合う
概要
最近、CursorのようなAIエディタは広く利用されており、私自身も日々のWeb開発業務でこれらのツールを手放せなくなっています。
ただ、AIを的確に操作する「プロンプト」の書き方については、いつも頭を悩ませています。
断片的なTIPSはあっても、体系だったノウハウや、具体的にどういうプロンプトを書けばよいのか、他の人がどんな工夫しているのかが、なかなか見えてこないんですよね。
きっと、同じように感じている方も少なくないのではないでしょうか。
この記事では、「他の人はどんなプロンプトを使っているんだろう？」という疑問にお応えするべく、私が実際に試行錯誤した記録を公開してみることにしました。
完成されたノウハウではありませんが、皆さんのAI活用やプロンプト作成のヒントになれば嬉しいです。
AI の弱点を補う技術
❛❛
現在、Cursor における Claude-3.7-sonnet は
AI モブプロにおいて、他のモデルの追随を許さぬ最適モデルである（私見）❜❜
ただし、唯一弱点があるとすればその 「知識の古さ」 です。
直近のバージョンでは 2023 年前半くらいまでの知識しか持ち合わせておらず、Web 開発のシーンでこれが少々ネックになります。
ポストにもあるように、この課題は外部からの補完である程度補うことができます。
今回はプロンプト共有の題材として、上記の 弱点を補うためのプロンプト を書いていこうと思います。
✏️ 準備 - ドキュメントの用意
今回は一つ前の記事で取り上げた React Router を題材にペアプログラミングを行っていこうと思います。前回の記事はこちら
React Router はドキュメントが GitHub で管理されています。
使い方
リポジトリをローカルに Clone しておきます。
Cursor にパスを教えてドキュメントを読ませます。
- プロジェクト外に置く場合は
FileSytem（MCP）等でアクセス権限を与えておく必要があります。 - 手間であれば、プロジェクト下に
docsだけコピーしてきても問題ありません。
トライ＆エラーに学ぶ
ここからは実際にプロンプトを試していきます。
どのように伝えるのが効率的か、実験を重ねて結果を観察し、判断したいと思います。
🧪 実験 1 - セットアップさせる
まずはライブラリについて最新バージョンを利用すること、ドキュメントを用意してあることを伝えて環境構築を指示します。
コマンドの実行については権限を与えていないため、都度、筆者（私）への確認が必要です。
これから一緒にreact-routerを使ってプロダクトを作っていこう！
最新のバージョンを使いたいから、ドキュメントをcloneしておいたよ
まずはここを見て内容を確認して
/Users/takashitaniguchi/study/react-router/docs
内容を理解したらインストールから始めよう
コマンドを指示して！
▼ 結果
しっかり理解していると思われる返答がきました。
react-router-dom についての言及も間違いありません。
プロンプト＆レスポンス
ただ、手法的に V6 と変わらないインストール方法なので、もう少し意図的に指示してみます。
フレームワークモードで利用したいんだけど、
もっと簡単なインストール方法ない？
▼ 結果
ドキュメントの解釈に成功！
しっかりとドキュメントを読んでいるとわかる回答が返ってきました。
ひとまず、ドキュメントを理解させるというステップは成功です。
プロンプト＆レスポンス
🧪 実験 2 - ルーティング別ページの実装
次は File Route Convention を理解させ、実装を進めてみたいと思います。
簡単な設計図を用意し、ルーティング実装を指示します。
これをコンテキストとして指示を出します。
docs/introduction.md
# 概要
このプロダクトは記事コンテンツを管理するものです
# ルーティング
- `/` ホームページ（コンテンツ未定）
- `/items/` 記事の一覧ページ
- `/items/:id` 記事の詳細
- `/items/:id/post` 記事に対してのコメント投稿ページ
- `/about` このプロダクトについての説明ページ
@introduction.md これから作りたいものを簡単にまとめたよ
まずはファイルベースルーティングで各ページを作りたい
/Users/takashitaniguchi/study/react-router/docs/how-to/file-route-conventions.md
@home.tsx
- 今は上のファイルだけあるから、これは消してしまってOK
- 各ページのファイルを用意して、ページ名を記載
- ディレクトリ階層が親子関係になるものは相互にリンクを設定して
ここまでで動くものができたら教えて！
実は一度で出来たプロンプトではありません。
file-route-conventions という要件がなかなか伝わらず、最初は Next.js のようなディレクトリを用いたファイル配置をしてしまいました。
翻訳表現の問題もあったため、結局はドキュメントパスを教えて指示しました。
▼ 結果
プロンプト＆レスポンス
惜しいことに、 routes.tsx の設定までは気が回らなかったようで、まだ動きません。
プロンプトを補足します。
@routes.ts ここがファイルベースルーティングを実現できるコードになってない
ドキュメントを確認して、初期設定も進めてみて！
/Users/takashitaniguchi/study/react-router/docs/how-to/file-route-conventions.md
この指示を補足することで、ようやく簡素なページが閲覧できるようになりました。
プロンプト＆レスポンス
指示不足による AI の誤解釈
前のプロンプトでは 「ページの追加」 の指示だけであり、 「ファイルベースでルーティングできる状態」 を構築する依頼が抜け落ちていました。
AI は指示されたこと（ページの追加）は実行しましたが、それが実際に動作するための設定（routes.tsx の修正）までは考慮できなかったようです。
以下のいずれかを漏れなく指示していれば、一度の処理で実施できたかと思います。
- 明示的にファイルベースでルーティングできる状態を作成するよう指示を出す。
- 例：「ファイルベースルーティングを有効にして、各ページを作成してください。」
- 現在の状態を確認させたうえで、ページを実装させる。
- 例：「現在のルーティング設定を確認してから、ページを追加してください。」
- 実装後に疎通確認をおこなわせることで、再帰的実装を期待する。
- 例：「ページを追加したら、正しく動作するか確認してください。」
逆に、コンテキスト（ docs/introduction.md ）は非常に簡潔に作成しましたが、齟齬が起きない最低限の情報が網羅されており、妥当な情報量だったかと思います。
🧪 実験 3 - API モック実装
次は API モックの実装を依頼してみます。
少し手間ですが、モック化の手法も指定することにしました。
フレームワークモードの作法を重視して loader メソッドを実装するのが今回の正解です。
そのため、メソッド名を明示的に与えてみます。
次はAPIをイメージした実装に書き換えていきたい
まずはitemsから取り掛かろう
- APIモックとなるJSONファイルをpublicディレクトリ下に作ってみよう
- そのファイルを呼び出すloaderメソッドをitems._indexの中に作って
▼ 結果
useEffect を使ってしまいました。loader が抽象的な表現と受け取られたのかもしれません。
一応、ここでは動作する実装をおこなってくれました。
プロンプト＆レスポンス
例によってドキュメントと実装方法を明確に指示します。
useEffectは使わないで、こちらのドキュメントにあるloaderを使ってね
/Users/takashitaniguchi/study/react-router/docs/start/framework/data-loading.md
▼ 結果
今度は期待通りでした。
プロンプト＆レスポンス
競合する学習結果における選択
ドキュメントは知識として追加したものの、既存知識を上書きするほどの強い指示は出していませんでした。
AI はまず動作させることを優先するため、自身が元々持っている知識（この場合は useEffect を使ったデータの取得方法）を利用して実装をおこなったようです。
経験則から安全な選択をしたという解釈もでき、非常に優秀な判断とも受け取れます。
今回のように最新のドキュメントを優先させるためには、明確に（例えば、V7 ドキュメントで言及されている機能は実装時に最優先する、など）指示する必要がありそうです。
より根本的に解決する方法としては、先に試みたルーティングの指示のように、開発方針のドキュメントをどこかに格納しておき、それを読むことをルール化するのが良さそうです。
🎉 総括
今回の実験を通して、AI の学習と応用、その優先度付けなどの法則が少しわかってきました。
最新の知識や特定の開発手法を教える際には、ドキュメントを提供するだけでなく、使い方も指示することで、より的確な解釈と実装をおこなってくれます。
具体的には、以下の点が重要だと考えられます。
- ドキュメントを渡すことで、その読解と応用を促せる (実験 1 の学び)
- 実行してほしいことは具体的に、手順も含めて指示する (実験 2 の学び)
- どの情報を優先してほしいか、明確に伝える (実験 3 の学び)
これらの学びを振り返ると、「人とのコミュニケーションと似ている」と感じます。
今後エンジニアに求められることはコーディングの知識以上に情報のアウトプット、コミュニケーション力だと思っています。
AI との対話でそれらのスキルも磨いていけるといいですね！
補記
カスタムドキュメントの利用
記事を書いたときに気づいていなかった機能がありました😅
MCPで取り込むよりはこちらのほうが正攻法かと思われますので、追記しておきます。
CursorにはCustom Docs機能がついており、@から始まるコンテキストとしてWeb上のドキュメントを追加することができるようです。
Chat欄のコンテキストのパネルでWebのURLを追加することで名前やプレフィックスは自動的に設定されます。
追加したカスタムドキュメントは「Cursor Setting > Features」の中に一覧されます。
こちらでは読み込まれたインデックスを正確に把握することも出来ます。
Discussion