知識ゼロでも動くプログラ厶が作りたいなら、AI「Claude」とJavaScriptライブラリーを使うのがオススメ
2024年08月23日 13時00分更新
いろんなライブラリーを探す
次はChart.js以外のライブラリーを使ってみよう。と言われてもどんなライブラリーがあるのか見当もつかない……。そんなときはClaudeに聞いてみればいいのだ。
プロンプト:ビジュアル的にかっこいいものを作成できるClaudeで使えるJSライブラリーをたくさん教えて
このプロンプトで教えてくれたのが以下の10種類だ。
D3.js
特徴:データ駆動型のドキュメント操作のための強力なライブラリ
用途:複雑なデータビジュアライゼーション、インタラクティブなグラフィックス
Three.js
特徴:WebGLを使用した3Dグラフィックスライブラリ
用途:3Dアニメーション、ゲーム、データビジュアライゼーション
P5.js
特徴:クリエイティブコーディングのためのライブラリ
用途:インタラクティブなアート、ビジュアルデザイン、アニメーション
Anime.js
特徴:軽量でパワフルなアニメーションライブラリ
用途:スムーズなウェブアニメーション、モーショングラフィックス
Plotly.js
特徴:高度なグラフ作成ライブラリ
用途:インタラクティブな科学的グラフ、ダッシュボード
Leaflet.js
特徴:モバイルフレンドリーな地図ライブラリ
用途:インタラクティブな地図、位置ベースのビジュアライゼーション
Vega-Lite
特徴:宣言的なデータビジュアライゼーションライブラリ
用途:統計グラフ、複雑なチャート
Particles.js
特徴:軽量なパーティクルアニメーションライブラリ
用途:背景アニメーション、インタラクティブな粒子効果
Chart.js
特徴:シンプルで柔軟なチャート作成ライブラリ
用途:レスポンシブなチャート、データビジュアライゼーション
Paper.js
特徴:ベクターグラフィックススクリプティングフレームワーク
用途:複雑な2Dグラフィックス、インタラクティブなアニメーション
どれもおもしろそうなことが書いてあるが、今回は「P5.js」というライブラリーを使ってインタラクティブなアートを作ってみることにした。
![](/img/blank.gif)
この連載の記事
-
第25回
AI
チャットAI「Claude」すごい新機能「Artifacts」の使い方、全部教えます -
第24回
AI
めちゃ便利になった 無料版「ChatGPT」新機能の使い方まとめ【最新版】 -
第23回
AI
最新の生成AI使うなら「Perplexity Pro」がお得です -
第22回
AI
AI検索「Perplexity」がかなり便利だったので紹介します -
第21回
AI
ChatGPTのライバル「Claude 3」の使い方 良い点、悪い点まとめ -
第20回
AI
「ExcelでChatGPTを再現するシート」が想像以上に素晴らしかった -
第19回
AI
ChatGPTで画像生成するならコレ! おすすめGPTs紹介 -
第18回
AI
ChatGPTおすすめGPT 科学的根拠に基づき質問に答える「Consensus」 -
第17回
AI
ChatGPT「GPT Store」公式おすすめGPTラインアップ -
第16回
AI
ChatGPT「GPT Store」ついに開店 自作GPTs公開方法まとめ -
第15回
AI
自分専用のAI英語教師が、レッスンした英単語で歌詞を作って歌にしてくれるという夢のような環境ができました - この連載の一覧へ