kumarishin 生成AIはほんといろんなものが次々にでてきますね。
有名どころではChatGPTだったりGemini・Birdなんかがあるかと思いますが、用途によって生成AIの能力も変わってきているのが面白いところです。
音声生成だと〜〜
画像生成だと〜〜
みたいな感じで、それぞれに得意・不得意があっていいですよね。
そんな中で、プログラミングに強い生成AI Claude3.5 を利用してタイピングゲームを作ってみたのでシェアします。
といっても他にも生成AIを使っているので、やり方を公開という感じですね。
早速いってみましょう！
どんなものを作るのか、ざっくりと決める
まずは、自分の頭の中を整理します。どんなものが作りたいのか、何で作りたいのかということを言語化していきます。
この時点で私は『タイピングゲームを作りたい』ということが浮かんでいました。
副業しよう、何かパソコン使ってできる仕事をしよう、Web制作をしよう、プログラミングしよう、と考えた時にどうしても必要になるのがタイピング技術になります。
そして、通常の単語ではいっぱい遊びながら学べる寿司打をはじめ、たくさんのタイピングゲームが出ています。
でもWeb制作者向けに特化したようなタイピングゲームってないよね？って思ったのがきっかけです。
コードをたくさん打つので、日本語よりもむしろ英語の方が打つ機会が増えてくるため、ちょっと違ったスキルだよなぁというのを感じていました。
そんな感じで『Web制作者が日常で扱う単語を集めたタイピングゲームを作りたい』ということになりました。
chatGPTとのやりとり
作りたいものを決めたら、それを生成するための『プロンプト（命令文）』を考えます。ただ、それもAIでできちゃうから面白いですよね。
今回は見出しの通り、chatGPTを利用してプロンプトを作ってもらいました。
こんな感じで、自分が考えた状況を羅列するような形でプロンプトつくってねーとチャットを投げています。
そうするとこんな感じでポイントを伝えながら必要なプロンプトを生成してくれましたので、Claudeに投げていきます。
Claude3.5とのやりとり
Claude3.5はプログラミング関連の作品作りに強いと言われている生成AIになります。もしかしたらChatGPTでもいいのかもしれないけど、ものはためしってことでやってみました。
といってもChatGPTから送られてきたプロンプトをそのままコピペして貼り付けるだけ。
そうすると、すぐにコードを作ってくれます。
ただ、ここで問題が。
ClaudeはHTML・CSS・Javascriptを使ってコードを生成してくれているのですが、公開のことを全く考えていなかったんですよね。
本来なら自分でサーバー契約して、ドメインを用意して、そこにファイルを入れて…ってやるのが一般的なのかもしれないですが、僕はちょっと手法を変えてやってみることにしました。
つまり、シンプルなHTMLだけではなく、モダンな技術も取り入れて公開までやってみようということです。
そう決まれば、HTMLじゃなくて別の方法で生成しなおしてねーとかやりとりを続けていくことになります。
またすぐにコードを生成してくれるわけですが、次の問題が発生。
それは、無料枠でのやり取り上限に達してしまったこと。ただ、これは時間が経てば改めて質問できるということだったので、時間をおいて再チャレンジ。
できてきたもののチェックと修正
やり取りの制限がリセットされたので、再開していろいろと聞いていきます。
コピペするだけだとエラーが出たり、思った挙動にならなかったりするので、その辺を言語化したりエラー文章をまるっとコピペして渡します。
この時に、『エラーの原因を教えて』など入れておくと、どうしてこういったエラーになったのか、自分の学習もかねてやり取りすることができます。
そうして数回のやり取りで何となく形になってきたので、ありがとうという気持ちを伝えておきました。
実際にできたもの
実際にできたのはこんな感じ。シンプルですがスコアも出るようになってます（なってるはず）
タイトル：Web制作学習者向けタイピングゲーム『Webタイピング道場』
技術スタック：Next.js・TailwindCSS・Typecsript・HTML
やってみた感想としては、めっちゃ楽しい！でした。自分の頭の中がクリアになっていく感じだったり、スピード早く作品ができていくことが感動でした。
AIに仕事を取られるかどうか、というのはまだはっきりしないけど、AIを使いこなせないと仕事ができなくなっていくんだろうなということは実感した出来事でした。