追加する機能は、一つだけ選ぼう
自分のツールが動き始めると、保存や検索なども付けたくなります。最初の追加は一つに絞りましょう。今回は文字数チェッカーにリセットボタンを付ける例です。元のHTMLを別名でコピーしてから、Claude Codeでそのコピーがあるフォルダを開きます。
目標はボタンを押すと入力が空になり、表示も0に戻ること。自動保存や外部通信は加えません。先に「できたら成功」の条件を決めておくと、確認が楽になります。
見た目より先に、動きを伝えよう
文字数チェッカーにリセットボタンを1つ追加してください。 対象：text-check.html。まず現在の処理を読んで変更案を説明してください。 成功条件： 1. 押すと入力欄が空になる。 2. 文字数・空白を除く文字数・行数も0になる。 3. キーボードでボタンを選び、実行できる。 既存の集計ルールは変えない。外部ライブラリと通信は追加しない。
入力欄だけが消えて数字が残ると、まだ完成ではありません。「表示も更新する」と成功条件に含めておくと、見落としを見つけやすくなります。
修正前と後を、同じ入力で比べよう
- 「あいう」を入れ、3文字になることを確認する。
- リセットして、入力が空・すべて0になることを確認する。
- 続けて新しい文章を入力し、再び数えられることを確認する。
- Tabキーで移動し、リセットを実行する。
- スマホ幅でもボタンと入力欄が重ならないか見る。
AIから「確認しました」と返ってきても、何を実行したかを読みます。ブラウザを開けていない場合は、自分で操作して確認し、未確認の項目を残してください。
次の追加は、今回の変更を残してから
動いた版のファイルを保存して、変更内容を一行メモします。例は「リセットで入力と集計表示が同時に0になる」です。これで次に不具合が起きても、どの変更のあとかを追えます。
保存機能は次の作業として分けます。特にブラウザ保存を足すと、共有PCで文章が残る場合があります。機能の便利さと、保存する情報の扱いを一緒に決めましょう。
参考にした公式ガイド
手順・例文・チェック表は、このサイトで作成した練習用の例です。機能の説明は次の公式資料も確認してください。