やればわかるさバイブコーディング Vol.22 新しいPower Appsを少しだけ検証してみるお話

前回記事

出典：やればわかるさバイブコーディング Vol.19 「ついに来た！！新しい Power Apps」

⚠️ 注意：この記事は「新しい Power Apps（プレビュー）」を使った検証レポートです。 本機能はプレリリースのため、仕様は変更される可能性があります。 また、プレビュー機能は本番環境では使用不可と公式に明記されています。

---

新しい Power Apps で「社用車運転日報アプリ」を試してみた

この記事は、新しい Power Apps の検証ログです。題材として、社用車の利用状況を管理する「社用車運転日報アプリ」を AI に作ってもらい、その挙動を観察してみました。

1. まずは短いプロンプトから

最初は、あえてごくシンプルな英語プロンプトだけを投げてみました。

Create a Company Vehicle Driving Log app.  
Drivers enter date, vehicle, purpose, odometer start/end, distance, fuel, and notes.  
Include list view, detail view, and export function.

これでどこまで作ってくれるのか、さっそく試してみます。

短いプロンプトだけで、ここまでの画面が自動生成されました。

新規登録も問題なくできたので、そのまま保存・公開してみます。

環境からも無事に再生でき、基本的な機能は動作していました。

2. Copilot によるプロンプト自動強化

ここで気づいたのが、このボタンです。

右側のこのアイコンを押すと…

なんと、プロンプトが自動的に「強化」されました。

短い指示が、一気に仕様書レベルのプロンプトへと変身。

日本語にすると、だいたいこんな内容です。

強化後プロンプトの日本語要約

社用車の運転日報を記録・管理するためのアプリを設計してください。
このアプリでは、ユーザーが以下の内容を入力できるようにします：

• 日付
• 車両選択（検索可能なドロップダウン付き）
• 利用目的
• 走行前と走行後のオドメーター値（距離は自動計算）
• 使用した燃料量
• 任意のメモ

さらに、登録されたすべての運転記録を表示する一覧ビューを実装し、次の列で並び替えができるようにします。

• 日付
• 車両
• 距離
• 燃料

加えて、各記録の詳細情報やメモを表示する詳細ビューも用意します。 また、運転ログをCSV または PDF 形式でダウンロードできるエクスポート機能を実装し、日付範囲・車両・ドライバーで絞り込みできるようにします。 必須項目の入力チェックや、オドメーター値が論理的に正しいかの検証も行い、PC・モバイルの両方で使いやすいレスポンシブな UIを提供してください。

…と、かなり盛りだくさんな機能要件になりました。特にエクスポート機能まわりは本格的です。 さて、これを投げるとどうなるか。

強化プロンプトでも、ちゃんとアプリが生成されました。

3. レコード登録時のエラーと自動修正

ところが、レコードを登録しようとしたところでエラー発生。

Fix itボタンを押してみると、AI が自動で修正を開始しました。中身を見る限り、型まわりのエラーを直しているように見えます。

修正後は、無事に登録まで通るようになりました。

おまけにグラフまで自動生成。ここまでは順調です。

4. エクスポート機能：CSV は成功、PDF は…

いよいよ気になるエクスポート機能を試してみます。まずは CSV から。

Export CSV を実行してみると…

こちらは問題なく出力成功！きれいに CSV が生成されました。

続いて、Export PDF を実行してみます。

モーダルは表示されるものの、残念ながら PDF 生成は動作せず…(笑)

5. バイブコーディングで PDF エクスポートを修正しようとする

ここからは軽く「バイブコーディング」タイムです。まずは状況を英語で説明してみます。

The CSV export feature is working correctly, but the PDF export is not functioning.

Please fix the PDF export so that users can download driving log records as a properly formatted PDF file. Make sure the PDF export behaves consistently with the CSV export and respects all applied filters (date range, vehicle, driver). The PDF should include all relevant fields such as date, vehicle, distance, fuel, and notes.

If necessary, regenerate or replace the current PDF export implementation to make it stable and reliable.

これをそのまま貼り付けてみたところ…

文字数オーバーで Copilot が跳ねられました（苦笑）。

どうやらプロンプトの文字数には上限がありそうですが、個人的には「ここは制限なしで書きたい」と思っています。そこで、少し短くして再チャレンジ。

CSV export works, but PDF export is not working.

Please repair the PDF export so users can download filtered driving log records (by date range, vehicle, driver) as a properly formatted PDF including date, vehicle, distance, fuel, and notes.

「直したよ」と返ってきたものの、実際には PDF は動作せず…。

今回は「次回に期待」として PDF 側は一旦お休みします。

6. タイムアウトと依存関係の壁

保存・公開してみると、さらに追い打ちが…。今度はアプリがタイムアウトして起動しませんでした。

「このビルドは通ってるのに再生するとタイムアウト」という典型的な事象。

Code Apps では「ビルドも push も通るのに、再生するとタイムアウト」というのが意外に多く、ほとんどの場合は依存関係の抜けが原因です。

そこで ChatGPT にこのように聞いてみました：

The app still does not start. It fails to boot even after your previous changes.

Please identify the real cause of the boot failure and fix it. Show me:
1) The exact error message and stack trace
2) The file paths and lines causing the error
3) The corrected code for those files.

Do not just say “All done” or describe steps. I need the actual code changes.

その結果、以下のような返答が返ってきました：

• 問題のファイル：src/pages/export/index.tsx
• 問題の行：

  import jsPDF from "jspdf";
  import autoTable from "jspdf-autotable";

• エラー内容：

  Failed to resolve import "jspdf" … Does the file exist?

つまり、jspdf と jspdf-autotable がインストールされておらず、Vite が import 解決できずにアプリ起動に失敗しているということです。

VS Code であれば npm install ですぐ直りますが、ブラウザ完結型の新しい Power Apps 環境では、こちらからライブラリを明示的に追加できないという制約があります。

そこでさらに、以下のような指示を出しました：

PDF export is still broken because the app is importing "jspdf" and "jspdf-autotable" but these dependencies are not installed. This also causes the boot failure ("App timed out").

Please:
1. Add the required dependencies to package.json:
   - jspdf
   - jspdf-autotable
2. Install them properly.
3. Update the PDF export implementation to ensure it works at runtime.
4. Rebuild and verify the app boots successfully.

しかし、今回もタイムアウトは改善されず、今回はここでリタイアです。

7. VS Code バイブコーディングとの違いと所感

最後に、今回の経験から「VS Code ローカル環境 × バイブコーディング」 と「ブラウザ完結型 Power Apps」 の違いを簡単に整理します。

VS Code バイブコーディングの強み

1. ローカル環境で動作確認をしながら進められる。
2. ライブラリの追加や依存関係の調整を自分の手で行える。
3. プロンプト入力文字数制限に縛られず、要件を一気に書き込める。

特に３番目は重要だと感じました。 私としては、「アプリに必要な機能要件をすべて一気に AI に投げて、生成させる」のが最短だと考えており、入力に制限があると少しもどかしさを感じます。

とはいえ、ブラウザだけでここまでアプリが生成されるというのは、純粋にすごい進化だと思います。今後の改善にも大いに期待しています。

今回は「CSV は動いたけど PDF と依存関係で詰んだ」というところまで。次回、さらに進んだ進化をキャッチアップしたいと思います！