ChatGPT と Replit でスマホでプログラミングができるようになった

TL;DR

  • 子が生まれてから仕事以外で PC を触ることは殆どないという生活になっている
  • ChatGPT の登場によりコピペベースでコードを書けるようになってきた
  • エディタと実行環境を提供してくれる Replit と合わせてスマホでプログラミングできるようになった

子育てをするようになってから仕事以外で PC を触ることが殆どなくなって余暇でプログラミングはしない生活になっていたが、ChatGPT https://openai.com/blog/chatgpt と Replit https://replit.com/ を使うことでスマホプログラミングができるようになった。

例えば以下のような OpenAI の Web API を使ったチャット CLI アプリケーションを Golang で全てスマホ環境で実装してみたりした。

このエントリでは、自分がどんな感じでスマホでプログラミングをしているのかという話をまとめてみる。

自分にとって余暇プログラミングするのに必要な要件

子育て世代の自分にとって、仕事以外で PC を触ることは殆どないという生活が続いている。 なお、殆どというのは子が生まれる前後の自分と比べてという意味で、平均的な同年代の仕事以外での PC 使用時間と比べたときに多いか少ないかは分かっていない（分かる必要性もないという話だが）。

めちゃくちゃ動き回るけどまだ危険なこともし得るので常にケアする必要があるし、そもそも PC を触っていたら子が寄ってきてキーボードを好き放題叩くということはよく知られた事実でもある。

そういうこともあって余暇でプログラミングをするということは全然考えられなかったが、最近 ChatGPT が出てきてちょくちょく触っているうちに、ちょっとしたプログラミングならコピペベースで十分できるなという感覚が得られてきた。

コピペベースならタイプ数はかなり少なくて済むので、これはスマホで環境を整えることができれば余暇プログラミングをすることも可能そうか？と考えて検討してみることにした。 自分にとってスマホプログラミングをするために必要な要件としては以下のものが挙げられる:

  • 画面に向かっている時間が短くて済む
    • タイプ数が少なくないと厳しいというのもここに含まれている。子育てしながらだとコンテキストスイッチが激しいので、一定時間連続して画面に向かい続けるというのは不可能である。
  • スマホでの操作に適したエディタ
    • スマホで読み書きがしやすくないと厳しいので、スマホ操作を念頭に置いたエディタが必要となる。特に、基本戦略としてコピペベースで書いていくことになるので、コピペをしやすいエディタが欲しい。より具体的には関数とかファイル全体とかの単位でコピーしたりペーストしたりしやすいと嬉しい。さらに言えば Git/GitHub 操作もしたい。
  • スマホからアクセスしやすい実行環境
    • 実行環境を準備するのに手間が掛かるとちょっとした時間で触ってみるとかならないので、これも重要な要件となる。エディタとの連携がスムースでないと面倒なので、これはエディタもセットになっている統合開発環境が欲しい、というのとほぼ同義になるだろう。
  • 可能なら PC 作業でも変更を加えられる
    • これは must 要件ではないけど、コピペベースと言っても自分で書いた方がいいところはどうしても存在するので、後で PC 触れる時に手直ししよう、みたいなことができるとより嬉しい。

ChatGPT と Replit によるスマホプログラミング環境

既に述べているが、要件の 1 つ目は ChatGPT https://openai.com/blog/chatgpt によって解決される。 ChatGPT がどんなものであるかは今更説明しないし、どうやって使うかということも散々色々なところで書かれているのでここでは省略する。

今回の話においてはちょっとした自然言語を書けばあとはコピペベースでコードが書けるというところが重要な特徴である。 過去のコンテキストも考慮した上で変更とか改修が結構なレベルでできるので、これは触ってみて本当に驚いたところである。

GPT-4 モデルだと出力に結構時間が掛かるが、これは子育てしながらだとコンテキストスイッチが激しいという性質と相性が良い。 自然言語でメッセージを送ったら、次は子育ての方に切り替えて子の方に意識を向けつつ、出力が終わった後にそのコードをコピペして使い、ということを繰り返していくスタイルになっている。

要件の 2,3,4 つ目を満たしてくれるスマホで使える IDE とかあるのかなと思ってちょっと調べて見つけたのが Replit https://replit.com/ である。

Replit はブラウザから使える IDE で、スマホアプリも出ている。 かなり多機能なのでここで詳しく説明することはしないが、スマホアプリの雰囲気は以下のような感じ。

スマホアプリは Git/GitHub 周りの操作とかインデントとかちょっと機能が足りてないところとか気になるところは色々あるんだけど、関数単位とかファイル全体単位でのコピペとかがしやすいし全体的には十分に使いやすい。 上記画像のエディタ部分の画像の丸いボタンみたいなのがなかなか便利なもので、タップ回数によって行選択・関数選択・ファイル全体選択とかが使い分けられるようになっている。 一定期間触って評価してみてこれでいいんじゃないかという結論に達した。

言語毎に実行環境が提供されているところもかなり嬉しいところで、例えば Golang でちょっとしたプログラミングをしようという時にもスッと実行できるし、HTML/CSS/JS の実行環境で Webview を提供してくれたりもしている。 凄く便利ですねぇ。

自分は基本的にスマホアプリで使っているが、元々はブラウザから使える IDE として提供されているものなので、同じコードベースに PC から手を入れるということもできる。

料金体系は https://replit.com/pricing の通り。 ちょっと使うだけなら Free でも十分だが、Free の場合 Repl (コードと実行環境のセット) が Public のみなので、自分のコードとかが全部公開されるので秘匿情報などを書き込まないように注意が必要である。 自分は色々触ってみようと思って Pro (20/mo)を使ってみているが、用途的にはHacker(20/mo) を使ってみているが、用途的には Hacker (7/mo) で十分そうだなと思って次の支払い後から切り替える予定。 ちょっといただけないのは、Hacker プランにするにはサポートに問い合わせないといけなそうか？というところ…

ともかく、自分にとって必要な要件を全て満たせる環境ができた。 スマホプログラミング時代の幕開けである。

実際にどんな感じのものを作っているか

冒頭で紹介した Golang 実装の OpenAI Web API を叩く CLI アプリケーション: https://github.com/yoheikikuta/Go_OpenAI_CLI

OpenAI の Web API を使ってみようと思い、せっかくなので普段あまり使わない Golang でちょっとしたコードを書いて実装しようと思って作ってみたのがこれ。 Web API を叩く場合には ChatGPT のような生成モデルでは入出力を正確に取り扱うことが難しいことも多いのでそういうところは面倒に思うこともあるが、それでもこういう問題があってこういうアプローチで解決していきたいんだよね、とやりとりすると割とちゃんと直していけるので凄いね。

ただし Golang を使うには Replit のモバイルアプリではちょっとだけ問題があって、keyboard UI の code suggestion の部分が表示されない。 ちょっと触った感じ特定の拡張子のファイルでうまく表示されない感じがする。 この疑問を Replit Forum に投稿 したが、現時点での解決法は出てこなかったので feature request をあげたりした。

その他にも素数判定ゲームを作ってみたりした: https://github.com/yoheikikuta/prime_number_game

これは内容的にはどうでもいいようなレベルのものだが、Replit が Webview 環境とかも提供しているのを知って、子の一歳の誕生日に何か簡単なブラウザゲームを作ってみるかと思い立って作ってみたものである。

お望みのものができたので子に使ってみてもらおうと思ったが、どうやら素因数分解という概念はまだ全く理解できていないようで、まるで何も響いていないようだった。 偶数は簡単すぎるので除こうとかいきなり 3 桁はむずいから最初の方は 2 桁にしようとか、ちょくちょく手を入れた部分は特に意味のない工夫となった。 せっかくなので自分でポチポチやって遊んだりしている。

Life Game も実装して見せてみたが、これも特に反応はなかった。 なるほどね。

この環境でプログラミングするための tips

一定期間触ってみて学んだちょっとした tips を備忘としてまとめておく。

まずは、ChatGPT との出力でコードを吐かせる時は自明なものでも省略せずに出力させるようにする、というもの。

既存のコードに変更を加えていく時にこの関数のこの部分だけ変えて他は一緒という場合に、素直に出力させると ChatGPT は賢いので変える部分だけ陽に書いてあとはこれまでと一緒、と出力してくる。

しかし、コピペベースでコードを書いていくことを考えると、ある関数の特定の部分だけ差し替えるというのは該当範囲を適切に選択してペーストするとかは結構ダルい。 飛び飛びの複数箇所をやる場合とかはやる気がなくなるレベルである。 一方で、関数全体を選択するとかは Replit モバイルアプリで簡単な操作でできるようになっているので、関数全体を省略せずに出力してくれと ChatGPT にお願いしてそれをコピペするというやり方が効率的になる。 ファイル全体をまとめてコピペするみたいなのも同様のである。

意味的には自明な内容を大規模言語モデルに吐かせているのは計算資源の無駄遣い感もあってやや気になるが、まあよしとする。

次は、小さいコードであっても Make をタスクランナーとして使うと便利、というもの。

Replit では shell があって CLI 操作ができるが、ちょっとしたコマンドでもスマホだと打つのが面倒だし、history を使うのとかも面倒だし（それと実行環境は作り直されるので履歴がなくなる）、PC で書くならわざわざ Makefile とか作らないよなみたいなケースでも作っておくと便利になる。

可読性が酷くなりがちだが、まあ自分でちょっと書くためのものだしということでタイプ数が少なくて済む make a みたいな phony target を作ってそれでよく使うコマンドを実行したりしている。

最後に、標準エラー出力をファイルに吐くようにしておくと便利、というもの。

上記の　Make の話と合わせて、標準エラー出力をファイルに吐くように phony target を作っておくと便利だったりする。 実行時にエラーが出た場合、エラーメッセージ全体をコピーして ChatGPT に投げつつ解決を図っていきたいが、少なくとも自分の Replit モバイルアプリ環境では shell のところでうまく複数行選択をすることができない。 なんかパッと解決できなかったので以下のように phone target を定義して、エラーが出た場合はファイルに吐かせてそのファイルの中身を全体コピーしていたりした。

.PHONY: a
a:
	go run chat.go "tell me a nice joke" 2> stderr.log

ここで挙げたのは瑣末というか細かい話ではあるが、自分のスマホプログラミング環境を快適にするために欲している tips とはこういうものでした、というお話。

まとめ

ChatGPT によりコピペベースでプログラミングをすることが可能になってきて、Replit を使うことでスマホで全て完結できるので、ちょっとしたものならスマホでプログラミングすることが可能になった。 いい時代だな〜。

ちなみに Python とか限定でいいなら Colab とかもありかと思ってちょっと試したりしてたが、言語選択肢が少ないのとやはりスマホだと使いづらいということもあり、あまり使わないなという結論に達した。