1.

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 で素早く

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

編集
Post Share
子ページ

子ページはありません

同階層のページ

同階層のページはありません

2026-06-11 07:12:00 guest 841

人気ページ

最近更新/作成されたページ