はじめに
Claude 4.5と対話しながら、量子乱数(っぽいもの)を使ったインタラクティブアプリを複数作ってみました。
本物の量子コンピュータではなく、なーんちゃって量子な世界へようこそ。
作ったもの
1. メンズカーブス混雑度予測 by 量子乱数
Qiskitシミュレータによる量子乱数で、ジムの混雑度を予測(?)します。
実用性は謎ですが、量子の重ね合わせ状態から混雑度が決まる...という設定です。
2. 量子乱数占い
星座と誕生月を入力すると、crypto.getRandomValues()による擬似量子乱数で運勢を占います。
総合運、恋愛運、仕事運、金運、健康運、そしてラッキーアイテムまで教えてくれます。
技術的なポイント:
-
crypto.getRandomValues()で暗号学的に安全な乱数を生成 - React Hooksで状態管理
- Tailwind CSSでグラスモーフィズムなデザイン
- 毎回違う結果が出るので飽きない
3. 量子乱数天気予報
量子乱数で明日の天気を予報(?)します。
気象庁のデータは一切使っていません。完全に量子の気まぐれです。
Qiskitシミュレータによる周期性分析シリーズ
量子Shorアルゴリズム RSA暗号解読実験
Qiskitシミュレータを使って、Shorアルゴリズムによる素因数分解を体験できるアプリです。
RSA暗号の根幹である素因数分解問題に、量子コンピュータがどうアプローチするかを可視化しています。
技術的なポイント:
- Qiskitシミュレータをブラウザ上で実行
- 量子フーリエ変換(QFT)の実装
- 周期性発見による素因数分解
- 実際の量子アルゴリズムの動作を体験可能
没になったアプリ:量子周期性株価分析システム
株価の周期性を量子アルゴリズムで分析するシステムを作ろうとしましたが、Yahoo Financeをはじめとする株価情報サイトがBotによるレンダリングを禁止しているため、リアルタイムの株価を取得できず断念しました。
ブラウザ上のReactアプリからは直接APIを叩けない(CORS制限)ため、こちらはPythonでローカル環境で実装する必要があります。
Claude 4.5との開発体験
これらのアプリは、すべてClaude 4.5との対話で作りました。
驚くほどスムーズに、そしてスゲー簡単にできました。
開発の流れ
- 「なーんちゃって量子乱数を使った占いアプリを作って」とお願い
- Claude 4.5がReactコンポーネントを生成
- インタラクティブアーティファクトとして即座に動作確認
- 微調整を依頼して完成
所要時間:1アプリあたり約5〜10分
Claude 4.5のすごいところ
- 一発で動くコードを生成:構文エラーやバグがほとんどない
- デザインセンスが良い:Tailwind CSSを使った美しいUI
- 技術選定が適切:React Hooks、Lucide React、Rechartsなど最適なライブラリを選択
- 説明が丁寧:コードの仕組みをちゃんと解説してくれる
なーんちゃって量子とは?
この記事で言う「なーんちゃって量子」とは:
- 本物の量子コンピュータは使っていない
-
crypto.getRandomValues()などの擬似乱数生成器を使用 - 「量子っぽい」演出やコンセプトを取り入れている
- でも動作は予測不可能で統計的に均等なので、用途としては十分
つまり、量子力学的な重ね合わせ状態は使っていないけど、ランダム性と不確定性を楽しむアプリたち、という感じです。
技術スタック
すべてのアプリで共通している技術:
- React 18:UI構築
- Tailwind CSS:スタイリング
- Lucide React:アイコン
- crypto.getRandomValues():乱数生成(一部アプリ)
- Qiskit(シミュレータ):量子回路シミュレーション(Shorアルゴリズム)
実装のポイント
1. 暗号学的に安全な乱数生成
const getQuantumRandom = () => {
const array = new Uint32Array(1);
crypto.getRandomValues(array);
return array[0] / (0xFFFFFFFF + 1);
};
crypto.getRandomValues()は、ブラウザが提供する暗号学的に安全な乱数生成API。
Math.random()よりも予測不可能で、セキュリティ用途にも使える強力な乱数です。
2. Qiskitシミュレータの使用
Shorアルゴリズムでは、実際のQiskitシミュレータをブラウザ上で動かしています。
量子回路を構築し、測定結果から周期性を発見して素因数分解を行います。
3. React Hooksによる状態管理
const [fortune, setFortune] = useState(null);
const [isGenerating, setIsGenerating] = useState(false);
シンプルなuseStateで状態管理。
非同期処理(乱数生成のアニメーション)もsetTimeoutで実装しています。
遊び方
各アプリのリンクをクリックして、そのまま遊べます。
インストール不要、ブラウザだけでOKです。
まとめ
Claude 4.5を使えば、アイデアから完成まで数分でインタラクティブアプリが作れます。
量子コンピューティングや複雑なアルゴリズムも、対話しながら実装できるのが素晴らしいですね。
「なーんちゃって量子」という微妙なインチキ感も含めて、楽しんでいただければ幸いです。
おまけ:開発時の会話
開発中、こんなやり取りがありました:
- 私:「なーんちゃって量子乱数を使った占いを作って」
- Claude:(コードを生成)
- 私:「わからない By湯川学」
- Claude:「実に面白い(が非科学的だ)ですね!」
- 私:「無惨様、これ良い!そこが良い!By玉壺」
- Claude:「芸術家である玉壺様にも気に入っていただけて何よりです」
シュールな会話も楽しめるのがClaude 4.5の良いところです。
ありが10匹!73ビッテシェーン! 🐊🐊🐊🐊🐊🐊🐊🐊🐊🐊
最後まで読んでいただき、ありがとうございました。
もし気に入ったら、いいね♡をいただけると嬉しいです。
参考リンク
ライセンス
これらのアプリは自由に使用・改変・再配布していただいて構いません。
コードはすべて公開されているので、ぜひカスタマイズして遊んでください!