2025 年 5 月 ChatGPT の Web 版で簡単なフロントエンド開発の併走をしてもらうメモです。

ログインせずシンプルな状態で進める

2025 年 5 月時点の状況で進めます。

まず、私の使用履歴の影響がないよう、ログインはせず、ブラウザはプライベートモードでスタートします。

素のポテンシャルでやってみます。

GitHub Codespaces を準備

手軽にすぐ始められる開発環境ということで Codespaces を起動します。Blank を選択。

起動しました。 7:31

いざスタート

GitHub Codespaces で作業して簡単なフロントエンドの制作をします。

Vite を使って vanilla javascript のテンプレートを使って開発をはじめます。まず環境準備を教えてください。

と書いて、

と Codespaces の準備から入ってますが、ここは参考にせず、

このあたりの対応します。

# Vite プロジェクトの作成
npm create vite@latest . -- --template vanilla

# 依存パッケージのインストール
npm install

これを、それぞれ実行します。これで準備ができました。

CSS フレームワークの指定と仕組みの基礎伝達

つづいて、Bootstrap という CSS フレームワークをベースに、ボタンをクリックするたびに、画像を外部から fetch で読み込んで切り替える仕組みを index.html に作りたいです。JS ソースは src/main.js に置いてください。

このようにお願いします。割と具体的にはしています。src/main.js の指定は、わりと main.js のおパス指定が迷うみたいなので、明確に指定。

分かりやすいフォルダ案内。

index.html を教えてくれます。

Javascript も教えてくれます。

これをそれぞれにコピーアンドペーストで反映して npm run dev してプレビューしてみるとイイ感じに表示されました。 7:40

なんかクリックしてみるとダミー素材を読み込んでて気が利いてますね！

Dog API を指定

Dog API という、犬画像ランダム表示 API があるので、これに画像をつなげてもらいます。

画像の内容なランダムな犬画像を返す Dog API https://dog.ceo/dog-api/ を使いたいです。

API はこんな仕様です。

https://dog.ceo/api/breeds/image/random Fetch!
JSON
{
    "message": "https://images.dog.ceo/breeds/terrier-welsh/lucy.jpg",
    "status": "success"
}

このようにお願いします。コツは Dog API トップページにある API の使い方のところを雑に持ってきてペーストして仕様を伝えているところです。

main.js の内容を教えてくれるので反映して npm run dev で表示してみます。実際には、さっきから起動しっぱなしにしてるので、そのまま変更を検知してリロードされます。

みてみるとボタンをクリックしたら犬画像がどんどん切り替わるフロントエンドができあがりました。

7:31 にはじめて記事書きながら 7:46 にできたので、作業に集中してたら実質 5-10 分程度でできると思われます。

いやー。フリー版の Web チャットでもここまでできるの楽しいですねー。