Shingo Sakamoto

Apr 20, 202316 min read

プログラミング初心者がChatGPTに相談しながらソフトウェア開発してみた

2022年11月にOpenAIがChatGPTをリリースしてから半年近く経過しましたが、引き続きGenerative AIには大きな注目が集まっているように感じます。

TwitterやFacebookでは、毎日のようにユーザーのプロンプト（AIに対する命令文）とChatGPTの回答文が載ったスクリーンショットがタイムラインに流れていますが、リサーチに使う人、アイディアのブラッシュアップに使う人、面白おかしいやりとりを通じて笑いを誘おうとする人等、使い方は人それぞれです。

ChatGPTをはじめとするGenerative AIに対する期待値も、「これは人々の働き方を大きく変える技術だ」というものから、「そうは言うけれど明確なユースケースはあるのか？」というやや懐疑的なものまで、混ざり合っているような印象です。

そんな中、いろいろな人の話を聞くうちに、「どうやら現時点では、特にプログラマーの方々が、ChatGPTを熱心に活用しているらしい」ということを知りました。プログラミングスピードが、ChatGPT登場以前に比べて、格段に早くなった、という声をいくつか聞いたのです。

そこで今回は、プログラミング経験がほんの少しだけある（友人に教わりながら2ヶ月間ほど学んだ）程度の筆者が、ChatGPTに相談しながらソフトウェアサービスをつくってみる、というプロジェクトを通じて、ChatGPTのインパクトを自ら感じて考察してみたいと思います。

（Source: Stable Diffusionで「An amateur developer tries to make his first software product」というテキストを打ち込んで生成）

何をつくるか？

まずはじめに、「何をつくるか？」というところからスタートします。実は、こういった「アイディア出し」自体もChatGPTは手伝ってくれますが、今回は私の方から提案することにしました。

今回は、「親が、自分の子供を主人公にした絵本を、簡単につくれるウェブサービス」にトライしてみることにします。（*この時点で、それがどれくらい難しいのか、自分一人でできそうなのか、全く見通しがついていません。）

もう少し具体的に想像を膨らませてみると、「普段は仕事で忙しいお父さんが、日中はなかなかかまってあげられない子供のために、夜寝る前に毎晩違う絵本を読み聞かせるために、子供を主人公とした絵本を素早く簡単につくりたい」というニーズに応えるサービスになります。

もちろん絵をつけることも技術的に可能だと思いますが、少し開発が複雑になりそうなので、今回はストーリーを生成するところまでで一区切りとし、ストーリーに合わせた絵の生成は省略します。

私が思い描いたサービスイメージは、あるウェブサイトにログインし、そこに「子供の名前」「年齢」「舞台」「登場する動物」「伝えたい教訓」を入力すると、AIが自動でストーリーを生成する、というものになります。例えば、「ゆうた」「1歳」「不思議の国」「ネズミ」「友情」と入力すると、15ページの絵本にちょうど良い長さのストーリーが出来上がるイメージです。

まず、こういった構想自体が実現可能そうか、ChatGPTにお願いしてみました。

（Source: https://chat.openai.com/）

どうやら、なんとかなりそうです。なお、「この内容の薄さでは、15ページに足りないのでは？」と思いましたが、その点も質問してみるとちゃんと考えがあるようなので、大丈夫そうです。

（Source: https://chat.openai.com/）

完成したサービスの紹介

先に結果のご報告です。

以下のようなサービスが完成しました。まずは、以下のデモ動画をご覧ください（デザインも何もせず、本当にただ最低限の機能が搭載されているだけの状態です）。

（Source: https://www.youtube.com/watch?v=aw5wbyJFc70&feature=youtu.be）

また、メインプログラムのコードも載せておきます。

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.set('port', process.env.PORT || 3000);

// app.jsからviewsディレクトリを指定
app.set('views', './views');

app.set('view engine', 'ejs')

// JSONのパースに必要なミドルウェアを設定
app.use(bodyParser.json());

// HTMLフォームのパースに必要なミドルウェアを設定
app.use(bodyParser.urlencoded({ extended: true }));

// ルートの定義
app.get('/', (req, res) => {
    res.render('index', {
        title: "365 Picture Book",
        message: "Welcome to 365 Pitcure Book! This allows you to make original picture book every day by Generative AI"
    });
});

app.get('/new', (req, res) => {
    res.render("new")
});

// エラーハンドリングの設定
//app.use(function(req, res, next) {
    //res.status(404).send('404 Error');
  //});

// サーバーの起動
app.listen(process.env.PORT || 3000, function() {
    console.log('Server started on port 3000');
  });

app.post('/submitMetaInfo', async function(req, res){
    // フォームからのテキスト入力を取得
    const inputText = " 息子が主人公の絵本を作りたいと思っています。ただ、私は忙しくてストーリーを考える時間がないので、あなたにお願いしたいです。\
                        以下のルールに従って、ストーリーを作ってください。\
                        ・全体で10ページの絵本にする予定です。1ページあたり、2〜3文で構成されています. \
                        ・表示するときには、ページごとに段落を分け、【ページ番号】を振ってください。ページごとに改行してください\
                        ・主人公の名前は" + req.body.child_name + "です。\
                        ・主人公の年齢は" + req.body.age + "です。\
                        ・舞台は" + req.body.field + "です。\
                        ・登場人物は" + req.body.character + "です。\
                        ・ストーリーから息子が学ぶべき教訓は" + req.body.lesson + "です。\
                        ・これらの情報を単にくっつけるのではなく、クリエイティブに発想して、思わず息子が聞き入ってしまうようなフィクションの世界をつくってください。";

    // フォームからOpenAI APIにテキストを渡し、ストーリーを生成して、new.ejsに渡す
    const { Configuration, OpenAIApi } = require("openai")
    const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
    })
    const openai = new OpenAIApi(configuration)

    const completion = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: inputText,
      temperature: 1,
      max_tokens: 1024
    })
    console.log(completion.data.choices[0].text);
  
  // 生成されたストーリーを別のURLに渡す
  res.render("story", {
    title: "this is a story for your son...",
    story: completion.data.choices[0].text
    })
});

（Source: 筆者作成）

振り返り（まとめ編）

少し長くなるので、先に振り返りをまとめておきます。後半では、より開発プロセスの詳細を記載していく予定です。

なんとか完成させることができた。
かかった時間は、約15時間ほど。ただし、次回以降は半分くらいの時間でつくれそう、という感覚。
Google検索を一切行わず、ChatGPTに相談するだけで8割くらいはつくれる。ただし、その先の2割を埋めるためにはGoogle検索・経験者への相談・自己学習が必要。
プログラミングといっても、さまざまな工程があるが、エラー解読・プログラムの叩き台づくりにおいては、従来をはるかに上回るスピード。
現時点でChatGPTは、（1）「初心者がプロダクトをつくれるようにナビゲーションしてくれる」というより、（2）「一定の知識・経験がある人がプロダクトをつくるスピードを早める」ツールとして優れた効果を発揮するという所感。
- （1）「初心者がプロダクトをつくれるようにナビゲーションしてくれる」というより →これは、ChatGPTのアウトプットが確からしいのか判断するのに時間がかかるため。もちろん、プログラムが確からしいかどうかは「プログラムが正常に動作するか」という観点から判断できるものの、それでも時間がかかる。
- （2）「一定の知識・経験がある人がプロダクトをつくるスピードを早める」ツール →ChatGPTのアウトプットを評価できる人は、すぐにChatGPTにフィードバックし、より精度の高いアウトプットを引き出すことができるため。例えば、ChatGPTに「こんな動作をするプログラムを書いて」と依頼してアウトプットが返ってきた場合、私は「ありがとうございます！これでやってみます！」と持ち帰り、プログラムを起動して生じたエラーを読み込ませて、と繰り返す一方、これが経験者であれば、最初のアウトプットに対して「いや、これは多分こういう原因で動作エラーを起こすから、違うアプローチにして。」と早めに改善ができる。小さな違いだが、こういった手戻りの積み重ねが大きな時短を生む。

それでは、次章以降、実際に私が試行錯誤しながらChatGPTと一緒に取り組んだサービスづくりを振り返っていきます。

振り返り（詳細編）

お時間がない方は、こちらの章は飛ばしていただいても構いません。

前提

ChatGPTのバージョンは、GPT-3.5を利用
数年前にPythonというプログラミング言語を、2ヶ月間くらい勉強した経験あり（ただし、ほとんど覚えていない）

アーキテクチャの把握

まず、作りたいサービスが、どのようなアーキテクチャになっているのか、ざっくり把握するところから始めます。

今回は、過去に一度も使ったことのない言語で実装するのが良いと思い、言語はJavaScriptにしました。また、ストーリー生成の部分は、ChatGPTが公開しているAPIを利用することにしました。

早速、ChatGPTにアーキテクチャを示してもらうと、以下のような回答が返ってきました。

（Source: https://chat.openai.com/）

ディレクトリ構造の把握

本来はクラウドサーバーを使って、誰でも利用できるようにすべきですが、工数が増えてしまうため、ローカルサーバーで動作を確認できるところまでをゴールとしました。ChatGPTにその旨を伝えると、具体的に次に何をすべきか、指示を出してくれます。

（Source: https://chat.openai.com/）

ですが、このまま走り出してしまうと危険です。というのも、先ほど提示してもらったアーキテクチャに紐ついた、ディレクトリ構造を知る必要があるためです。そこで、ディレクトリ構造を聞きます。

（Source: https://chat.openai.com/）

これだけではよくわからないので、それぞれのディレクトリ・ファイルの役割を聞いておきます。

（Source: https://chat.openai.com/）

ちなみに、こういった説明がわかりづらい場合は、教え方のレベルを調整することが有効です。例えば、先ほどのディレクトリに関する解説を、小学1年生でもわかるように教えてもらうことができます。

（Source: https://chat.openai.com/）

この後、いくつか私の方から要望を伝え、結局、以下のようなシンプルなディレクトリ構造にすることになりました。

（Source: https://chat.openai.com/）

開発環境を整える

それでは、次に上記のディレクトリ構造に基づき、それぞれのファイルをつくっていくことになります。ただ、その前に、ライブラリ（アルゴリズムをまとめたプログラムの集合体のようなもの）のインストール、エディタ（プログラムを編集するためのツール）の準備等、開発環境を整備します。

（Source: https://chat.openai.com/）

なんとなくやることはわかったので、具体的にやることまで指示をもらいます。このあたりからは、心理的にも、上司（筆者）→部下（ChatGPT）ではなく、完全に上司（ChatGPT）→部下（筆者）に、逆転しています（笑）

コードまで書いてくれるので、基本的にはコピペするだけで、指示通りに進めることができます。必要なライブラリがたくさんあるので、ひたすらインストールしていきます。

ディレクトリとファイルの作成

一通りの開発環境整備が完了したら、ディレクトリとファイルを作成していきます。

（Source: https://chat.openai.com/）

そして、メインファイルである、app.jsというJavaScriptのファイルを作成していきます。これも「コードを教えてください」というリクエストに対して、数秒で回答が返ってきます。

（Source: https://chat.openai.com/）

便利だとは思いつつ、どうしてもコードだけ見てもよくわからない部分があります。そこで、「1つ1つのコードの働きを解説してくれませんか？」と頼むと、まとまりごとに解説してくれます。これは、大変ありがたいです。

（Source: https://chat.openai.com/）

そして、細かいところまでわかりきらないまでも、だいたいどんなことをやろうとしているかわかったら、Visual Studioというエディタにコピペし、次の指示を仰ぎます。

（Source: https://chat.openai.com/）

ChatGPTは、「次は、まずそのファイルが正常に動作するか、プログラムを動作させてみなさい」と言っています。そこで、実際に動作させてみると、エラーが出ました。そして、エラーをそのままコピペすると、エラーを解消するために必要な作業を教えてくれます。

（Source: https://chat.openai.com/）

この作業は、決してラクとは言えません。以下のように、何度もトライしてはエラーが出て、を繰り返して、最終的にエラーがなくなるまで頑張ります。

もしChatGPTに聞いても問題が解決できなければ、Google検索や、知見のある方に相談されるのが良いかと思います。私は、1〜2箇所、どうしてもわからない点があり、プログラマーの知人に質問しました。

この点、プログラマーに質問するにしても、ChatGPTと会話して一定の理解が深まっているため、具体的な質問ができるようになっているように感じました。

また、私は常に「いまどれくらいの進捗なのか」を把握したいタイプなので、こまめにこんな質問をしていました。これは、Google検索では得られなかった情報であり、心が折れそうになった時に「ここまできてるんだから頑張ろう」という気持ちにさせてくれました。

（Source: https://chat.openai.com/）

あとはもうひたすらに必要なファイルの叩き台を作ってもらい、エラー処理し、動作確認する、という作業の繰り返しです。

最終的に、なんとなく思い描いていた動作を確認できたら、今回のミッションはクリアです。

ChatGPTが優れているところ

エラー処理能力が高い

エラー処理、というタスクが、ChatGPTによって大幅に改善されたように思います。プログラムを書くと、当然一回ではうまく動作せず、エラーが出てしまうことの方が多いのですが、「そもそも、どんなエラーが出たのか、どうしてエラーが出たのか、どうすればエラーを解消できるのか」の解読に時間を要します。

（Source: 筆者ターミナル画面）

このエラー処理というのは、なかなか骨の折れる仕事です。特にプログラミングに慣れていない自分は、「そもそも、どこからどこまでがエラーメッセージなのかわからない」「エラーの意味がわからない」「Google検索のためにコピペしようにも、エラーが長すぎて検索ヒットしない」等の強い課題を抱えていました。

それが、ChatGPTには、エラーメッセージと思われる箇所をコピペして、「以下のようなエラーが表示されています」というだけで、エラー解析をしてくれるようになります。

（Source: https://chat.openai.com/）

プログラムの修正提案

プログラムを走らせてみて、エラーが出たら、エラーメッセージを読み込ませて、プログラムを修正し、またプログラムを走らせてみる。すると、また違うところでエラーが出て、エラーメッセージを…

というサイクルを続けているうちに、「プログラムを走らせる前に、とんちんかんなプログラムになっていないか確認したい」と思うようになりました。そこで、プログラムを走らせる前に、エラー処理の時を参考に、「以下のコードの問題点を教えてください」とプログラムを丸ごとコピペしてみました。

（Source: https://chat.openai.com/）

すると、「このコードには、以下の問題があります。」と文頭に添えて、コードの修正案を解説付きで提示してくれます。

（Source: https://chat.openai.com/）

解説付きでコードの間違いを指摘してくれるというのは、まさに真横にコーチがつきっきりで指導してくれているような感覚です。エラーの解説スタイルについても、カスタマイズ可能です。特に初心者の場合、「なぜ修正する必要があるか、小学生にも分かるように教えてください」と付け加えれば、平易な言葉で、順序立てて教えてくれます。

これまでは、エラー処理も、プログラムの修正も、Google検索で、頭を悩ませながら解決方法を模索するのが王道でしたが、ChatGPTの登場によって、その作業がゼロにはならないにしても、大幅に負担が削減できる感覚を持ちました。

もちろん、Google検索によって、試行錯誤する力が身につき、結果としてプログラミングが上達する、という側面はもちろんあると思います。一方、「上達よりも、とにかく動くものが早く作りたい」という人にとっては、この上なく強力なツールを得たと言えるかもしれません。

質問に対する心理的ハードルが下がる

AIなのでいくら質問しても嫌な顔一つせず答えてくれます。これによって、質問に対する心理的ハードルを大幅に下がります。

すごく当たり前のように聞こえますが、相手が人間の場合にしつこく質問することは、意外と質問者にストレスがかかるものです。非常に些細な点について質問したり、回答がよくわからなかった時に再質問したりするには、質問者・回答者の間に、それなりの信頼関係が構築できていないと、難しいでしょう。

さらに、質問している側が「わかりやすく教えてください」と指示できることも、人間相手ではなかなか難しいでしょう（教わっている立場なので、わかりやすく教えてください、と言いづらい場合もある）。

以下の例では、筆者がズケズケとChatGPTに質問を繰り返している様子です。質問→確認→質問→確認、を繰り返していくうちに、一気に知識が蓄積されていくような感覚を持ちました。

（Source: https://chat.openai.com/）

利用時の課題

大事な回答が流れていってしまう

例えば、実際にプログラムを書き始める前にディレクトリ構造を決めますが、ディレクトリ構造は何度も参照することになります。

（Source: https://chat.openai.com/）

一度ディレクトリ構造を示してもらった後、各ファイルにプログラムを書いていきますが、会話はどんどん進んでいくので、示してもらったディレクトリ構造が上方に流れていってしまいます。

これと同じ現象が、コミュニケーションツール（Slack、Teams、Google Chat、etc）で起きていますが、いずれも検索機能がついていますので、ChatGPTにもいずれ検索機能がつくかもしれません。

検索機能もそうですが、Slackでいう「ピン留め」（後からみたいスレッドを、すぐに参照できるよう固定しておく）機能もあると便利かもしれません。

時間をおくと、回答の一貫性が損なわれる

あるトピックに関する質問に回答してもらい、「ふむふむ」と思い、しばらく違うトピックについて話してから、もう一度元の質問をすると、全然違う回答を返すことがあります。（以下の写真は、エラー処理で疲弊している中で、ついChatGPTに強く当たってしまった様子です。）

（Source: https://chat.openai.com/）

これは、ChatGPT側の仕組み上、会話の記憶時間に上限を設けているためだと思われます。

初心者が、ChatGPTを活用してサービスをつくってみる、というプロジェクトはここまでとします。

便利なAIチャットサービスのご紹介

最後に、ChatGPTの他に、私が最近日常的に使うようになった、便利なAIチャットサービスを2つご紹介いたします。もしよろしければ、一度試してみてください。

Perplexity

1つ目がPerplexityです。ChatGPTはHallucination（幻覚を表す単語で、しれっと嘘をつく）という弱点を抱えており、多くの人が「検索には使えない」と言っていますが、Perplexityは、その課題を解決しようとしています。

（Source: https://www.perplexity.ai/search/7dc3d8a9-1a8d-4505-bf43-326be84a25ac?s=u）

このサービスは、Google検索とChatGPTを足して2で割ったようなサービスです。自然言語で質問し、自然言語で回答してくれる点においてはChatGPTと同じですが、インターネット上のソースを提示しながら回答を生成する点が、ChatGPTと異なります。

もう1つ、このサービスが持つ魅力として、「スピード」が挙げられます。質問してから回答が全て生成されるまでにかかる時間が非常に短く、ストレスをほとんど感じさせません。

一方で、その犠牲になっているのが、「クリエイティビティ」です。例えば、先ほどのHallucinationの説明を、小学1年生にもわかるように教えて、と言っても、ChatGPTほどわかりやすくしてくれません。

（Source: https://www.perplexity.ai/search/7dc3d8a9-1a8d-4505-bf43-326be84a25ac?s=u）

ちなみに、同じやりとりをGPT-4ベースのChatGPTと行なった際の回答がこちらです。

（Source: https://chat.openai.com/）

ChatGPTの方が、より小学1年生に最適な文章スタイルになっています。個人的には、Perplexityのような検索体験を提供しつつ（ソースに基づいた回答を生成しつつ）、ChatGPTのようにクリエイティブに文章を生成してくれるサービスが望ましいです。

ChatPDF

ChatPDFは、文字通りPDFを読み込んだAIとチャットができるサービスです。

新たな論文が発表された時、（特に日本語ではない言語で）数十ページにわたる論文を読むのは、時間と労力が必要になります。それでも、最新の論文を把握し、テクノロジーの動向をウォッチしたい。そんなニーズに応えるのがこのサービスです。

試しに「Summary of ChatGPT/GPT-4 Research and Perspective Towards the Future of Large Language Models」という論文を、読み込ませてみます。

（Source: https://www.chatpdf.com/）

論文の内容に基づいて、自然言語による質問に答えてくれます。また、一定のクリエイティビティ（書かれていることをただそのまま教えてくれるのではなく、例え話ができる）は持っているようです。

（Source: https://www.chatpdf.com/）

自分は、難しい言葉が並んでいる文章を読むのが非常に苦手なため、わかりやすい言葉に翻訳して中身を知ることができて、大変助かっています。

今回はこれで以上となります。私も、実際にプログラムを書いたり、毎日ChatGPTと会話したり、続けているうちに、この技術は本当に働き方を大きく変えていくのではないか、と思うようになりました。実際、こういったツールを使い始めてから、自分の場合はGoogle検索の頻度が明らかに減っています。長年Google検索に頼ってきましたが、記事を1つずつ読んで、自分が知りたい箇所を調べる、という「当たり前」が壊れ始め、自分自身とても驚いています。

こういった変化は、きっと各産業に広がっていくと思いますので、引き続き最前線の動きを追いかけていきたいと思います。

IDATEN Ventures（イダテンベンチャーズ）について

フィジカル世界とデジタル世界の融合が進む昨今、フィジカル世界を実現させている「ものづくり」あるいは「ものはこび」の進化・変革・サステナビリティを支える技術やサービスに特化したスタートアップ投資を展開しているVCファンドです。

お問い合わせは、こちらからお願いします。

今回の記事のようなIDATENブログの更新をタイムリーにお知りになりたい場合は、下記フォームからぜひ IDATEN Letters に登録をいただければ幸いです。

プログラミング初心者がChatGPTに相談しながらソフトウェア開発してみた

振り返り（詳細編）

ChatGPTが優れているところ

利用時の課題

便利なAIチャットサービスのご紹介

Recent Posts

Commentaires