🚀 Claude Code実践
📖 約8分で読めます
「やっぱり違う」を何度でも ― Claude Codeのundo機能で恐れずに試行錯誤する開発術
失敗を恐れずAIと一緒にベストな実装を探る
「元に戻す」がある安心感
Claude Codeには/rewind機能があります。Claude Codeが行った変更が期待と違った場合、ワンコマンドで直前の状態に巻き戻せます。これにより「とりあえず試してみる」が気軽にできるようになります。
/rewind機能の使い方
# Claude Codeが変更を加えた後、結果が気に入らなければ
> /rewind
# Claude Codeが行った直前の変更がすべて元に戻る
# ファイルの変更もgitの状態も巻き戻る試行錯誤ワークフロー
以下のようなサイクルで、最適な実装を探ります。
パターンA → 確認 → やり直し → パターンB
実践例：UIコンポーネントの実装
# アプローチ1: CSSグリッドで実装
> 商品一覧ページをCSS Gridで実装してください
# → 確認して「うーん、ちょっと違うな」
> /rewind
# アプローチ2: Flexboxで実装
> 商品一覧ページをFlexboxベースに変更して、カード型レイアウトにしてください
# → いい感じ！このまま進める
> 「変更をコミットして」段階的な改善サイクル
# まず最小限で動くものを作る
> シンプルなフォームバリデーションを実装して
# → 動いた！次のステップへ
> バリデーションにリアルタイムのエラー表示を追加して
# → エラー表示が多すぎて使いにくい
> /rewind
# 方針を変えて再挑戦
> エラー表示はフォーム送信時のみにして、入力中はヒントだけ表示してgitブランチとの組み合わせ
大きな変更を試す場合は、ブランチを切ってから試行錯誤するとさらに安全です。
# 実験用ブランチを作成
> 新しいブランチ experiment/new-layout を作成して切り替えて
# 大胆な変更を試す
> ページ全体のレイアウトをダッシュボード風に作り替えて
# 気に入らなければブランチごと捨てられる
# 気に入ればmainにマージ/rewindが特に有効な場面
- デザインの検討：CSS変更は見た目の好みがあるため、複数パターン試したい
- アルゴリズムの比較：複数の実装を試してパフォーマンスを比較
- ライブラリの選定：「axiosで書いて」→ rewind →「fetchで書いて」→ 比較
- リファクタリング：大規模な構造変更を試して、問題があれば即座に戻す