2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

仮想SFショートストーリー:ビットコインが基軸通貨となった未来。

Last updated at Posted at 2024-10-17

仮想SFショートストーリー:ビットコインが基軸通貨となった未来

東京の夕暮れ、プログラマーの翔太はいつものカフェでノートパソコンに向かっていた。彼の仕事は暗号通貨を用いた取引システムのメンテナンスだった。ビットコインが世界の基軸通貨として君臨する未来、翔太のようなエンジニアたちがそのシステムを支えている。

「法定通貨は所詮幻想だ…」翔太はカフェの隅でつぶやいた。暗号通貨の数学的な完璧さを考えれば、彼の言葉は当然のことだった。かつての世界は、政府が発行する紙幣に依存していた。紙幣はその国の財政状態や政治的な決断に大きく影響され、経済が不安定になるたびに、その価値はめべりしていった。特に世界経済が揺れた時期には、法定通貨の価値は一気に下落し、持っている資産が目減りしてしまうのは避けられなかった。

しかし、ビットコインは違った。数学的な原理に基づいており、複製や偽造がほぼ不可能なため、中央集権的な機関に左右されることなく価値が保たれる。どれだけ政府が経済を混乱させても、ビットコインの基盤は揺らがない。それは、数式が揺るぎないのと同じだ。

「同じ量の資産を持っていても、法定通貨で保持している限りその価値は減っていくんだよな」彼は思い出すように呟く。かつて法定通貨で貯蓄していた時代には、インフレや国家の信用問題が常に影を落としていた。しかし、今は違う。暗号通貨で資産を保持していれば、法定通貨の価値がめべりする分、相対的にその価値は安定している。

翔太が見てきた未来のビジョンは、世界がビットコインのような暗号通貨に移行し、法定通貨はもはや「信用紙幣」としてのみ存在する時代だった。かつて人々は、政府が発行する紙幣に無条件の信頼を置いていたが、それが幻想であることを多くの人が痛感するようになった。ビットコインはそれに代わる、信頼に値する「新しい通貨」だった。

「ビットコインが基軸通貨になるなんて、昔は誰も信じなかったよな…」翔太は笑いながら、ディスプレイに映るチャートを眺めた。世界経済がビットコインを中心に回り始め、法定通貨はその影に追いやられていた。資産を持つ人々は、ビットコインに交換することでその価値を維持しようとしていた。国境を超え、政治的な不安定さに左右されず、ビットコインは安定を提供していた。

翔太はカフェを出ると、夕暮れの東京の街を歩き始めた。街の景色は変わらないが、その背後で流れる通貨の仕組みは完全に様変わりしていた。法定通貨が幻想であることを人々が理解した今、世界はビットコインを中心に新たな未来へと進んでいた。

すべての通貨のボリュームとビットコインに対する相対的な価値がリアルタイムで更新される仮想のシミュレーションが表示されます。

コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

スクリーンショット 2024-10-18 060402.png

スクリーンショット 2024-10-18 060415.png

説明:
各通貨(日本円、人民元、ユーロ、アメリカドル、ビットコイン)の成長率をスライダーで調整できます。
スライダーで成長率を変えると、各通貨のボリュームがそれに応じて変化します。
ボリュームは円グラフで視覚化され、各通貨のボリューム比率がリアルタイムで更新されます。
ビットコインを基準にした各通貨の相対的なレートは、折れ線グラフでリアルタイムにプロットされます。
これらのグラフはアニメーションでリアルタイムに変化し、通貨の変動を視覚的に確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通貨シミュレーション</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }
        .slider-container {
            margin-bottom: 10px;
        }
        .chart-container {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 1200px; /* 最大幅を設定 */
        }
        canvas {
            max-width: 400px; /* グラフの最大幅を設定 */
            width: 100%; /* グラフの幅を100%に設定 */
            margin: 10px;
        }
    </style>
</head>
<body>

<h1>通貨シミュレーション</h1>

<div class="slider-container">
    <label>日本円 成長率: <span id="jpy-rate">1</span>%</label>
    <input type="range" id="jpy-slider" min="-10" max="10" value="1" step="0.1">
</div>
<div class="slider-container">
    <label>人民元 成長率: <span id="cny-rate">1</span>%</label>
    <input type="range" id="cny-slider" min="-10" max="10" value="1" step="0.1">
</div>
<div class="slider-container">
    <label>ユーロ 成長率: <span id="eur-rate">1</span>%</label>
    <input type="range" id="eur-slider" min="-10" max="10" value="1" step="0.1">
</div>
<div class="slider-container">
    <label>アメリカドル 成長率: <span id="usd-rate">1</span>%</label>
    <input type="range" id="usd-slider" min="-10" max="10" value="1" step="0.1">
</div>
<div class="slider-container">
    <label>ビットコイン 成長率: <span id="btc-rate">1</span>%</label>
    <input type="range" id="btc-slider" min="-10" max="10" value="1" step="0.1">
</div>

<div class="chart-container">
    <canvas id="pieChart" width="400" height="400"></canvas>
    <canvas id="lineChart" width="400" height="400"></canvas>
</div>

<script>
    // 初期のボリューム
    let volumes = {
        JPY: 100,
        CNY: 100,
        EUR: 100,
        USD: 100,
        BTC: 100
    };

    // チャートの初期化
    const pieChartCtx = document.getElementById('pieChart').getContext('2d');
    const lineChartCtx = document.getElementById('lineChart').getContext('2d');

    const pieChart = new Chart(pieChartCtx, {
        type: 'pie',
        data: {
            labels: ['日本円', '人民元', 'ユーロ', 'アメリカドル', 'ビットコイン'],
            datasets: [{
                label: '通貨ボリューム',
                data: Object.values(volumes),
                backgroundColor: ['red', 'yellow', 'blue', 'green', 'orange']
            }]
        }
    });

    // 折れ線グラフの設定
    const lineChart = new Chart(lineChartCtx, {
        type: 'line',
        data: {
            labels: Array.from({ length: 100 }, (_, i) => i),
            datasets: [
                { label: 'JPY/BTC', data: Array(100).fill(1), borderColor: 'red', borderWidth: 2, fill: false },
                { label: 'CNY/BTC', data: Array(100).fill(1), borderColor: 'orange', borderWidth: 2, fill: false },
                { label: 'EUR/BTC', data: Array(100).fill(1), borderColor: 'blue', borderWidth: 2, fill: false },
                { label: 'USD/BTC', data: Array(100).fill(1), borderColor: 'green', borderWidth: 2, fill: false },
                { label: 'BTC', data: Array(100).fill(1), borderColor: 'purple', borderWidth: 2, fill: false }
            ]
        },
        options: {
            animation: false,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // 成長率スライダーの更新
    const sliders = [
        { id: 'jpy-slider', currency: 'JPY', rateLabel: 'jpy-rate' },
        { id: 'cny-slider', currency: 'CNY', rateLabel: 'cny-rate' },
        { id: 'eur-slider', currency: 'EUR', rateLabel: 'eur-rate' },
        { id: 'usd-slider', currency: 'USD', rateLabel: 'usd-rate' },
        { id: 'btc-slider', currency: 'BTC', rateLabel: 'btc-rate' }
    ];

    sliders.forEach(slider => {
        document.getElementById(slider.id).addEventListener('input', (event) => {
            const rate = event.target.value;
            document.getElementById(slider.rateLabel).textContent = rate;
        });
    });

    // リアルタイム更新のシミュレーション
    function updateCharts() {
        sliders.forEach(slider => {
            const growthRate = parseFloat(document.getElementById(slider.id).value) / 100;
            const currency = slider.currency;

            // 各通貨のボリュームを成長率に基づいて更新
            volumes[currency] *= (1 + growthRate);
            if (volumes[currency] < 1) volumes[currency] = 1;  // 最小値を1に制限
        });

        // 円グラフの更新
        pieChart.data.datasets[0].data = Object.values(volumes);
        pieChart.update();

        // 折れ線グラフの更新
        lineChart.data.datasets.forEach((dataset, i) => {
            const currency = sliders[i].currency;
            lineChart.data.datasets[i].data.shift();
            lineChart.data.datasets[i].data.push(volumes[currency] / volumes['BTC']);  // BTCを基準としたレート
        });
        lineChart.update();

        requestAnimationFrame(updateCharts);
    }

    updateCharts();  // シミュレーションを開始
</script>

</body>
</html>

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?