AIと仲良く!ChatGPT-4と一緒にNext.jsとTailwind CSSで楽しく名言アプリを作成&デプロイしよう!

記事タイトルもGTP4先生に相談しています

いや、コードスニペットちゃんと貼ってないからこの記事だけだと動かせないけども。 動かしたい人はGPT4先生に同じように相談してください。教えてくれます。

まとめ

人類はもうだめかもしれない。まだGPT4と対話してない人は対話して絶望しよう! 人類、もうだめかも、と実感を持っておくのは大事だと思います。 本当にすごい。こんなレベルの破壊的イノベーションに生きてる間に立ち会えるなんてと愕然としています。

生成されているコードもComponentにわけてたりTypeを別定義にしていたり、十分な品質だと思いました。 リファクタが必要だと思ったら、リファクタしたい、というのを伝えればリファクタもしてくれるし、ペアプロ相手というか粘り強く相談に乗ってくれる先輩がいるような感覚で不思議です。 自分で調べながら作るよりは圧倒的に早い。

文章を書くような仕事には影響あるだろうな、と思ってたんですが、ソフトウェア開発方面でもこれを業務の中でどれだけ効率的に使えるかが生産性に致命的に効きそうな予感がしています。 まずはGPT4的な偉大なる知性に、業務上の機密性が高い事項を相談できるような環境を作れるかがキーになりそう。普通の会社はGPT4に業務のこと相談してはだめですよね。

作ったもの

よくある名言を毎日表示する単ページのもの。 実際は簡単なアプリなので、自分で調べながら作っても半日あればできると思いますが、ラバーダック的に対話の相手としてGPT4につきあってもらうと生産性がバク上げするのを実感できました。1時間ぐらいでvercelのデプロイまでできました。普段Nextもvercelも使わないし、tailwindも毎回調べながら使ってるので本当に便利。

kazuo-quotes.vercel.app

Chat GPT-4に相談

どれほどのものかと軽い気持ちでプロンプトの構成が〜とか難しいことは考えずに聞いています。

最初に生成されたテンプレ

まるっとこの時点でもう動くようなテンプレを教えてもらいました。

型がついてなかったので型をつけてもらいました

名言データ集めるのも面倒だったので名言も作ってもらいます

実際そんなこと言ってるっけ?っていうのも混ざってますが、GPT4は適当なことを言うきらいはあるのでこのへんの真贋を見抜く目は必要です。

英訳との切り替えボタンの機能もつけてもらう

ローカルで実行する方法も教えてもらう

本番はどうしたらいいかも教えてもらう

なんかエラー出たんだけど

まるっとそのままエラーメッセージを貼ると、解釈して解決方法まで教えてくれる(!) マジカヨ・・・震える

デザインも相談して派手にしてもらえる

git ignoreがなかったので作ってもらう

一日分じゃ寂しいので次の名言、前の名言への移動もできるようにしてもらう

うっかりかくと境界でバグりそうな処理だと思いますが、一周するときも考慮してある。すごい。

日本語を縦書きにしたくなっちゃった

もちろんできる、という頼もしい返事。 ただ、このままだと動かなかったので、cssはちょっと修正が必要でした。苦手なのかもしれない。

初期データを別ファイルにリファクタしたくなった

クリップボードコピーの機能も付けたいな

vercelにお試しデプロイみたいなのあったよね

初期値は日付によって変わるようにしたいな

エラーはちょこちょこでる

途中からは自分でコードは理解して、スニペットからコピペするところを吟味する必要はありました。

これまでの過程をブログ記事にしてもらう

ブログ記事を書く必要すらないw