WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

触ってない日が1日もないと言えるぐらい使っているClaude。

こちらの有料プランで使えるClaude Codeを使ってコーディングをよくやっています。とても効率化になっています。

最近、このClaude Codeを使う中で、Skills、ハーネスエンジニアリング、ループエンジニアリングという言葉をよく耳にするようになりました。まだやったことはないんですけれども、かなり話題になるぐらい便利なものみたいです。

今回はこれらに慣れてみるために、簡単なHTML、CSSの構築で試してみることにしました。

Skills・ハーネスエンジニアリング・ループエンジニアリングとは

そもそもこれら3つとは一体どういうものなのかっていうのを、簡単に説明したいと思います。

Skills（スキル）

やり方の手順書をファイルに切り出したものです。 SKILL.mdというファイルの先頭に「いつ使うか」を書いておくと、Claude が必要だと判断したときだけ本文を読み込みます。 毎回プロンプトに長い手順を貼らなくてよくなる、というのが一番わかりやすい効果だと思います。

ハーネスエンジニアリング

手順書を作ったとしても、人間であっても時にはそれを読み飛ばしてしまったり、漏れが発生してしまうというのはあることかと思います。

サイト制作の自社のマニュアルに沿って作業していて「電話番号がちゃんと反応するか、スマホでタップして確認するのを忘れた。」、「お問い合わせフォームのテスト送信をするのを忘れた。」というのは起きてしまうものだと思います。本来はあっちゃいけないんですけどね。

これはAIも同じです。AIがコーディングをしていて、マニュアルを読んでコーディングをするかと思いますが、その時にマニュアル内の項目が読み飛ばされていないか、漏れがないかっていうのを確認する係がハーネスエンジニアリングです。Claude CodeのHookというものがそれに当たります。こちらは後ほど説明します。

ループエンジニアリング

AIのコーディングの作業をどういう状態になったら終了とするか。また、ハーネスエンジニアリングによるチェックが通らない場合、何回まで『修正→検証→修正→検証』ループを何回繰り返すかをこちらで定義するものです。こちらを決めておかないと、AIは無限に直し続けることになるか、もしくは妥協して、本当は完了していないのに、これで完了しましたっていうふうに終わらせる可能性があります。

検証用に用意したもの

今回はとても簡単な検証をしてみたいと思います。

検証用に題材として選んだものは、わざと3種類のミスを入れた小さな静的サイトです。

とても簡単なミスなので、AIならば絶対に見つけられるであろうものを仕込んでいます。

今回のルール

• title と h1 の完全一致<title> と <h1> のテキストが1文字でも違ったらNG
• 全角スペース禁止ソース内に U+3000 が混入していたらNG
• img の alt 必須装飾画像でも alt="" を明示。属性の省略はNG

↑のルールをSKILL.mdに記載しておきます。

こんなイメージです。機械にとって分かりやすいように、マークダウン形式で書くのが大事です。

ファイル構成

cc-demo/
├── CLAUDE.md 常時読まれる規約（3ルールを明記）
├── index.html 違反あり
├── about.html 違反あり
├── css/style.css 違反あり
├── docs/loop-policy.md ループの停止条件・試行回数の上限
└── .claude/
├── settings.json Hook設定（ハーネス）
├── hooks/check_html.py 規約チェッカー（合否を機械判定する検証器）
└── skills/html-quality-guard/SKILL.md

ハーネスの中身

チェック係であるハーネスの中身はこんな感じです。

こちらはPythonファイルで用意しています。

何をチェックして、もし違反があったらどういうコードを返すのかが記載されています。

ループの条件

docs/loop-policy.md に、ループの条件を書きます。

今回の条件は簡単で、次の3点です。

• 禁止事項：チェッカー自体を書き換えない、やごと削除して回避しない。
• 完了の定義：チェッカーが終了コード0（[OK]）を返したときだけ完了。目視で直したつもりは完了ではない。
• 試行回数の上限：最大5ループ。3ループ連続で同じルールIDが残ったら中断して人間に報告すること。

検証対象のHTMLファイル

今回検証の対象とするHTMLファイルはindex.htmlとabout.htmlです。よくあるホームページのトップとサブの構成になります。

わかりづらいのですが、こちらの2つのファイルに

• タイトルとH1のテキストの不一致
• テキスト内に全角スペースが入っている
• alt属性が空のIMGタグ

この3つが潜んでいます。これらをClaude Codeにチェックしてもらいます。

検証

それでは検証に入っていきたいと思います。

Claude Codeに対して下記のような指示文を投げます。

『このプロジェクトの CLAUDE.md に書かれているコーディング規約に沿っているか確認し、違反があればすべて修正してください。 作業の進め方は docs/loop-policy.md のループポリシーに従ってください。完了条件・試行回数の上限・中断時の報告フォーマットもそこに書いてあります。 最後に、次の3点を報告してください。 Hook に差し戻された回数 チェッカーを何回実行し、何周で完了したか ファイルごとに、どの違反（ルールID）をどう直したか』

↑イメージとしてはこんな感じです。私はカーソル上でClaude Codeを開いて指示をしています。

それでは早速、Claude Codeに作業をしていってもらいましょう。

↑のような感じでひたすらにチェックや検証をしてくれています。

検証が完了しました。

以下のようなイメージでフィードバックをしてくれます。

文字が小さくて読みづらいですが、

• 修正と検証を何ループ回してくれたか
• どこが間違っていて、どう直してくれたか
• 結果的に完了したのかどうか

を事細かにフィードバックしてくれます。今回は2回のループで完了したみたいです。

漏れていないかの心配もなくて安心ですね。

とても簡単な内容だったこともあり、あっさり直してくれました。

まとめ

今回はとても簡単な内容で検証をしてみましたが、もっとファイルを充実させれば、コーディングのその後のチェックまでをやってくれてかなり効率化になるのでは、と思いました。

もっともっと学んでマスターしていきたいと思います。