過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>Odometer.js は <strong>数値の変化をスロットマシン風にアニメーション表示</strong>する JavaScript ライブラリ</li><li>導入: CDN で odometer.min.js + odometer-theme-*.css を読み込むだけ。npm は <code>npm i odometer</code></li><li>使い方: <code>new Odometer({el: el, value: 0, format: "(,ddd)"})</code> → <code>od.update(12345)</code> で数値を変化</li><li>テーマ 6 種類: <strong>car / digital / minimal / plaza / slot-machine / train-station</strong>（CSS を切替）</li><li>CountUp.js との違い: Odometer は<strong>桁ごとに回転する見た目</strong>、CountUp.js は<strong>線形にカウント</strong></li></ul></td></tr></table>
<h2>Odometer.js とは</h2>

<p>HubSpot 製の OSS で、<strong>数値カウンタをスロットマシン（自動車のオドメータ）のように滑らかに変化させる</strong> JavaScript ライブラリ。ダッシュボードの KPI、決済額、いいね数の表示などで使われます。</p>

<ul>
<li>依存: なし（純粋な JS + CSS）</li>
<li>サイズ: 約 3KB (gzip)</li>
<li>ライセンス: MIT</li>
<li>GitHub: <code>HubSpot/odometer</code></li>
</ul>

<h2>導入: CDN で素早く</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html>
<head>
  <!-- テーマ CSS（好きなものを 1 つ） -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-car.min.css">
</head>
<body>

<div id="odometer" class="odometer">0</div>

<button onclick="od.update(1234567)">変化させる</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>
<script>
  const el = document.getElementById(&apos;odometer&apos;);
  const od = new Odometer({
    el: el,
    value: 0,
    format: &apos;(,ddd)&apos;,
    duration: 2000,
    theme: &apos;car&apos;
  });
</script>

</body>
</html></code></pre>
<h2>npm / モジュールバンドラ</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash">npm install odometer
# または
yarn add odometer</code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">import Odometer from &apos;odometer&apos;;
import &apos;odometer/themes/odometer-theme-default.css&apos;;

const od = new Odometer({
  el: document.querySelector(&apos;#counter&apos;),
  value: 0,
  format: &apos;(,ddd).dd&apos;,
  theme: &apos;default&apos;,
});

// 1.5 秒後に 999.99 へ
setTimeout(() => od.update(999.99), 1500);</code></pre>
<h2>オプション一覧</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>オプション</th><th>説明</th><th>例</th></tr></thead>
<tbody>
<tr><td><code>el</code></td><td>対象 DOM 要素</td><td><code>document.querySelector('#a')</code></td></tr>
<tr><td><code>value</code></td><td>初期値</td><td><code>0</code></td></tr>
<tr><td><code>format</code></td><td>表示フォーマット</td><td><code>'(,ddd).dd'</code> = 1,234.56</td></tr>
<tr><td><code>duration</code></td><td>アニメーション時間 (ms)</td><td><code>2000</code></td></tr>
<tr><td><code>theme</code></td><td>テーマ名</td><td><code>'car'</code></td></tr>
<tr><td><code>animation</code></td><td>'count' (線形) / 'slide' (回転)</td><td><code>'count'</code></td></tr>
</tbody>
</table>

<h3>format のシンタックス</h3>

<ul>
<li><code>(,ddd)</code> &rarr; カンマ区切り整数 (例: 12,345)</li>
<li><code>(,ddd).dd</code> &rarr; カンマ区切り小数 2 桁 (例: 12,345.67)</li>
<li><code>( ddd).dd</code> &rarr; スペース区切り</li>
<li><code>d</code> &rarr; 区切りなし</li>
</ul>

<h2>テーマ一覧</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3cd"><th>テーマ</th><th>雰囲気</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>car</code></td><td>古典的なオドメータ</td><td>距離 / 累計値</td></tr>
<tr><td><code>digital</code></td><td>セグメント LED</td><td>科技風 UI</td></tr>
<tr><td><code>minimal</code></td><td>シンプル黒文字</td><td>汎用 / ダッシュボード</td></tr>
<tr><td><code>plaza</code></td><td>太字ボールド</td><td>強調表示</td></tr>
<tr><td><code>slot-machine</code></td><td>スロットマシン</td><td>抽選 / ゲーム</td></tr>
<tr><td><code>train-station</code></td><td>パタパタ駅表示</td><td>レトロ表現</td></tr>
</tbody>
</table>

<p>各テーマは CSS ファイルを差し替えるだけ:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 切替えるだけ -->
<link rel="stylesheet" href=".../themes/odometer-theme-digital.min.css">
<link rel="stylesheet" href=".../themes/odometer-theme-minimal.min.css">
<link rel="stylesheet" href=".../themes/odometer-theme-plaza.min.css">
<link rel="stylesheet" href=".../themes/odometer-theme-slot-machine.min.css">
<link rel="stylesheet" href=".../themes/odometer-theme-train-station.min.css"></code></pre>
<h2>HTML だけで自動初期化</h2>

<p>JS を書かずに、要素にクラスを付けるだけでも動きます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- odometer クラスを付けるだけで自動的に初期化 -->
<div class="odometer">12345</div>

<script>
  // テキストを書き換えるだけで自動アニメ
  setTimeout(() => {
    document.querySelector(&apos;.odometer&apos;).innerHTML = 67890;
  }, 1000);
</script></code></pre>
<h2>実用例: ライブ更新するダッシュボード</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 5 秒ごとに API から取得して表示
const od = new Odometer({
  el: document.getElementById(&apos;revenue&apos;),
  value: 0,
  format: &apos;(,ddd)&apos;,
  theme: &apos;digital&apos;,
});

async function poll() {
  const res = await fetch(&apos;/api/today-revenue&apos;);
  const data = await res.json();
  od.update(data.amount);
}

poll();
setInterval(poll, 5000);</code></pre>
<h2>CountUp.js との比較</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>Odometer.js</th><th>CountUp.js</th></tr></thead>
<tbody>
<tr><td>表現</td><td>桁ごとに回転（視覚的）</td><td>数値を線形にカウント</td></tr>
<tr><td>テーマ</td><td>6 種類同梱</td><td>なし（自分で CSS）</td></tr>
<tr><td>サイズ</td><td>約 3KB</td><td>約 5KB</td></tr>
<tr><td>更新頻度</td><td>停滞気味（2017〜）</td><td>活発</td></tr>
<tr><td>TS 型定義</td><td><code>@types/odometer</code></td><td>同梱</td></tr>
<tr><td>用途</td><td>派手な見せ場</td><td>UI 全体に統一</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: 数値が変化しない</strong><br />
A: <code>od.update(N)</code> ではなく <code>el.innerHTML = N</code> を使う場合、要素に <code>.odometer</code> クラスが必要です。</p>

<p><strong>Q: 小数点が表示されない</strong><br />
A: <code>format: '(,ddd).dd'</code> のように <strong>小数桁分の d を明示</strong>してください。</p>

<p><strong>Q: 負の値を扱える？</strong><br />
A: 公式は <code>-</code> 表示に未対応。CountUp.js または自前で記号を分離してください。</p>