見出し画像

claude.aiのアーティファクト機能でさくっとテトリス風ゲームをつくる

はまち

Claude 3.5 Sonnetにあわせて発表された、Claude.ai のアーティファクトという機能を早速ためしてみました。
アーティファクトという言葉は、「人とLLMが協力して生成した成果物」というニュアンスで使ってるのかなぁ。

サポートされているアーティファクトには、プログラムコードのほか、マークダウン文書などがあり、それらアーティファクトをLLMと対話しながらブラッシュアップしていく感じです。JavaScriptとかならチャット画面の隣で実際の動作を確認しながら作れてとても楽しいです。


サポートされているアーティファクトの種類

ふむふむ

プログラムコード

デモもLLMに頼んじゃうのが今風？
ウインドウの右側がアーティファクト表示エリアになります
教科書的なきれいなコード
いい感じ。プログラムミングの勉強が捗りそう。

Mermaid図

Mermaid図のプレビュー
コード

SVG

左下：変更ごとのバージョンも確認できます。

Reactコンポーネント

Markdown

生成された.mdファイル

ブラウザで動くゲームをつくる

ライフゲーム

ダウンロードしたhtmlをブラウザで開いてみて

テトリス

投げやりなプロンプト「ブラウザで動くテトリス作って」から、若干調整して、ほんの10分くらいでまぁまぁ遊べるレベルになったと思います。リンク先のhtmlをブラウザーで開いてみてください。

矢印キーで移動。ｚｘキーで回転

感想

わはは楽しい。こういう機能の標準ＵＩが欲しかった！😆

いままでclaude.aiのUIは、ChatGPTと比べてイマイチかなぁと思っていましたが、一気に垢抜けた印象ですね。


この記事が気に入ったらサポートをしてみませんか？