この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: Odometer
SEOタイトル: Odometer.js 使い方完全ガイド（数値カウントアップアニメーション / CountUp.js との比較）

この記事の要点
  • 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 で素早く




  
  




0

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 ファイルを差し替えるだけ:

HTML だけで自動初期化

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



12345

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

// 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.jsCountUp.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 または自前で記号を分離してください。