【1.5時間で作れた】非エンジニアのPM兼人事、ChatGPTを駆使してWebアプリを作ってみたら、作れた…【夢と希望が溢れる】
K.S.ロジャースで業務委託で働く、岩崎です。こんにちわ☆（ゝω・）v
日本育ち・フィンランド在住、UXデザイナー→PjM/PdM＋人事、みたいなキャリアです。
ちなみにWantedlyではこんな記事を出してもらってます
普段からいろんな役割でいろんな事務作業をしてる関係上『わたし ルーチン作業たいへん 自動化 効率化 みんな幸せ』との名目で普段からいろんな作業を高速化・最適化しております。（あらゆる所からの問い合わせをすべて一つのToDoアプリに集約させて自動で期限と優先度つけたりとか、判断のいらないルーチン作業をiPaaS使って自動化させたりとかしてます）
最近ChatGPTで働き方革命！！！みたいな話が飛び交ってるので、当然のように飛びついて課金して色々試してるんです。
そうしたら、ちょっとした調査系のタスクやスプシの関数を生成するタスクなんかはChatGPTに投げれば大体解決するし、ドキュメント生成のベース作成だったりプロダクトのペルソナや個別ユースケースの叩き作成も実用に耐えられるレベルで色々できるわけです。もうね、すごいんです。やばいんです。
で、このドキュメントを書いてる3時間前、ふと思いました。
『（ネットの記事を見ながら）これ、わたしも簡単なWebアプリケーョンも作れるんじゃないか？』
というので、ChatGPTの指示に極力そのまま従う形でWebアプリケーションの開発に挑戦してみたんです。
そしたら1.5時間でできました。すごい
わたしのエンジニア的経験はこんな感じ
ちなみにわたしは、UXデザイン出身からプロマネになった人でして、あまりエンジニアとしての経験があるわけでは無いです…というか、ほぼ無いです…
・スタックはMERN(MongoDB, Express.js, React.js, Node.js)、オンラインコーディングスクールのフルスタックコースを一通り受講済
・フロント・バックエンド・インフラを実務でちょっとだけ（のべ1ヶ月くらい）やらせてもらった
・エンジニアとしてバリバリ活動できるかというと、ジュニアレベル未満なので落第だと思っている
要件を書き出す
ふと頭に浮かんだのは文字を画像化して出力するアプリなので、以下のような動作要件を2分で記載しました。
あくまでも実験なので雑な要件ですが、私は許すことにします。なので許してください。
# アプリ概要
- ユーザーが文字列を入力すると、入力された文字列が反映された画像がリアルタイムで出力される
- 文字列の入力箇所は1箇所である
- ベースとなる画像は開発者が用意する。サイズは512px x 512px である
- 画像内での文字列の出力場所は、開発者が指定する。フォントはNoto Sans JP、フォントサイズのデフォルトは16ptである、文字列は中央揃えである
- 出力された画像は、WebUI上で閲覧が可能である
- 出力された画像は、png形式でダウンロードすることができる
ChatGPTに聞いて、指示に従うとフロントエンドもバックエンドの両方ができた
で、それを実現する手法をGPTに聞いてみます。なおGPT-4を利用しています。
```
こういうWebアプリを作りたいです。
作り方の手順をステップバイステップ形式で提示してください。
# アプリ概要
- ユーザーが文字列を入力すると、入力された文字列が反映された画像がリアルタイムで出力される
- 文字列の入力箇所は1箇所である
- ベースとなる画像は開発者が用意する。サイズは512px x 512px である
- 画像内での文字列の出力場所は、開発者が指定する。フォントはNoto Sans JP、フォントサイズのデフォルトは16ptである、文字列は中央揃えである
- 出力された画像は、WebUI上で閲覧が可能である
- 出力された画像は、png形式でダウンロードすることができる
```
```
あなたが作りたいWebアプリケーションを作成するための基本的な手順を以下に示します。このアプリケーションは、ユーザーが入力した文字列を反映した画像をリアルタイムで出力する機能を持つものです。
ステップ1: 必要なツールとライブラリの準備
まず、以下のツールとライブラリを準備します。
フロントエンド: HTML, CSS, JavaScript
バックエンド: Node.js, Express.js
画像処理: sharp (Node.jsのライブラリ)
フォント: Noto Sans JP
ステップ2: フロントエンドの作成
HTML, CSS, JavaScriptを使用してフロントエンドを作成します。以下の要素を持つシンプルなUIを作成します。
ユーザーが文字列を入力するテキストボックス
入力された文字列が反映された画像を表示するエリア
画像をダウンロードするためのボタン
ステップ3: バックエンドの作成
Node.jsとExpress.jsを使用してバックエンドを作成します。以下のエンドポイントを持つAPIを作成します。
POST /image: ユーザーから送られてきた文字列を受け取り、それを反映した画像を生成し、その画像のURLをレスポンスとして返す。
ステップ4: 画像処理の実装
sharpライブラリを使用して、ユーザーから送られてきた文字列を反映した画像を生成する処理を実装します。具体的には、以下の手順で行います。
開発者が用意したベース画像を読み込む
ユーザーから送られてきた文字列を指定された位置に描画する。フォントはNoto Sans JP、フォントサイズは16pt、文字列は中央揃えにする
画像をpng形式で保存する
ステップ5: フロントエンドとバックエンドの連携
JavaScriptを使用して、ユーザーがテキストボックスに文字列を入力したときに、その文字列をバックエンドのAPIに送信し、レスポンスとして返ってきた画像のURLを画像表示エリアにセットする処理を実装します。
また、ユーザーがダウンロードボタンをクリックしたときに、現在表示されている画像をダウンロードする処理も実装します。
以上が基本的な手順です。ただし、これはあくまで基本的な手順であり、実際の開発ではセキュリティ対策やエラーハンドリング、UI/UXの改善など、さまざまな追加的な作業が必要になることを覚えておいてください。
```
…なんかすごいそれらしいのが返ってきました。
ほんとかな？と思いつつ（画像生成をNodeのライブラリじゃなくてHTML Canvas使えばもっと構成シンプルになると思いましたが、今回はChatGPTのレスポンスに従います）、各ステップについての具体的なプロセスを聞いてみます。
ただ、これ細かく書いていたら平気で文字数が20000字を超えてしまうので割愛するのですが、
初期設定手順を示してくれたり、
コピペで動きそうなレベルのコードを出してくれたり、
よくわかんない答えを返してきたので具体的な指示を出し直したり、
欠落している説明を補完してもらったりしました。
エラーもChatGPTの回答を基に色々なおせた
で、色々用意して動かして見たんですけど、
エラーが返ってきました。
なんでエラーが返ってくるの？ってコードとエラーメッセージそのまま貼り付けたら、それっぽい事を言ってきたのでその通りに修正したら直りました。すごい
他にも不具合を出してる所に対して質問と回答を投げるのを繰り返し、
要件通りの物ができました。
思ったよりあっさりとできてびっくりしています。
見てくれや細かいチューニングは何も指示を出していないので継続して開発するのであれば改善が必要ですが、そのあたりも同様に生成型AIを活用することで実践できそうなイメージが容易に湧きました。
実際やってみての気づき
さて、実際やってみて思ったことは色々あります。
開発プロセスの基礎知識が無いと、AIに適切な指示を出せない
これはもう間違いないです。AIはインプットされた内容をもとにそれっぽい内容を出すだけなので、インプットの質が悪いと自ずとアウトプットも悪いものになりがちです。
わたしの場合はプロダクトマネジメントの知見に加えて開発実務の基礎知識があるため、ある程度適切な指示を出すことができたと思われますが、これを『プロダクト開発？なんですかそれ？』みたいな人にやってもらっても絶対にできないと思います。実際に試してみても良いですが、実験台の人に苦痛を与えたくないのでやりません。
ちなみに今回はエラー処理とかセキュリティとか何も考えていませんが、それもインプットに組み込むとどれくらい精度が高い結果が返ってくるのかは気になる所です。
完璧な物は出てこないので、デバッグは必要
ある程度前提となる情報とかも加味してくれるものの、生成型AIは『期待通りの完璧なものを出してくれる』わけでは無いです。
今回の場合も、出力されたコードの中に不具合が散見されたため、どこで不具合を起こしているかの情報をインプットする必要がありました。
コードをそのまま流し込んで解析してもらうというやり方でも解消されるケースも有りましたが、そうでない場合は手動でデバッグをしなければならないため、少なくともコンソールやログを見たりして考えられるくらいの知識が無いと詰むんじゃないかなと思います*。
ただ、今回はChatGPT縛りでやりましたが、Copilotとか含めてもう少し他のソリューションを組み合わせれば負担減になった気はしています。まだ夢は広がります。
でも、そのあたりをクリアできれば簡単なアプリは作れそうです
実際アプリ作れました。開発実務経験がほぼゼロのわたしが、です。しかも一時間半で。
これ結構革命な気がしてまして、内部向けの簡単なツールとか、技術選定と要件ぎめさえしちゃえばエンジニアがメインじゃないメンバーでも作れる芽が出てくるのでは…と思い始めます。しかも普通にコードをガッツリ使ったやつを。
なので社内ツール作成のハードルも結構下がりそうですし、生成型AIはちょうど旬のトピックなので内部から『われこそは！！』メンバーを登用して積極的に社内で実験も行う事もやりやすいです。
これは社内DX化が進むのでは！！！！！！！
…という雑な体験談記事を業務委託でも書くことが許されるK.S.ロジャースはLLMラボ『EDITH』を立ち上げました
日本の中小企業や官公庁のビジネスを更に加速させる上でLLMの技術は今後重要となってくると捉えておりまして、K.S.ロジャースではLLMの研究・実用化を推進する専門部署を創設いたしました。
K.S.ロジャース、生成AI・大規模言語モデル（LLM）の専門チーム「EDITH」を開設しSS事業を強化https://prtimes.jp/main/html/rd/p/000000027.000040108.html
社内外でパフォーマンスを発揮しているエキスパート達で構成されるチームにより、各方面の事業の加速を一緒に進めさせていただきます！
なお、noteにおいてわたしは『ジュニアレベル目線からのやってみた系記事』担当ですが、他にもビジネス側・技術側のプロ達が、圧倒的に専門性も質も高い、読みやすくてためになるしストレスも減って長寿にもつながるであろう感動レベルの投稿をしていただくはずです！！
さいごに
これの評判がよくて会社の利益に繋がったら『ちゃんと成果だしてるので報酬上げてください（＾＾）』の交渉をしようと思います！わたしは業務委託なので、成果出してナンボなのです！！！
よかったらスキ押してください！！おねがいします！！