始めに
この記事では、Claude Codeを使ったVibe Codingによる0からのシステム開発を初体験してみて、「やってよかったこと」「困ったこと」「今後の展望」を振り返りつつ、抜粋して記事を執筆しています！
背景
弊社では複数のメディアサイトを運営しており、それらメディアサイト内で自社サービスの広告を運用しています。
自社サービスの広告運用を効率化する社内システムのプロトタイプを、新卒一年目のエンジニアがClaude Codeを利用して一人で開発してみようという機会がありました。
結果として、期限内に予定していた機能の開発が一通り完了し、デモンストレーションするところまで達成することができました！
Claude Code利用開始時の筆者
- 新卒一年目のエンジニア
- Vibe Codingの経験はほぼ0
- 使用OSはmacOS
やってよかったこと
Mac標準の「AppleScript」を利用し、Claude Codeからデスクトップ通知を送らせる
以下の [手順] で、「Claude Codeがコマンド実行時の許可を求める時」と「Claude Codeがタスクを完了した後」に、Mac標準の「AppleScript」を利用してデスクトップ通知を送らせるようにしました。
また、同時に通知音も鳴らすようにしています。
「AppleScript」以外にも通知を送らせる方法はありますが、社用Macを使っているので、安心な標準機能を利用しました。
Claude Codeの作業を待ちつつ他の画面で作業している時に、「Claude Codeがコマンド実行時の許可を求めていないか」と「Claude Codeが作業を完了していないか」を確認する手間が不要になり、快適に作業できるようになったので良かったです。
[手順]
-
Apple標準のアプリケーション「スクリプトエディタ」を開き、エディタに下記のコードを貼り付けて実行
-
display notification "" with title "" - 上記コードの実行により、Appleの
システム設定 > 通知から、App Scriptを利用した通知の許可が可能になります
-
-
Appleの
システム設定 > 通知で「スクリプトエディタ」からの通知をオンに設定 -
Claude CodeのCLIに移り、以下の手順でフックを登録
/hooks-
Notificationを選択(コマンド実行の許可を求める際に発火) -
Add new hook...で下記コマンドを登録-
afplay /System/Library/Sounds/Glass.aiff && osascript -e 'display notification "コマンド実行を許可しますか？" with title "Claude Code通知"'
-
/hooks-
Stopを選択(Claude Codeのタスク完了時に発火) -
Add new hook...で下記コマンドを登録-
afplay /System/Library/Sounds/Glass.aiff && osascript -e 'display notification "作業が完了しました" with title "Claude Code通知"'
-
別のシステムを参考にさせる
背景として、別のプロジェクトのシステムの一部分を参考に開発したいことがありました。
そこで、0から仕様を設計するのではなく、参考にしたいシステムのリポジトリをgit cloneし、そのリポジトリをClaude Codeに参照させました。
これにより、別システムを参考にしながら開発することができるようになりました。
参考にしたい部分のコードから逆算して仕様書を作成してもらい、その仕様書を用いるのも良いかもしれません。
その場合は/exportというコマンドを利用して現在のセッションのコンテキストを別のセッションにコピーし、コピー先のセッションで仕様書を作成させます。
「過去のコンテキストも考慮した上で仕様書を作成してほしいけど、試行錯誤して仕様書を作成する部分はコンテキストとして溜めたくない」というようなケースに有用ではないかと考えます。
改善案・別案を考えさせる
開発初期ではシステムの基本的な仕様書を事前にClaude Codeに読み込ませていました。
仕様書を読み込ませた上で「仕様の改善案」や「仕様の別案」を質問することで、考慮漏れやbetterな仕様を発見することができ、学びにもなって良かったです！
困ったこと
既存のフックがCLI上で削除できない
[ 困ったこと ]
Claude CodeのCLI上で/hooksコマンドを利用して既存のフックを削除しても、実際にはフックが削除されないというバグが起こりました。
バグが起こった時のClaude Codeのバージョンは2.0.15です。
後述の [ 調査 ] にも記載していますが、ある条件下でバグが発生することを発見しました。
[ 調査 ]
Claude CodeのIssueを確認したところ、類似するバグが下記Issueで報告されていました。
このIssueについて公式のコメントによると、設定ファイルを直接編集することを暫定的な対処法として推奨していました。
そのため、hooksコマンドからフックが削除できないけど、どうしてもフックを削除したいという場合は暫定的に設定ファイルを直接編集して問題ないと考えられます。
バグが修正されて以降のバージョンを利用していても、依然としてフックが削除できない問題が下記Issueで報告されているので、下記Issueの作成者と同様に私も別のケースでバグが起こったと考えられます。
今回私のケースで起こったバグの再現手順を発見しましたので、共有しておきます。
再現手順
改めて、Claude Codeのバージョンは2.0.15です。
一例ですが、以下の手順で再現可能です。
- NotificationフックとStopフックについて、それぞれ一つのフックのみ設定されている状態にする
-
/hooksコマンドから、Notificationフックとして登録しているフックを削除してみる
少なくとも以下の条件を全て満たしている場合にバグが起こることがわかりました。
- フックが二種類以上登録されていること(例：NotificationフックとStopフック)
- 一種類のフックにつき、一つのフックのみ登録されていること
設定ファイルが次の通りであれば再現可能です。
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "hook1"
}
]
}
],
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "hook2"
}
]
}
]
}
}
[ 解決方法 ]
上述の [ 調査 ] で記載した公式の推奨手順の通り、.claude配下にあるsettings.jsonを直接編集することでフックが正常に削除できました。
例としてStopフックを削除したい場合は、次のように"Stop"キーとその値("Stop": [ ... ])を丸ごと削除します。
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "hook1"
}
]
}
],
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "hook2"
}
]
}
]
}
}
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "hook1"
}
]
}
]
}
}
今後の展望
CLAUDE.mdを複数のファイルに分割する
[ 問題点 ]
自分の現状のCLAUDE.mdを改めて見ると、「フロントエンド関連の指示」や「バックエンド関連の指示」、「テスト関連の指示」...と、全ての指示を一つのファイルにまとめてしまっていました。
こうなると、CLAUDE.mdを確認・編集する際に、目当ての項目を探すのに苦労してしまいます。
[ 対応案 ]
今後はClaude Codeの「インポート機能[1]」を利用して、指示の種類ごとにCLAUDE.mdのルールを別のファイルに分割して、CLAUDE.mdには分割したファイルをインポートして集約するような形で運用してみたいです。
サブエージェントを利用する
[ 問題点 ]
自分のプロンプトを振り返ってみると、「過去のコンテキストがなくても遂行できそう」、「コンテキストとして溜める必要がなさそう」なタスクをClaude Codeに着手させていることが何度かありました。
このままだと、無駄なコンテキストがセッション内に溜まってしまい、Claude Codeのアウトプットの質の低下に繋がると考えられます。
[ 対応案 ]
Claude Codeは「サブエージェント[2]」と呼ばれる機能を提供しているので、これを利用することで無駄にコンテキストを溜めてしまう問題を解決したいと思います。
サブエージェントを利用すると、メインのセッションとは別のコンテキスト内で自分で決めた特定のタスクを、自分で決めた権限の範疇で任せることができます。
一例として、コードの変更を確認してgitでコミットするようなタスクはサブエージェントに任せて良さそうだと考えました。
[ 補足 ]
手動でも、CLAUDE.mdに記載したことでも、タスク毎に何らかのコマンドを実行することがルーティンとしてある場合、「フック[3]」を利用して自動で実行させることもコンテキストを節約する方法の一つとして考えられます。
CLAUDE.mdに書いたルールの遵守率を高める
[ 問題点 ]
Claude Codeがタスクを遂行する中で、CLAUDE.mdに書いたルールに違反する事例が徐々に増えていくのを実感しました。
Claudeには「コンテキスト容量の95%を超えるとコンテキストを自動圧縮する仕組み[4]」が存在するので、恐らくこれが原因でCLAUDE.mdの内容が圧縮されてしまい、ルールの遵守率が下がったと考えられます。
[ 対応案 ]
Claude CodeのCLI上で/clearを実行するとコンテキストがリセットできるので、コンテキストが容量の95%を超えたタイミングで/clearを実行することを選択肢の一つとして持とうと思います。
補足として、/contextを実行することで現在のコンテキスト量を確認することができます。
実際にコンテキストをリセットしてみましたが、ルールの遵守率が高まるだけでなく、望んだ通りの機能がよりスムーズに開発されるのも実感しました。
ただし、コンテキストをリセットすることはデメリットにもなり得るので、コンテキストをリセットしたくない場合は、プロンプト毎に@CLAUDE.mdを含めてファイルを都度インポートしてみて効果を確かめたいです。(その分トークン使用数は増えますが)
過去のコンテキストが不要なタスクであれば、別のセッションを立ち上げて作業する方法、もしくは前述のサブエージェントを利用する方法を取って良さそうです。
最後に
本記事では、社内システムのプロトタイピングを通じて「やってよかったこと」「困ったこと」「今後の展望」をまとめました。
Claude Codeを活用したVibe Codingの強力さを実感できて、素晴らしい経験が得られました！
一方で、LLMに全ての判断を委ねるのは危険で、最終的には人間のエンジニアの判断が要求されるので、これからも技術のキャッチアップに勤しみ、楽しみたいです。
ポート株式会社は、「社会的負債を、次世代の可能性に。」をパーパスに掲げ、人材領域およびエネルギー領域を主力事業とした事業を展開しています。人材領域では、「キャリアパーク！」「就活会議」「みん就」などのサービスを提供しています。
Discussion