1. はじめに
こんにちは、みなさん！今回は、社内から寄せられた「こんなことできる？」という声から生まれた、割り勘計算プログラムの開発秘話をお届けします。最新のAI技術「Claude artifacts(クロード アーティファクツ)」を駆使して、どうやって立て替え清算の悩みを解決したのか(解決してないかも？)、その舞台裏に迫ります！🕵️♂️💻
2. きっかけは社員のお悩み相談👥💬
ある日、こんな相談が飛び込んできました。 「友達とライブに行ったんだけど、みんなでいろんなチケット代を立て替えあって、最後の清算がめちゃくちゃ面倒くさい！誰が誰にいくら払えばいいのか、頭がこんがらがっちゃって...😵💫」(意訳あり)
既存の割り勘アプリじゃ太刀打ちできない！? そんな複雑な立て替え計算を、スマートに解決できるソフトが欲しい！ってわけです。
3. 救世主、現る！Claudeのartifacts登場🦸♂️✨
そこで登場したのが、6月下旬にリリースされたClaudeの新機能「artifacts」！これがすごいんです。AIとおしゃべりしながら、画面やロジックをサクッとプログラミングできちゃうんです。例えば「テトリス風のアプリ作って！」って言うだけで、プログラムが生成されて実行までできちゃう優れもの。さらに、作ったプログラムをみんなで使えるんです！
それっぽいブロックは落ちてきますが、ゲームにするには追加の指示が必要でした。
4. いざ、割り勘プログラム開発へ！🚀💻
まずはClaudeの設定画面でArtifactsの機能が有効になっていることを確認します。
次に、AIのClaudeに仕様をザックリ伝えます。 「ねぇClaude、こんなプログラム作れる？」
複数人で支払った経費を計算し、だれがだれにお金をいくら払えば良いか計算・表示するreactプログラムを作成してください。
1.支払に関係するメンバーを登録する機能
2.支出に関する項目を追加する機能
・支払者(1で登録したメンバーを選択)
・支払い方法
・個別支払い(チケットなど)
・均等割り(タクシーなど)
・金額(単価)
・説明
・支払い対象者(複数選択可)
・合計金額(個別支払いの場合は、支払い対象者*単価の金額を表示)
3.精算する[ボタン]
だれがだれにいくら払うのか、もらうのか分かりやすく色分けして表示。
予想されるテスト項目でレビューし、エラーを修正してください。仕様と呼ぶにはあまりにも雑ですが、このまま進めます。
Claudeがエラーをぼやいたら、[Try fixing with Claude](意訳:がんばれAI！)ボタンを押し、修正します。
生成...
...こんな感じで、ふわっとした指示なのに、Claudeくん頑張ってプログラムを作ってくれました！しかし、合計金額の表示が間違っていたので修正を促します。
・支払支出の合計金額には、選択した"支払い対象者"の数*金額を入れてください。
・UIデザインをかっこかわいく絵文字を使って見やすくしてください。引き続きふわっとした仕様ですが、進めます。
生成....
バグや見栄えが悪い箇所があったので修正を促します
・支出の追加において、[新しい支出を追加]するボタンは[削除]ボタンの隣に追加してください。
・精算を計算ボタンを押した際、小数点以下が0以外の場合、小数点下二桁を表示します。生成...
生成...を繰り返し、うまくうごく事を確認したら、[Publish]ボタンを押し、プログラムを公開します。
公開したリンクにアクセスすると、プログラムが使えるようになります。
しかし...公開したプログラムにバグがありました。この場合は、公開したhttpsから始まるリンクにアクセスし、[remix]ボタンを押し、修正します。
"均等割り"を選択した場合は、入力した金額を支払い対象者で分担するように人数分で割り算して請求してください。生成...生成...生成...
最終的にできたプログラムは以下のリンクからご確認ください。
5. AIプログラミングの裏側！開発中に発見した7つの驚き🤯💡
AIを使ったプログラミングの面白さと課題が見えてきました。みなさんにも役立つ情報をギュッとまとめましたよ！
・サイズの限界にビックリ！📏
作ったプログラムは約13KB、300行くらい。これくらいが、Claude artifactsにうまく仕様を伝えられる上限？。大きすぎると、Claudeくんも混乱しちゃうかも？😵💫React以外にJavaScriptでも試した見たけど、300行くらいが限度かな。
・無料vs有料、その実力は？💰
何度も修正していると、Claudeの利用制限に当たることも。無料版でもArtifactsは使えるけど、有料のProプランなら余裕が出てくる！ただし、Proにも利用制限はあるので要注意です👀
・行き詰まったらリミックス！🔄
プログラムの変更がうまくいかない時は、過去のうまくいったバージョンをremix（再利用）するのがオススメ。もう一度指示を出すと、スムーズに進むことも多いんです！
・ネット接続？それはちょっと...🌐❌
残念ながら、APIやインターネットを使う処理は、Artifactsではまだ実行できません。オフライン作業が基本になりそうです。
・大きくなると要注意！🐘
プログラムが大きくなると、実装漏れなどの問題が増えてきます。解決策は？Artifactsを使わずコードを小分けにして整理したり、別サーバーで実行したりするなど、工夫が必要になってきますね🧠
・名は体を表す...かも？🏷️
面白い発見！UIの名前付けが適切じゃないと、Claudeが名前の印象に引っ張られて計算を間違えることも。ネーミングは慎重に選びましょう✍️
・的確な指示で時短開発！⏱️
AIにきちんと仕様を伝えられれば、驚くほど短時間でプログラムを作れちゃいます。でも、細かいところまでAIが理解しているか、しっかりチェックが必要かも。
・自動テスト、欲しい！🤖✅
プログラムがまだ小規模なうちはいいけど、大きくなったら自動テストが実装されるといいな。AIも考える事が多いと、仕様を忘れちゃうこともあるからね😅
6. まとめ
今回のチャレンジで、AIとの対話だけで便利なプログラムが作れることがわかりました。今は万能ではないけど、日常のちょっとした困りごとも、AIの力を借りればサクッと解決できちゃうかも！？
「それって、Ｂｏｌｔ...」と思ったあなた！！次回をお楽しみに。
DX研究開発事業部では、これからもAIを使った新しい開発手法や問題解決のアプローチを発信していきます。お楽しみに！🚀✨
今回の記事は、ちょっと特別なんです。なんと、この記事の文体はClaudeでイメチェンしちゃいました！🤖💅
普段の硬い文章じゃちょっと退屈...なんて思っていた方、お待たせしました！AIの魔法で、読みやすくてフレンドリーな文章に大変身です。😉👍
これからの時代、AIと人間のコラボレーションがますます重要になってきます。今回の記事もその実験的な一歩。AIの力を借りつつ、人間らしい温かみのある情報発信を目指しています。
Comments