AIと一緒にアプリを作る
VSCodeでHTMLファイルを作成しローカルブラウザで実行する自分専用アプリの作り方です。
本来別々にするCSSやJavaScriptをすべてHTML内に集約させることで、ファイル1つを持ち運べばネット環境やサーバーを問わずいつでもどこでも自作アプリを動かすことが可能です。
ただ、実行とそれに伴う結果については自己責任でお願いします。
うまくいかない場合の対応
自作アプリを作成するファイルの場所
Cドライブ直下など、システムフォルダ内にファイルを置いている場合はローカルファイルにアクセスできないことがあります。ドキュメントフォルダ内で自作アプリを作成しましょう。
エラーが起きた
必ずコンソールを表示しながらアプリを動かし、エラーメッセージが表示された時はそのメッセージをAIに伝えてください。何度やってもエラーが解消されない場合は違うコードの提案を受けましょう。
AIへの指示例
`○○`というエラーが起きているので解消してください。
エラーが解消されないので違うコードをください。Node.jsやサーバサイドアプリを薦められた
AIへの指示例
バニラJSとブラウザだけで実現してください。ファイルをアップロードさせようとする
今回はローカルで動かすことを前提にしているので、アップロードさせないように指示出ししてください。
AIへの指示例
アップロードはしたくないです。自分専用アプリを作る
企画・要件定義
AIにプロジェクトの背景と目的を明確に伝えます。解決したい課題を伝え小さなプロトタイプを作ってみます。AIの提案内容が自分の要望とズレている場合はこの段階ですり合わせをしておきましょう。
AIへの指示例
あなたは熟練のフロントエンドエンジニアです。
私は **〇〇を解決するアプリ** を開発したいと考えています。
まず、実用最小限の機能構成を提案してください。
また、これらをJavaScriptとHTMLだけで実現するためのロードマップを提示してください。プロトタイプの実装
小さなプロトタイプを動かして、出力されたコードの方向性が間違っていないか確認します。思ったコードが出力されない場合は、1つ前の「企画・要件定義」に戻って実現したいことを具体的に伝え直ししましょう。
AIへの指示例
提案内容に基づき、プロトタイプを作成してください。
HTML、CSS、JavaScriptのすべてを1つのコードブロックにまとめ、
そのままコピー＆ペーストしてブラウザで実行可能な形式で出力してください。
VSCode内にHTMLファイルを作成し、ローカル環境のブラウザで実行することを想定しています。フィードバックの反映
実際に動かして感じたこと言語化してAIに伝えます。
AIへの指示例
**検索結果を目立たせたい**
**検索列をハイライトしたい**
**シートを選択できるようにしたい**
**ファイルパスを表示したい**
**重複した画像を削除したい**
**複数のフォルダを選択したい**
**上限を決めたい**
**進捗バーを表示したい**
という機能を実装したい。修正済みの全コードを出力してください。よりよい機能を提案してもらう
基本機能が安定したら、自分が気づかない便利な機能をAIに提案してもらいます。
AIへの指示例
このアプリの利便性をさらに高めるための追加機能を、実装難易度とともに提示してください。
**〇〇機能** を選びますので、既存の機能と統合した完全なコードを作成してください。リスク管理と品質保証
コードや処理手順にセキュリティの問題がないか、ブラウザがクラッシュする原因がないか調べてもらいます。
AIへの指示例
このアプリを実運用するにあたり、脆弱性（XSS等）や、
予期せぬ入力によるクラッシュの危険性を診断してください。
特定されたリスクをすべて解消し、ビジネス利用に耐えうる堅牢な最終版コードを出力してください。最後に
自分の業務内容に特化したアプリを短時間で作成できるので、不便だと感じたことがあった時はAIと相談してみてください。
