筆者について
name → Koki Teramoto
age → 18
language → ja_JP, en_US
本編
この度、新しいプロフィールサイトを公開しました。
本当にまだまだやらないといけないことがありますが、とりあえず公開した次第です。ただ、今回はこのサイトの公開までに初めてAIを駆使しましたので、今回はその軌跡を書いておきたいと思います。
前提環境
- Next.js
- AWS Amplify
まずはmakerealで大まかなサイトを作成
とりあえず超絶大まかにイメージを作ってサイトの雛形を作りました。
さて、これをHTMLに表示されますので次はそれをJSXに変換します。
これを描き始めたら終わりです。
Geminiでひたすら命令する
あとはGeminiでひたすら命令していくだけです。とりあえず、ダークモードの追加とレスポンシブデザインに対応させました。
Rewrite code with using Tailwind CSS and devide right section and left section using grid system.
Gridの設定はちゃんとしてくれたのですが、レスポンシブデザインはそんな簡単にいきませんでした。めちゃめちゃバトルしました。ちなみに、この途中で実はテーマスイッチを作らせたりします。
Make darkmode and add toggle which to switch between two.
ただ、Geminiはi18nには弱かったです。おそらくですが、いろいろなやり方存在するものですので古いi18nのやりかたを紹介したりもしてきました。
I want to add the translation function on that page. How can you solve?
Thanks for your suggestion, but could you use i18n library?
と、もうこっから先はひたすら細かい指示ばっかの入力だったので省きますが、それが上のサイトとなりました。
感想
今回これを使った感想としては、何個か手順をスキップしてしまったり古い物を紹介してしまったり、そういうことがあったので、そういう時はかなり細かく指示をしなおしたらおおかたは訂正してくれます。
最後に
今回初めて使ったのですが、UI以外のロジックやバックグラウンドは自分で書いた方が良さそうですね。ただ、使い方次第ではあると思いますので今後も勉強していきたいと思います。