はじめに
最近話題になっている Agentic IDE の Kiro を利用して Chrome 拡張機能を開発した時のことを記事にまとめました。
Kiro がどれだけ開発を支援してくれるのか、皆様の参考になりましたら幸いです。
Netflixのイントロを自動でスキップしてくれる拡張機能を作りたい
Netflixには次のエピソードの自動再生という設定項目があってこの設定を有効にしているとEDをスキップして次のエピソードを自動で再生してくれますが、OP（イントロ）を自動でスキップする機能はありません。
以前は Never Ending Netflix という拡張機能を利用していましたが、Google Chrome が拡張機能の仕様を Manifest V2 から Manifest V3 へ移行し、V2のサポートが廃止された影響で使えなくなりました。
本記事作成時点においても残念ながら Chrome 側で利用不可となっており有効化はできません。
Never Ending Netflix が使えなくなってからは毎回イントロをスキップを押していましたがこの操作が煩わしくなってきたので、Kiro を触ってみるついでに、イントロを自動でスキップする拡張機能を自分で作ってみることにしました。
Kiroをインストール
公式からインストーラーをダウンロードしてインストールしましょう。
Kiroを使用するには Google、GitHub、AWS Builder ID、AWSアカウントのいずれかでログインする必要があります。お好みの方法でログインしてください。
なお、本記事作成時点では新規ユーザーには30日間有効な500ボーナスクレジットが付与されます。
後述しますが使い方によってはクレジットを結構消費します。Kiroに興味がある人は、今のうちにボーナスクレジットをもらって色々触ってみると良いと思います。
Vibe と Spec の違い
Kiro で任意のフォルダを開くと最初はこのような画面になると思います。
Kiro には Vibe と Spec の2つのモードがあります。
この2つの違いを Kiro に聞いてみました。
Vibe は GitHub Copilot Chat のようにチャットで対話しながら開発を進めるモードです。いわゆるバイブコーディングと呼ばれるスタイルで、最近よく見られる開発手法のひとつですね。
Spec は Kiro 特有のモードで、要件定義・設計・実装タスクをリスト化・段階的に実装という流れで開発を進めるようです。
普段の開発では Vibe で十分で、大きな機能を計画的に作りたいときだけ Spec を使う、という感じだと思います。後述しますがクレジットの消費も激しそうなので日常のちょっとした作業での利用は想定されていないのかもしれません。
せっかくなので今回は Spec を選択します。
要件定義書を作成
Spec を選択した状態で、以下のような簡単な内容を入力しました。
Netflixのイントロを自動でスキップしてくれるChrome拡張機能を作成したい
すると、入力された内容をもとにまずは要件定義書（.kiro/specs/netflix-intro-skipper/requirements.md）が作成されました。
「こんな感じの機能でいい？」という提案をしてくれるので必要に応じて会話して調整します。
問題がなければMove to design phaseを押して次の工程に進みます。
設計書を作成
以下のように調査やコマンド実行で許可を求めてくる時があるので問題がなさそうなら許可していきましょう。
しばらくすると、今度は設計書（.kiro/specs/netflix-intro-skipper/design.md）が作成されました。
こちらも設計書の内容を確認して修正などが必要なら会話して調整します。
問題がなければMove to implementation planを押して次の工程に進みます。
実装計画を作成
しばらくすると、今度は実装計画書（.kiro/specs/netflix-intro-skipper/tasks.md）が作成されました。
コア機能の作成を優先するか、テストも含めた全てのタスクを実行するかを聞いてきました。
せっかくなのでMake all tasks required (comprehensive from start)を選択して、全てのタスクを必須としました。
以上で全ての仕様書の作成が終わりました。
実装
次はいよいよ実装のフェーズになります。
tasks.mdファイルを開いて実行したいタスクのStart taskをクリックします。
すると、Kiro がタスクリストの内容にもとづいてコーディングやテストの作成を進めてくれます。
あとはただひたすらに コーディング→テスト→コーディング→テスト を繰り返しました（Kiroが）。大抵のテストは初回で全てパスすることは無かったですが、その場合もエラーの内容を kiro に伝えてテストでエラーが無くなるまで修正してもらいました。
全てのタスク完了後に Chrome 拡張機能として読み込んで実際に利用してみましたが最初は期待通りの動作をしませんでした。Chrome の検証ツールや Chrome 拡張機能の画面でいくつかエラーが出ていたので今度はそれらのエラーが出なくなるまで 修正→動作確認→修正→動作確認 を繰り返します。
そして何回かのトライ&エラーを経て、ついに Chrome 拡張機能 が完成しました。
作成にかかった時間とクレジット
大体半日くらいで私が求めていた最低限の動作をするものが出来ました。
事前にこちらのワークショップを少しやっていたので30クレジットくらい使っている状態から始めたのですが、拡張機能を作り終えた時点の消費クレジットは300クレジットくらいだったので、この拡張機能の作成に消費したのは大体270-280クレジットになると思います。
ゼロから作ると思ったよりクレジットを消費しますね。
Kiroの感想
私は仕事・プライベートの両方で VS Code を利用していますが、Kiro は VS Code ベースの IDE ということもあり、操作感に違和感はほとんどありませんでした。
VS Code で GitHub Copilot Chat や Amazon Q Developer を使っているのと近い感覚で利用できるので新しいIDEを覚えるという感じもなく自然に使える印象を持ちました。
また、今回の体験を通して、Kiro の特徴のひとつである 仕様駆動開発 は、個人的にとても興味深いと感じました。
これまでのエンジニア人生の中で、何年も運用され続けているプロダクトにおいて、
- なぜこの機能が作られたのか分からない
- 現在どのように使われているのか誰も説明できない
といった状態に何度か遭遇してきました。
当時の背景や要件を知る担当者はすでに異動・退職しておりコードだけが残っている。
その結果、
- この機能を削除してよいのか判断できない
- 変更して問題が起きないか不安
- 調査に必要以上の時間がかかる
といった理由で、不要かもしれない機能を抱えたままプロダクトが肥大化していくケースは、どの現場でも起きていると思います。
こうした問題に対する有効なアプローチの一つが、仕様駆動開発ではないかと感じています。
コードと一緒に仕様を最初から残しておくことで、数年後に別のエンジニアが触ることになっても、
- その機能の役割
- なぜ必要なのか
- どれくらい重要なのか
を理解しやすくなると思います。
長期運用されるプロダクトやチーム開発ではとても効果的なアプローチだと感じました。
一方で、仕様駆動開発はどうしても手間と時間がかかります。
- 「とりあえず動くものを作る」フェーズ
- 運用で発生するちょっとした修正
といったスピード重視のタスクにはあまり向かないかもしれないと感じました。
完璧な開発手法は存在しないと思うので、状況に応じてうまく使い分けていきたいですね。
Kiro と仕様駆動開発は新しい選択肢のひとつとして、今後も試していきたいと思います。
作成した Chrome 拡張機能
GitHubで公開しています。
個人利用のために作成したものなので現時点では Chrome ウェブストアに公開する予定はありません。
インストール手順はREADMEに記載していますので興味のある方は是非使ってみてください。
まとめ
いかがでしたでしょうか。
今回の Chrome 拡張機能の作成では要件定義・デザイン・タスクの作成から、開発・修正・テストといった一連の工程のほぼすべてを kiro がやってくれました。私はプロダクトオーナーとして口を出すだけでコードは一切書いていません。
最初から 100% 思い通りに動くものが完成したわけではありませんが、何度か修正を重ねることで、短時間で期待どおりの動作をする拡張機能が完成しました。
指示も細かく出すのではなくあえて雑に思ったことを投げてみましたが、それでも形になるものが出てきたのは正直驚きでした。
人がすべてを実装するのではなく、人は方針決めや意思決定に集中して実装はAIに任せる。
Kiro を使ってみて、そんな開発スタイルが現実的になってきていることを強く感じました。
NE株式会社のエンジニアを中心に更新していくPublicationです。 NEでは、「コマースに熱狂を。」をパーパスに掲げ、ECやその周辺領域の事業に取り組んでいます。 Homepage: ne-inc.jp/
Discussion