Claude3.5 Artifacts機能を使いこなす：文系アナログ思考でも長文コードを生成し、複雑なコンテンツをつくる方法を公開！
みなさん、こんにちは！今日は少し変わったお話をしようと思います。「えっ、文系の私がAIを使ってコードを書く？」そんな風に思った方、ちょっと待ってください！
実は私も皆さんと同じように、プログラミングには縁遠い文系人間なんです。でも、最近話題のClaude 3.5というAIツールを使って、なんとゲームのコードまで作れちゃったんです。しかも、長ーいコードも！
今日はそんな「えっ、マジで？」な体験を皆さんにお伝えしたいと思います。Claude 3.5のArtifacts機能って聞いただけでちょっと難しそうですよね。でも、大丈夫です。私のように「コードって何？」くらいの人間でも使いこなせるコツをお教えします。
動画で視聴したい、という方は以下へどうぞ⬇️
文系アナログ思考でもできる理由
私の専門は運動学と心理学なんです。普段はカウンセリングをしていて、クライアントさんの話を丁寧に聞いて、一緒に解決策を見つけていく仕事をしています。そして、ふと思ったんです。
「AIとの対話も、カウンセリングと似ているかも？」
これを技術転用しています。
例えば、クライアントさんに「その時どんな気持ちでしたか？」って聞くように、AIにも「このコードの意味を教えて」って聞けばいいんですよね。分からないことがあれば、遠慮せずに何度も聞く。これって、カウンセリングのスキルそのものなんです！
そんな感じで、受講生さんにもAIを教えていると、結構、みなさん、使えるようになるんです。
皆さんも、「プログラミングは理系の人がやるもの」なんて思い込みは捨てちゃいましょう。文系の私たちだって、AIの力を借りれば、できることはたくさんあるんです。さあ、一緒に新しい扉を開いていきましょう！
アーティファクト機能の限界と回避方法
Claude 3.5のアーティファクト機能、便利なんですが、やっぱり文字数制限があるんですよね。これを何とかしないと、長いコードが書けない。でも、大丈夫です。ちょっとしたコツで乗り越えられます。
サンプルに使ったのは、前回のバトルカードゲームです。複雑なコードの生成を、楽しく学ぶプレイアドラーニングを行なっています！
機能の維持
プロンプト：
「ここまでの機能を維持してください」
まず最初に気をつけたのが「機能の維持」です。せっかく作ったゲームの面白さを損なわないように注意しました。コードをいじるときも、「この変更で大丈夫かな？」って常に確認しながら進めていきました。機能を守りつつ、どうやってコードを改善できるか、それが最初の課題でしたね。
コードの軽量化
プロンプト：
「コードを軽量化してください」
次に取り組んだのが「コードの軽量化」です。ここでもAIの力を借りました。AIに「このコードをもっと効率的にできない？」と聞いてみたんです。すると、思いがけない提案をしてくれました。
例えば、複数の関数を一つにまとめたり、繰り返しの処理をより簡潔に書き直したりするアイデアをくれたんです。最初は「大丈夫かな？」と不安でしたが、AIと対話しながら少しずつ変更を加えていきました。
結果的に、コードの機能は維持したまま、かなりの文字数を削減できました。しかも、AIの提案のおかげで、コードの実行速度も改善されたんです。一石二鳥どころか、三鳥くらいの成果が得られました。
この経験から、コードの軽量化は単に文字を減らすだけでなく、AIと協力して効率的な構造を考えることが大切だと学びました。
可読性向上
プロンプト：
三番目は「可読性向上」。これって意外と大切なんです。
三番目は「可読性向上」ですが、ここで意外な発見がありました。AIがコードを見ただけで理解できるように書くことで、実はコメントを最小限に抑えられるんです。場合によってはコメントを完全になくすこともできます。
これって二つの利点があるんですよ。まず、AIにとって理解しやすいきれいなコードになります。そして、コメントを減らすことで文字数も節約できるんです。最初は「コメントを減らして大丈夫かな？」って不安でしたが、AIと対話しながらコードを見直していくと、むしろコードの質が上がった感じがしました。
こうすることで、可読性を維持しつつ、文字数制限の問題にも対処できたんです。一石二鳥ですよね。
パフォーマンス最適化
プロンプト：
「パフォーマンスを最適化してください」
最後に取り組んだのが「パフォーマンス最適化」です。ここでAIの力を最大限に活用しました。AIに「このゲームのパフォーマンスを改善するには？」と質問してみたんです。
すると、AIからいくつかの具体的な提案がありました。例えば、ループ処理の効率化、データ構造の見直し、そして非同期処理の導入などです。これらの提案を元に、少しずつコードを修正していきました。
特に効果があったのは、頻繁に行われる計算の結果をキャッシュするというアイデアでした。これにより、同じ計算を何度も繰り返すことがなくなり、ゲームの動作が目に見えて速くなりました。
また、メモリ使用量を減らすために、不要なオブジェクトをこまめに解放する処理も追加しました。これらの最適化により、ゲームがより軽快に動作するようになり、しかも文字数も抑えられたんです。
AIとの対話を通じて、パフォーマンス最適化が単に速度を上げるだけでなく、コードの効率性全体を高めることだと理解できました。
こんな感じで少しずつ改善していったら、なんとか文字数制限を乗り越えられたんです。最初は難しそうに見えても、一歩ずつ進めていけば、意外となんとかなるものですね。
プロンプトの使い分け：「機能を維持」vs「コードを維持」
プロンプトの使い方って、実は結構奥が深いんです。特に、「機能を維持してください」と「コードを維持してください」の違いは重要です。
序盤のうちは、「コードを維持してください」というプロンプトを使っていました。これは、今あるコードをがっちり守りたい時に使います。例えば、基本的な機能を実装したばかりで、まだ大幅な変更を加えたくない時なんかにピッタリです。
でも、Artifactsの文字数制限に近づいてくると、ちょっと作戦を変える必要が出てきました。ここで使うのが「機能を維持してください」というプロンプトです。これを使うと、AIに「機能さえ同じなら、コードの書き方は変えてもいいよ」というメッセージを送ることができるんです。
この「機能を維持」プロンプトを使うと、AIはもっと柔軟にコードを最適化してくれます。例えば、同じ機能でもより少ない行数で書き直してくれたり、より効率的なアルゴリズムを提案してくれたりします。
最初は「えっ、コードがこんなに変わっちゃって大丈夫？」って心配になることもありましたが、機能をしっかりチェックしながら進めていけば問題ありません。むしろ、この柔軟性があったからこそ、文字数制限を乗り越えられたんです。
要するに、状況に応じてプロンプトを使い分けることが大切なんです。最初はがっちり、そして徐々に柔軟に。これがArtifacts機能を最大限に活用するコツかもしれませんね。
重要なプロンプト：「コードを省略しないでください」
プロンプトを使う上で、もう一つ絶対に忘れちゃいけないのが「コードを省略しないでください」という指示です。これ、思いのほか大切なんです。
なぜかというと、AIって賢すぎるところがあって、長いコードを生成する時に「ここは省略しちゃっていいかな」って勝手に判断しちゃうことがあるんです。特に、似たような処理が繰り返されるような部分では「以下同様」みたいな省略をしがちです。
ここで重要なのが、ローカルで使用する場合とArtifacts機能で動かす場合の違いです。ローカルで使用する場合、つまり自分のパソコンでコードを実行したり編集したりする場合は、省略があっても自分で補完できますよね。だからそんなに問題にはなりません。
でも、Artifacts機能を使う時には、そういう省略が大敵なんです。省略されたコードは実際には生成されていないので、そのまま使おうとするとエラーになっちゃいます。Artifactsは自動で実行される環境なので、省略された部分を人間が補完することができないんです。
だから、Artifacts機能を使う時は必ず「コードを省略しないでください」っていうプロンプトを入れるようにしています。これを入れておくと、AIはきちんと全てのコードを書いてくれるんです。
※ローカルで使用する場合は省略でもOKです
はい、エラーが頻発する場合の対処法について、以下のように書いてみました。
エラーが頻発する場合の対策
AIを使ってコードを生成していると、時々エラーが頻発することがありますよね。特に複雑なコードや長いコードを扱っているときによく起こります。でも、心配しないでください。こんな時こそ、AIの力をうまく使うチャンスなんです。
私が良く使うのは、次の2つのプロンプトです。
エラー回避プロンプト
これは簡単に言うと、「エラーが出ないように気をつけてね」とAIにお願いするものです。例えば、こんな感じで使います。
「このコードを改善する際、エラーが発生しないように注意深く実装してください。特に、変数の型や関数の戻り値に注意を払ってください。」
このプロンプトを使うと、AIはより慎重にコードを生成してくれます。エラーの原因になりそうな部分を事前にチェックしてくれるので、エラーの発生率がグッと下がるんです。
柔軟的実装プロンプト
これは、AIにもっと自由度を与えるプロンプトです。こんな感じで使います。
「この機能を実装する際、最も効率的で安定した方法を選んでください。必要であれば、既存のコード構造を変更しても構いません。」
このプロンプトを使うと、AIはより創造的にコードを書いてくれます。時には思いもよらない解決策を提案してくれることもあります。
これら2つのプロンプトを組み合わせて使うと、エラーを減らしつつ、より良いコードが書けるんです。例えば、こんな感じでプロンプトを組み立てます。
「この機能を実装する際、エラーが発生しないように注意深く、かつ最も効率的で安定した方法を選んでください。必要であれば既存のコード構造を変更しても構いませんが、その際はエラーの可能性に特に注意を払ってください。」
エラーが頻発して困ったときは、ぜひこれらのプロンプトを試してみてください。AIとの対話がもっとスムーズになり、結果的により良いコードが書けるはずです。
コード改善プロンプトの実践
これは私が実際に、上記で述べたプロンプトの全てを詳細に使用したものです。
↓めっちゃ長いですがw
このプロンプトを入れる前が以下です。
Artifactsの下に文字が表示されないので、文字数制限に引っかかっています。これだとコードが中途半端な生成なので、エラーが起こります。
そこで、先ほどのプロンプトを入れたものが以下です。
この場合、Artifactsの下に通常の文章生成がされています。その後に文字数制限がきていますので、コードは完全な形であることがわかります。もちろん、これならエラーにならずに動作します。しかも、コードが改善されています。つまり、ここでは、この通常のテキスト文のトークン数が稼げており、この分の余裕が生まれ、さらなる改善の余地が生まれたのです！
これを使いまくって改善しまくるのです！
このプロンプトの構造をまとめると以下になります。
※ここまでの長文を使わなくても改善はできますので、色々と試してみてください。
※わかりにくかったら動画をご覧ください。
※動画を見てもわからなかったらごめんなさいw
優先順位の重要性
AIを使ってコードを改善する時、何から手をつければいいか迷うことありませんか？実は、ここにも小さなコツがあるんです。私が経験から学んだ優先順位を紹介します。
ゲーム機能の維持
これが最優先です。どんなに軽量化しても、最適化しても、ゲームが動かなくなっちゃったら元も子もないですからね。まずは「動くこと」を大前提に考えます。コードの軽量化
次に考えるのが軽量化。Artifacts機能の文字数制限に引っかからないようにするためです。ここでは不要な部分を削ったり、同じ機能をより少ない行数で実現したりします。可読性向上
軽量化できたら、今度は可読性。AIが理解しやすいコードになっているか確認します。変数名や関数名が適切か、構造が明確かなどをチェックします。パフォーマンス最適化
最後にパフォーマンスの最適化。ゲームがスムーズに動くように調整します。ループの効率化やメモリ使用の最適化などを行います。
この順番で対応していくのには理由があります。まず機能を守り、それから文字数制限をクリアし、その上で読みやすく、最後に速く動くように改善する。この順で進めると、大きな手戻りが少なくなるんです。
例えば、最初からパフォーマンス最適化に力を入れても、後で機能を変更する必要が出てきたら、その努力が水の泡になっちゃいますよね。
もちろん、状況によってはこの順番を少し変えることもあります。でも、基本的にはこの優先順位を意識しながら改善を進めていくと、効率よくコードを改善できますよ。
返信回避プロンプト
プロンプト「返信せずにすぐにArtifactsを使ってください」の効果について、簡潔に説明します。
このプロンプトは、Claudeに対して通常の出力を抑え、直接Artifactsを使ってコードを書くように指示します。これにより、文字数をコードに集中させ、文字数制限を回避する狙いがあります。
Claudeの文章が途中で途切れていることってみたことないですか？
これって実は文字数制限にかかっているんです。Artifactsを使うことで、この制限を巧みに回避し、より多くのコードや情報を一度に提供することができるんですよ。
このテクニックは、特に長いコードや詳細な説明が必要な場合に非常に有効です。Claudeの能力を最大限に引き出し、より充実した回答を得るための小さな、でも効果的な工夫と言えるでしょう。
まとめ：AIを味方につけて、コード生成の世界へ飛び込もう
今回は、Claude 3.5のArtifacts機能を使って、文系思考の人でも複雑なコードを生成する方法をご紹介しました。ポイントをおさらいしてみましょう：
AIとの対話は怖くない
カウンセリングのスキルを活かして、分からないことはどんどんAIに質問しましょう。AIは優しく、丁寧に答えてくれます。プロンプトの使い分けが鍵
機能維持、コード軽量化、可読性向上、パフォーマンス最適化の順で考えると効率的です。
「コードを維持」と「機能を維持」のプロンプトを状況に応じて使い分けましょう。
エラー回避と柔軟的実装のプロンプトは、必要に応じて適用すると効果的です。
Artifacts機能の限界を克服
「コードを省略しないでください」というプロンプトを忘れずに。
コードの軽量化や最適化を通じて、文字数制限を巧みに回避しましょう。
優先順位を意識する
ゲーム機能の維持を最優先に、段階的にコードを改善していくアプローチが効果的です。失敗を恐れない
エラーが出ても大丈夫。それもAIとの対話の一部です。エラーから学び、より良いコードへと進化させていきましょう。文系思考でもできる
プログラミングの詳細な知識がなくても、AIとの対話を通じて素晴らしいコードを生み出せます。自然言語でAIとコミュニケーションを取ることで、複雑な課題も乗り越えられます。
最後に、このプロセスは単にコードを生成するだけでなく、AIとの協働を通じて新しいスキルを身につける素晴らしい機会でもあります。失敗を恐れず、好奇心を持って挑戦してください。
AIの力を借りて、あなたのアイデアを形にする旅に出発しましょう。きっと、想像以上の成果が待っているはずです。
ということで、また！
ps,ホームページ解説しました。遊びからAIを学ぶというコンセプトです✨
この記事が気に入ったらサポートをしてみませんか？