LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kazu23pole

AWSの新しいIDE Kiroを触ってみた

Last updated at Posted at 2025-07-17

はじめに

AIコーディングが時代を旋風している中、AWSが新しいツールを公開しました。

いわゆるAIに指示を出してVibe Codingしてくれるだけでなく、specと呼ばれる機能でやりたいことからユーザーストーリーを作成し、要件定義、設計、実装までを一気通貫でやってくれます。
またhookという機能でファイルの保存時などに自動でREADMEを更新してくれたり、テストファイルを更新してくれたり、セキュリティチェックをしてくれます。
この2つの機能が他のサービスとの差別化ポイントになっているようです。

現在はプレビュー版として無料で公開されていますが、プランごとに料金がかかるようになるとのこと。

やってみた

  • 今回はAWS Location Serviceを使って逆ジオコーディング（緯度経度から住所/地図を表示する）のWebサイトを作ってみます
  • なお、AWS Location Serviceについての詳細は割愛しますが、いわゆるGoogleMapみたいなサービスです

実行環境

$ sw_vers
ProductName:		macOS
ProductVersion:		14.5
BuildVersion:		23F79

$ aws --version
aws-cli/2.27.52 Python/3.13.4 Darwin/23.5.0 exe/x86_64

$ node --version
v22.17.1

ダウンロード&インストール&起動

  • こちらのページから対応するものをダウンロードして実行すればOK


  • サインインを求められるので好きなものでサインイン
    • 今回はBuilder IDでログインしました
    • ブラウザが起動してログインを求められます
    • 必要なアクセス権を渡すのを許可しないといけないですが、KiroはAmazon Qを使ったラッパーみたいなものなのか・・・？

  • VSCodeを使っていると設定や拡張機能をImportすることができます
    • 今回はImportします

  • 配色テーマを決められます
    • 今回はKiro Darkを選択します

  • kiroのコマンドをインストールするか選択します
    • 今回はインストールします

  • インストール完了です！

※ここで1度再起動します。VSCodeから日本語化パッケージをImportしたので、それを反映させるためです。
※Importしてない場合は拡張機能からインストール可能です。

こうしてみると、Cursorとかとインストール手順が全く同じでした・・・

プロジェクトの作成

  • 「Open a project」からプロジェクトを開きます（作業用のフォルダを開きます）
  • フォルダを選択すると、どこまで権限を与えるか聞かれるので、壊れてもいいフォルダであれば「作成者を信頼」しましょう
    • なお、チェックを入れると親フォルダまで破壊される可能性があるので、チェックは入れないようにします

プロジェクトの開始

  • Let's Build



Kiro Spec

まずはSpecを使って要件定義をしてみます。

  • 以下を入力します 
    AWS Location Serviceを使って緯度経度を入力したら、その住所と地図を表示するWebサイトを作成したいです。

  • すると自動で要件定義書を作成してくれました。問題なければ右下の「Move to design phase」をクリックします。


  • 次に設計ドキュメントが作成されます。こちらも問題なければ右下の「Move to implementation plan」をクリックします。


  • 次にタスクリストが作成されます。

これで要件定義書と設計ドキュメント、タスクリストが自動で作成されました。
これを元に実装を開始します。

  • 同じセッションを使って実装を開始します。

  • 以下の内容を入力しました。

    あなたはAWSに詳しく高度な問題解決能力を持ったAIアシスタントです。以下の指示に従ってこの仕様書を元に実装を開始してください。

<注意事項>
・まずはタスクを簡潔に要約してください
・記載された技術制約の中で実装方法を検討してください
・タスク実行のステップを列挙し1つ1つ順番に実行してください
・タスクの実行時には都度確認をおこなってください
・記載していない技術スタックを利用する際は確認を求めてください
・不明点がある場合は、作業前に必ず確認をしてください
・予期せぬ問題が発生した場合は、即座に報告の上、対応策を提案してください

  • 先ほど作成したタスクリストを元に、順番に実行を進めていってくれます。


  • 実装されたコードを見たところ、使ってほしくないCognitoを作成しようとしていました。タスクリストにはちゃんと書いてありましたが見逃しました。仕様変更を伝えます。


  • 設計ドキュメントを変更して先ほど作成したファイルも修正してくれました。これで気にせず仕様変更ができそうです。

このまま作成されたタスクリストを順番に実行していってもらいます。
10ステップ完了するのに1時間以上かかりました・・・実際に人間が手を動かすよりは早いかもしれないですが、ここからチューニングをするとなると時間がかかりそうです・・・・

Vibe Coding

  • Vibeモードを使って、近しいコーディングをさせてみます。

  • 指示内容は以下の通りです

    あなたはAWSに詳しく高度な問題解決能力を持ったAIアシスタントです。以下の指示に従ってタスクを実行してください。

<注意事項>
・まずはタスクを簡潔に要約してください
・記載された技術制約の中で実装方法を検討してください
・タスク実行のステップを列挙し1つ1つ順番に実行してください
・タスクの実行時には都度確認をおこなってください
・記載していない技術スタックを利用する際は確認を求めてください
・不明点がある場合は、作業前に必ず確認をしてください
・予期せぬ問題が発生した場合は、即座に報告の上、対応策を提案してください

<やりたいこと>
・AWS Location Serviceを使って緯度経度を入力したら、その住所と地図を表示するWebサイトを作成したいです。

<要件>
・HTML/JavaScript/CSSファイルをそれぞれ1つずつ作成してください。
・AWS SDK for JavaScriptの最新バージョンをCDNから取得する形で実行してください。
・認証情報はあとから指定するので<ここにアクセスキーを入れる>と記述してください。

  • 実行すると以下のように作成を始めました


  • ものの2~3分で実装が完了しました


  • 作っている最中に、AWS Location Serviceにアクセスキーは不要だということを思い出したので、修正してもらいました。

    AWS Location Serviceでは認証情報にアクセスキーが不要なことを忘れていました。
アクセスキーの代わりにAPIキーを使用するように作り変えてください。

  • 続いてAWSに接続してAWS Location Serviceを動かすに必要なAPIキーの発行をKiroにしてもらいます

  • MacにはAWS CLIのインストールとアクセスキーをdefaultのprofileで割り当てているので以下のような指示を与えます。

    defaultのAWS Profileを使用して、AWS Location ServiceのAPIキーを発行して、API_KEYに設定してください。
リージョンは東京リージョン、地図データはESRIを使ってください。
不明点があれば都度確認してください。

  • 実行すると必要なリソースを順番に作成し始めます。

    • コマンドの実行は「ターミナル」を使っておこなわれるようです。コマンド実行時には都度、承認する仕組みです。

  • 作成されたあと、自動的にJavaScriptファイルの中のAPI_KEYを発行したキーに書き換えてくれました。


  • AWS Location Serviceはローカルファイルだと地図が表示できないので、localhostでアクセスできるようにnodeを起動してアクセスします

    ## index.htmlがあるフォルダで以下実行
$ npx serve

 ┌───────────────────────────────────────────┐
 │                                           │
 │   Serving!                                │
 │                                           │
 │   - Local:    http://localhost:3000       │
 │   - Network:  http://192.168.xx.xx:3000   │
 │                                           │
 │   Copied local address to clipboard!      │
 │                                           │
 └───────────────────────────────────────────┘

  • ブラウザで http://localhost:3000 にアクセスするとWebサイトが表示されます

  • 緯度経度を入力して「住所を表示」といれるとエラーが発生しました。


  • 開発者ツールからエラーメッセージ取得して、エラーを解消するよう指示を与えます。

    このファイルを実行したら以下のエラーが出ました。エラーを解消するために必要なコードの修正とAWSの操作をしてください。
https://places.geo.ap-northeast-1.amazonaws.com/places/v0/indexes/LocationServicePlaceIndex/search/position' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-amz-api-key is not allowed by Access-Control-Allow-Headers in preflight response.

  • 問題を発見し、解消してくれました。npx serveだと駄目だったようで、expressでサーバを起動してくれるようです。


  • 再度アクセスし、緯度経度を入力すると都庁の住所と地図を表示してくれました。

こちらはものの10分ほどですべてが完成してしまいました。。。
もう少しSpecの方はプロンプトエンジニアリングになれる必要がありそうです。

最後に

さて、記事を書いている途中でClaude 4.0 Sonnetに「The service is experiencing high load. Please try again later.」と言われてしまいました。

Kiroのページを見るとWaitlistになってますね・・・人気が出過ぎたんでしょうか。
スクリーンショット 2025-07-18 0.49.58.png

Kiro Hookについては別記事でまとめたいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?