見出し画像

【AWS】 AI搭載IDE Kiroチュートリアルやってみた - Steering編 - ｜1日1ハンズオン Day 20

ぽめら

こんにちは、ぽめら です。
本記事は1日1ハンズオン企画、第20回です！
引き続きKiroのチュートリアルをおこなっていきます。今回はプログラム解析&ドキュメント化を自動でおこなってくれるSteering編に挑戦しました💨

Kiro Steering機能


1．はじめに

引き続き、AI搭載IDEのKiroに触れていきます！

題材はKiro公式ドキュメント。
"Spirit of Kiro（お化けのKiro？）"というゲームのバグ修正を通じてKiroの使い方を学ぶハンズオンです。

Kiro公式チュートリアルの環境構築を終え、今日はSteering機能を試していきます。過去回でも触れたように、プログラムを解析/前提仕様を設定する機能がSteering機能でしたね。

チュートリアルはDockerを立ち上げた状態で、実際の画面を確認しながら進めていきます。私は一回終了していたので、compose upからやりました。

docker compose up \
  --watch \
  --remove-orphans \
  --timeout 0 \
  --force-recreate

では、さっそく進めていきたいと思います。レッツハンズオン！

2．Kiroチュートリアル - Steering編 -

2-1．問題点の確認

変更を加える前に、現状の確認です。
起動直後のページは超シンプル。ほぼ装飾がありません。"シンプル故にバイブコーディングによる変化がわかりやすい"というのがコンセプトの様子。
味気ないので、これを自分好みに修正していくのが今回のミッション。

シンプルでも良いけど、確かにコンセプト等が欲しくなる画面


2-2．Steering Filesを設定する

バイブコーディングをおこなうために、Kiroで準備が必要です。そのひとつがSteering Filesの設定というわけですね。

現状のプログラムがどうなっているのか、解析するのってめちゃ時間かかりますよね。他人が書いたコードほど本人は簡単に読めるのですが、他人からしたら"この処理ってなんだ？"の連続ですし…🤕

そのコード解析をしてくれるのがSteering機能。というわけで今回のメインとも言える部分を早速触っていきます！

① Control/Command + Shift + P でコマンドパレットを開く

コマンドパレット表示
でも、たぶんKiroをクリックしてsteeringから行っても良さそう

② コマンドパレットでSteering機能を呼び出し
※ドキュメントでは「Setup Steering for Project」を選択すると記載されていましたが、なかったので私は「Generate Project steering documents」を選択してみました。

Setup Steering for Projectは見当たらないので
Generate Project steering documentsを選んだ
コマンドを選ぶと右側に進行状況が流れていく
product.md/structure.md/tech.mdの3ファイルが生成された！
チュートリアルと同じような感じになっているので大丈夫そう
kiroフォルダに格納される

このSteering Filesの生成が今回の目玉！そして素直に"すごーい！😍"と驚きました笑 もちろんチュートリアルとしてプロジェクト内のドキュメントが整備されていることが前提だとは思うのですが、プロジェクト概要や構造を目安としてでも出してくれるのは本当に助かります…！！！

また、"日本語にして下さい"というプロンプトを投げることで日本語のドキュメントも作ってくれます。

英語のままの方がコード的な正確さ/素早さは出そう
だけど、日本人だけのプロジェクトなら日本語にしたい…よね？

※ 作成されたSteering Filesについて
👉公式の内容を翻訳してメモ。

  • product.md
    プロジェクトが何か記述されるもの。Kiroが「大きな全体像」を把握するための補助を担ってくれる。今後の指示の前提条件にあたる。

  • tech.md
    プロジェクトの使用技術が記述されるもの。Kiroが既存の技術選択に沿って作業できるようになり、不要に異なる技術を推奨するのを防ぐ。

  • structure.md
    プロジェクト内の主要なフォルダや領域を記述。これにより、Kiroが作業する際に素早く適切な場所にたどり着けるようになる。

2-3．バイブコーディングしてみる

もう準備は万端！あとはKiroに変更をお願いするだけ！
…え、もう良いんですか？？？

じゃあ、まずはアイデア出しから。

日本語のやりとりも可能なのかーという印象
でもちょっとニュアンスがずれるので細かく指示した方が良いのは生成AIの共通項🫤

そして、いざ修正をお願いしてみる。

"ランディングページを変えて"といったら、ちゃんとHomeViewを変えてくれている…！
1分かからずに完了！
"こーやって作ったよ！"も教えてくれる

そして画面は…こーなった！！！

ゆめかわ！🦄✨

日本語で依頼をしたので、画面も日本語にしてくれました。
ゲーム感をコントローラー（物理）で表しているのはなかなか🤔

ちなみに変更を取り消しも簡単にできる。

チャット欄のリプレイみたいなボタンをクリックするだけでOK！

そして英語で指示文を投げてみた感じはこう。

give my game homepage a horror survival creepy atmosphere
を投げてみたらちゃんとホラーみのある画面に😱

スクリプトは細かく指示することが重要とはわかっていましたが、画像生成などと同じでバイブコーディングも生成AIに出来を委ねるとすれば奥が深いですね！

3．まとめ

今回は Kiro のチュートリアルを進めて、Steering機能に触れました！
Kiro、めちゃ奥深い…。

プロジェクトの解析ツールは無料のものを使ったこともありました。前任の方が引き継ぎ資料を全く用意していない状態だったので、"ツールに入れてみたら概要はわかるかも？"という淡い期待を抱いてやってみたんですよね。しかし案の定ダメで…。でも、"Kiroならそれも可能にしてくれるのでは？"という片鱗を感じた次第です😂

また、バイブコーディングは初めての体験でした。スクリプトによって出来が左右されるので、結局は人間が生成されたコードの最終チェックをすることは重要だと思います。しかし、やってみた感じとしては仕様からざっくりと実装までやってくれるってすごい便利ですよね！（そして純粋に楽しい）

難しさのひとつにはうっかり著作権を侵害しないか…もありますが。

とはいえ1機能に触れただけですが、ポテンシャルの高さを感じました🤩

というわけで、今日はここまで！

ではまた明日👋


4．参考リンク

・AWS Kiro紹介ページ

・Kiro公式サイト

・Kiro公式はじめの一歩的なドキュメント

・steering機能編チュートリアルドキュメント



いいなと思ったら応援しよう！