AI駆動開発でなんでもハンズオン環境をつくってみた

AWS上に、ClaudeCodeとAWS CDKを用いてなんでもハンズオン環境をつくりました。

Transcript

1. AI駆動開発で "なんでもハンズオン環境"をつくってみた atWare Collaboration Canvas Vol.5 2026/5/28 前原良美
2. はじめに 最近の技術の進歩、速すぎませんか？ 英語で最新情報をキャッチしないと出遅れる 半年前に書いた記事が、古い情報になっている みんな、速報記事書くのはやすぎ 新しい技術が次から次へと出てくる 積読していた本が、いつのまにか古い情報に AI関連のニュース、なんか毎日ある どれから追えばいいのかわからん ツールを比較しても、すぐにアップデートが入って比較結果が変わる件 OSSもベンダー製品もたくさん出てきたぞ 最近、人類皆フルスタックになって震える
3. 学びたい技術について、ポータルサイトに入力 AWS上に、入力に応じたハンズオン環境を構築 最新の技術情報をもとに、すぐ手を動かして技術を学べるよう 自分のための"なんでもハンズオン環境"つくりました はじめに
4. ハンズオン環境の紹介 初めに、ポータルサイトにて学びたい技術について入力
5. ハンズオン環境の紹介 入力後、 ポータルサイト上に 学びたい技術のハンズオンが登場
6. ハンズオン環境の紹介 「このハンズオンのための カスタマイズ事項」や 「学習目標」について記載
7. ハンズオン環境の紹介 画面下記にIDEを埋め込み ハンズオン手順はIDEで 確認
8. ハンズオン環境の作り方 ClaudeCodeと共に、AI駆動開発でつくっております STEP１ ClaudeCodeと共に、設計方針をディスカッション 設計方針をもとに、ClaudeCodeを整備（CLAUDE.mdやSkills） ClaudeCodeがハンズオンコンテンツのテンプレートを作成 ClaudeCodeがポータルサイト、ハンズオンのIDE環境を作成 STEP３ STEP４ STEP２ ClaudeCodeと共に、セキュリティ観点等を見直して環境ブラッシュアップ STEP５
9. ハンズオンのコンテンツ ※リソースは CDKで都度作成 ハンズオン環境の全体像 ポータルサイト （フロントエンド） ポータルサイト （バックエンド） ハンズオンのIDE
10. ポータルサイト（フロントエンド） シンプルな構成にしたいため、サイト自体はSPA（React） IDEに関しては、サイト内にcode-serverをiframeで埋め込み iframe code-server React
11. ポータルサイト（バックエンド） ポータルサイトのフォームに入力したメッセージを処理 フォームに入力したメッセージから要望を解析 ハンズオン手順の作成→S3を通してIDEに連携 CDKソースコード選定or新規作成→S3を通してIDEに連携 　　 （よくある構成のテンプレートは事前に用意しておくことで、 　　都度のトークン消費量を節約） 処理内容
12. ハンズオン S3に格納された情報をもとに、画面に手順を掲載 IDEで操作をしながら、リソース構築していく ハンズオンを実施するためのベース箇所：CDKで事前に自動構築 学びたい技術の箇所：ハンズオン手順にそってIDEで手動実行
13. なんでもハンズオン環境つくっての所感 ClaudeCodeが主体的にシステムを構築してくれて、 とても作りやすい ポータルサイトにさくっと要望を記入するだけで 技術を学べる環境がさくっとできあがるので便利 （※AWSの利用料は要ウォッチ） ハンズオン環境を開発してみて ハンズオン環境を使ってみて