ClaudeのArtifactsで社内用簡易計算ツールを動かす手順とエラー切り分けの実践記録

計算ツールの合計欄に「NaN」の3文字。……いや、ナンって何？　とツッコみたくなる瞬間だ。

Excelのマクロが組める人は社内にいない。日々の経費按分や見積もり計算を属人化したスプレッドシートで行っている。そんな状況で、ClaudeのArtifacts機能を使ってブラウザ上で動く簡易計算ツールを作ろうとして手が止まる。

この記事の結論： 実際にArtifactsで計算ツールを組み立て、エラーが出たときにどうコードを修正させるのか、具体的な手順と切り分けの基準を解説する。

プログラミングの知識がなくても、ClaudeのArtifactsを使えばその場で動く計算ツールを形にできる。ただし、適切な指示を出さないと思い通りの見た目にならなかったり、計算結果が「NaN」になって動かなくなったりする壁にぶつかる。

この記事では、実際にArtifactsで計算ツールを組み立て、エラーが出たときにどうコードを修正させるのか、具体的な手順と切り分けの基準を解説する。

1. 読者が直面する3つの壁：なぜツール作りで手が止まるのか

Artifactsの画面を開いてプロンプトを打ち込んでも、すぐに実務で使えるものが完成するとは限らない。現場でよく起きるつまずきには共通の原因がある。

見た目と挙動が意図通りにならない

「経費按分の入力欄と、計算結果を表示するボタンを配置して」と伝えても、レイアウトが崩れる。あるいは求めていないボタンが追加される。これは、UIのパーツ配置やデザインの指定をAIに丸投げしていることが原因だ。

計算結果が「NaN」や予期せぬ数値になる

数値を入力して実行ボタンを押した瞬間、画面に「NaN（Not a Number）」と表示される。これは、入力されたテキストデータが数値として正しく処理されていない状態だ。JavaScriptが四則演算を実行できていない。

エラーが出たときにどう伝えればいいか分からない

「エラーが出ました」とだけClaudeに伝えてしまう。見当違いな修正案が返ってくるループに陥る。ブラウザのコンソール画面を開き、具体的なエラーメッセージを読み取って伝える手順を知らないことが原因だ。

2. 仕組みの全体像：Artifactsによるツール作成と運用の流れ

Claude上でコードが生成されてから、実際に手元で検証し、運用するまでの流れを整理する。ツールの料金やプランの仕様は変更されることがあるため、最新情報は公式ページで確認してほしい。

段階 ／ 主な作業 ／ 使うツール・機能 ／ 留意すべきポイント
1. 要件定義 ／ 計算の入力項目と出力結果の定義 ／ メモ帳やチャット画面 ／ 複雑すぎる条件分岐は避け、まずは単一の計算式から始める。
2. コード生成 ／ ArtifactsによるUIとロジックの構築 ／ Claude 3.5 Sonnet 等（※執筆時点。プランや仕様は公式で要確認） ／ 入力値の型変換（`parseFloat`等）を指示に含める。
3. 動作検証 ／ 入力テストとエラーの確認 ／ ブラウザの開発者ツール ／ 空欄送信や全角文字の入力でバリデーションが働くか試す。
4. 保存・共有 ／ HTMLファイルとしての書き出し ／ ローカル環境への保存 ／ 組織内で共有する際は、機密情報を入力しない運用ルールを徹底する。

3. 実際に動かすための構築手順とプロンプトの設計

まずは、入力された数値を元に正しく計算を行うツールをArtifacts上に立ち上げる。曖昧な指示を避け、必要な処理をあらかじめ指定することが重要だ。

ステップ1：入力値の型指定を含めたプロンプトの入力

チャット欄でArtifacts機能を有効にし、次のような条件を盛り込んで指示を出す。

「ブラウザ上で動く簡易的な経費按分計算ツールをHTMLとJavaScript（単一のファイル）で作成してください。画面には『総額』『A部署の人数』『B部署の人数』を入力するフォームと、『計算する』ボタンを配置してください。入力値は必ず `parseFloat()` または `Number()` で数値に変換して計算処理を記述し、空欄や文字が入力された場合はアラートで注意文を表示するバリデーションを組み込んでください」

ステップ2：Artifacts画面での動作確認

生成されたプレビュー画面に対して、以下のテストを必ず行う。
1. 正しい数値を入力してボタンを押し、計算結果が意図通りか確認する。
2. あえて空欄のままボタンを押す、または全角の数字や文字を入力して、エラー処理が機能するか確かめる。
3. 想定外の挙動があった場合は、どの入力値のときに起きたかをメモしておく。

4. エラーが起きたときの切り分け方と対処の基準

テストの段階でエラーが発生した際、闇雲に「直して」と指示するのではなく、原因を切り分けてClaudeに伝えることで修正の精度が上がる。

エラーパターン1：計算結果が「NaN」と表示される

・原因の特定: 入力フォームから取得した値が「文字列」として扱われている。引き算や掛け算が成立していない状態だ。
・切り分けと指示: ブラウザの「開発者ツール（検証）」を開き、コンソールにエラーが出ていないか確認する。その上で、Claudeへ次のように伝える。
  > 「計算結果がNaNになります。入力値の取得部分で文字列から数値への変換（`Number()` の適用）が漏れていないか確認し、修正したコードを再生成してください」

エラーパターン2：ボタンを押しても何も反応しない

・原因の特定: JavaScriptの構文エラー（SyntaxError）か、HTMLの要素ID名とJavaScript側の指定が一致していない。
・切り分けと指示: ブラウザの開発者ツールにある「Console」タブを開き、赤字で表示されているエラーメッセージをコピーする。
  > 「ボタンを押すと次のエラーがコンソールに出ます：[エラーメッセージをここに貼り付け]。該当箇所を修正してください」

5. 運用時の判断基準と注意点

社内用の簡易ツールとして実務で使うにあたり、いくつかの判断基準を押さえておく必要がある。

機密情報の扱いに関する判断

自社の実際の売上データ、個人の給与、未公開の顧客情報をAIに入力することは、情報漏洩や規約上のリスクを伴う。どのプランでどのようにデータが扱われるかは組織のセキュリティポリシーに関わる。必ず公式の最新規約を確認し、テスト段階ではダミーデータを使用する。

ツールの限界を見極める

Artifactsで作成したツールは、ブラウザ単体で動く簡易的なものだ。データベースへの長期保存や、複数人での同時編集、複雑なユーザー認証が必要な本格的な社内基幹システムの代わりにはならない。あくまで「個人の手元やチームの一部で、属人化したExcel計算を置き換える試作品」として活用範囲を限定するのが安全だ。

よくあるつまずきと答え

Q. Artifactsで作ったツールを、同僚にも使ってもらえますか？

A. 共有の機能や範囲は、使っているプランと最新の仕様によって変わります。まず公式のヘルプで共有の方法を確かめてください。社内の情報を扱うツールなら、共有する前に、入力してよい情報の範囲を決めておくことが先です。

Q. 入力した値が、次に開いたときに消えています。

A. Artifactsのツールは、入力した値が保存されない作りになっていることがあります。残したい値は、計算の結果をCSVやテキストとして書き出すボタンを付けてもらい、自分のファイルに保存すると確実です。

Q. エラーが出たとき、AIに何を伝えればいいですか？

A. 画面に出たエラーの文をそのまま貼り、「何を入力したら」「何が起きたか」「本当はどうなってほしいか」の3つを書きます。「動きません」だけだと、AIは原因を推測するしかなく、的外れな修正が返りやすくなります。

Q. 計算の結果が正しいか不安です。

A. 答えが分かっている入力を3つ用意し、手計算や表計算ソフトの結果と比べます。端の値（0・とても大きい数・空欄）も1つずつ試すと、計算の抜けに気づけます。

Q. ツールを直すたびに、前の動いていた版が分からなくなります。

A. 動いた版のコードを、日付つきのテキストとして手元に保存しておきます。直してうまくいかないときは、その版に戻してから、もう一度1か所ずつ直します。

Q. 社外の人にも使ってもらうツールにしたくなりました。

A. 社内向けに作った簡易ツールを社外に出すときは、入力された情報の扱い・計算の誤りの責任・使った生成AIの規約の3つを先に確かめます。小さな計算ツールでも、社外の人が使う時点で求められる確認の重さが変わるので、まずは社内での利用で困りごとを出し切ってから考えるのがおすすめです。

6. まとめ

・UIだけでなく入力値の型変換やエラーチェックをプロンプトで明示する
・「NaN」や動作不良時はブラウザのコンソールでエラー内容を確認する
・機密情報の扱いとブラウザ単体の簡易ツールという限界を理解して運用する

次の一歩

この記事の考え方を、実際の作業でそのまま使える形にしたのが、有料記事「Claude Codeで業務ツールを作る進め方：設計→テスト→実行と、AIの安全確認で止まった3つの操作」です（Brain）。
表やテンプレートをコピーして、自分の作業に当てはめるところから始められます。

📣 感想を聞かせてください

読んで「ここは使えた」「ここが分かりにくい」があれば、Threads か Instagram で @andy_ai_lab を付けて一言だけ書いてもらえると、とても励みになります。
いただいた質問には、次の記事の「よくあるつまずきと答え」で（お名前は出さずに）答えます。『ClaudeのArtifactsで社内用簡易計算ツールを動かす手順とエラー切り分』の感想は、良くても悪くても大歓迎です。

読んでくれて、ありがとうございます。コードが書けなくても道具は作れる、と知ってもらえたなら、この長さにも意味がありました。最初の1本は、いつも電卓で叩いている計算を1つだけArtifactsに作らせてみてください。NaNが出たら、この記事の切り分けの章へどうぞ。