about me

割勘電卓の作り方と
実行時のセキュリティについて

AIを活用した開発手法と、安心して使うためのセキュリティの仕組みをわかりやすく解説します。

目 次
1はじめに ― AIと人間が一緒に作るソフトウェア開発 2割勘電卓の開発の流れ 3実行時のセキュリティ 4まとめ
1

はじめに― AIと人間が一緒に作るソフトウェア開発

🌍 世界で広がる「AIを使った開発」の新しい波

近年、ソフトウェア(コンピュータのプログラム)の作り方が大きく変わりつつあります。代表的な新しい開発スタイルを紹介します。

🎵 AIバイブコーディング(AI Vibe Coding)
「こんな感じのアプリを作って」と自然な言葉でAIに伝えると、AIが実際のプログラムコードを書いてくれる開発スタイル。専門的なプログラミング知識がなくても、アイデアがあればソフトウェアを作れる時代になっています。2024年頃から世界中で急速に広まっています。
🔄 アジャイル開発(Agile Development)アジャイル=「素早く柔軟に」という意味
大きな計画を最初から全部作るのではなく、「小さく作って、試して、改善する」を繰り返す開発手法。変化に素早く対応できる点が特長です。
🤝 ペアプログラミング × AI版
かつては2人のプログラマーが隣に座って一緒にコードを書く「ペアプログラミング」という手法がありました。今はAIがその相棒になり、人間とAIが対話しながら開発を進めます。

💬 この割勘電卓はどうやって作ったか

この割勘電卓は、yujiClaudeクロード:Anthropic社が開発した生成AI(AI)が対話を繰り返しながら、わずか1日・約2〜3時間で作り上げました。

具体的にはClaude.aiクロード・エーアイ:Webブラウザで使えるAIサービスというサービスを使い、以下のような会話のやりとりを通じて開発しました。

💡 IT知識がない方でも十分に可能です

このような開発スタイルは、プログラミングの経験がまったくない方でも十分に実践できます。

ただし、「何を作りたいか」をAIに正確に日本語で伝えることが成否の鍵を握ります。要求する機能・動作・使い勝手などを具体的に・明確に・順序立てて伝えるほど、AIはより意図に近いものを作り上げます。曖昧な指示は曖昧な結果につながります。

📱 実際の開発のやりとり(イメージ)

Y
「割勘電卓を作ってください。スマホ(Android)で動作し、高齢者でも使いやすい画面で。複数人の名前を入れて支払いを記録し、誰が誰にいくら払うかを計算したい。」
yuji(人間)の依頼
AI
「承知しました。メンバー登録・支払い記録・割勘計算の3画面構成で作成します。」

→ 画面内に実際に動く割勘電卓を表示
Claude(AI)の回答
Y
「全員解除ボタンが動きません。費目に直接入力もできるようにして。」
動作確認して改善を依頼
AI
「バグを修正しました。費目に直接入力欄も追加しました。」

→ 修正された画面を再表示
修正版を即座に反映
Y
「結果をLINEに送れるよう、コピーボタンをつけて。計算式も再確認して。」
機能追加と品質確認の依頼
AI
「コピー機能を追加。計算式を検証した結果、端数処理に改善点を発見し修正しました。」
機能追加+品質改善

※ このやりとりをClaude.aiの画面(チャット形式)上で行い、AIが書いたプログラムが即座に画面内で動作するため、パソコンとスマホの両方で操作を確認しながら改善を重ねました。

2

割勘電卓の開発の流れ― フローチャートと利用技術

📊 全体の開発フロー

💡 STEP 1:要望を言葉で伝える

yujiが「こんな機能がほしい」をClaude.aiのチャット画面に日本語で入力する。プログラムの知識は不要。

🤖 STEP 2:AIがプログラムを自動生成

ClaudeがHTMLエイチティエムエル:Webページを作る言語・CSSシーエスエス:見た目を整える言語・JavaScriptジャバスクリプト:動きをつける言語のコードを瞬時に作成し、チャット画面内に実際に動く画面を表示。

🧪 STEP 3:人間が操作して確認する

yujiがパソコン・スマホで実際に操作。「ここが動かない」「この機能を追加したい」などをAIに伝える。

🔁 STEP 4:対話を繰り返して改善

STEP 1〜3を何度も繰り返す。1回の対話で数分〜数十分。全体で数日かけてブラッシュアップ。

📄 STEP 5:HTMLファイルとして書き出し

完成したプログラムをClaudeがHTMLファイル(index.html)として出力。これがアプリ本体。

🌐 STEP 6:Netlifyでインターネットに公開

Netlifyネットリファイ:Webサイトを無料で公開できるサービスにHTMLファイルをアップロードするだけで、世界中からアクセスできるURLが発行される。

📱 STEP 7:スマホのホーム画面に追加して利用

URLをスマホのホーム画面に追加すると、アプリのように使えるようになる。

🛠 利用した技術

🤖
Claude Pro
AIによるプログラム自動生成・バグ修正・計算検証
📄
HTML
エイチティエムエル:画面の構造を定義する言語
🎨
CSS
シーエスエス:文字の大きさ・色・レイアウトを指定
⚙️
JavaScript
ジャバスクリプト:計算・データ保存など動きを担当
💾
ローカル
ストレージ
スマホ内にデータを保存する仕組み
🌐
Netlify
ネットリファイ:無料でWebを公開できるサービス

⏱ 開発にかかった時間と規模

項目内容
開発期間1日・約2〜3時間
AIとの対話回数数十回以上
プログラムの行数約600行(AIがすべて記述)
費用Claude Pro月額+Netlify無料プラン

従来の専門家による開発では数週間〜数ヶ月・数十万円かかる規模の作業を、AIとの対話でわずか半日・低コストで実現しました。

3

実行時のセキュリティ― データはどこに保存され、なぜ安全か

🔗 URLをタップしてから何が起きているか

① URLをタップ
📱 あなたのスマホ(ブラウザ)
「index.htmlをください」と要求
HTMLファイルを送信(暗号化通信)
② プログラムを受け取る
🌐 Netlifyのサーバー
HTMLファイルを保管しているだけ
▼ ここから先はスマホの中だけで動く
③ スマホ内で計算・保存
💚 スマホ内部(ローカルストレージ)
名前・金額・計算結果はここに保存
🚫 外部には一切送信されない
インターネット・外部サーバー

🔐 なぜ安全なのか ― 5つの理由

  • データが外に出ない
    名前・金額などの入力データはすべてスマホの中(ローカルストレージスマホのブラウザが持つ小さなメモ帳のような保存場所)に保存されます。Netlifyのサーバーにも、どこの外部サーバーにも送信されません。
  • HTTPS通信で暗号化されている
    URLが「https://」エイチティティピーエス:通信を暗号化する安全な接続方式で始まっているため、プログラムを受け取る際の通信は第三者に読まれる心配がありません。鍵マーク🔒がブラウザに表示されます。
  • サーバー側に処理がない
    割勘の計算はすべてスマホのブラウザ内で行われます。サーバー(Netlify)はHTMLファイルを送るだけで、計算や個人情報の処理には一切関与しません。
  • ログイン不要・個人情報の登録なし
    メールアドレスもパスワードも登録不要です。入力する情報は「名前(ニックネーム可)」と「金額」だけで、個人を特定できる情報は一切不要です。
  • プログラムの中身が確認できる
    このアプリはHTMLという公開された技術で作られており、ブラウザの「ページのソースを表示」機能でプログラムの中身を誰でも確認できます。隠れた処理は一切ありません。

📊 通信が発生するタイミングと発生しないタイミング

操作通信説明
URLを開く(初回)ありNetlifyからHTMLファイルを受け取る。暗号化済み。
URLを開く(2回目以降)ほぼなしブラウザのキャッシュ一時保存から読み込む。
名前・金額の入力なしスマホ内に保存されるだけ。
支払い記録ボタンなしスマホ内で処理・保存。
割勘計算なしスマホのブラウザ内で計算。
コピーボタンなしスマホのクリップボードにコピー。
リセットなしスマホ内のデータを消去。
⚠️ 知っておきたい注意点

・データは「このスマホのこのブラウザ」にだけ保存されます。別のスマホからは見えません(複数人でのリアルタイム共有はできません)。

・ブラウザの「履歴・キャッシュ・データを消去」を実行するとデータが消えます。精算後は「全データをリセット」ボタンで手動削除をお勧めします。

・Netlifyのサービスが停止した場合はURLにアクセスできなくなりますが、ブラウザにキャッシュが残っていれば引き続き使えます。

4

まとめ

✅ この割勘電卓について

🤖 作り方:AIとの対話を繰り返し、1日・約2〜3時間で完成させました。「AIバイブコーディング」と呼ばれる先進的な開発スタイルの実践例です。
💾 データの保存場所:入力した名前・金額はすべてあなたのスマホの中にだけ保存されます。外部には一切送信されません。
🔐 セキュリティ:通信は暗号化(HTTPS)、データは端末内のみ、ログイン不要、個人情報の登録なし。構造上、情報漏洩のリスクは極めて低いです。
🌐 公開の仕組み:Netlify(ネットリファイ)というサービスを使い、HTMLファイル1つをアップロードするだけでスマホアプリのように使えるURLを発行しています。
💡 AIを活用したソフトウェア開発の可能性

今回の割勘電卓は、「AIに任せて自分でアイデアとチェックを担当する」という新しい開発スタイルの一例です。

  • IT知識がまったくない方でも、十分に同様のことが実践できます。
  • 人間がやるべきことは「何を作りたいか」を明確にすること、そして「動作を確認して改善を指示すること」です。
  • 「要求する機能や動作を、具体的・明確・正確な日本語でAIに伝えること」が最も重要なポイントです。曖昧な指示は曖昧な結果につながります。
  • AIは道具です。使いこなすのは人間の発想力・判断力・言語化する力です。