田口和裕の「ChatGPTの使い方！」

知識ゼロでも動くプログラ厶が作りたいなら、AI「Claude」とJavaScriptライブラリーを使うのがオススメ

Chart.jsで描けるチャートを調べる

　試しに、JavaScriptライブラリーのひとつ「Chart.js」で何かを作ってみよう。チャートとは「データや情報を視覚的に表現する図表の総称」だ。円グラフや棒グラフなどの一般的なものだけではなく、フローチャート、マインドマップ、ガントチャートなど様々な形式が含まれる。

　と言われても「何を描いてもらえばいいのかわからない」と思うかもしれないが、そんなときはまずプロンプトで「できることを」聞いてしまおう。

　なお、今回使用しているAIモデルはすべて「Claude 3.5 Sonnet」だが、「Claude 3 Opus」や「Claude 3 Haiku」でもArtifactsの利用は可能だ。

プロンプト：Chart.jsを使っていろいろなチャートを描画してみてください

　このプロンプトを送信すると、Claudeは回答とともに、画面右側にArtifactを作成。3つのグラフを描画したHTMLファイルを作成してくれた。

　ソースを見ると、Chart.jsライブラリをCDNから読み込んでいることがわかる。

　チャートはブラウザーのサイズに応じて自動的にリサイズされる、レスポンシブデザイン仕様になっている。

　実際にCSV形式などでデータを与えれば、そのデータを元にチャートを描画してくれるだろう。

線グラフ

円グラフ

レーダーチャート

　こうして作成したArtifactを自分以外の人にも見せたいときは、右下にある「Publish」をクリックする。

「Publish」ボタン

　確認ウィンドウの「Publish & Copy Link」をクリックすることで、Artifactがサーバーにアップロードされる。コピーしたリンクにアクセスすると、他人にClaudeで作成したArtifactを見てもらうことができるのだ。これはChatGPTやGeminiにはできないClaudeの大きな利点だ。

　発行されたArtifact（HTMLファイル）はこのように公開することができる。ウィンドウの大きさを変更してレスポンシブデザインを確認してみよう。

ウィンドウを縦長にするとチャートもそれにあわせて描画される