前提：楽楽明細とは別のアプリとして作った 起きたこと：12機能を1本のプルリクにまとめた 原因：4層の名前までしか決めていなかった 対策：機械に判定させる範囲を広げ、人が見る範囲を絞る 実例：レビューで通せなかった箇所 次にやるなら：プルリクの切り方から変える チェックリスト：着手前に決めておく項目 編集後記：インタビューを終えて ラクス技術広報です。 開発本部では、各部署のAI活用の取り組みを技術広報がインタビューし、記事にしています。今回は電子請求書発行システム「楽楽明細」の新しいオプション機能を、AIにほぼ実装させて約2か月でリリースした事例です。 本記事は、AIを使って順調に機能開発が進んだ話だけでなく、うまくいかなかったこと・その対策をまとめています。 AIに任せる範囲を広げる前に、正しさを機械が判定できる状態を作る。 今回はこの状態を作らないまま進めました。その結果、機能ごとに実装の仕方がばらばらになり、1機能のレビューで入った指摘を他の機能に横展開できず、同じ指摘を機能の数だけ受けることになりました。 納期の都合で12機能を1本のプルリクエストにまとめたことも重なり、変更ファイルは700を超え、サーバーサイドのレビュー担当が全量を確認し終えるまでに5営業日かかっています。 新規プロダクトでAI駆動開発を始める方 AIが書いたコードのレビューが追いつかないと感じている方 に向けて、着手前に決めておく項目を記事の最後にチェックリストとして置きました。是非ご参考ください。 ［図1：任せる範囲と、機械が判定できる範囲］ 前提：楽楽明細とは別のアプリとして作った 　 楽楽明細は、請求書や支払明細などの帳票を電子発行するクラウドサービスです。帳票のもとになる売上データは、お客様が販売管理システムやExcelで管理しているものを取り込みます。 販売管理システムを使っていないお客様は、売上データをExcelで管理しています。 ・営業や拠点ごとにファイルが分かれ、どれが最新かわからなくなる ・転記のときにミスも起きる ここを解決するために作ったのが、今回の 売上登録オプション です。専用画面で売上データを入力すると、そのまま請求データとしてCSV出力できます。 仕様はプロダクトマネージャーが決めました。AI（Claude）でプロトタイプを作り、動くものをお客様に見せながら40社に話を聞いています。話を聞くうちに最小限の機能で導入いただけるとわかり、最初のプロトタイプから機能を約30%削って、CSV出力と税額計算に必要な設定に絞りました。 楽楽明細本体には手を入れず、別のアプリとして切り出しています。長く運用してきた本体にAIを入れると既存機能を壊す可能性があるため、影響範囲を限定してAIに任せる範囲を広げる判断です。 項目 内容 期間 開発決定4月7日 → リリース5月末（実質2か月未満） 体制 設計・実装は2026年1月入社の川島卓大さんがほぼ一人。 サーバーサイドとフロントエンドで各1名がレビュー。 技術 Java、Spring Boot、React、TypeScript、PostgreSQL AIの使い方 仕様の書き起こしはClaude Code、kiro（cc-sdd）でspec化してエージェントに読ませる。 実装の主軸はCodex。 git worktreeで機能ごとに作業を隔離し、複数セッションを同時に走らせる。 起きたこと：12機能を1本のプルリクにまとめた 　 実装に使える期間は実質1か月弱で、機能は12ありました。機能ごとにプルリクエスト（以下プルリク）を切ってレビューを待つ余裕がないため、まず全機能をつなげて動かし、そこから改善する方針を選びました。 項目 実績 変更ファイル数 700超 サーバーサイドのレビュー 機能単位で半日〜1日。 最初のプルリクを全量見切るまでに5営業日（期間で2週間弱）。 フロントエンドのレビュー 大型プルリクと、機能単位に分割された後続15件のフロント部分を合わせて2人日。 GitHub Copilotによるレビューも入れていましたが、人手で見きれる量を超えています。機能ごとに切り分けてレビューできたのは、パッケージ構成をfeature-firstで先に決めていたためです。 原因：4層の名前までしか決めていなかった 　 プロダクトマネージャーからの要求仕様書は、お客様の求めるものが整理された状態で渡されています。ただ、そのままAIに渡せる粒度ではなかったと川島さんは語ります。 「そのままでは渡せませんでした。特に受け入れ条件と例外系が足りませんでした。」 そこで要件を「WHEN 条件 THEN 結果」のEARS形式で1アクション単位に分解し、「IF 制約 THEN 拒否」の例外パスを正常系と並べて書いてからspecに落としました。 実装側で先に決めていたのは、feature-firstのパッケージ構成と、DDD（オニオンアーキテクチャ）の4層の名前までです。層の中で誰が何を担うのか、検証はどこでやるのか、副作用はどこに置くのかは決めていませんでした。 その状態で機能ごとに並列でエージェントを走らせると、1機能のレビューで入った指摘を他の機能に横展開できず、同じ指摘を機能の数だけ受けることになりました。 「仕様自体は要件通り作成できているものが多かったが、責務が分離できていないものが多く、レイヤー間の妥当性を見る時間が多かった。」 要求がテストできる形になっていても、実装方針が決まっていなければ、AIはそれぞれの解釈で書きます。 対策：機械に判定させる範囲を広げ、人が見る範囲を絞る 　 ［図2：判定を3段に分ける］ CIとpre-commitは最初から入れていました。ルールの書き出しとマージゲートの追加は、機能ごとに実装がばらばらになった反省から足したものです。 「一番効いているのは『できました』と言わせず証拠を出させることです。」 川島さんは、サブエージェントの「テストが通った」という報告も鵜呑みにせず、親のエージェントがdiffとテスト出力を自分で確認します。 レビューは一次をGitHub CopilotとClaude Codeのスキルで出し、人が二次で見ます。観点が複数あるときは同じエージェントに全部任せず、観点ごとにサブエージェントを分けて並列で走らせます。指摘にはmust、should、ask、imo、nitのラベルを付け、対応するかどうかを人が判断しやすくしています。 実例：レビューで通せなかった箇所 　 本機能にて、サーバーサイドとフロントエンドのレビューを担当した2人に「レビューで通せなかった箇所」についてお伺いしました。 領域 レビューで通せなかった箇所 サーバーサイド メール送信のように非同期で構わない処理が、トランザクションの中に入っていた。 初期のプルリクでは、メールは送信されたのにDBがロールバックされ、無効なパスワード初期化用URLがユーザーに届く実装になっていた（リリース前に修正）。 サーバーサイド 業務ロジックがユースケースやインフラの層に流れ出す責務違反。 サーバーサイド N+1が起きやすい構造。 明細行20行の売上データを取得するのに、最初はSQLが23本走っていた。 フロントエンド 方針はバックエンドで検証して送信時に表示することだったが、全画面にリアルタイムバリデーションが入っていた（全画面から削除）。 フロントエンド すでにある共通コンポーネントを使わず画面ごとに直書きし、ドラッグ・アンド・ドロップも複雑に自前実装していた（ライブラリを使う形に置き換え）。 フロントエンド テーブル内のテキストフィールドに1文字打つごとに、テーブル全体が再レンダリングされていた。 レビューを担当した2人が、共通して口にしたことがあります。 「『動く』のと『そのまま出せる』の間には距離がある」 また、これから同じ進め方を始めるチームへ、2人からのコメントです。 サーバーサイド　レビュー担当者 「設計、実装の前にどうやってAIをハンドリングをしていくかという工程をちゃんと設けるべきではあった。期日までが短く急ぎ早で始めたものの手戻りも多く、事前準備をちゃんと設けていても間に合わせられていたのではと思う。 」 フロントエンド　レビュー担当者 「レビューする側もAIを使っていいということ。作る速度が上がる分、見る側もAIで理解スピードを早めないとレビューが追いつかなくボトルネックになる。」 次にやるなら：プルリクの切り方から変える 　 ［図3：プルリクの切り方］ 切れ目を先に決めておけば、レビューは内側から外側へ積み上げる順に流れます。 一人でフルスタックに進めた体制では、フロントとバックエンドの間で調整が発生しないため、動くものを作る速度は出ました。一方で、一人にかかる負担は大きくなりました。API規約を先に確定させれば、フロントとバックエンドを分担できます。着手前にAIのハンドリングを詰める工程を置くことも、次の案件に向けた課題として残りました。 チェックリスト：着手前に決めておく項目 　 冒頭でもお伝えした通り、本取り組みから得た知見を基に着手前に決めておく項目をまとめました。 ご自身のプロジェクトに当ててみてください。 仕様と設計で決めておくこと （→ 原因の章 ） □ 受け入れ条件と例外系を、1アクション単位で書き出したか（EARS形式など） □ 各層で誰が何を担うか、検証はどこでやるか、副作用はどこに置くかを決めたか 機械に判定させる仕組み （→ 対策の章 ） □ CIで必須にする項目を並べたか（lint、format、型チェック、単体テスト、secret scanning、依存パッケージの実在チェック） □ テストを実データに近い環境で流せるか（Testcontainersなど） □ 機械では拾えない観点を、プロジェクト固有のレビュー観点として文字にしたか □ エージェントに、テスト出力とdiffを証拠として出させる運用にしたか 分割の単位 （→ 次にやるならの章 ） □ API規約（インターフェース）を、実装より先に確定させたか □ プルリクの切れ目を、レビューできる大きさで先に決めたか 最後に、川島さんからのメッセージです。 「AIに任せる範囲を広げる前に、正しさを機械が判定できる環境を先に作ることが大事だと思いました。最初の壁はコードが書けないことではなく、動いているように見えて設計方針から外れたコードが、レビューの追いつかない速度で積み上がることです。AI駆動開発で変わるのは、コードを書く仕事の比重です。良し悪しを定義し検証する仕事へ重心が移ります。ツールは半年で入れ替わりますが、この土台はどのツールに乗り換えても効き続けます。」 編集後記：インタビューを終えて 　 取材していて印象に残ったのは、川島さんもレビュー担当の2人も、うまくいった話より「次はこうする」を具体的に話してくれたことでした。700ファイルのプルリクは、社外に出すには気の重い話だと思います。それでも数字と経緯をそのまま出してくれたので、この記事が書けました。 開発本部では、うまくいったところとやり直したいところの両方を、これからも技術広報が聞いてご紹介していきます。

はじめに 1. 注目した次世代ツールの魅力 1.1 Oxlint ── 「今すぐ、設定ゼロで爆速化」 1.2 Biome ── 「これ 1 つで全てが片付く、究極の一本化」 1.3 Deno ── 「セットアップ不要、最高にクリーンな開発体験」 1.4 Ezno ── 「型チェックまで Rust 化する、超未来のコンパイラ」 2. Vue特有の壁： の静的解析問題 3. チームでの議論：「設定ファイル2つは本当に必要か？」 4. 結果 5. 今後の展望 まとめ はじめに フロントエンドエンジニアをしている伊藤と申します。 昨今は、Rust 製のツールが数多く生み出されており、Linter もその波に乗っていると思います。 弊社でも移行をしたブログを書いており、是非下記の記事も読んでみてください。 https://tech.revcomm.co.jp/ai-lint-formatter-oxc 史上稀に見る大波が来ている時代に、私も颯爽と波に乗ろうとしました。 そしてどういった結論に至ったかご紹介させていただきます。 注: 本記事の検証は2026年9月10日時点、Oxlint v1.82.0 / Biome v2.5.12 で行っています。この領域は変化が速いため、お読みいただく時点では状況が変わっている可能性があります。 1. 注目した次世代ツールの魅力 1.1 Oxlint ── 「今すぐ、設定ゼロで爆速化」 最大の魅力：既存のプロジェクトにノーリスクで追加できる メリット ESLint の 50〜100 倍高速 ： 数万行のコードも一瞬でスキャンが終わります。 設定ファイルが不要 ： インストールして実行するだけで、プロ級のバグ検出ルールが最初から動きます。 既存の ESLint と併用可能 ： 重い処理（バグチェック）は Oxlint に任せ、複雑なカスタムルールだけ ESLint に残す「いいとこ取り」ができます。 1.2 Biome ── 「これ 1 つで全てが片付く、究極の一本化」 最大の魅力：Linter と Formatter が融合したオールインワン構造 メリット ESLint と Prettier の多くの用途を一本化できる ： 個別にプラグインを組み合わせる煩わしさから解放されます（ただし後述の通り、Vue の <template> 部分は現状 ESLint との併用が前提になる場面が残っています）。 設定の衝突ゼロ ： Linter と Formatter が同じ思想で作られているため、「Linter と Prettier のルールがバッティングして動かない」という定番のストレスがありません。 圧倒的な構文解析の正確さ ： エラーがあっても壊れたコードを器用にパースし、親切なエラーメッセージを出してくれます。 1.3 Deno ── 「セットアップ不要、最高にクリーンな開発体験」 最大の魅力：最初からすべてが揃っている「環境」そのもの メリット ： ツール選定やインストールの手間がゼロ ： deno lint と deno fmt が最初から内蔵されています。 package.json に大量の依存関係を書く必要がありません。 標準で Web 標準に準拠 ： ブラウザと同じ API をそのままサポートしているため、環境ごとの差異に悩まされません。 Node.js との互換性も強力 ： 近年は Node.js のパッケージもそのまま動くため、敷居が非常に低くなっています。 注意: Deno は Linter 単体のツールではなく、ランタイムとツールチェーンそのものです。既存の Node.js プロジェクトに deno lint だけを差し込むのではなく実行環境ごと移行する話になるため、Oxlint / Biome / Ezno とは比較の土俵・移行規模が異なる点に注意してください。 1.4 Ezno ── 「型チェックまで Rust 化する、超未来のコンパイラ」 最大の魅力：JavaScript の限界を超える、圧倒的に賢く高速な型解析 メリット ： TypeScript（tsc）より遥かに高速 ： 現在、フロントエンド開発で一番時間がかかる「型チェック」のプロセスを Rust で爆速にします。 型推論がスマート ： コードの型をより深く、正確に推論してくれるため、開発者が型定義を細かく書く手間を減らせます。 バグを未然に防ぐ先進性 ： 副作用（Side Effects）の検知など、従来の TypeScript よりもさらに一歩進んだ安全なコード検証が可能です。 注意: ただし Ezno は本記事執筆時点（2026年9月）でまだ feature-complete ではなく、tsc との完全互換を目指しているわけでもありません。既存の大規模プロジェクトの型チェックをそのまま置き換えられる段階ではなく、将来性に注目したい実験的プロジェクトという位置付けです。 どれも高速性を売りにしており、React では非常に乗り換えやすく恩恵も受けられます！ 実際に私もローカルでBiomeの設定を試してみましたが、かなり早かったです。 ではそのまま導入して、Rust の恩恵を受けようとしました。 ただ、Vue になると少し話が変わってくるんです・・・ 2. Vue特有の壁： の静的解析問題 Vue は、HTML5 の標準仕様である <template> を、独自の便利な形に拡張して使っています。 要素に v-if や v-for を付けたり、 <template> を .vue ファイルの枠組みとして使ったりしています。 普段の開発をしている中で、 v-if や v-for を使わないケースはほぼないと思います。 当然ですが、それらの値もチェックしてくれると思っていました。 ただ、 <template> 内は、Oxlint, Biome ともにチェックしてくれないんです。 実際に最新版（Oxlint v1.82.0 / Biome v2.5.12、2026年9月時点）で試した結果を、以下のサンプルコードとあわせてご紹介します。 <template > < div > <!-- ❌ 1. 壁：Linterがここを見ないため、存在しない変数（タイポ）をスルーする --> < p > {{ userNema }} </ p > <!-- ❌ 2. 壁：Linterがここを見ないため、「下で使われている」と認識できない --> < p > {{ unusedMessage }} </ p > </ div > < / template> <script setup lang="ts"> import { ref } from 'vue' const userMessage = ref ( 'こんにちは' ) // 🔴 <script> 内は見ているので、「定義したのに使われていない！」と怒られる // （実際には上の template で使いたいのに、Linterが template を読めないせいで孤立する） const unusedMessage = ref ( 'これはエラーになります' ) < / s cript> Oxlint（v1.82.0） デフォルトでも vue-plugin オプションを付けても、このサンプルに対しては何も警告を出しませんでした。 userNema のタイポも unusedMessage の誤検知も発生しない代わりに、テンプレート側の静的解析自体がまだ行われていない、というのが実態でした。 Biome（v2.5.12） デフォルト設定ではスクリプト側の noUnusedVariables ルールが .vue ファイルにも適用され、 userMessage・unusedMessage の両方を「未使用」としてエラーにします( unusedMessage は実際にはテンプレート側で使われているので、これは誤検知です)。 ただし html.experimentalFullSupportEnabled を有効にすると、Biomeはテンプレート内での参照を認識できるようになり、 unusedMessage の誤検知は解消されました(本当に未使用な userMessage は引き続き正しく検出されます)。 一方で、フラグを有効にしてもテンプレート内の userNema のようなタイポを検出するルールはまだ無く、不正な変数参照を見逃す問題は解消されません。 上記の検証からわかる通り、テンプレート内の静的解析はRust製Linter単体ではまだ完結できません。Biomeは実験的フラグ付きで一部の誤検知を解消できるようになってきていますが、テンプレート内のタイポ検出のような踏み込んだチェックまでは、依然として eslint-plugin-vue に頼る必要があります。 つまり、必要なVue固有のルールと各ツールの対応状況次第では、OxlintまたはBiomeとESLintを併用する必要があるということです。 3. チームでの議論：「設定ファイル2つは本当に必要か？」 Rust製Linter を導入するか、一旦は ESLint のままにするか。 どちらを選択するか検討するため、メリット・デメリットを出してみました。 メリット 圧倒的な高速化 ： 従来のJavaScriptなどで書かれたLinter（ESLintなど）に比べ、数倍〜数十倍高速に動作します。大規模なコードベースでも ミリ秒単位 で処理が終わるため、CI/CDの実行時間を大幅に短縮し、開発者の待ち時間をほぼゼロにします。 開発の快適化 ： 保存時の自動整形や pre-commit フックでの実行が劇的に速くなります。 簡単な導入 ： Rust製ツールはコンパイル済みのシングルバイナリとして配布されることが多いため、環境構築やCIでのセットアップが非常にシンプルになります。 デメリット 二重管理 ：（一番の懸念） Rust製フロントエンドLinter（BiomeやOxcなど）は、 .vue ファイルの構文（HTMLテンプレートやVue固有の構文ルール）を完全にサポートしていません。 そのため、Vue固有のルール（ vue/valid-template-root など）をチェックするには、結局従来の ESLint（eslint-plugin-vue） を残さなければならなくなります TypeScript/JavaScript部分： 爆速のRust製Linter（Biomeなど）でチェック Vueファイル・テンプレート部分： 従来のESLintでチェック プラグインエコシステムの未熟さ ： 歴史のあるESLintなどのように、コミュニティが作った無数のサードパーティ製プラグインを自由に追加することが難しい場合があります。独自のルールを追加したい場合のハードルが高めです。 ルールや構文の追従ラグ： 言語（特にJavaScript/TypeScriptやPython）の新機能や新しい構文が登場した際、Rust側でのパーサ（構文解析器）の対応にわずかなタイムラグが生じることがあります。 4. 結果 結果は、デメリット部分の二重管理の懸念部分が大きく、現状のESLint（eslint-plugin-vue）で管理する方を選びました。 手元の計測で速度については、申し分ないことが立証済みでした。 導入するメリットも大いに感じているものの、2つのLinterを併用する点を上回るほどではないと判断しました。 5. 今後の展望 Biome は既に html.experimentalFullSupportEnabled フラグで Vue SFC の実験的サポートを始めており、Oxlint も vue-plugin オプションなどVue向けの機能を増やしてきています。 「サポートされるのを待つ」というよりも、「実験的サポートがどこまで安定するか・テンプレート内のタイポ検出のような踏み込んだチェックまでカバーされるか」を継続的にウォッチしていく、というのが今の立ち位置です。 各プロジェクトの現状を、ご紹介いたします。 Biome v2.4(2026年2月)で Vue・Svelte・Astro 対応を実験的機能からプロダクション標準に近づける取り組みが発表されました。既存のリンティングルールを強化し、HTMLライクな言語でも機能するようにする方針です。 https://biomejs.dev/ja/blog/roadmap-2026/#2026-roadmap Oxlint 公式ドキュメント上の制限の記載に、Vue も含まれており、改善してくれるはずだと思います。そして、改善のための issue があり開発が進められているのがわかります。 https://github.com/oxc-project/oxc/issues/23207 https://oxc.rs/compatibility.html そしてなんといっても、Oxlint の開発を支援しているのが Vue の開発者である Evan You さんが立ち上げた VoidZero という会社なんです。 現在のフロントエンドの「ツールの断片化（Linter、Formatter、テストツール、ビルドツールがバラバラで設定が面倒かつ遅い）」という課題を根本から解決するためVite+（ヴィートプラス）が開発され、その中に Oxlint も含まれています。 Vue の開発者が、Vue を見放すはずがないんです！弊社が Oxlint にするのも近いですね！ まとめ Rust 製のツールは非常に高速で、すぐにでも乗り換えたいと思ってしまいます。 ただ、メリット・デメリットや今後の展望を踏まえて、検討するのが大事だなと今回の移行作業を通じて感じました。 どのツールにするかもしっかり検討したいです。 AI で開発を行うと、簡単に実行できるため、検討するのをサボりがちになってしまいます。 そういう意味でも今回はいい勉強になったと思います。 お読みいただきありがとうございました。 次は、Oxlint に移行した話でお会いしましょう。

本記事は「 Build full-stack AWS applications in minutes with AI-powered scaffolding 」を翻訳したものです。 AI アシスタントを使えば、AWS 上で動くアプリケーションや Web サイトを数分で立ち上げられます。しかし、実際のお客様に提供できる本番相当のものにたどり着くのは、依然として難しい部分です。セキュリティ、可観測性、型安全性、そしてレジリエンスは、本番運用では譲れない要件です。AI アシスタントがこれらすべてを一度で正しく実装できることはまれで、その出力を本番品質まで固めるには、レビュー・修正・テストのサイクルを何度も繰り返す必要があります。 このギャップを埋めるため、私たちは Nx Plugin for AWS のバージョン 1.0 をリリースします。 本記事では、それが何であるか、なぜこのように作ったのか、そして、お客様である Bingo Industries がこれを使ってマルチエージェントのソリューションをアイデアから本番まで 3 週間未満で進めた事例を簡単にご紹介します。 Nx Plugin for AWS とは何か Nx は、単一のリポジトリの中でアプリケーションを構成する多数のプロジェクトを管理する、拡張可能なオープンソースのビルドシステムです。Nx は プラグイン によって拡張でき、Nx Plugin for AWS はそのひとつで、AWS 上にアプリケーションをスキャフォールディングするためのオープンソースのツールキットです。これは Nx ジェネレーター のライブラリで、各ジェネレーターはリクエストに応じてアプリケーションの一部（API、Web サイト、AI エージェント）を、それらを動かすためのクラウドインフラストラクチャとともに構築します。 各ジェネレーターは、動作しデプロイ可能なアプリケーションの一部を書き出します。それぞれの部品には、セキュリティ・可観測性・型安全性のベストプラクティスがあらかじめ組み込まれています。また各ジェネレーターは決定的（deterministic）です。つまり、毎回同じ結果を生成します。これにより、AI アシスタントが自ら考え出さなければならないものではなく、信頼できる土台としてジェネレーターの上に構築を進められます。AI アシスタントはこれらのジェネレーターを自分で実行できるため、価値のある部分、すなわちアプリケーションをあなたのものにするロジックに労力を割けるようになります。 上の図は Nx Plugin for AWS を視覚的に示したものです。ワークスペースを作成し、エージェントまたは CLI を使ってアプリケーションの各部品をスキャフォールディングします。 クイックスタート: フルスタックのエージェンティックアプリケーションを数分で まずはワークスペース、つまり空の Nx モノレポから始めます。ワークスペースを作成するには、ターミナルで次のコマンドを実行します。 pnpm create @aws/nx-workspace my-project --no-interactive この例では pnpm を使っていますが、お好みで npm 、 yarn 、 bun も使えます。デフォルトではインフラストラクチャは AWS Cloud Development Kit (CDK) で定義されますが、 Terraform をお好みの場合は上記のコマンドに --iac terraform を付けて実行できます。エージェントを構築するので、Amazon Bedrock を呼び出せる AWS 認証情報 が必要です。 ワークスペースを Kiro CLI などの AI コーディングエージェントで開き、アプリケーションの構築を依頼します。たとえば次のようにします。 Nx Plugin for AWS を使って、shadcn と Cognito 認証を備えた React の Web サイトを、AG-UI プロトコル経由で TypeScript の Strands エージェントに接続し、それをデプロイするためのインフラストラクチャからなるフルスタックアプリケーションを構築してください。 AI エージェントは、上記のコマンドで作成したすべてのワークスペースにあらかじめ設定されている Nx Plugin for AWS MCP サーバー を使用します。このプロンプトによって、 Strands エージェント、Amazon Cognito ログインを備えた React フロントエンド、 AG-UI プロトコル 経由でユーザーとエージェントがやり取りする CopilotKit のチャットインターフェイス、そしてプロジェクトをデプロイするために必要な AWS リソースを定義したインフラストラクチャプロジェクトが手に入ります。 Web サイトとエージェントを自分のマシン上でローカルに起動するには、次を実行します。 pnpm dev Web サイトとエージェントは、コードを編集するとどちらもホットリロードされます。ローカルでの変更に満足したら、エージェントに AWS へのデプロイを依頼できます。 ここでは Nx Plugin for AWS をエージェントで駆動しましたが、お好みで CLI を使ってアプリケーションを手作業で組み立てることもできます。ステップバイステップの例は後述しますが、 クイックスタートガイド もご覧ください。Nx と Nx Plugin for AWS の恩恵を受けるためにゼロから始める必要はなく、ドキュメントでは 既存プロジェクトへのプラグイン追加 についても解説しています。 なぜこれを作ったのか 私たちは AWS の PACE（Prototyping and AI Customer Engineering）チームの一員で、スピードと本番運用への備えという緊張関係に日々向き合っています。私たちは、まだ明確な答えのない問題や、これまで作られたことのない技術的にリスクのあるアイデアについて、お客様と一緒に取り組みます。各エンゲージメントの期間は 4〜6 週間で、目標はただひとつ、特定のアイデアが実現可能かどうかを証明することです。 プロトタイプの価値は、問題の最も難しい部分、つまり従うべき確立されたパターンが存在しない部分から生まれます。これほど短いタイムラインでは、私たちのエンジニアは本番運用に向けたハードニングではなく、お客様の中核的な課題に時間を使う必要があります。とはいえ、プロトタイプは使い捨てるのではなく本番まで持っていけるほうが、お客様にとってより役に立ちます。 AWS 上での構築は通常、Infrastructure as Code、バックエンドサービス、フロントエンド、そして多くの場合、同一プロジェクト内に複数の言語が混在することを意味します。私たちには、選んだ言語に依存せず、多数の可動部からなるプロジェクトを管理できるビルドシステムが必要でした。私たちのチームは Nx にたどり着き、まさにこの目的のために数年間使ってきました。Nx はプロジェクトごとに一貫したモノレポのワークフローを、技術選定にかかわらず提供してくれます。ただ、Nx にモノレポを任せてもなお、私たちは各エンゲージメントの冒頭でプロジェクトの土台を手作業で組み立てていました。私たちは、自分たちのベストプラクティスをあらかじめ組み込んだ形で土台をスキャフォールディングし、本番に近いところからスタートして、限られた期間をお客様の課題に効率よく使いたいと考えました。 ジェネレーターがテンプレートやライブラリに勝った理由 現在の形にたどり着くまでに、私たちはいくつかのアプローチを試しました。 最初は、各エンゲージメントの冒頭でフォークするスターターテンプレートから始めました。フォークは変更した瞬間にドリフト（乖離）します。テンプレート側で加えた修正はフォークには決して届かず、必要かどうかにかかわらずテンプレート全体を引き継ぐことになります。 次に、ライブラリベースのアプローチを試し、プロジェクト構造・アプリケーションコード・インフラストラクチャコードを、再利用可能で型付きのビルディングブロックとして定義しました。これはテンプレートの問題の多くを解決しました。必要な部品だけを使えて、ライブラリへの改善はそれを使うすべてのプロジェクトに取り込めます。しかし、いくつか制約もありました。エンジニアがライブラリの公開していない設定を必要とした瞬間に、手が止まってしまうのです。ライブラリがサポートする範囲を超えたカスタマイズには、分かりにくい回避策、ライブラリ周りのコピー＆ペースト、あるいはライブラリのオーナーが拡張してくれるのを待つことが必要でした。PACE エンゲージメントの 4〜6 週間というタイムラインでは、どの選択肢も現実的ではありませんでした。 最終的にしっくり来たのが Nx ジェネレーター でした。フォークするテンプレートや依存するライブラリではなく、ジェネレーターはコードを直接あなたのワークスペースに書き込みます。生成された瞬間からそのコードはあなたのものであり、扱うのにプラグイン固有の知識は一切必要ありません。ジェネレーターが想定していなかった何かを変更したくなったら、いつも通りにコードを編集できます。そして、テンプレートでは生成コードが取り残されていたのに対し、 Nx マイグレーション によって、私たちが提供する改善が、以前にスキャフォールディングしたワークスペースにも届きます。ジェネレーターはいつでも実行できるので、既存の Web サイトに認証を追加したり、数か月前に作った API にフロントエンドを接続したりできます。各ジェネレーターは意図的に自己完結していて明確に説明されているため、個々のファイルではなく、より高いレベルのビルディングブロックで考えられるようになります。手作業でも AI アシスタントを使う場合でも、単一のコマンドで組み立てられる、コンポーネント丸ごとの単位で考えられるのです。 Nx Plugin for AWS の仕組み まずワークスペースを作成し、次にジェネレーターを使ってアプリケーションを組み立て、必要なものを必要なときにだけ追加していきます。ジェネレーターは単なるファイルテンプレート以上のものです。新しいファイルを書き出すだけでなく、既存のファイルを変更し、依存関係を配線し、設定を更新します。 API・Web サイト・データベース・AI エージェント向けのコアジェネレーター ジェネレーターは、ほとんどの AWS アプリケーションが構成される主要なコンポーネントを、TypeScript と Python の両方でカバーします。たとえば次のとおりです。 tRPC 、 FastAPI 、 Smithy を使った API と、それらをデプロイするためのインフラストラクチャ オプションで Amazon Cognito 認証を備えた React の Web サイト Amazon DynamoDB と Amazon Aurora 上のデータベース エージェンティック AI: Strands Agents SDK を使ったエージェントと Model Context Protocol （MCP）サーバーの構築。いずれも Amazon Bedrock AgentCore 上にデプロイされます。 デフォルトでは、各ジェネレーターは本来なら自分で追加しなければならないベストプラクティスを備えて出荷されます。 API ハンドラーには、構造化ロギング・AWS X-Ray トレーシング・Amazon CloudWatch メトリクスのために AWS Lambda Powertools が配線済みで組み込まれます。 生成される DynamoDB テーブルは、自動キーローテーション付きのカスタマーマネージド KMS 暗号化、ポイントインタイムリカバリ、削除保護を使用します。 生成される Aurora データベースは IAM 認証を備えた Amazon RDS Proxy の背後に配置され、データベースのスキーマとマイグレーションは、TypeScript 向けには Prisma 、Python 向けには SQLModel と Alembic であらかじめ設定されます。 エージェントと MCP サーバーは AgentCore Observability が設定された状態で提供され、AgentCore Gateway には エージェントのセキュリティ制御のためのポリシー を書き始めるのに必要なものがすべて揃っています。 スタック全体にわたる型安全な接続 これらのコンポーネントを結びつけるのが connection ジェネレーターです。React の Web サイトと tRPC の API があるとします。connection ジェネレーターを実行すると、両者が型安全なクライアントで配線され、API の形状に対する変更が、本番での呼び出し失敗としてではなく、デプロイ前にフロントエンドの型エラーとして現れるようになります。React フロントエンドをエージェントに接続する場合も同様です。 AG-UI プロトコル （リッチでインタラクティブなエージェントの応答をフロントエンドへストリーミングするためのオープンスタンダード）で生成されたエージェントに対しては、応答のストリーミング、ツール呼び出しのレンダリング、状態管理を備えた CopilotKit のチャットインターフェイスを生成します。すべてのジェネレーターがローカル開発をサポートしており、 Nx continuous tasks を使えば、単一のコマンドで相互接続された各部品（Web サイト、その API、エージェント）が、あなたのマシン上でホットリロードしながら一斉に立ち上がるため、何もデプロイせずに変更をテストできます。 実際には、コンポーネントの選択とそれらの接続は AI に任せて駆動しますが、このアプローチにより、お好みならアプリケーション全体を視覚的にスキャフォールディングすることもできます。 このスクリーンショットは Nx Plugin for AWS の Graph Builder のものです。作りたいアプリケーションを図として描き、それをスキャフォールディングするためのコマンドをコピーできます。 あなたのコード、あなたのインフラストラクチャ選択 生成されるコードは主流のフレームワーク上に構築され、あなたのものになります。プラグインへのランタイム依存はなく、生成された内容を編集するのを妨げるものは何もありません。ジェネレーターは出発点であってコミットメントではありません。作りたいものに最も近いものを選び、そこから自分の方向へ進めてください。インフラストラクチャの定義方法も選べます。ジェネレーターは AWS Cloud Development Kit (AWS CDK) のコンストラクトか Terraform のモジュールのいずれかを生成するからです。 Nx マイグレーションで最新に保つ コードを所有することは通常、ライブラリが与えてくれていた唯一のもの、すなわち後から改善をきれいに取り込む手段を犠牲にすることを意味します。v1.0 では、Nx Plugin for AWS は Nx マイグレーション によってそのギャップを狭めます。私たちが新しいバージョンを出荷したら、 公開されたマイグレーションを適用 してワークスペースを更新できます。マイグレーションは、アプリケーションコードだけでなく、ジェネレーターが書いたすべてに届きます。たとえば、非推奨になった Vite の設定オプションを現行の API に置き換えたり、静的 Web サイトのアクセスログを Amazon Simple Storage Service (Amazon S3) バケットから CloudWatch へ移して、監視やアラームを設定できるようにしたりします。エージェントにプラグインのアップグレードを依頼することもできますし、CLI を使ってマイグレーションを駆動することもできます。 # Install the latest version and prepare migrations pnpm nx migrate @aws/nx-plugin@latest # Apply the migrations to your codebase pnpm nx migrate --run-migrations 変更に判断が必要で自動的に適用できない場合は、オプションのエージェンティックマイグレーションが、あなたを放置せずにコーディングエージェントを通じてその変更をガイドします。最新に保つことが、リリースノートやプルリクエストを手作業でレビューする作業ではなく、日常的なコマンドになります。 ステップバイステップの例: CLI を使ったスキャフォールディング ワークスペースを作成した後、最も手早く始めるには AI にジェネレーターを駆動させるのが良いですが、お好みで各ジェネレーターを CLI から手作業で呼び出すこともできます。このセクションでは、CLI コマンドといくつかの小さなコード編集で、複数言語のアプリケーションを構築する方法を順を追って説明します。 AWS 認証情報 に加えて、Python エージェント用に UV をインストールしておく必要があります。 # Create a new workspace with pnpm (yarn, bun and npm are also supported) pnpm create @aws/nx-workspace my-project --no-interactive cd my-project # Create a Python project and add an agent pnpm nx g @aws/nx-plugin:py#project backend --no-interactive pnpm nx g @aws/nx-plugin:py#agent --project backend --auth=cognito --protocol=ag-ui --no-interactive # Add a website with Cognito login pnpm nx g @aws/nx-plugin:ts#website website --no-interactive pnpm nx g @aws/nx-plugin:ts#website#auth --project website --no-interactive # Connect the website to the agent pnpm nx g @aws/nx-plugin:connection --source-project=website --target-project=backend --no-interactive # Create a CDK project to deploy to AWS pnpm nx g @aws/nx-plugin:ts#infra infra --no-interactive Terraform を使いたい場合は、ワークスペースの作成時に --iac=terraform を渡し、 ts#infra の代わりに terraform#project を使います。同じパターンがすべてのジェネレーターに当てはまります。エージェントを tRPC や FastAPI のバックエンドに差し替えれば、connection ジェネレーターは代わりにそのバックエンドへ Web サイトを配線します。 connection ジェネレーターはすでに CopilotKit がエージェントと安全に通信するよう配線済みなので、あとは React コンポーネントをインスタンス化するだけです。たとえばホームページで次のようにします。 // packages/website/src/routes/index.tsx import { createFileRoute } from '@tanstack/react-router'; import { BackendAgentChat } from '../components/backend-agent-chat'; export const Route = createFileRoute('/')({ component: RouteComponent, }); function RouteComponent() { return <BackendAgentChat />; } pnpm dev を実行すると、ローカルの Web サイトとエージェントを起動できます。 AWS 認証情報 が設定されていれば、エージェントは Amazon Bedrock 上の Strands のデフォルトモデルを使用します。ローカル開発サーバーを開いて、エージェントとのチャットを始められます。 準備ができたら、生成された CDK コンストラクトを自分のスタックに組み込みます。 // packages/infra/src/stacks/application-stack.ts import { Stack, StackProps } from 'aws-cdk-lib'; import { Construct } from 'constructs'; import { BackendAgent, UserIdentity, Website } from '@my-project/common-constructs'; export class ApplicationStack extends Stack { constructor(scope: Construct, id: string, props?: StackProps) { super(scope, id, props); // Create the Cognito resources const identity = new UserIdentity(this, 'Identity'); // Create the agent new BackendAgent(this, 'Agent', { identity, }); // Create the website new Website(this, 'Website'); } } 開発用スタックを AWS にデプロイするには、 pnpm nx deploy-sandbox infra を実行し、デプロイされたユーザープールに Amazon Cognito ユーザーを作成 し、CloudFront ディストリビューションの URL を開いてサインインし、デプロイしたアプリケーションを使用します。 終わったら AWS リソースをクリーンアップするために pnpm nx destroy-sandbox infra を実行し、Amazon Cognito と Amazon S3 のリソースを AWS マネジメントコンソールから削除します（これらはデータ損失を防ぐためにデフォルトでは保持されます）。 フロー全体の詳しいウォークスルー（テキストベースのエージェンティックなゲームの例の構築を含む）は、 Dungeon Adventure チュートリアル をご覧ください。 お客様事例: Bingo Industries のマルチエージェントソリューション オーストラリアのリサイクル・廃棄物管理企業である Bingo Industries は、Nx Plugin for AWS を使ってマルチエージェントアプリケーションを構築し、本番環境に投入しました。彼らが構築したアーキテクチャは次のとおりです。 以下は、彼ら自身の言葉による、何を構築したかの説明です。 Bingo のオペレーション・物流部門は、ビジネスがスムーズに機能することを支える中心的な役割を担っています。この部門には、24 時間常時高い可用性を維持しつつ、効率的にスケールできる必要のある幅広いアプリケーションが含まれます。これらのアプリケーションは、アロケーター、カスタマーサービス担当者、コンタクトセンタースタッフ、オペレーター、アナリストなど、多様なユーザーグループによって利用されており、全員が日々の業務でこれらのツールに頼っています。関わる業務が複雑なため、ユーザーは複数の画面を行き来し、さまざまなフィルター・クエリ・検索を使いこなすことが多く、そのプロセスは時間がかかり煩雑になりがちです。こうした課題を軽減し効率を高めるため、私たちは複数のデータソースやログの情報を活用してユーザーからの問い合わせに応答する、マルチエージェント AI ソリューションを実装することにしました。 マルチエージェント AI ソリューションをゼロから開発するアプローチは数多くありましたが、私たちは時間とリソースの制約に直面していました。この制約を乗り越えるため、私たちは Nx Plugin for AWS を選びました。これはまだ使ったことのない方々に強くおすすめできるツールです。このツールは AWS ベースのアプリケーションのための、加速されたスキャフォールディングの発射台として機能し、AI エージェントを素早く立ち上げるために必要なアプリケーションコードとクラウドインフラストラクチャを、それらを取り囲む API やフロントエンドとともに生成します。 この土台の上に、私たちはユーザーからの問い合わせに回答し、説明を提供できるマルチエージェントのチャットボットを開発しました。ひとつの巨大なエージェントがすべてをこなそうとするのではなく、このソリューションは各質問を適切なスペシャリストエージェントにルーティングします。これにより各エージェントの焦点が絞られ、その回答の信頼性が保たれます。一方で、基盤となる AWS の生成 AI サービスが、全体を結びつける言語理解を提供します。 このアプローチの大きな利点は、AG-UI（リッチでインタラクティブなエージェントの応答をフロントエンドへ直接ストリーミングする）や A2A（エージェント同士が直接呼び出し合えるようにする）といったプロトコルを含む、成熟しつつある新しいスタンダードを、それらが成熟するにつれて素早く採用できたことです。私たちのチームは、セットアップ・認証・配線をゼロから考え出す必要がなく、その土台があらかじめ整った形で手に入り、代わりにビジネスロジックに集中できました。また、すべてを一から考える必要がなく、AWS 推奨のプラクティスと AWS Well-Architected Framework に沿った強力な出発点も得られました。最初の本番ローンチに到達するまで、3 週間弱でした。 たとえば、トランザクションが失敗したとき、チャットボットはよくある障害シナリオの中から考えられる原因の診断を手助けでき、オペレーターは複数のシステムをまたいで手作業で状況を組み立てるよりも速く解決へたどり着けます。さらにユーザーは、プロンプトベースのレポートをリアルタイムに生成でき、分析や情報に基づいた意思決定を促進します。このプロジェクトを通じて協力的に支援してくれた AWS チームに感謝します。 — Alex To（Principal Engineer）、Balaji Ravichandran（Head of Engineering）、Bingo Industries Alex は Nx Plugin for AWS に多大な貢献を還元してくれており、私たちは彼の尽力に大いに感謝しています。生成されたコードは彼らが自由に変更できるものであったため、Bingo Industries はそれらの変更を手元に留めておくこともできましたが、代わりにそれらをアップストリームに貢献してくれ、彼らの改善は v1.0 を形作ったものの一部になっています。 自分たちのジェネレーターで拡張する アップストリームへの貢献はひとつの道にすぎず、多くのチームが必要とする道でもありません。私たちはジェネレーターを SDK として公開しているので、自分たちのニーズに合わせて拡張・適応できます。あなたの組織独自のベストプラクティスのパターンや好みのフレームワークを、私たちが自分たちのものをエンコードしたのとまったく同じようにエンコードできます。これにより、あなたのエンジニアと彼らの AI アシスタントが、チームをまたいで、同じ決定的でレビュー済みの土台から構築できるようになります。 Nx Plugin ジェネレーター を使って自分のプラグインをスキャフォールディングし、自分のジェネレーターを作り、それを MCP サーバー経由で公開してください。 コミュニティに参加する Nx Plugin for AWS は Apache 2.0 ライセンスのもと GitHub で公開されており、私たちは貢献を歓迎します。質問・バグ・アイデアがあれば issue や discussion を開いてください。 最初のプルリクエストに取りかかるには、 ジェネレーター貢献のチュートリアル に従ってください。 すべてのジェネレーターのガイドを含むドキュメントは awslabs.github.io/nx-plugin-for-aws にあります。 また、 CDK.dev Slack の #nx-plugin-for-aws チャンネルで、これを使って構築している他の人たちと一緒に私たちを見つけられます。 私たちがこれを作ったのは、自分たちに必要だったからであり、オープンに作ったのは、これが解決する問題が私たちのチームだけのものではないからです。あなたが AWS 上で構築していて、同じ土台を何度も書いている自分に気づくなら、ジェネレーターをより良くするお手伝いをぜひお願いしたいです。 オープンソースの上に築かれている Nx Plugin for AWS は、多くのオープンソースコミュニティの成果の上に成り立っています。 Nx : Nx Plugin for AWS が構築されている、拡張可能なモノレポのビルドシステム tRPC : TypeScript でのエンドツーエンドの型安全な API FastAPI と Pydantic : API とエージェントのジェネレーターの背後にある Python の Web フレームワークとデータバリデーションライブラリ Smithy : API をモデリングするためのプロトコル非依存のインターフェイス定義言語 React : Web サイトジェネレーターの背後にある UI ライブラリ Vite と Rolldown : TypeScript の Web サイトとバックエンドのビルド・バンドル用 Shadcn と CloudScape : Web サイトジェネレーターが設定できる UX フレームワーク TanStack : Web サイトのルーティングと API 向けの型安全なフック CopilotKit と AG-UI プロトコル : エージェントフロントエンド向けのチャットインターフェイスとストリーミングプロトコル A2A と a2a-sdk : 生成されたエージェントが互いを発見し委譲できるようにする、エージェント間プロトコルと SDK Strands Agents SDK と LangChain : エージェントジェネレーターが使用するエージェントフレームワーク Model Context Protocol : AI アシスタントがジェネレーターを駆動できるようにするスタンダード AWS CDK と Terraform : ジェネレーターが対象とする 2 つの Infrastructure as Code の選択肢 AWS Lambda Powertools : 生成される API ハンドラーの可観測性のデフォルト Prisma 、 ElectroDB 、 SQLModel 、 Alembic 、 PynamoDB : データベースジェネレーターの ORM とエンティティモデリングのレイヤー GritQL : ジェネレーターとマイグレーションによる堅牢なコード編集を支える Biome : ワークスペース全体での TypeScript のリンティングとフォーマット用 uv 、 ty 、 Ruff : Python のパッケージ管理・型チェック・リンティング・フォーマット用 これらをメンテナンスしてくださっているすべての方々に感謝します。