はじめに
現在オンプレミスで運用中のサービスをAWSへ移行するプロジェクトを担当しているごりごりのインフラエンジニアです。昔バックエンドの開発もしたことはありますが、業務でフロントエンドの開発をしたことは過去一度もありません。
そんなフロントエンドど素人の私がChatGPTを活用してWebアプリを開発したので、その過程や学びを共有したいと思います。
技術的な話まではあまり踏み込みません。
作ったもの
エンジニア向けスキルシート（職務経歴書）をWeb上で簡単に作成できるアプリ「Skill Shelf」を開発しました。
私は現在フリーランスエンジニアとして活動しており、スキルシートを記入・更新する機会が定期的にあります。
当時簡単に検索したところ、多くのスキルシートテンプレートがExcel形式で提供されており、しかもセルの結合などがされていて扱いづらいと感じていました。
「Web上で、もっと楽にスキルシートを作れるようにしたい」と思い、このアプリを作ることに決めました。
自動保存やスマホ対応、カード型UI、特殊レイアウトなど、フロントエンド経験者でないと難しそうな機能を、約1ヶ月で実装しました。
開発の進め方
基本的にはずっとChatGPTに頼りっぱなしで開発を進めました。以下では、どのように活用したのか具体的に紹介します。
コンセプトと必要な機能の洗い出し
まずはアプリのコンセプトと搭載したい機能をPCのメモ帳に書き出しました。
コンセプト
- システムエンジニア向け 編集が楽なスキルシート作成Webアプリ
搭載したい機能
- ボタン操作でプロジェクトの枠を簡単に追加・削除
- 定期的な更新リマインド用メール通知
- スキルシートのPDF出力
- ログイン／ログアウト機能
- JSON形式でのエクスポート／インポート機能（Web保存したくない人向け）
次にこのメモをChatGPTに丸ごと投げて、ChatGPTに先ほどのメモを丸投げして、「このような機能を実現させたい場合にはどのような言語、フレームワークで実装するのがベストかな？」と聞き技術選定をしました。
提案されたのが Next.js。使ったことがないフレームワークでしたが採用しました。
ChatGPTの言うことは絶対です。今回の開発では基本的にその考えて進めていました。
その後は、「Next.jsでWebアプリを作りたいけど、まず何をすればいい？」と質問し、インストール手順やプロジェクト作成方法を教えてもらい、その通りに進めました。
以降は、機能ごとにChatGPTに聞いて、提示されたコードをコピペ → 動作確認 → 必要に応じて修正…という流れをひたすら繰り返しました。
時々エラーが出ることもありましたが、その際は該当コードとコンソール出力を貼り付けて、「このエラーの原因と解決方法を教えて」と尋ね、修正してもらいました。
このようにして、Web検索もNext.js公式ドキュメントもほとんど見ず、9割はChatGPTとの対話で完成させました。
得られた教訓
今回の個人開発で得られた学びを4つにまとめました。
1. テストはちゃんとやる
開発中は都度動作確認をしながら進めていたため、最後の機能実装が終わった時点で「完成した」と思ってしまいました。しかし、いざ通して使ってみると、想定外の挙動が多数発生…。
「とりあえず早くリリースしろ」というアドバイスはよく見かけますが、そこに一言加えるなら、
「※ ただし、テストはちゃんとやれ」 です。
最低限、完成後には基本的な操作を一通り試して、問題がないか確認するべきだと痛感しました。これはユーザーに対する最低限の礼儀です。
2. こだわるなら、それなりの覚悟を
Skill Shelfでは自動保存機能を実装しましたが、これが一番の難所でした。
初期実装では「保存のたびにスクロールがズレる」「フォーカスが外れる」「無限に保存され続ける」など、使い物にならない状態…。
ChatGPTに何度も症状を伝え、修正してもらっても、別の問題が発生する。これが何度も繰り返されました。
理想の動作を実現するには、相応の根気と覚悟が必要だということを実感しました。マストではないけど実装してみたい機能がある場合は気をつけてください。私は今後初期リリースのタイミングでは変なこだわりは持たないことを心に誓いました。
3. AIより人間の方が早いこともある
ChatGPTにいくら聞いても解決できなかった問題が、自分でコードを読んだらすぐに分かったというケースもありました。
今回の開発で感じたのは、ChatGPTは「最初のざっくりとした実装」は得意だが、「細かい修正」は不得意かもしれない、ということ。もちろん、指示の仕方や質問の精度にも原因があるかもしれませんが、細かい調整には人間の目と判断が強いと感じました。
まとめ
生成AIのおかげで、Webアプリを1人で作るハードルは格段に下がりました。フロントエンド未経験ながら、自分が納得できるWebアプリを完成させられたことが、その証明です。
しかし、それでも「簡単に作れる」わけではないと実感しました。納得できるレベルの機能を作り上げるには、根気が必要です。どうやってインターネットに公開すれば良いのか、利用しているサービスの規約はどうなっているのか、マネタイズはどうするべきかなど考えることが山ほどありました。
今回はChatGPTとの対話型開発を中心に進めましたが、今後はCursorのようにリポジトリ全体を見渡せるツールも活用して、よりスムーズな開発体験を目指したいと思います。
以上、インフラエンジニアからでした。