この記事の要点

Odometer.js は 数値の変化をスロットマシン風にアニメーション表示する JavaScript ライブラリ 導入: CDN で odometer.min.js + odometer-theme-*.css を読み込むだけ。npm は npm i odometer 使い方: new Odometer({el: el, value: 0, format: "(,ddd)"}) → od.update(12345) で数値を変化 テーマ 6 種類: car / digital / minimal / plaza / slot-machine / train-station（CSS を切替） CountUp.js との違い: Odometer は桁ごとに回転する見た目、CountUp.js は線形にカウント

Odometer.js とは

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

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

導入: CDN で素早く

<!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('odometer');
  const od = new Odometer({
    el: el,
    value: 0,
    format: '(,ddd)',
    duration: 2000,
    theme: 'car'
  });
</script>

</body>
</html>

npm / モジュールバンドラ

npm install odometer
# または
yarn add odometer

import Odometer from 'odometer';
import 'odometer/themes/odometer-theme-default.css';

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

// 1.5 秒後に 999.99 へ
setTimeout(() => od.update(999.99), 1500);

オプション一覧

オプション	説明	例
el	対象 DOM 要素	document.querySelector('#a')
value	初期値	0
format	表示フォーマット	'(,ddd).dd' = 1,234.56
duration	アニメーション時間 (ms)	2000
theme	テーマ名	'car'
animation	'count' (線形) / 'slide' (回転)	'count'

format のシンタックス

• (,ddd) → カンマ区切り整数 (例: 12,345)
• (,ddd).dd → カンマ区切り小数 2 桁 (例: 12,345.67)
• ( ddd).dd → スペース区切り
• d → 区切りなし

テーマ一覧

テーマ	雰囲気	用途
car	古典的なオドメータ	距離 / 累計値
digital	セグメント LED	科技風 UI
minimal	シンプル黒文字	汎用 / ダッシュボード
plaza	太字ボールド	強調表示
slot-machine	スロットマシン	抽選 / ゲーム
train-station	パタパタ駅表示	レトロ表現

各テーマは CSS ファイルを差し替えるだけ:

<!-- 切替えるだけ -->
<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">

HTML だけで自動初期化

JS を書かずに、要素にクラスを付けるだけでも動きます:

<!-- odometer クラスを付けるだけで自動的に初期化 -->
<div class="odometer">12345</div>

<script>
  // テキストを書き換えるだけで自動アニメ
  setTimeout(() => {
    document.querySelector('.odometer').innerHTML = 67890;
  }, 1000);
</script>

実用例: ライブ更新するダッシュボード

// 5 秒ごとに API から取得して表示
const od = new Odometer({
  el: document.getElementById('revenue'),
  value: 0,
  format: '(,ddd)',
  theme: 'digital',
});

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

poll();
setInterval(poll, 5000);

CountUp.js との比較

項目	Odometer.js	CountUp.js
表現	桁ごとに回転（視覚的）	数値を線形にカウント
テーマ	6 種類同梱	なし（自分で CSS）
サイズ	約 3KB	約 5KB
更新頻度	停滞気味（2017〜）	活発
TS 型定義	@types/odometer	同梱
用途	派手な見せ場	UI 全体に統一

FAQ

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

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

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