チュートリアル請求書アプリをもっと使いやすく！AG Grid×AIでUIを改良してみた話
はじめに：アプリ改良の背景と目的
YouTubeで公開されている請求書アプリのチュートリアルをベースに、より実用的なUIへの改良を試みました。従来のWebアプリケーションでは、データ編集のたびに一覧画面から個別の詳細画面へ遷移する必要があり、業務利用の観点では操作の煩雑さや効率の悪さが課題となりがちです。
今回の改良では、一覧表上で直接データを編集できる高機能グリッドコンポーネント「AG Grid」を導入し、Excelのような直感的な操作性を実現しました。また、開発効率向上のためにAIコーディングツールも積極的に活用しています。
AIの力を借りることで、一般的な実装やデバッグは驚くほどスムーズに進みましたが、AG Gridのように公開情報が少ない領域では、思い通りに動作させるまでに想定以上の試行錯誤が必要でした。特に「最後の2割」の仕上げに全体工数の8割を費やすなど、AI開発の現状の限界も実感しています（APIコストなどの詳細な工数表は後述します）。
本記事では、AG Gridの導入によるUX改善のポイントや、AIを活用した開発の工夫とその効果、そして実際に直面した課題とその解決プロセスについて、具体的な事例を交えて解説します。
技術スタックの概要
- 元アプリの技術構成（React, TypeScript, Tailwind, Xata, Drizzle, Clerk）
- AG Gridについて
AG Gridは、Reactなど主要なフレームワークで動作し、大量データも高速・柔軟に扱える高機能なデータグリッドライブラリです。一覧表上で直接編集やソート、フィルタなど多彩な操作が可能です - 使用したAIツール（RooCline, Claude Sonnet 3.7）
AI開発した動機
mizuchiさんの記事に影響をうけました。
「動きが速すぎるから落ち着いたらやる」は、成長コンテキストを見失って逆に学習コストが上がる
いまやらなきゃダメですね！
実装プロセスの概要
習うより慣れろということで、AI開発については、ほとんど予備知識もない状態から始めました。
特別なルール設定も行なっていません。
AI開発プロセスについて、読者の方にもリアルに実感していただきたいと思い、
以下、今回RooClineでClaude Sonnet 3.7を使用したAPIコストを一覧表にしました。
凡そですが、簡単な実装（基本的なCRUD、新規作成をフォームで行う前提）と、難しい実装（新しい行を、インラインで行う）の比較では時間、コストともに4から5倍かかっています。
（特に以下の表の3月30日に、APIコストが$10かかっていますが、この日が一番迷走していました）
初期実装・基本機能フェーズ（3月2日：3H）：$5.65 18.4%(コスト比率)
機能改善・バグ修正フェーズ（3月30日以降:2H x 5日=10H）：$25.13 81.6%(コスト比率)
総コスト：$5.65 + $25.13 = $30.78
新規作成をインライン行で行うよう、実装を指示しても、なんども、元の実装（新規作成をフォームで行う）にもどったり、なかなか大変でした。このあたり改善した点については後述します。
この表はAIに依頼した、各タスクを自動的に表に変換してもらったものです。タスクの中で、多数のプロンプトをなげていまして、内容に表記されているのと、タスクの詳細内容は完全には一致していません、参考情報としてみていただければと思います。
| 日付時間 | サイズ | 内容 | トークン | キャッシュ | APIコスト |
|---|---|---|---|---|---|
| 3月2日 午後1:58 | 824 kB | invoceアプリの説明。dashboardにAGGridライブラリを導入して編集などの操作を実装する計画 | ↑ 64.6k ↓ 25.2k | 0 → 335.4k → 2.1m | $2.2569 |
| 3月2日 午後2:34 | 4.44 MB | dashboardにloginした際のエラー：hook.js:608 AG Grid: error #200 Missing module ...
|
↑ 52 ↓ 36.8k | 0 → 152.2k → 3.8m | $2.2493 |
| 3月2日 午後3:03 | 2.49 MB | サインアウト時のエラー：useClerk can only be used within the component. Possible fixes: 1. ...
|
↑ 18 ↓ 22.5k | 0 → 99.1k → 1.5m | $1.1479 |
| 3月30日 午後2:39 | 2.32 MB | 新規作成ボタンの機能説明：空白行ではなく既存データをコピーして作成される仕様。ブランクの行を作成すべきという提案 | ↑ 852 ↓ 121.8k | 0 → 590.4k → 21.9m | $10.6248 |
| 4月5日 午後12:28 | 447 kB | 先日の修正でログインエラーが発生し、修正したという記録。500（HTTPステータスコード） | ↑ 68 ↓ 13.0k | 0 → 89.5k → 361.5k | $0.6389 |
| 4月5日 午後12:40 | 427 kB | dashboardの金額欄を右寄せにしたいという要望 | ↑ 44 ↓ 5.9k | 0 → 33.6k → 324.6k | $0.3129 |
| 4月5日 午後1:59 | 1.4 MB | AGGrid(React)での開発に関する記録。Grid表形式でCRUDを実現したいという要望。「一覧画面は表示用、編集用に個別画面に遷移するのは面倒」という意見 | ↑ 3.6m ↓ 57.0k | 0 → 259.2k → 6.5m | $3.6557 |
| 4月6日 午前5:58 | 548 kB | InvoiceGrid.tsxのリファクタリングをしたい | ↑ 72 ↓ 35.3k | 0 → 54.5k → 606.6k | $0.9157 |
| 4月6日 午前6:00 | 256 kB | 新規作成後の確認ダイアログ表示は不要 | ↑ 16 ↓ 5.4k | 0 → 13.9k → 57.1k | $0.1209 |
| 4月6日 午前6:09 | 423 kB | 金額計算時にIMEを半角に固定させることはできますか？ | ↑ 64 ↓ 15.0k | 0 → 39.8k → 423.0k | $0.5016 |
| 4月6日 午前6:47 | 2.28 MB | 新規作成時の機能改善要望：現在はダイアログ表示だが、AGGridのピン機能を使用して、新規作成ボタンクリック時に一番上の行に空白行を挿入してデータ入力できるようにしたい | ↑ 170 ↓ 610.3k | 0 → 191.9k → 1.7m | $2.1660 |
| 4月6日 午前8:34 | 1.43 MB | InvoiceGrid.tsxのファイルが大きくなりすぎたため、リファクタリングしたい。まずはダイアログ表示のコードを分離した | ↑ 5.6m ↓ 94.9k | - | - |
| 4月19日 午後3:05 | 2.89 MB | 新規作成時の機能改善要望：現在はダイアログ表示だが、AGGridのピン機能を使用して、新規作成ボタンクリック時に一番上の行に空白行を表示してデータ入力できるようにしたい | ↑ 96 ↓ 67.0k | 0 → 364.6k → 1.4m | $2.7820 |
| 4月19日 午後3:14 | 276 kB | 新規作成時に新しい行が追加される機能の問題点：データを追加編集し保存アイコンをクリックしても1回では反応せず、2回目のクリックでようやくデータが保存される | ↑ 20 ↓ 4.4k | 0 → 24.1k → 71.7k | $0.1777 |
| 4月19日 午後3:23 | 745 kB | コンソールワーニングについての質問：「修正必要ですか？あるいは不要ですか？」 | ↑ 24 ↓ 12.7k | 0 → 30.2k → 117.5k | $0.3393 |
| 4月20日 午前11:17 | 434 kB | 新規作成行での問題：顧客名を変更しても、emailが変わらない。既存の行で顧客名を変更すると、emailは正しく変更される | ↑ 44 ↓ 23.9k | 0 → 56.0k → 354.8k | $0.6753 |
| 4月20日 午前11:41 | 425 kB | 新規登録時の問題：保存アイコンを2回クリックしないと保存されない。現状では1回目のクリックでバリデーションが動き、2回目のクリックで保存される。修正の報告を立てるよう依頼 | ↑ 44 ↓ 20.3k | 0 → 76.4k → 275.3k | $0.6742 |
| 4月20日 午前11:52 | 419 kB | 新規作成行での問題の詳細説明：顧客名を変更したとき、本来であれば顧客名に応じてemailが表示されるはずだが、変わらない。既存の行では顧客名変更時に正しくemailも変わる | ↑ 32 ↓ 19.9k | 0 → 39.9k → 191.5k | $0.5049 |
| 4月20日 午後12:22 | 690 kB | 新規登録時の問題（再掲）：保存アイコンを2回クリックしないと保存されない。現状では1回目のクリックでバリデーションが動き、2回目のクリックで保存される。修正の報告を立てるよう依頼 | ↑ 56 ↓ 35.0k | 0 → 106.0k → 393.9k | $1.0403 |
基本CRUD機能のGrid化
こちらは、3月2日に実施した、既存のUIをAGGridに移行する際に実施した内容。
いろいろやっていますが、ここまでは簡単だったので、約3時間で完了した。
以下やったことの詳細。
1. パッケージバージョンの互換性問題の解決
- 問題: Next.js 15.1.5はReact 19が必要だが、React 18.2.0が使用されていた。AG Grid 29.3.5はReact 19と互換性がなかった。
- 解決策: package.jsonを修正し、AG Gridを28.2.1に、Reactを19.0.0にバージョンアップした。
2. AG Gridを使用したCRUD機能の実装
-
実装内容: 請求書データのグリッド表示と編集機能を実装
- 編集機能: セル内で直接金額、説明、ステータスを編集可能に
- 削除機能: 各行に削除ボタンを追加し、確認ダイアログ後に削除処理
- 新規追加機能: 「新規作成」ボタンで新しい請求書をその場で追加可能に（フォーム画面から入力）
-
修正モジュール:
-
InvoiceGrid.tsx: AG Gridを使用したグリッドコンポーネントの実装 -
actions.ts: サーバーアクションとしてCRUD操作（updateInvoiceAction, deleteInvoiceActionGrid, createInvoiceAction）を実装
-
-
対応仕様:
- インライン編集: ユーザーはグリッド上で直接データを編集可能
- リアルタイム更新: 編集後すぐにデータベースに反映
- ステータス表示: 異なるステータス（open, paid, void, uncollectible）を視覚的に区別
- ページネーション: 大量データの効率的な表示
3. Clerkの認証問題の解決
- 問題: サインアウト後に「useClerk can only be used within the ClerkProvider component」エラーが発生。
-
原因:
@clerk/nextjsと@clerk/elementsの2つの異なるClerk APIが混在していた。 -
解決策: サインインページを
@clerk/nextjsのSignInコンポーネントを使用するように統一した。
4. データ表示の問題の解決
- 問題: ユーザーがOrganizationに属している場合、個人の請求書が表示されなかった。
- 解決策: ダッシュボードページのクエリを修正し、Organizationの請求書とユーザー個人の請求書の両方を取得するようにした。
順調に実装が進捗したので、この段階で、AIに対する期待値が上がり過ぎてしまったのが反省点。
雑な指示を出してもよしなに実装してくれるものと思い込んでいました。
しかし、苦労するのはここから。。
インライン新規追加機能の実装チャレンジ（AIの迷走と対策）
新規データをフォーム画面から入力するのは、UX的にイマイチとおもったので、Excelのように行が追加できるようにした。AG Gridでこの対応を行う場合、Pinned Rowの概念を用いて実装するらしい。
ネット上にはこの部分に関する情報は非常に少ない、唯一見つけたのが以下
元記事は公式ドキュメントではなく、ブログ形式の簡単なサンプル実装説明だったこともあり、案の定、情報が少ないと、AIが迷走しだした。
保存・キャンセルボタンに関するバグ、ドロップダウンと連動データのバグなどが発生した。また、修正を加えると、今度は、インライン編集ではなく、フォーム入力画面を作り出す有様。何度やっても、堂々めぐりになり一旦諦めそうになる。
ネットで、AI開発のコツなどの情報を探すと、割と細かくタスクを切って指示を出すのが有効とあった。たしかに当たり前かもしれないが、1日目のAIの調子が良すぎたために、かなり雑な指示を出し、AI任せにしていたのを反省。
ここからは、基本的に自分が考えて、手を動かす細かい部分をAIに任せることに。
AI主体から人間主体＆AIアシストに役割を変化させた。
とはいえ、これまでAIが書いたコードを軽いチェックで取り込んでいたので、コードの中身の理解は半分程度の状況で、なかなか大変だった。
まず、コードが長いと、よくないということで、特に大きなファイルについてリファクタリングを実施、約1000行→500行以下に減らした。これはAIのコンテキスト認識のためにもいいらしい。
また、堂々巡りになったら、一旦コンテキストをクリアして、新しいチャットから始めるのもいいらしいので意識しておこなった。
この結果、細かい課題を一つずつクリアして、目標機能の実装にいたりました。
スクショ動画を撮りながら、新規追加時に、既存行の背景ハイライト表示は外すべきと気づきました（別途対応予定）
コードの詳細解説について
さて、ここまでの取り組みをブログ記事にしようと思ったのですが、コードがまだまだ整理がついていなかったので、さらに詳細に、リファクタリング開始。この段階から、AIエディタはCursorに変更。
意味のない関数が残っていたり、やたらと階層の深いディレクトリにファイルが配置されていたりと混乱していたが、Cursorの協力を得て、比較的短時間でコード整理が完了しました。（すばらしい！）
合わせて、苦労したAG Gridのインライン新規追加UIの実装についての解説記事の作成をCursorに依頼したところ、短時間でポイントをまとめた記事を生成してくれました（さすが！）
AG Gridのインライン新規追加機能の実装解説記事はこちら。
まとめ・所感など （2025年5月時点の見解）
コスト概算
API Claude 約30ドル ＋ Cursor pro 20$ (但し、数日しか使っていない)。
AIを活用した開発の可能性と限界（個人的感想）
AIに過剰な期待をしすぎて任せすぎると、あとで苦労する。とくに今回は初日の成果があまりにも期待以上だったので、雑な指示を出し続け、AIが出力するコードをポチポチクリックして承認していたことを反省。ある程度、自分も理解して、進めた方が、初期のスピードは遅くなるが、結局は早い。あと、今回はrulesの設定も何もしていなかったので、これもちゃんとやれば違っていたかもしれない。
AIを活用した開発の可能性と限界（ネット記事など）
＊AI開発の課題: "70%問題" AIの学習曲線のパラドックスというのがあるようですね。
x post
関連記事
開発効率より、楽しさという観点から
開発初期に、AIのAgentがどんどんコードを生成して、最低限の動作確認をして、コードを承認しているプロセス。機能がすごいスピードで開発されて楽しいかといわれれば微妙。自分が理解していないコードでアプリを動かしているという、なにか気持ち悪い感覚があった。
一方、最後の段階で、Cursorを使って、コードの整理・リファクタリングを行い、コードの内容を記事にする段階では、よくわからなかったコードの中身の理解がすすんで楽しいなという感覚があった。これも今後のAI開発では重要な観点かもしれない。
Discussion