はじめに

今回、生成AIのClaudeでArtifactsという機能が実装されたので使用してみた流れなどを共有させていただければと思います！

Artifactsとは

Artifactsとは、Claude3.5で追加された機能のことで、claudeで生成された画像やコードのことをアーティファクトと言います。
claude3.5では、チャットエリアとアーティファクト表示エリアの2分割された画面となり、1つの画面で画像やコードのプレビューを確認しながらチャットを通して修正や改善を行うことができます。

Artifactsの使い方

Claudeにサインインし、サイドバーから「Feature Preview」をクリックします。すると以下の画面が表示されるので、ArtifactsをOnに設定します。

ArtifactsをOnにできたら後はいつもと同じようにチャットするだけです！
今回はClaudeにマインスイーパを作成してもらおうと思います。
私は以下のプロンプトをClaudeに投げました

HTML,CSS,Javascriptを使用してブラウザで試すことができるマインスイーパーのようなゲームを作成してください

プロンプトを送信するとものの数秒で右側に生成されたものが表示され、実際にマインスイーパが遊べるようになりました…（すごすぎる…）

今回は列数や行数の指定をしなかったためClaude側で勝手に設定してくれましたが、追加のプロンプトを与えることによって列数や行数や爆弾の数を変更できます。

列数と行数を15にして爆弾の数を2倍にしてください

すると結果は以下のようになりました

このようにして、Artifactsを活用すれば1つの画面でデザインや動作を確認しながらチャット形式で修正や改善ができるようになります。

なんとなくペアプログラミングをしているような感覚…

みなさんもぜひ活用してみてください！！
閲覧いただきありがとうございました