設計からデバッグ、ドキュメント作成、情報のキャッチアップまで「AIが入っていない領域って何ですか」というレベルでAIを使い倒す──。『TypeScriptコードレシピ集』著者でUbieのスタッフプロダクトエンジニア・鹿野壮さんに、Claude Codeを中心とした日々の開発の実際を聞いた。前編では、バイブコーディングの品質を上げる「コーディング前」の作り込み、独自に作ったスキル、そして複数リポジトリをまたぐチーム開発の進め方までを、現場の解像度で語ってもらった。
「Claude Codeにタスク丸投げおじさん」になるまで
― まずは簡単に自己紹介をお願いできますか。
鹿野:今はスタッフプロダクトエンジニア、いわゆるスタッフエンジニアとして働いています。元々はフロントエンドが主だったのですが、最近は普通にモバイルアプリの開発やバックエンドも含めて、フルスタックに開発を進めています。
AIエージェントについては、最初に触ったのはGitHub Copilotで、昔少し使っていました。その後にDevin(自律的にタスクをこなすAIソフトウェアエンジニア)が登場したとき、「タスクを全部任せられるってすごいことだな」と感動して、そこからAIエージェントの話にのめり込んでいきました。
そしてClaude Codeが人気になった2025年の5月ぐらいに触って、「もうここからタスクも全部Claude Codeに任せよう」と。今は基本的にClaude Codeを中心に、ほとんどの開発をしている状況ですね。「Claude Codeにタスク丸投げおじさん」と名乗って生きています(笑)。
― 日々の開発業務にAIをどう組み込んでいるか、具体的に教えてください。
鹿野:基本的に全工程で使っています。設計段階から、設計書はもちろん、デバッグ、テスト、ドキュメントの作成まで。
さらに言うと、情報のキャッチアップにも使います。日々の会議の議事録や、Slackで話した内容、開発にあたって参照するNotionなどのドキュメント、Gitのリポジトリを横断的に調べる調査……そういった段階こそ、むしろAIが入っていない領域って何ですか、というくらいの感じで使っていますね。
― 開発そのものは、プロダクトマネージャーから「こういうものを作ってほしい」と依頼が来たり、デザインが来たりするところから始まるのでしょうか。
鹿野:我々はスクラム形式で、「こういう機能を作っていきましょう」とスプリント単位で決めて開発していきます。そこで決めたものをデザイナーがFigma(ブラウザベースのコラボレーション・インターフェース・デザイン・ツール)に起こし、それを実装したり、設計書をみんなでレビューしたりという感じで進めていきます。
― デザインは他のデザイナーがFigmaで用意してくれる、という形ですか。
鹿野:場合によります。そんなにかっちりしたデザインは基本的に作っていなくて、デザインシステムが充実しているんです。コンポーネント単位で使い回せるので、そのデザインシステムを使ってエンジニア側で画面を起こし、「こんな感じでどう?」とデザイナーとUIの連携をして、そこから作っていくこともあります。
― スプリントで何をやるか決めたら、それをClaude Codeに渡して一緒に画面を作り、デザイナーに渡す、というフローも普通にありますか。
鹿野:はい、普通にありますね。
バイブコーディングの品質は「コーディング前」で決まる
― Claude Codeはバイブコーディングでガンガン進めるのか、プランモードで緻密に使いこなすのか。そのあたりはいかがですか。
鹿野:それも状況によりますが、主にやっているのはバイブコーディング主体です。ただ、本当に全部丸投げしてしまうと、上がってきたものの品質が全然違ったりするので、コーディングという作業に入る前のところを結構熱くやっていますね。
具体的に言うと、もちろんプランモードもいいんですが、最近はプランをより詳しく、丁寧にできるテクニックが結構あるんです。たとえばAnthropic公式のスキル(Claude Codeに特定の作業手順を覚えさせる仕組み)に「feature-dev」というスキルがあります。これを使うと、既存のコードを全部深く調査して、実装計画を会話形式で立てて、「この計画でいいですか?」と壁打ちして決めてくれて、実装して、テストして……ということまでやってくれます。
あとは、Matt Pocockさんという、TypeScriptの非常に優秀なエンジニアがいるのですが、彼が最近そういうスキルを色々作ってくれています。その中に「grill me」というスキルがあるのですが、通常のプランモードよりも、少しでも曖昧なことがあれば「ここはどうしますか?」「これはこういうことですか?」と深掘りして質問してくれるんです。しかも深掘りした後に、「この内容については、こういう手法がいいと思うんですけど」と提案までしてくれる。そういう機能を使って、実装の計画をより詳しく立ててから実装していく、ということが基本的には多いですね。
AIが書きがちな古いコード、冗長なコードをどう正すか
― 日々AIでエンジニアリングをする中で、「これは結構尖っている使い方だな」「結構いい使い方だな」というものはありますか。
鹿野:いくつかあって、話し始めると本当に止まらないんですけど(笑)。
たとえば、AIが書くコードは、きちんと教育してあげないと、長ったらしくて回りくどいコードを書いてくることがあります。それをエンジニアとして求めうる品質に上げるための手法がいくつかあるんです。
1つはClaude Codeの「simplify」というコマンドです。これを使うと、作られたコードがちゃんとシンプルになっているか、車輪の再発明(すでに確立している既知の優れた手法を、それとは知らずに一から作り出すこと)をしていないか、冗長な書き方をしていないか、といったところをシンプルにしてくれます。
あとは、AIが書くコードは、結局学習されたコードを出しているだけなので、古いコードを結構出してくることがよくあるんです。私はCSSやJavaScript、TypeScriptがまあまあ得意なので、「いつの時代の書き方しとんねん」みたいなことをやっていることが時々あります。そういう時、都度レビューしていくのも良いのですが、AIは粒度の大きいコードを書いてくるので全部は見きれない。だったら、生成する段階で、今時のやり方に乗ったコードを書くような知識を与えてあげる必要があります。
最近Googleが出した「Modern Web Guidelines」というスキルがあって、これを使うと、モダンかつ今時のいい感じのコードをAIに教えてくれるんです。こういうのを使ったりしていますね。
― フロントエンド開発はいかがですか。
鹿野:フロントエンドって画面を作りますよね。だから画面が結局どう変わったかを、周りの人にコードレビューしてもらう必要があるんです。AIが作ったコードを自分がレビューする時も同じです。
その時にキャプチャを撮って、GitHubのプルリクエストに貼り付けたいんですが、今の段階だと、GitHubのプルリクエストのディスクリプション欄に自動的に画像を貼り付ける手段がないんですよ。だから人間が手動でキャプチャを貼り付けるしかない。それを自動化するために、画像をGitHubのプルリクエスト欄に貼り付けるスキルを自分で作りました。
キャプチャ自体は、Chrome DevTools MCP(Googleが公式にリリースしたWebフロントエンド開発エージェント)や、最近だとエージェントブラウザーがやってくれるので、キャプチャしたものをプルリクエストに貼り付ける、ということをやっています。そうやってキャプチャを貼り付けることで、ユーザーなり人間なりが画像のレビューをしやすくなる。こういうことは、あまりやっていないのではないかなと思いますね。
複数リポジトリをまたぐチーム開発と「デザインドック」文化
― そこから先の、チームでの開発はいかがですか。コードレビューや、プランをチームで共有する話など。
鹿野:チームで設計するのはすごく大事にしていて、今日もやっていました。うちは結構いろいろなリポジトリにまたがっていて、担当者もそれぞれ違うんですね。リポジトリごとのお作法や、あまり触ったことがない人は気づき得ないルールが、やっぱりあります。もちろんそういうのも全部ドキュメントにまとまってはいるんですが、ドキュメントだけでは網羅しきれないものがあるんですよ。
そういうのを漏れなく、リポジトリ間の担当者が同意を取って、特に大きい機能を計画していくために、「デザインドックをみんなで作りましょう」という文化があります。大きくて、他のリポジトリにたくさん影響を与えそうなものについては、設計書を書いて、それをみんなでレビューし合って進めていく形になっていますね。
― かなりレビューをやるんですね。
鹿野:もちろんタスクの粒度によります。自分たちのリポジトリだけで完結するような小さいタスクは、もう全部自分たちだけでやってしまいます。AIを使った開発はそんな形で進めています。
(続)
************************************************************************************************
後編では、「AI時代におけるエンジニアの価値の変化」について鹿野さん自身が感じていることや、新しく学び始めたチャレンジについて伺います!
プロフィール
鹿野 壮(かの・たけし) Ubie株式会社 スタッフプロダクトエンジニア。フロントエンドを主軸にしつつ、モバイルアプリ・バックエンドまでフルスタックに開発を手がける。『TypeScriptコードレシピ集』(技術評論社)、『JavaScriptコードレシピ集』の著者。九州大学芸術工学部音響設計学科卒。CSSNite ベストセッション受賞。X:@tonkotsuboy_com



