非エンジニアがChat GPTを使ってコーディングしたら、開発生産性が恐ろしく上がった件

AS

生成AI活用に関して、以下の本が勉強になりました。

現時点においてChatGPTを重要な決定を下すためのたしかなツールとしてでなく、専門家の生産性を大幅に向上させるツールとして使用するべきだと思います。

AI DRIVEN AIで進化する人類の働き方

この一文に、激しく同意しました。
ChatGPTは私の感覚だと、「超がつくほど、優秀な若手」というイメージです。

  • 地頭がとんでもなくよく、適切にインプットしたら、ものすごいスピードでアウトプットする

  • ミスに対していくら詰めても全くめげずに、代替案をいくらでも提案してくる

  • 一方で、「若手」なので、信じられないような間違いを平気でする。大きな誤りをしていないか慎重にレビューをしないといけない

そんな優秀なChatGPTとどう一緒に働くかですが、プロダクトマネジメントの領域は広く、「専門性」というときにどの領域で活用するのかは悩まし部分があります。

ここ数カ月、私の場合は、以下のような活用をしています。

ChatGPTの利用はしない方がいいケース


まず、明らかに間違ったことをいうケースだと、コンテンツマーケティングのための記事作成があります。作成した記事について大枠は問題ないのですが、ファクトベースのコンテンツを書くのが非常に下手で、間違いだらけの内容を書きます。
「〇〇の事例について文章を書いて」というインプットに対して、世の中に存在しない事例をもとに記事を作ったりします。「これは本当に存在する事例ですか？」と質問すると、「これはChatGPTを考えた架空の事例です」と平然と回答するような状況です。ソースを聞いても、正しい情報を返してくれることは少ないです。

質問したら誤りは認めてくれるのですが、超賢いので、あたかも本当のように架空の事例を作ってきます。
何かを意思決定するような時に数値・ファクトとしてChatGPTを利用するときには、必ず裏どりをした方が良いです。

ChatGPTの利用で、恐ろしく生産性が上がったケース

一方で、エンジニアリング・コーディングの品質はかなり高いと言えます。

私は非エンジニアですが、エンジニアにコーディングの依頼をするときの感覚でChatGPTに実現したい要件をインプットしていきます。

たとえば、WebサイトのUI改修をするときに、以下のようなインプットをします。
まずは概要をインプットします。

概要

WebサイトのUI改修を行います。
〇〇の要素をより見やすくしたいです。
HTML・Javacsript・CSSの調整をしてください。

アウトプットするときに、HTML・CSS・Javascriptをそれぞれわけてください。

元のUIについて、HTMLは以下です。
<ul class= *** </ul>

ビジュアルイメージ・ドキュメンテーションで要件のインプット

これに加えて、デザインしたワイヤーフレームを画像でインプットします。CSSの変更要件がビジュアル・ドキュメントでわかるように提示します

変更後のUIのイメージは以下です。ワイヤーフレームを参照してください。
・〇〇の要素を削除
・テキストの順番を入れ替え
・フォントサイズの変更
が要件です。

エラー解消

作成したコードをWebサイトに適用した時に、エラーが発生することがあります。その場合はエラーの修正もChatGPTに依頼します。

以下のエラーがでました。コードを修正してください。
'const' is available in ES6

エラーが解消されましたが、対象要素にUIが適用されませんでした。
そのため、コードの問題を調査してもらい、その結果を修正してもらいます。
今回は別件のUI改修案件で動作するコードがあったので、それをインプットしました。

UIが変化しません。要件が異なりますが、以下のコードであればUI変更が適用されました。このコードを基に、スクリプトを修正してください。
(function() { ***  })(); 

要件の分解


そのうえで、個別の要件を実現できるか順番に検証していきます。
簡単な要件からチェックしていきます。

上記のコードを参照して、フォントサイズを変更するスクリプトを書いて下さい。

チェックできたら、より複雑な要件をテストしていきます。

テストが成功しました。
それでは、いくつか要件を追加していきます。

子要素にある3行のテキスト要素の順番を変更したいです。
以下の順番に並べ替えて下さい。

・1番目
＜CSSセレクター＞
・2番目
＜CSSセレクター＞
・3番目
＜CSSセレクター＞

順番が入れ替わずコードがうまく動作しなかったので、それをChatGPTにインプットします。コード修正を何度か依頼しましたがうまく動作しなかったので、原因についても聞いてみます。

順番が入れ替われませんでした。コードを修正して下さい。
また、原因として考えられるものは？

それに対して、以下のような回答がありました。

  • セレクターの誤り: セレクターが正しく指定されていない可能性があります。

  • ページの読み込みタイミング: DOMが完全に読み込まれる前にスクリプトが実行されている可能性があります。

  • JavaScriptエラー: 何らかのJavaScriptエラーが発生している可能性があります。

1点目2点目は問題ないことがわかったので、、Javascriptエラーを一緒に解消してもらうために、以下のような投げかけをします。

セレクターの誤りはありません。 ページロードも問題ないです。 JavaScriptエラーと考えられます。 コードの誤りと思われる個所を一緒に探してください

それでも原因がわからないので、以下のような指示を出します。

原因がわからないので、要件を変更します。
ステップバイステップで本来の要件を実現していきましょう。

Javascriptエラーが解消されたので、細かいUIの調整をしていきます。

基準となるコードができたので、これをベースにUIの調整をします。
・〇〇の要素と△△要素の間に2pxのマージンを追加してください

このようにChatGPTにコーディングを依頼する際には、以下がコツです。

  • 概要を伝える

  • 作業の前提を伝える

  • アウトプットのイメージを伝える

  • 要件は簡単な要素に分解して順番にアウトプットしていく

  • エラーが出たらその内容を伝えて修正してもらう

  • エラーの原因が分からなかったら原因を考えてもらう

コーディングがなかなか身につかないことが長らくコンプレックスだったのですが、ChatGPTを使い倒したらきちんと動作するコードをかけました。
コードが動作することにすごく感動したので、noteを書いてみました。

上記のポイントは、コーディングに限らず、他の専門的なアウトプットを出してもらう際にも共通することかと思います。
今後も、プロダクト開発や生成AI活用といった記事コンテンツを書いていきたいと思います。

参考になる情報があったら、ぜひ、「いいね！」をお願いします。


この記事が気に入ったらサポートをしてみませんか？