xstate移植でのClaude Code利用検証
背景
フロントエンドの質問、一問一答ページはそれまでページごとにcomponentを作成していた
次の質問の分岐先や選択肢のOpenFiscaパラメータへの変換をそれぞれのcomponentに定義
→一覧で依存関係が分からずコードの管理が複雑化
componentのロジックとデザインも蜜結合し、デザイン改修がやりづらい
上記を解消するため、一問一答の質問遷移をxstateに分離
xstate化するには、既存の質問項目をすべてxstateのstateに移植する必要がある
数十あり、世帯員や見積もりモードごとに遷移先も異なる
多くの定型作業が必要
ソースコード自動生成するほど同じ形式ではないが、作業自体は同じことを質問ごとに繰り返し
→LLMを導入
LLMが得意な作業であり品質チェックも可能なタスクなので導入
テストやコンパイル時型チェックで不具合を検知（agentが自動収集）可能
答え（既存実装）がすでにある
パターンが決まっている
検証
最初に質問の定義とサンプルのstateを5問程度実装
型定義や質問項目追加時にどのような設計が必要かの仮組み
その後の全体構成に関わるのでここではすべて人力
型を厳密に付けることで、質問名に誤りがあったり分岐の考慮漏れがあったりした場合コンパイルエラーになるようにする
その後、横展開時にClaude Codeを使用
以下すべてSonnet 4.6
一気にすべて作ると混乱すると思われるので、まずは「あなた」の「くわしく見積もり」の「実装」だけ作らせる
code:_
src/components/forms/detailedQuestionList.tsx にある質問の一覧を、
- xstateを使用した質問の状態 src/state/questionState.ts
- stateに応じたフォームコンポーネント src/components/questions/question.tsx
- 入力されたフォーム内容をhouseholdへ変換する処理 src/state/convert.ts
に移行する改修を行っています。さしあたり、detailedQuestionList.tsxの「あなた」に関する質問の移行を実装してもらえますか？
questionStateのところが実装されていなかったため再度依頼
code:_
src/state/questionState.ts
QuestionDefinitions のキーは、質問のタイトルとしても使われます。元の実装 src/components/forms/detailedQuestionList.tsx を参考に、元実装のコンポーネントに title がある場合はその文字列が xxxQuestionDefinitions のキー文字列となるようにしてください。
誤ってコンポーネント名をキー名にしてしまったため、質問に表示するタイトルをキーにするよう修正依頼
（人に依頼する場合も混乱しそうなので、プロンプトが分かりづらかった）
code:_
意図した修正と違うようです。
src/components/forms/detailedQuestionList.tsxのquestionsの各コンポーネントの中で定義されているテンプレート流し込みの部分に指定しているtitleに変えてほしいです。
例えば、'仕事の有無'であれば、componentの <SelfWorkQuestion>、さらにその中で呼ばれている <YesNoQuestion> の属性に title="現在仕事をしていますか？" が指定されています。なので、booleanQuestionDefinitions のkey 仕事の有無 は 現在仕事をしていますか？ に変える必要があります。
同様に、booleanQuestionDefinitionsやamountOfMoneyQuestionDefinitions,selectionQuestionDefinitions等を修正してください。
ユニットテスト
上記のテストははじめての自動生成部分だったため人力で作成
テストも作らせると実装が合っているか確認しづらいので
状態遷移は3つバグがあった
テストケース実装と合わせて、状態遷移が正しいかどうか確認
ただし、next -> back で元の質問に戻る のテストケースはexpectの条件が自明なので作らせた（内容問題なし）
agentなのでClaude Codeは自分でテストを実行し、落ちたら通るまで修正する
他世帯員の実装は既存のものに一部条件を追加するだけだったため実装→テストの順に両方作らせた
仕様誤り: 2か所
子どもと配偶者の年齢の実装に誤りがあったため手で修正
こちらもいっぺんに作らせると人間が確認しづらいので、1世帯員ごとに実装→人手で仕様があっているか確認を繰り返し
見積もりモードの追加
災害支援見積もりをまるごと実装させる
code:_
src/components/forms/disasterQuestionList.tsx に、'能登半島地震被災者支援制度見積もり' の質問一覧が実装されています。これを、src/state/questionDefinition.ts、src/state/questionState.ts に移植してください。
## 設計方針
- 質問のquestionKeyは、disasterQuestionList.tsxのcomponent内で定義されている xxxQuestion のtitle
- 例: 住宅被害の有無 を移植する際、キーは HousingDamageExistsQuestion 内の YesNoQuestion のtitle 住宅が被害を受けていますか？
- questionStateMachine.states の 年収 の nextConditions で context.見積もりモード が '能登半島地震被災者支援制度見積もり' の場合、質問 住宅が被害を受けていますか？ (新規作成)へ進む（以下災害支援特有の質問を進める）
code:_
続いて、追加した内容に対応するテストケースを src/state/questionState.test.ts に追加してください。
7分で実装完了（テストもパス）、仕様誤りなし
その後人手で実装があっているかの確認に2時間程度かかった
（すべて手で書いたら10時間以上かかることを見越していた）
所感
災害支援見積もりがまるごと実装できた
型によるチェックやお手本になる実装が十分にある状態であれば、Claude Codeによるコード自動生成は実践投入可能
ただし質問が増えるほどcontext消費が増える点は要注意
必要であればテストは別ファイルに分けてもよい？
上記とは別に、「なぜかテストが落ちる」「計算結果がずれる」「コンパイルが通らない」等ハマってしまった際にClaude Codeに聞くことで対処
聞きながら自分でも調べ、Claudeが先に見つけた場合はその分早く解消できる
（コーディングの大半は「気づいたらなんてことはない問題のトラブルシューティング」に費やされるので、この時間を数分間まで縮められるとかなり生産性が向上する）