下林明正のブログ

個人的かつ雑多なブログです。

ReactとNext.jsのチュートリアルをやって、高級AIに質問しながら簡単なライフカウンターをつくった

以前の

shimobayashi.hatenablog.com

からほとんど何もやってなかったので全部忘れた。 せっかく正月休みを取ったので再度勉強しようと思って、とりあえずKindle本のハイライトだけ読んだ上で新しくなったReactのチュートリアルをやった。

ja.react.dev

真面目に自分でコードを書きながらやったら数時間くらいかかった気がする。

その後、Create React Appがもう推奨されなくなったことだけは知ってたけど、何かしらのフレームワークを使えという圧をめっちゃドキュメントから感じたので、せっかくなので業務などでも知識が活きそうなNext.jsのチュートリアルもやることにした。

nextjs.org

別にしょぼいコードをちょっと書いてみたいだけなんだが……と思いつつ、がんばってチュートリアルをやった。これは結構時間がかかって、日を跨いだ。

その時の残骸がこれ。

github.com

正直、自分がつくりたいサービスよりも圧倒的に複雑なものをチュートリアルでつくったと思う。

チュートリアルでやったあれ何だっけ?と自分のリポジトリ見ながら記憶を辿れるのは良いと思う。 けど、今はPages RouterってやつとApp Routerってやつの過渡期らしく、チュートリアルで覚えたのはApp Routerだけどちょっと古いコードとかは基本Pages Routerっぽいので、どれくらい知識が活きるのか、という話はありそう。

今更Vercelもはじめて触ったけど確かにこれは楽そう。herokuを初めて触ったころを思い出した。 Next.js自体もなんかクライアントサイドとサーバーサイドのロジックを割とシームレスに書ける感じで次世代開発体験って感じがした。これもRails 2を初めて触ったころを思い出した。

とりあえずこれで自分で何かコードを書いて動かせる状態にはなった。


この間にオンライン飲み会を挟んで、酒に酔った勢いでOpen AIに金を払って高級AIを利用できるようにした。 毎月$20もかかるので、Spotifyの3倍以上のうれしさが欲しい。

ので、せっかくだからChatGPTになるべくコードを書かせてMtGで使うライフカウンターを実装をしてみた。

github.com

life-counter-app.vercel.app

多分ちゃんと動いてるはず。

ライフカウンターという題材を選んだのは、思いついたネタの中では比較的継続的にメンテする可能性がありそうな気がしたから。 別に、通常は既存のアプリを使ったら良いとは思う。

ChatGPTは思ったよりも割とちゃんとコードを書いてくれたけど、手直ししながらじゃないと厳しい感じはした。 サボってあんまりちゃんとドキュメントも確認してないので、もしかしたら変なコードがたくさん入ってるかも知れない。

逆に、デザイン的な作業はあんまりうまくやってくれなかった。 まあもしかしたら、これは自分のスキルの問題もあるかも知れない。

でも全体的には、結構役立ってたと思う。結構待ち時間が長かったりもするので、自分のChatGPTの使い方がこなれてくるともっと役立てられそうな気はする。


技術的な勉強もできたし、ChatGPTの使い方もちょっと分かってきた気がするので、有意義だった気がする(他にも、Wizardry風のゲームをつくるとしたら仮置きのモンスターグラフィックをつくらせてみたいな、とか妄想して画像を吐き出させて遊んだりもしてた)。 なんか全体的に時代の進歩を感じたので、普段取り残されているのだと思う。

気が向いたら以下のようなこともやってみたい

  • ChatGPTにテストも書かせる
  • ChatGPTにコードコメントも書かせる
  • 何らかの方法で背景画像に任意の画像を指定できるようにする
  • 何か良い感じの背景画像をDALL-Eに描かせる