見出し画像

React/Next.js、Tailwind CSS未経験の医師がChatGPTのAPIを使って理想的な1日の食事プランを提案するWEBアプリを開発してみた

数週間前に以前通っていたエンジニア・起業家養成スクールであるG‘s academy主催のChatGPT勉強会にオンライン参加しました。

G’sを卒業して1年半、1文字もコードを書いていなかったのですが、勉強会でChatGPTのAPIを使って数々のプロダクトを開発された方々のお話を伺って、俄然刺激を受け、私も久しぶりにアプリ作ってみようと思い立ち、久しぶりにvisual  studio codeを開きました。

色々と気づいたことがあったので書いていこうと思います。

ChatGPTは新しい事を学ぶ上で良い先生になってくれる

G‘s academyではHTML、CSS、Javascript/Vue.js、PHP/Laravelを習いました。今回のアプリ開発は全く学んだことがなかったReactとReactをベースに開発されたNext.jsが開発現場で使われる頻度が多くなっていると何となく聞いていたので、せっかくなので未経験のものでチャレンジしたいと思いReactとNext.jsを使ってWEBアプリを作ってみました。ついでにCSSはTailwind CSSを使いました。

そこで全く触れてこなかったものを使うにも、何からやったら良いのか分からなかったので、ChatGPTに全くの初心者に教えるように手取り足取りステップバイステップで教えてもらいました。まずReact/Next.jsを使ってアプリ開発をするための環境構築のやり方や、基本的な概念と考え方など、ちょっとでも分からないことは何でもGPT先生に質問をして、その都度教えてもらいました。

またYoutubeでしまぶーのIT大学のしまぶー大先生の動画も参考にしました。ありがとうございました。

ChatGPTを使ってて気づいたことは、
AIが先生だと、どんな馬鹿げた質問をしてもイライラしたり、起こったりなどすることがなく、とても真摯に丁寧に、そしてこちらが求めれば小学生でもわかるような例えを用いて分かりやすく根気強く教えてくれるということです。伸び伸びと学ぶために必要な絶対的安全空間という環境がいつもそこにあり、いつも味方でいてくれるというのはとても有り難い存在だと感じさせてくれます。特に新しい事を学ぶ上で、人間先生にあまりにも初歩的な質問をしたり、馬鹿げた質問をすることは躊躇してしまいがちですが、AI先生には躊躇する必要がないので、こちら側に主導権を保てたまま自分のペースで学習を進めていけます。

余談ですが、新たな分野を学ぶことも本屋で教科書を買わなくても、ChatGPTで学習できます。例えば「全くの知識のない人が経営学について3週間で学ぶためのカリキュラムを作って、1日毎に何を学べばいいかプランを作って」のような事をプロンプトに投げれば、3週間のカリキュラムを作ってくれて、さらに1日単位で何を学習すべきかを教えてくれます。さらに各項目についてそれぞれを挙げて、「カリキュラムの第〇日目の〇〇のテーマについて具体的な内容、抑えるべきポイントを教えて」と言えば、教科書に書かれているような内容が学習でき、さらに分かりにくい内容も自由にAI先生に質問して掘り下げていく事も出来ます。

私はChatGPT plusを契約していて、あまりにもたくさん質問をするので、たびたび3時間あたりの使用制限の上限にかかってしまい、次使うまでに1時間程度待機する必要があったのがややネックでした。まぁその間GPT-3.5を使っていれば良いのですが。

日本語も相当なレベルのプログラミング言語

今回はアプリ開発だったので、基本的にChatGPTとはプログラミングというかコードに関してのやり取りが中心でした。コードに関しても普通の言葉でどういうコードを書いて欲しいのかをプロンプトで入力すると適切なコードが返ってくるとは聞いていたものの実際にやってみるとあまりにもこちら側の言語をちゃんと理解した上で適切なコードが返ってくるのには驚きました。最近英語が最強のプログラミング言語だとよく言われていますが、とても良く言い当てていると思いました。そればかりか、日本語でも十分すぎるぐらいちゃんとしたコードが返ってきて本当に驚きました。

簡単なHTMLの基本的な生成やjavascriptなどの関数なども細かな言語での指示で作ってくれます。

それでも基本的な知識や技術はあった方がいい

しかし、それでもやっぱりエラーというのは結構起きます。特に自分が思っているイメージ通りのアプリにしようと思えば、それだけ機能が増えたり複雑化してきます。そうした場合にただ完璧にコードのコピペだけだと壁にぶち当たります。エラー文をそのままChatGPTに投げて解決できる場合もあれば、結局そのコードの意味をきちんと理解し、自力でエラーを解消する必要があるときも出てきます。もちろん誰にも使われないようなシンプルなアプリや簡単なWEBページであればプログラミングの知識は全くいらないかもしれませんが、やはりイメージ通りにしたければ、Chat GPTが提供した当たり障りのないコードをカスタマイズしたり修正したり、エラーの解消をしなければならないと思います。

そういった意味では、現時点では出来るエンジニアはChatGPTを使って誰でも書けるコードに時間をかけず楽をしてより効率的に開発ができるので、エンジニアと初心者との差は開いてくると思います。しかし、初心者でも上記のように学習コストがかなり下がるという意味でも、日本語という言語でコードが返ってくるという意味でも誰でもチャレンジしやすくはなったと思います。

もちろんアプリを作ったりなど興味がない人までもプログラミングを学ぶ必要は全くないと思いますので、小学校でプログラミングを一律に教えるというのは私は意味がないと思っています。

私の作ったWEBアプリ-HealME

私が今回作ったのはWEBアプリで、年齢、性別、身長、体重、目標とする体重、普段の活動レベルなどから1日の理想的な食事プランをChatGPTに提案してもらうというアプリでChatGPTのAPIを使用しています。

自作したWEBアプリのホーム画面

1日に必要な栄養素の量の計算は、日本人の食事摂取基準2020年度版とWHOのsustainable  healthy diet: guiding  principalと細胞環境デザイン学の考え方を取り入れたもので計算させています。プロンプトには、その栄養素を完全に満たす1日の食事プランを朝食、昼食、夕食に分けてそれぞれレシピ名と材料と量、作り方を提示してというように入れています。またその食事をとった場合に摂れる栄養素量も出してもらっています。それ以外にも理想的な食生活になるようにさまざまな内容をプロンプトに含めてChatGPTのAPIに投げています。

ハンバーガーメニューをクリックすると下記のようにABOUTページやどのように計算しているかなどを説明しているCALCULATIONページ、どんなプロンプトを設定しているかを説明したPROMPTページが見れるようになっています。

アプリはHealME(ヒールミー)と名付けて、Healthy mealとHeal meをかけています。

これはプロトタイプでほぼ遊びで作ったもので正式リリースは予定しておらず、身近な人に使ってもらうように開発しました。OpenAIからAPI使用でどれぐらい請求が来るか分からないので、今のところ不特定多数への一般公開はしておらず申し訳ございません。

現場で働いているとユーザー調査がしやすい

今の所、家族や友人、私が働いている病院のスタッフにシェアさせてもらいました。現場で働いているとたくさんの医療従事者がいるので、すぐにユーザー目線でのフィードバックがもらえるというのがとても有り難いと思いました。なかなかエンジニアなどプロダクト開発現場だと直接ユーザーヒアリングをしに足を運ぶのが難しかったりがあるかもしれませんが、ユーザーとなりうる人が周りにいる環境で働いているというのは、今回のようにプロトタイプを作ってすぐにユーザーヒアリングを繰り返してブラッシュアップする事も可能だと感じました。

もちろん本業は医療で、プログラミングスキルもエンジニアとは比較にならないぐらい低いレベルですが、何かこういうのがあったらいいなと思うプロダクトをFast prototypingでとりあえず形にしてフィードバックが貰えるというのは楽しい事だと感じました。

まとめ

このようにChatGPTによって非エンジニアでもかなりアプリなどを開発するハードルは下がったと思います。しかしある程度のプログラミングのスキルは今後より理想的なものを作っていく上では、あった方が良いと感じました。さらに非エンジニアが自分の仕事の領域でプロダクトのプロトタイプが作れると、ユーザー調査がとてもしやすいという事が体感できました。

以上、最後までお読みいただき、誠にありがとうございました。

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