見出し画像

AIコーディング初心者がChatGPTで自分専用ツールを作った|失敗と修正の実践記録

前回の記事では、

「AIコーディングでは、実際にどんなものが作られているんだろう?」

という疑問から、制作例を100件調べました。

その中で私自身も、ChatGPTと一緒に家族旅行の持ち物を管理するツールを作っています。

▶ 前回の記事
「AIコーディングでできることは?100件調べて旅行持ち物確認アプリも作ってみた」

ただ、実際に作ってみると、
「ChatGPTにお願いしたら、そのまま完成」ではありませんでした。

スマホでは表示が崩れる。
削除ボタンを押しても動かない。
PCではドラッグしても並び替えられない。

一度直ったはずの問題が、別の修正後に戻ってくることもありました。

振り返ると、今回の制作で一番長かったのは、

「作ること」より「使って、直すこと」です。

この記事では、プログラミング未経験の私がChatGPTと一緒に自分専用ツールを作り、不具合と修正を繰り返しながら実際に使える形へ近づけていった過程を紹介します。

「AIコーディングに興味はあるけれど、本当に初心者でも作れるの?」

そんな人に向けて、うまくいったところだけではなく、失敗したところもそのまま紹介します。



AIコーディング初心者がChatGPTで自分専用ツールを作ってみた

今回作ったのは、旅行などの持ち物を家族ごとに管理するツールです。
きっかけは、とても単純でした。

「旅行の持ち物アプリがほしい」

最初にChatGPTへ伝えたのも、このくらいざっくりした内容です。
そこから、

「家族ごとに持ち物を分けたい」
「準備したものが分かるようにしたい」
「旅行ごとに内容を変えたい」

と、欲しいものを少しずつ伝えていきました。
最初から細かな仕様書を作ったわけではありません。

困っていることをChatGPTに話しながら、必要な機能を一緒に整理していった

というのが実際の流れです。

完成した持ち物管理ツール

最終的には、ブラウザで使えるシンプルなツールとして、自分が欲しかった形までかなり近づけることができました。

ただ、最初からこの状態だったわけではありません。


「本当に作れるの?」と思いながら、手探りで始めた

最初から作り方が分かっていたわけではありません。
むしろ、

何から始めればいいのかも分からない状態

でした。

プログラミング言語も分からない。
コードをどこに保存するのかも分からない。
スマホで使えるようにする方法も分からない。

だから、作り方そのものからChatGPTに相談しました。

するとChatGPTから、

最初から全部の機能を入れず、まず小さく作って、動作を確認しながら進める

ことを勧められました。
私自身が最初から「小さく作ろう」と考えていたわけではありません。

本当に作れるのかを確かめながら、ChatGPTに案内される形で少しずつ進めていきました。


ChatGPTに伝えたことが、少しずつ形になっていった

制作中に私がやっていたのは、コードを書くことより、

「どういうものが欲しいのか」を言葉にすること

でした。

「家族ごとに分けたい」
「準備済みと未準備を一目で分かるようにしたい」
「スマホでも使いやすくしたい」

そんな要望を伝えると、ChatGPTがコードという形にしてくれます。

最初に動いた初期版①
最初に動いた初期版②

最初に画面が表示され、操作できたときは、

「本当に作れた」

と思いました。
自分ではコードを書けなくても、言葉で伝えたものが実際に動く。
この部分はかなり驚きました。
ただし、この初期版は本当に最低限の状態です。

この時点では、自分で新しい持ち物を追加することもできませんでした。

それでも、

「自分が言ったものが、実際に動いている」

という体験はかなり新鮮でした。
そして、ここで完成ではありません。

むしろ、ここからの方が長かったです。


動いた。でも「使えるツール」ではなかった

PCで最初の形が動いたときは、

「これで完成に近いかも」

と思いました。

でも、実際に使ってみると次々に問題が見つかりました。

「動くものを作る」ことと、「実際に使えるものを作る」ことは全然違う。

これは今回、かなり強く感じたことです。

スマホで見ると表示がおかしい

PCでは問題なく見えていたのに、スマホで使ってみると表示がおかしくなりました。
長い持ち物名が2行になると、行の高さがうまく広がらず、

改行したあとの文字が見えなくなる

という状態です。
ChatGPTに画面を見せながら修正しました。

実際に起きた3つの不具合

PCだけで確認していたら気づかなかった問題です。
実際に使いたい環境で試すことの大切さを感じました。

一度直った問題が、別の修正で戻ることもあった

スマホの表示は一度直りました。
ところが、別の部分を修正したあと、

前に直したはずのところがまたおかしくなる

こともありました。

「そこ、さっき直ったはずなのに……」

ということが何度かありました。
一度正常に動いたからといって、そのままずっと大丈夫とは限りません。

別の機能を修正すると、それまで動いていたところに影響が出る。

そのため、

修正したところだけではなく、以前直したところも含めてもう一度確認する

必要がありました。
最初は、

「エラーを直していけば、問題はどんどん減っていく」

くらいに考えていました。
実際は、

直す → 別の問題が出る → また直す → 前の問題も確認する

という繰り返しでした。

削除ボタンはあるのに、押しても何も起きない

分かりやすかった失敗の一つが削除ボタンです。画面には「×」が表示されています。見た目だけなら問題ありません。

ところが押してみると、

完全に無反応。

コードを読んで原因を探すことはできません。
そこでChatGPTには、

「×を押しても完全に無反応です」

と、そのまま伝えました。
専門用語が分からなくても、今起きていることなら説明できます。

ChatGPTに原因を考えてもらい、修正版を試し、実際に動くか確認しました。

今度はPCで並び替えができない

削除ができるようになったと思ったら、次は並び替えでした。

PCでドラッグしても、思ったように動きません。

またChatGPTへ伝える。

修正する。

実際に操作する。

直ったか確認する。

振り返ると、今回の制作は、

「指示 → コード生成 → 完成」

ではなく、

「作る → 使う → エラーを見つける → 直す」

の繰り返しでした。

AIコーディングで実際に繰り返した改善サイクル

正直、ツールを作るのは根気のいる作業だった

AIがコードを書いてくれるからといって、簡単に完成するわけではありませんでした。

エラーは出る。
直したら別のエラーが出る。
一度直したところが、またおかしくなる。

正直、根気は必要です。

でも途中から、

「エラーが出る=失敗」ではない

と思うようになりました。

原因を探す。
修正する。
確認する。
ダメならまた試す。

少なくとも今回の制作では、

最初から完璧なものを作ろうとするより、まず動かして、実際に使いながら直していく進め方の方が現実的でした。

「一発で完成させる」のではなく、

「まず動かして、そこから直す」

そう考えるようになってから、エラーが出ても以前ほど焦らなくなりました。


プログラミング未経験でも、問題は一つずつ伝えられた

コードが分からなくても、できることはありました。

今回、特に重要だったのが、

「うまくいかない」で終わらせず、起きている症状を具体的に伝えること

です。たとえば、

「×を押しても反応しない」
「長い文字になると2行目が見えない」
「PCでドラッグしても並び替えられない」

と伝えました。
表示がおかしいときは、スクリーンショットも見せます。
そして修正版が出たら、実際のPCやスマホで操作して確認する。

コードが生成された時点ではなく、自分が使う環境で正常に動いたところまで確認する。

この繰り返しが、プログラミング未経験の私でも修正を進めるうえで役立ちました。


一番大事だったのは「コードを書く力」ではなかった

今回、自分専用ツールを作ってみて意外だったことがあります。
私が一番使ったのは、コードを書く力ではありませんでした。

何度も考えていたのは、

何が不便なのか。
どう動いてほしいのか。
今どこがおかしいのか。

そして、それをChatGPTにどう伝えるかです。
もちろん、プログラミングの知識があれば、もっと早く解決できたこともあると思います。

それでも、ChatGPTがコードを書く部分を助けてくれたことで、私は

「何を作りたいか」「どう直したいかを考える側」

として制作を進めることができました。
少なくとも今回の制作では、

「作ってもらう」工程よりも、「実際に使って、違和感を見つけて、直す」工程の方が長く、重要でした。


AIの「言ったことを形にする力」で、考え方まで変わった

今回、一番ワクワクしたのはここです。
自分では作り方が分からなくても、

「こんなものが欲しい」
「ここをこうしたい」

と伝えると、それが少しずつ実際に動くものになっていく。

一番驚いたのは、

自分の「こうだったらいいな」が、実際に触れるものへ変わっていったことです。

一度伝えただけで完璧になるわけではありません。
エラーも出ます。
修正も必要です。

それでも、自分では作り方すら分からなかったものが、ChatGPTとのやり取りを重ねることで少しずつ形になっていく。

「言葉で伝えたことを、実際に動くものへ近づけられる」

ここは、今回AIコーディングを試して特に面白いと感じた部分でした。
この体験によって、何か困ったことがあったときの考え方まで変わりました。
以前なら、

「これを解決してくれるアプリはないかな」

と探していました。
でも今は、

「これ、もしかしたら自分で作れるかもしれない」

という選択肢があります。
できるかどうかは、実際にやってみないと分かりません。

それでも、

最初から「自分には作れない」と考えなくていい。

そう思えるようになったことが、今回かなり大きな変化でした。


AIコーディング初心者だからこそ注意したいこと

自分専用の小さなツールなら、AIコーディングを試す題材として面白いと思います。
ただし、

AIが作ったから安全というわけではありません。

個人情報や機密情報を安易に入力しないこと。
AIが生成したコードを無条件に信用しないこと。
外部へ公開する場合は、セキュリティやデータの保存方法も確認すること。

このあたりは注意が必要です。

また、ブラウザ内だけにデータを保存する仕組みの場合、別の端末や別のブラウザでは、同じデータをそのまま使えないこともあります。

「動くものが作れた」ことと、「安全に使える」ことは別です。

今回のような自分用の小さなツールでも、保存する情報や公開方法によって必要な確認は変わります。

初心者だからこそ、

「動いたから完成」ではなく、安全面まで含めて確認する

ことは意識しておきたいと思いました。


まとめ|「自分に合うものを探す」だけではなくなった

今回、プログラミング未経験の状態から、ChatGPTと一緒に家族旅行の持ち物管理ツールを作りました。

始まりは、

「旅行の持ち物アプリがほしい」

という一言です。
最初から作り方が分かっていたわけでも、細かな仕様書を用意していたわけでもありません。

小さく作る。
実際に使う。
不便を見つける。
ChatGPTへ伝える。
修正する。

この繰り返しでした。
スマホでは表示が崩れ、削除ボタンは反応せず、PCでは並び替えができない。一度直した問題が、別の修正後に戻ることもありました。

それでも少しずつ直していくことで、最初の簡単な画面が、自分が実際に使いたいツールへ近づいていきました。

今回一番大きかったのは、

「初心者でもツールが作れた」ことだけではありません。

以前なら、何か不便があると

「自分に合うアプリはないかな?」

と探していました。
今はそこに、

「これ、自分用に作れないかな?」

という選択肢が増えました。
AIコーディングに興味はあるけれど、

「何を作ればいいか分からない」

という人は、最初から大きなサービスやすごいアプリを考えなくてもいいと思います。
まずは、普段感じている小さな面倒から。

「これを自分専用の小さなツールにできない?」

とChatGPTへ相談してみる。

私にとっては、それくらいから始めるのがちょうどよかったです。



あわせて読みたい

AIコーディングで「何を作れる?」と思った方へ

今回の記事では、私が実際にツールを作る中で起きた失敗や修正の過程を紹介しました。

「自分でも何か作ってみたい。でも、何を作ればいいか分からない」

という方は、前回の記事も参考になると思います。
AIコーディングで実際に作られているものを100件調査し、私が作った旅行持ち物確認ツールについても紹介しています。

AIコーディングでできることは?100件調べて旅行持ち物確認アプリも作ってみた


AIを記事作成に使ってみたい方へ

6つの生成AIを同じ条件で比較した記事も公開しています。

AI記事作成ツール6選を比較|自分に合う生成AIの選び方



いいなと思ったら応援しよう!