対話型AI（Copilot）を使ったWEBプログラミングについて
YOLO今回は、対話型AIである「Copilot」を使ってWEBで使える見積もり作成ツールを開発しましたので、実際に使ってみた感想などを紹介していきます。
こんにちは。ブログ担当のすずシーサです。
☆この記事を読むとわかること☆
・開発の経緯とCopilotを選んだ理由
〇開発の経緯
〇Copilotを選んだ理由
・開発の流れについて
・Copilotで開発するメリット
・Copilotで開発するデメリット
・使ってみた感想
・最後に…
【開発の経緯とCopilotを選んだ理由】
・開発の経緯
今回、弊社ホームページにて、ビジネスホンの概算見積もりができるツールを新たに開発することになりました。
ビジネスホンは比較的高額な商品であるため、導入を検討する際には、まず販売業者に見積もりを依頼し、費用感を把握する必要があります。しかし、このプロセスには時間がかかることが多く、予算の検討がスムーズに進まないケースも見受けられます。
そこで今回のツールでは、簡単な質問に答えるだけで「いつでも」概算見積もりを確認できる仕組みを導入しました。これにより、お客様は社内での予算の大枠を事前に把握でき、見積もり依頼にかかる時間の短縮や、予算と導入費用の不一致といったトラブルを未然に防ぐことが可能になります。
もちろん、今回のツールはあくまで概算見積のため、正式な導入に際しては改めて正確な見積もりを取得する必要があります。お客様におかれましては、概算で予算感に問題がなければ、正式な見積もりを取得しつつ、導入スケジュールなどを社内で調整していただく流れとなります。
・Copilotを選んだ理由
対話型AIにはいくつか種類があり、今回選定したMicrosoftの「Copilot」のほかにも、OpenAI社の「ChatGPT」やGoogleの「Gemini」など、複数のツールが存在します。
その中で「Copilot」を選んだ理由は、無料で利用できる点に加え、ツールの使いやすさにあります。CopilotはMicrosoftのWEBブラウザ「Edge」に組み込まれており、現在表示しているページの内容を読み取ることが可能です。そのため、開発中のWEBページを開きながら、「この部分のエラーを修正したい」「ここのレイアウトを変更したい」といった具体的な指示をAIに対して行うことができます。
一方、WEB型やアプリ型のAIでは、表示中のページ情報を読み込むことが難しいため、今回の開発ではEdgeに搭載されているCopilotの方が効率的であると判断しました。
Edgeなら画面の右側にCopilotを表示可能！
【開発の流れについて】
今回は以下のようなステップで、概算見積もりツールの開発を行いました。
- 要件定義（開発内容や画面仕様の決定）
- 質問ページの作成（概算見積フォーム画面）
- 見積計算ロジックの作成（JavaScript）
- 見積結果ページの作成（HTMLで表示）
- データ追加・エラー処理の実装
- レイアウト調整（使いやすく、見やすい画面に）
- 動作確認テスト
このうち、２〜６の工程で対話型AI「Copilot」を活用し、１と７は社内で対応しました。
１．要件定義
まず社内で、どのような仕様で見積もりツールを作成するかを検討しました。 フォーム構成や見積結果画面のレイアウトなどもこの段階で方向性を固めます。
要件定義は開発の土台となる重要なプロセスです。ここが曖昧なまま進めてしまうと、後から仕様変更が発生し、プログラムの大幅な修正や作り直しにつながる恐れがあります。
なお、要件定義で行き詰まった場合は、Copilotに「こういうプログラムを作りたいけど、質問フォームのレイアウトってどんなのがいい？」といった形で相談することも可能です。インターネット上のサンプルをもとに、レイアウト案を提示してくれます。
※画像は基本設計をまとめたもの
２～６．Copilotを活用した開発
項２～４では、HTMLとJavaScriptを使ってフォームや計算処理を作成しました。今回の見積もりツールの開発者の私は多少プログラミングに関する知識がありますので、開発の流れなどは頭の中にイメージとしてあり、Copilotはプログラミング支援が得意なので、イメージに沿ってコードを生成してもらいながら進めました。
- HTMLのサンプルページを作成
- 質問フォームの項目（外線の種類、電話機の台数、オプション機能など）をCopilotに伝えてHTML化
- 回答内容に基づき、機器の種類・価格、施工費などを計算するJavaScriptのアルゴリズムを生成
- 計算結果を表形式で表示するHTMLコードを作成
動作確認では、「質問ページ → 計算処理 → 結果表示」の流れが正しく動作するかをチェックし、エラーが出た場合はCopilotに原因を質問して修正を行いました。
項５では、入力ミスなどに対応するエラー処理を追加。 例えば、未入力や不正な値がある場合に警告を表示し、誤った見積結果が出ないようにしています。
項６では、レイアウトの調整を行いました。会社ロゴの追加、見積書形式への変更、質問フォームの配置などをCopilotに相談しながらHTMLを修正しました。この際、見積書の元となるフォーマットを画像でCopilotに送ることでそのイメージになるようにコードを書いてもらいました。
最後に動作確認です。これは開発者の動作確認はもちろん、社内の人にも動作チェックを行ってもらいます。これにより開発者では気づけなかったエラーやレイアウトの調整の有無などを確認することができます。
※実際に出来上がった3種類のファイルと用意したロゴ
【Copilotで開発するメリット】
対話型AIを活用する最大のメリットは、プログラムのコードを一から勉強しなくても開発が始められるという点です。もちろん、ある程度の知識があれば作業はスムーズに進みますが、知識がなくてもAIがコードを生成してくれるため、初心者でもプログラミングに挑戦することが可能です。
例えば「○○を追加したい」と思ったときのコードを質問したり、表示されたコードをどこに書けばいいかわからない場合でも、「このコードはどこに書けばいい？」と質問すれば、具体的な記述場所を教えてくれます。これにより、初めてのプログラミングでもハードルがぐっと下がります。
さらに、気になったアルゴリズムや変数などがあれば、その意味を調べることもできるため、開発しながら学習するという使い方も可能です。
一方で、プログラミングが得意な人にとっても、AIは非常に便利な存在です。長いコードを書くのは時間がかかりますが、「○○を使って、○○の順番で、○○の処理をしたい」といった指示を出すことで、AIが代わりにコードを生成してくれます。これにより、開発時間を大幅に短縮することができます。
【Copilotで開発するデメリット】
一方で、対話型AIを活用した開発にはいくつか注意点もあります。 特に初心者の場合、自分で考えたコードではないためコードの意味を理解できず、不具合の対応や機能追加の際に「どこをどう修正すればいいのか分からない」といった場面に直面することがあります。
また、AIの指示通りにコードを入力しても、エラーが発生する場合があります。 その際は「このコードを入力したらエラーになった」とAIに質問することで、原因を探っていくことができますが、場合によっては以下のようなループに陥ることもあります。
「この作業をしてください」→エラー発生
「では次はこの作業を」→またエラー
「最初の作業に戻ってください」→再びエラー…
このように、無限ループのようなやり取りになるケースもあるため、状況によっては別のAIを使ってみるか、プログラミングに詳しい人に相談することで、よりスムーズに解決できることがあります。
【使ってみた感想】
Copilotを利用してプログラミングを行った感想ですが、私は高校・専門学校時代にHTMLやJava、C言語などのプログラミングを学んでいましたが、それ以降は約10年間ほどコードに触れておらず、今回久しぶりに開発を行うことになりました。正直、完成させられるかどうか不安も大きかったです。
当時は、何かを開発する際にインターネットでサンプルコードを探し、それをアレンジして使うというスタイルが主流でした。ですが、今回のCopilotを活用した開発では、サンプルを探すことなく、AIに質問するだけで一からコードを生成できるという点に、時代の進化を強く感じました。
特に今回は、初めてHTMLとJavaScriptを組み合わせたコードを書くことになりましたが、知識がなくてもCopilotがコードを生成してくれるため、「よくわからないけど動いている」という不思議な感覚になることもありました。
しばらく触っていくうちに、「このコードはこの処理をしているんだな」と理解できるようになり、そこからは開発スピードも一気に上がりました。最初は不安を抱えながらのスタートでしたが、AIのサポートによって徐々に自信を持って進められるようになったのは大きな収穫です。
現在はひとまず開発が完了し、安心していますが、今後も改善や機能追加があれば随時対応していく予定です。
【最後に・・・】
開発した見積作成ツールは近日公開予定ですので、お楽しみにお待ちください！
こんな感じで役立つ情報などを随時配信しておりますので、よろしければ読者登録をお願いします！登録いただくと最新の記事が配信された際にメールにてお知らせいたします。
読者登録はこちら：読者登録
