この記事は、筑波NSミライラボ Advent Calendar 2023、7日目の記事です。
自己紹介
こんにちは！東京大学大学院暦本研究室に所属している今村翔太です！
この春に筑波大学情報科学類を卒業しました。ご縁があって、去年の筑波NSミライラボ2022に引き続き、今年も参加させていただいてます！
普段は拡張現実（AR）や大規模言語モデル（LLM）を使ったプロダクトを開発していたり、視線を使ったインタフェースの研究をしていたりします。
LLMでプログラミングをする
今回のアドベントカレンダーでは、そんな普段お世話になっているものの中から、特にLLMについて書いていこうと思います。
LLMといえば、代表格はOpenAI社のChatGPTが有名かと思います。
実は、このアドベントカレンダーを書いているのは11月30日。
そうChatGPTが誕生して1周年の日です🎉🎉🎉
去年の今頃、何やら話題になっていて触ってみたらすごくて感動したのを覚えています。
当時は今でいうGPT-3.5で、まだまだ限界もありつつも、それでもそれまで経験がしたことのない様なレベルの応答性能や論理力、知識のカバー幅に驚かされました。
確か最初に試したのは旅行プランニングだったと思います。必要な提案をしつつ足りないところはヒアリングしながら、旅行プランを立ててくれました。ちょっと間違っているところはありつつも、とはいえそれまで専用の旅行用会話エージェントでさえも、そこまでのものを見たことがなかったので、これから世界が変わっていくんだという実感を得られたのを覚えています。
さらに、ChatGPTで驚いたのはその後の性能向上です。
去年の12月にはWebの検索ができないのが玉に瑕と思っていたら、今年の3月には対応したり、GPT-4が出てきて性能もコンテクストの長さも飛躍的に伸びていったりとその進化の様には驚きの連続でしたよね。
正直なところ、一年前までChatGPTが存在していなかったのが信じられないほど今ではお世話になっています。
さて、そんなChatGPTの個人的な活用方法で一番重宝しているのが、開発支援になります。
プログラミングで時間がかかることといえば、
・使い慣れていない新しい技術のドキュメントなどを漁りながら学習しつつ手探りで実装していくところ
・できたと思ってからが長いデバック（でいて、変更箇所は数文字程度だったりする）
などかなと思います。
LLMの代表格であるChatGPTの有料版を活用すると、そんな開発の体験やかかる時間が飛躍的に改善するので、まだChatGPT Plus（月3000円）に課金していない人たちが課金したくなるような紹介をできればと思います。
（無料版より圧倒的に有料版がおすすめです。入力できる情報量も速さも回答のクオリティも周辺機能も別物のように違います。）
なお、この記事はOpenAI社のプロモーション記事で…はありません。
ミライラボの紹介HPのキービジュアルを作る
ChatGPTでの開発の支援の紹介をするにも何か題材があった方が良いので、ミライラボの紹介をするHPの最初に出てくるキービジュアルの様なものを作るという想定のもと紹介していこうと思います。
イメージは以下のような形で筑波大の背景画像の上に「筑波NSミライラボ」という文字が載るようなサイトにします。ただそれだけでは面白くないので、画像の下段に雑に書いたようにバウンスして文字が揃うといったアニメーションをJavaScriptで実装していこうと思います。
ちなみに僕は普段はWebはほとんど触らないので、久々にHTMLやJSの拡張子のファイルを作成します。
なので、去年までなら、まずはGoogleで「JavaScript 画像 動かす」なんて検索して、色々記事を眺めたり、公式（？）ドキュメントを探したりするところから始めるところです。
今年は違います。
まず、chat.openai.com を開いて、この画像を貼り付けて、やりたいことを書きます。
そう、ChatGPTは今年の夏頃から有料版はテキスト入力と一緒に画像入力も使える様になっています。
「筑波NSミライラボ」という筑波大とNS高校の高大接続企画のHPのキービジュアルを作成したいです。イメージは添付写真のように、背景画像の上に、「筑波NSミライラボ」という文字がバウンスして入ってくるものです。「筑波」をtsukuba.png、「N」をn.png、「S」をs.png、「ミライ」をmirai.png、「ラボ」をlab.pngとして用意しますので、それらをバウンスさせてbackground.pngの上の、中央に並べるJavaScriptとHTMLのコードを実装してください。回答は日本語で
こんな感じで画像とやってもらいたいことを入力していきます。
するとコードや説明を出力してくれます。
コードブロックをコピーしてHTMLファイルに貼り付けます。
調整していく
HTMLファイルを開くと、確かに文字はバウンスしています。
でも作りたいのとは違う。
今までも技術がなくても開発できるというので、ノーコードでプログラミングとかはありました。ただ、プログラミングも一定できる人からすると、痒いところに手が届かない、大枠を作ってからカスタマイズしずらい（できるのもある）と言ったところがありました。
でも、ChatGPTは違います。
もう一度指示を出してみます。
「二枚目の画像の下段のように文字画像が周りからバウンドしながら入るように実装を変更してください。」
コードをアップデートしれくれました。それをHTMLファイルに動かして確認してみます。
スライドして動くようにはなりました。
が、直線的な動きです。最初のイメージとは異なります。
もう一声、続けて、「文字を直線的ではなくて、左右から放物線上にバウンスして入ってくるようにして。また配置は一直線に並ぶように」
だいぶ良くなりましたが、集まる場所が外れてしまいました。
イメージ通りのものがほぼコピペだけで完成!
ただ、ここまでで、なんとなくどうやればいいのかの雰囲気は掴めたので、最後は人力でコードの微修正をして位置を調整するといい感じに文字画像がバウンドしながら中央に揃うサイトのキービジュアルの様なものが出来上がりました。
といった感じに、不慣れな分野の実装でも、簡単に手を出して動くものを作ってみれるようになったというのや、原因不明のバグをすぐに特定して、解決策を提示してくれるといったとこがとても助かっています。
今回は簡単な例をとって試してみましたが、普段の研究やプロダクトの実装や研究データの分析においても、実際に大変お世話になっています。（これは僕に限らず、他のラボメンバーなども異口同音という感じです。）
ぜひ、まだ試してみたことがない方は試してみるといいかもしれません。
逆に、皆さんのChatGPT Plusの活用方法で、こんないいものがあるなどがあればぜひ教えてください！！
注意事項：プログラミングの基礎的な知識やスキルはあった方が使いこなせるので、そこはサボらないようにした方がいいかと思います。