Interactive

傾向と対策

Claudeの傾向といくつか人間が意識する対策を整理します。

Claudeの苦手なこと

主にコンテキストウィンドウとツールの不足、情報の不足などが問題になります。

例えば、VSCodeでF2を用いて変数名をリファクタリングすると参照されている全ての箇所が書き変わりますが、Claudeの場合はVSCodeのAPIをToolとして持っていないので書き換えに数分がかかることがあります。

ファイルを小さくする

モデルにはコンテキストウィンドウの制限があり、ClaudeCodeなどはツールを用いてファイルを読み取る際にサイズの制限があります。

1ファイル100行以内に保つことで効率よくファイルを読み書きすることができます。また、ファイルの用途や目的が小さくなりテストを書きやすくなります。

テストのし易さを考慮する

関数やクラスの責務を小さくし副作用を除外することで、テストが生成しやすくなります。何も考えなくとも放置すれば、システムプロンプトに従って全てのファイルのテストが生成されるので、作成しない理由がないです。

エラーを出力する

システムプロンプトで「Any」を禁止するなどコーディング規約を書くことができますが、エラーを出力してClaudeに渡すのが最も効率的です。

その為に以下を揃えるのが理想です。

Claudeは自分でテストを修正したりコマンドを実行しエラーの検出とコードの修正を繰り返すことで、数時間の作業をお願いすることが出来ます。

製品の欠陥や問題

特定のページは外部APIに依存していてローカルでデバッグ出来ない状態になっておりモックの作成に取り組んでいるとします。この部分をClaudeに作業せずスキップしてもらうにはその事情を伝えておくことで不要な開発を防ぐことが出来ます。

例えば以下のように書きます。

- この製品は外部APIに依存しており、ローカルでの動作確認が出来ません。

UIUXガイドライン

テーブルは横スクロールさせてセルの幅を固定するなどのデザインのガイドラインは明文化しておくことで、同じ指示の繰り返しを防ぐことが出来ます。

例えば「text-primary」を使用する、数値ではなく「lg」を使用するルールを定義しておくことができます。

Storybookを導入する

ClaudeはMCPを経由してブラウザを操作し、仕様を収集できます。ログインやAPIなどの副作用を受けずに効率よく開発するにはStorybookがとても相性が良いです。

また、コンポーネントの仕様書を管理できる点も良いです。Storybookのファイルは全てのファイルを探索して自動的に生成することができるので導入コストが低いです。

副作用を避ける

基本的にボタンなどの副作用の少ないコンポーネントを最初に対象とします。次に、GraphQLなどAPIなど外部のデータに依存する場合は、データをモックする必要があります。また、ルーティングに関するものはモックが非常に大変なので除外するのがお勧めです。

例えば、ページに関する情報は「useParams」などで取得できますが、このような値はページ以下の下層のコンポーネントではPropsとして受け取ることで副作用を減らすことが出来ます。

Plan + Act

実装を「計画」と「実装」の2段階に分けることで、作業が明文化され明文化されトークンの圧縮に繋がり、実装で指示を繰り返して開発するより安定します。

プラン内容や戦略をdocsにファイルとして書き出すことも可能です。そのテキストがあとで実装目的として役に立つ可能性もあります。

このプランのフォーマットはシステムプロンプトで制御することも可能です。