生成AIを使ってソフトウェアの開発の仕方｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/n9396cacfa0f8
生成AI（Gemini2.5Pro、Gemini2.0、Chatgpt等）を使ってソフトウェアを作成することは凄く簡単です。検証が簡単で、動く、動かないの確認も容易に出来る方法として開発言語をHtml+css+javascriptで作成させるやり方です。Python、Ｃ言語、pascal言語等なんでもやってくれますが、そのためには開発環境を用意しないといけない。特にデバッグ、実行ファイルにコンパイルする等のソフトウェアの用意が必要です。そしてそれらの使い方を習得するためにはそれなりの時間が掛かります。
ということでWebブラウザ（Firefox、Chrome等）があれば開発環境が揃ったことになります。また生成AIに作ってもらったコードを貼り付け保存（普通はhtml、css、js）するのにはエディタ（秀丸、Terapad、Vscode）等があればOKです。
例えば生成AIに下記のソフトウェアを開発してと下記のような指示します。
フォトスライドショー
「写真を30枚以内をアップロードして保存できる、順番にサムネイルで表示、センターに大きな画面でスライドショーで順次表示していく、その表示の仕方は上下、左右、ズームイン、ズームアウト、回転、揺らぎ等の効果をランダムに付ける。またYouTubeのURLを入力する場所を設け、写真のスライドショーとYouTubeの開始を同期するようにスタートボタンを設ける。スライドショーには名前を付けることが出来る。そんなソフトウェアをHtml+css+javascriptで作成してください。」
すると、生成AIにもよりますが、出力をcode.htmlというファイルが出来ています。それ以外に.css、.jsのファイルを別々に出してくる場合と、html、css、jsをHtmlの中に全て記述していることもあります。
Geminiの無料版でCanvasを使って作ると、code.htmlというファイル一つで動くものを出してくれます。
これを自分のパソコン上でダブルクリックするとWebブラウザ上で「フォトスライドショー」が動きます。
使ってみて何か問題があるときはこの場所はこうしてとか、こんな機能にしてとか注文を付けます。簡単な注文だと修正箇所しか答えてくれないことがあります。でもそこを探して修正するのは面倒なので、フルでコードを出力してください。とリクエストすると全文出してくれる。それをすべて選択して、前のファイルに貼り付ける。
またWebブラウザの右クリックで検証という箇所があるのでエラーが出た場合はそこに書いてある内容を生成AIに貼り付けて、こんなエラーが出ていると報告すると適切な修正コードを出してくれる。
という一番、簡単な方法を説明しましたが、これでソフトウェアの基本は全て含んでいます。分岐、変数、メモリ等の概念などソフトウェアの入門書にあるブール代数なども含んでいます。でも生成AIのお陰で自然語、普段使ている口語で受け答えをやってくれます。
私の場合はサーバーを使うことが出来るので、出来上がったhtmlファイルをサイトにアップロードしてそのURLを皆さんに知らせることで、情報共有が出来ます。このURLにあるhtmlをダウンロードして、自分のパソコン内で使うことも出来ます。またそのhtmlを生成AIに読み込ませて、変更、修正、追加をして改良することも出来ます。このhtmlファイル（コード）でソフトウェアの仕様を読み取ってくれます。楽ですね。
厳密にいうとhtmlはプログラム言語ではありません。cssもレイアウトを作るだけ、jsがプログラムだと言えます。javascriptの略です。ボタンを押したり、入力したテキストを何かに渡したり、そんな場合jsコードで記述することになります。でも分からなくても大丈夫、生成AIが全部やってくれます。
出来上がったソフトウェア例
フォトスライドショー
https://pasopia.velvet.jp/2025/photop/index034.html
「生成AIでソフトウェアを開発してみよう」
https://pasopia.velvet.jp/2025/photop/
