Web開発の全くの素人が、Chat-GPTを使ってWebプラットフォームを作ったお話

はじめまして。

個人開発を趣味でやっております、シャケと申します。

# はじめに
### ○執筆の動機
今でこそ[Cursor](https://www.cursor.com/ja)や[Cline](https://github.com/cline/cline)のように、複数ファイルにまたがって情報を取得したり、コード生成したり、といったことが、生成AIで高精度にできるようになってきました。
ただ、生成AIブームの先駆けとなったGPT-4が出てきた頃(2023年はじめ)は、プロジェクト全体の構成や、ソースコード全体の一貫性・設計意図まで確保できるツールは限られており、断片的なソース生成がメインであったように思われます。
それでも、やはり私のようなWeb開発の素人には、Chat-GPTは当時からとてもつもなく有能なエージェントでしたし、現在でも同じように、素人同然だけどWeb開発をやってみたい！という人にとっては、私がトライしてきた進め方は、相変わらず有効な手法であるように思えます。

そこで、記録という意味でも、「Chat-GPTを使った素人の個人開発のレベル」を知ってもらう意味でも、
当時の様子を振り返りながら、素人のリアルなWeb開発の方法を綴っていこうかと思います。

特に下記の方にオススメの記事です。
　・Web開発とか未経験だし知識もないけど、最初からしっかりとしたサービスを作ってみたい人
　・Chat-GPTに寄り掛かって開発してみたい人
　・完全素人の個人開発者の、リアルな開発状況を知りたい人

### ○筆者について
　本業は組込エンジニアで、C言語を5年くらいやっています。
　むかーしむかしにHTML触ったことがあるくらいで、ネットワークやサーバーに関する知識は全くありません。Web開発に関しては素人です。
 
### ○作ったプラットフォーム
　生成AIを使って簡単に<b>ツールの作成・公開、共有、実行、販売、更新までが一括管理できるプラットフォーム</b>を作りました。
　ツールの中身は自由にプログラミングできますが、ツールのUIは統一されていることが特徴で、どんなツールも使い方に迷うことがないので、<b>ツールを使う人に優しいツール共有プラットフォーム</b>です。
 思った以上に良いサービスになってしまったので、公開することにします。

https://sphool.com

ツールが溢れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/0da04300-7c4a-4894-b079-d9bb46ef62b4.png)

**※サービスの一部にはコインが必要ですが、今ならアンケートに答えていただくだけで、最大50コイン分を無料でプレゼントするキャンペーンをやっています。**
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/e1d6f903-c0c1-4897-b32d-cd6c4b4c4605.png)

まだまだこのプラットフォームに織り込みたい機能はたくさんありますし、今後もユーザニーズに合わせてこつこつ更新を続けていますので、ぜひぜひ、気軽に使ってみてください。

### ○開発期間

足掛け3年(本業の合間にこつこつ開発)

# 本題
さて、Web知識も何もない素人が、Chat-GPTを濫用してWebサービスを作り上げた歴史を語ります。

### ①もともとやりたかったこと
ソフトウェアをチーム開発しているとき、現場ではつよつよエンジニアが業務効率化のためにたくさんのツールを作成してくれているのですが、まぁそれらのツールは下記のように乱立しており、せっかく作られたツールが効率的に使われていない状況がありました。

`・ツールの管理場所が定まっておらず、そもそもツールの存在が知られていなかったりする`
`・ツールに作成者ごとにクセがあり、使いこなしに時間がかかる`
`・ツールが頻繁に更新されており、人によって使っているバージョンが異なる`

そこで、<b>ツールのUIを簡素化・統一して、それらのツールを一元管理する専用のプラットフォーム作れば解決できるのでは？</b>と思ったことが、本サービス開発のきっかけです。

とはいえ、このサービスの可能性を単なる「社内の課題解決ツール」で終わらせたくありませんでした。
そこで、このコンセプトをWebサービスにして、世間様に公開して、何か別のニーズがないかとか、別の視点から色々フィードバックを得られないかと考え、Webサービスとして作って公開することにしたのです。

### ②実現手段の決定
Webサービスの構成や実現方法は皆目見当がついていませんでしたが、とりあえずやりたいことは下記のような感じだなーと、思い描いていました。

```
1. Webサービス上で、ツールのUIとして専用のものを用意し、そのUIを使うためのAPIをユーザに公開する
2. Webサービス上で、1.のAPIを使ったプログラムを用意できる環境・画面を用意する
3. ユーザのプログラムからツールを作成し、共有・実行できる画面を提供する
```

いわゆる「[オンラインコンパイラ](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83#:~:text=%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83%EF%BC%88%E3%81%BE%E3%81%9F%E3%81%AF%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3,%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%82%E3%82%8B.%E3%80%82)」ですね。

また、使う技術の候補はいくらでもありましたが、とりあえず素人にありがちな「スケールするかもしれない！」「複雑なロジックもたくさん織り込むかもしれない！」という夢みたいな考え方と、とりあえず大学時代に研究で使っており、馴染みのあったプログラミング言語ということで、フルスタックでスケールにも耐えられそうな<b>Python(Django)</b>を使うことにしました

:::note info
当時はまだChat-GPTもメジャーでない時代だったのでGoogle先生に訊いていましたが、今ならこのあたりのリサーチはLLMで一発ですね。便利な時代になりました。
:::

### ③お勉強とサービスの基盤構築

さて、何の知識もない私はとりあえず、当時のChat-GPT(GPT-3.5)に「<b>Djangoでオンラインコンパイラを作るときのコード例を知りたい</b>」と投げました。
これが今のウェブサービス開発において、初めて生成AIに投げたプロンプトです。
で、Chat-GPTから返ってきた答えがこれ。

>まず、subprocess モジュールを使用して、Pythonコードを実行する関数を作成します。
>
>```python
>import subprocess
>
>def run_python_code(code):
>    result = subprocess.run(
>        ["python", "-c", code],
>        stdout=subprocess.PIPE,
>        stderr=subprocess.PIPE,
>        encoding="utf-8"
>    )
>    return result.stdout + result.stderr
>```
>
>次に、Djangoビューを作成して、POSTリクエストを受け取ります。
>
>```python
>from django.http import JsonResponse
>from django.views.decorators.csrf import csrf_exempt
>
>@csrf_exempt
>def run_code(request):
>    if request.method == 'POST':
>        code = request.POST.get('code')
>        output = run_python_code(code)
>        return JsonResponse({'output': output})
>    else:
>        return JsonResponse({'error': 'Invalid request method'})
>```
>
>最後に、JavaScriptを使用して、コードを送信し、結果を表示すればOKです。
>

すごい。すごいけどよくわからん…。
当時の率直な感想です。

当時は[MTV](https://docs.djangoproject.com/ja/5.1/glossary/#term-MTV)という思想どころか、Webサイトやサーバの一般的な知識も何もなかったのですから。

そこで私は、とりあえずちゃんと理解してから進む、みたいなことは諦めて、
#### 良く分からんから、とりあえずやりたいことをGPTにざっくり伝えて、できるだけ骨子を固めてもらおう！
のマインドで行くことにします。

1. とりあえず何度も何度もGPTに相談して、まずは動くものを作ってもらう。
2. 動きとソースコードをにらめっこしながら、ソースコードやシステムの中身を理解していく。

の繰り返しです。

たとえば、まずは下記をざっくりとお願いしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/94597439-eb72-4ff6-94e8-bb01cd6c2563.png)

で、これに対してとりあえずGPTが出してきたコードを、ググりながらDjangoのプロジェクトに織り込んでいきます。

良く分からん、とりあえず作って欲しい、ってところは投げていく。

過去の私のお願いを見ると、何も分からない中で、とにかく手探りで進めようとしているのが良く分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/bdaeca42-7c17-4b0d-86f1-af0d861bc772.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/822b1edd-9183-4af8-94b3-acfaf401c823.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/04ab5b3f-90d6-4214-aa53-eb830b99fe20.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/d893941a-ffc0-4660-8fe8-73a63cbaf1e2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/4edaa1fa-8a9b-4148-9061-e94e3f580723.png)


>思わずGPT(当時はまだ3.5だけど)を褒める私…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/2eb11d4d-24f2-44f7-ae0c-c157fe0c032b.png)

開発着手から3年くらい経ちますが、今になってみても、とりあえず形にしながらお勉強するだけであれば、この進め方でも十分でした。

> 1\. とりあえず何度も何度もGPTに相談して、まずは動くものを作ってもらう。

「とりあえず動くものを作る」には、システムやサーバの構造に関する知識が不可欠です。Chat-GPTの言いなりになるためには、言いなりになるための事前知識が必要です。
これを否が応にも調べながら進めていくことになるので、最低限の知識が身についていきました。
nginx, gunicorn, docker-compose, dokcer-in-docker, SQL, certbot, AWS,...

> 2\. 動きとソースコードをにらめっこしながら、ソースコードやシステムの中身を理解していく。

全体構成は合っていそうなのにうまく動かないときは、だいたいソースコードが悪さをしています。エラーメッセージだけをChat-GPTに投げても、なかなか原因が特定できなかったりするときは(3.5はまだ特に精度が低かったので)、諦めてソースコードを理解していく必要があります。
このデバッグを通して、プログラミングの知識が身についていきます。
Django, JavaScript, HTML, CSS,...

:::note warn
動くことを優先する場合、正常系で動いていることを確認してずんずん進んでいけるので、異常系での動きの確認は、別に時間を取って、デプロイ前にしっかりテストしないといけませんね。
:::

:::note warn
実運用には、法律、セキュリティ、サーバ運用(スケールなど)、サポート対応など、あらゆるところに深い知識が必要になるので、そこまでやるならしっかりお勉強と業務経験を積まないといけないですね。
:::

### ④アイデアを形にできたからこその不満
さて、そんなこんなで1年以上、Chat-GPTを使いながら一人でこつこつ開発を進め、2024年夏頃には、なんとか「それっぽく動くもの」を作ることができていました。
ちなみに、この間、機能開発と合わせてデザイナーにも相談していたりして、ロゴや全体デザインは、デザイナーと2人3脚で作っていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/e760c9ca-6a9e-4e67-b3ab-f60ebc06802f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/f6d19e73-d8f0-4709-89e6-4b989062106c.png)


デザインは固まってきて、サービスっぽくはなってきていたのですが、
いざ一ユーザとして使ってみると、「なんかこれ使いにくいなあ」とか、「最初のイメージと違うなあ」とか、そういうのが出てきました。

こういうのって、開発初心者にありがちな悩みだと思うんですよね。
**イメージだけはしていたけど、しっかりと形にできてきたからこそ見えてくる「コレジャナイ」感。でも、やっぱり自分が愛用できるプロダクトを作りたい**。

この頃にはGPT-4oもリリースされていましたし、「ほぼ0知識からWebサービスを開発してデプロイする」という経験を通して、最低限の開発知識や、実装経験のない開発に対するアプローチもスムースにできるようになってきていました。

そこで、ここからこれを「本当に自分が欲しかったもの」に作り変えていくフェーズに入ります。

これまでが「勉強する」ことを目的とした第1章だったとすれば、
ここからは「アイデアを形にする」ための第2章ですかね。

### ⑤サービスの作り変えから公開まで
もともと、ざっくり想像していたコンセプトは下記のようでしたが、

>```
>1. Webサービス上で、ツールのUIとして専用のものを用意し、そのUIを使うためのAPIをユーザに公開する
>2. Webサービス上で、1.のAPIを使ったプログラムを用意できる環境・画面を用意する
>3. ユーザのプログラムからツールを作成し、共有・実行できる画面を提供する
>```

私の作りたいサービスのイメージが、下記くらい具体的に定まってきていました。
生成AIの進化のおかげで、ここまで高性能化できるのは大きかったです。

```
1. Webサービス上で、ツールのUIとして専用のものを用意し、そのUIを使うためのAPIをユーザに公開する。
 　このUIの入出力はフォームレベル(text,file,toggle,select)で十分であり、これでやりたいことはだいたいできるので、これに限定する。
2. Webサービス上で、コンセプトさえ入れれば、1.のAPIを使ったプログラムを生成AIで自動生成できる環境を用意する
　 これによって、初心者でも簡単なツールならすぐにつくって公開できるようにする
3. 自動生成したプログラムを自由に書き換えながらからツールを作成し、共有・実行・販売までできるサービスにする
 　プログラムの実行環境はpythonに限定するが、pythonのライブラリであれば自由に使えるようにすることで、(規約に違反しない範囲で)熟練者も高性能なツールを作れるプラットフォームとする。
```
つまり「**ツールが乱立しているチーム**」だけでなく、
「気軽に動くものをつくって共有したいプログラミング初学者」や
「プログラミングで少しでも稼ぎたい人」、
「ツールを編集したり管理したりする人」
といった**プライベートでもプログラムに触れる人にも嬉しいものが作りたいのではないか**ということが見えてきたわけです。

コンセプトが定まったら、あとはこれまでの繰り返しで作っていくだけです。
GPT-3.5と2人3脚でしていた開発が、
今度はGPT-4oやo1と2人3脚での開発になって、開発スピードは加速していきます。

2025年初頭、私の本当に作りたかったものが、ようやく最低限の形になりました。

**痒い所に手が届く。Chat-GPTでは、即「本当に欲しい情報」にたどり着けたので、
これなしで、Google先生や本を使って開発をしていたら、おそらく5倍以上の時間がかかっていただろうと思います。**

ともかくも、第2章が現在、なんとか形になってきたところです。

> ツールの作成スタート画面
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/d416c462-d232-40ea-b3df-b35b327648db.png)

> チャットベースでの編集画面
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/15cbf6c5-238e-48e2-b192-846fb96337e8.png)

> コードベースでの編集画面
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4035679/ac84ecf7-6fb4-4648-a632-c3a0a7ce5ef9.png)

# まとめ
Web開発素人の、これまでのChat-GPT主体の開発の歴史を述べてきました。
この開発も第2章が落ち着いてきたので、いよいよ現在は第3章「**本当に世の中に必要なサービスへ**」をスタートしています。

私がこの記事で伝えたいのは
**Chat-GPTを使った個人開発は勉強になるし、便利だしで、素人の開発難易度は格段に下がっているから、気軽に始められて良いです！**
ということです。

ただ、それだけじゃなく、
**運用を見据えてやっていくなら生成AIの力だけじゃ足りないよ**
ということも大事な学びだったかなと思っています。

生成AIは高いレベルでプログラミングをサポートをしてくれますし、あらゆる知識を教えてくれます。でも、決して、生成AIさえあれば、End to End でビジネスが行えるような、そんな万能なものではありません(数年後は本当にどうなっているか分かりませんが)。

生成AIによって、高いレベルの情報へのアクセス難易度が格段に下がった現在は、その分逆に、人が手を動かさないとできないことや、知恵を絞らないと導き出せないことへの価値が上がっていくように思われます。
今後は生成AIありきの世界で、今まで以上に、「人が出せる付加価値」が問われるようになるのでしょう。

※3年間も開発をしていると、色々な苦労もありました。
そういった苦労や技術や学びなど細かいことは、また別の記事にしてあげて行こうと思います。