育休とリスキリング②
何を開発するか考えあぐねていた折、娘が初めて風邪をひいた。なんか少し鼻水が出るなーと思っていたら、機嫌が悪くなり、明らかに体調が良くなさそうだった。幸い発熱はなく、1日しっかり休むと翌日には機嫌はよくなったのだが、数日後には親たちがひどい風邪症状を発症した。
僕は咽頭痛と倦怠感で3日くらい寝込んでいたが、娘の機嫌は良くなっているので、しんどいながらも少しは構ってあげないといけない。普段うまく回ってる育児も体調を崩すと急に暗転する。そんなこともあって、僕はベットに横になりながら、LLMを搭載したおもちゃが体調が悪い親の代わりに話しかけてくれたり、あやしたりしてくれたらいいのにと思った。
とりあえずOpenAIのtext to speechが使えるようになっていたので、子供の名前を入れたら、話しかけてくれるアプリならば簡単にできそうだと考え、体調が回復するとさっそく開発に取り掛かった。
リスキリング①でも書いた中島聡さんのブログで、今の時代開発するならばReact + typescriptを使うべしということは知っていた。
そこでまずは三好アキさんのReact + TSシリーズを読みながら簡単なアプリ開発を学んだ。
だいたいコードの中身は理解できるようになったので、さっそく自分のアプリ開発に移ったのだが、Chat GPTに投げると、子供の名前を入力してテキストを生成するところは2時間くらいでできてしまった。その後は音声出力やCSSなども追加し、続々と形になっていった。エラーはたくさん出るが、都度GPTに聞けばうまく修正してくれる。バックエンドの部分はSupabaseを使うことにしてログイン機能なども実装できた。
毎日子供が寝たあとの3時間くらいを開発の時間に充てていたが、1日1つずつエラーをなくしていくようなペースで進んだ。Typescriptの型エラー、Hydrationエラー、DatabaseのRLSエラーなど聞いたことない言葉に悩まされたが、コードが追加されて目に見えて変化がある日々は楽しい。
デプロイをする段になってからは環境変数の設定ミスによるEdge function crash、SMTPの設定、reCAPTCHAの導入などさらに知らないことだらけでなかなか上手くいかない日々が続いた。
しかし結局は根気よくGPTと対話しているとこれらの問題も徐々に解決し、満足できるものに近づいていった。
最初は愛称を入れると日本語と英語で話しかけてくれるようにしていたが、GPT4o-miniだと日本語のテキストと音声がネイティブ並ではないので、英語のみとした。コンセプトとしてはまだ会話はできないが、言葉を一生懸命聞いて学習していっている時期からNative Englishに触れられるアプリという設定に変更した。
そしてついに娘が6ヶ月を迎える頃、Baby Talk with AIという名前のアプリが完成した。メール認証によるログイン機能付き、愛称を入力して英語のテキストと音声生成ができる仕様になっている。
娘を膝に座らせて使ってみると意外と反応が良かったので、たまに使ってみている。
一応いくつかの修正点は残っているものの、セキュリティーも含めて安全に動作するものをデプロイするところまで到達することができた。
プログラミング素人が育児の片手間に1ヶ月くらいでどのようなものを作ったのか覗いてみていただければ幸いである。