After Effects│数字をカウントアップさせるエクスプレッション｜桁区切り・小数点・%つき

売上や登録者数などの数字を、0から目標の値まで増やして見せる演出です。

テキストレイヤーの「ソーステキスト」にエクスプレッションを書くと、キーフレームを打たずに作れます。

• 基本：Math.round(linear(time, 0, 2, 0, 1000))
• 3桁ごとのカンマ：正規表現で「,」を入れる
• 小数点：toFixed(1) で桁をそろえる
• キーフレームで動かしたい：スライダー制御と組み合わせる

この記事の式は、After Effectsのエクスプレッション（JavaScriptエンジン）向けです。

表の値は、同じ式を Node.js で計算して確かめたもので、After Effectsの画面での再現は含みません。

基本の書き方

1. テキストレイヤーを作り、数字を1つ入力する
2. 「テキスト」→「ソーステキスト」のストップウォッチを Alt（Macは Option）を押しながらクリックする
3. 次の式を書く

var startTime = 0;
var endTime = 2;
var startNum = 0;
var endNum = 1000;
var n = startNum;
if (endTime > startTime) {
  n = linear(time, startTime, endTime, startNum, endNum);
}
String(Math.round(n));

linear は、time が0秒から2秒に進む間に、0から1000へ一定の速さで変わる値を返します。

0秒より前は最初の数、2秒より後は最後の数で止まります。

Math.round で整数にしてから文字列を返します。時刻は有限の数値で、終了時刻を開始時刻より後に設定します。逆順または同時刻にすると、この例は開始値の表示を保ちます。

だんだん遅くして止める

linear を ease に変えると、動き始めと止まる前がゆっくりになります。

Math.round(ease(time, 0, 2, 0, 1000));

最後だけゆっくりにしたいときは easeOut です。

3桁ごとにカンマを入れる

var n = Math.round(linear(time, 0, 2, 0, 1234567));
String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

数字を文字にして、後ろから3桁ごとに「,」を入れています。

toLocaleString() でも桁区切りを付けられますが、エクスプレッションのエンジンによって結果が変わるおそれがあるため、ここでは正規表現を使っています。

小数点を表示する

linear(time, 0, 2, 0, 98.6).toFixed(1);

toFixed(1) で、小数点以下を1桁にそろえます。

1秒のときは 49.3、2秒のときは 98.6 になります。

小数点とカンマを両方つけるときは、整数の部分だけにカンマを入れます。

var s = linear(time, 0, 2, 0, 1234567.89).toFixed(2);
var p = s.split(".");
p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "." + p[1];

1.3秒のときは 802,469.13 と表示されます。

%や単位をつける

Math.round(linear(time, 0, 2, 0, 100)) + "%";

後ろに文字をつなげるだけです。

「円」「人」なども同じように書けます。

"¥" + String(Math.round(linear(time, 0, 2, 0, 50000))).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

スライダーで動かす

数え方をキーフレームで細かく決めたいときは、スライダー制御を使います。

1. テキストレイヤーに「エフェクト」→「エクスプレッション制御」→「スライダー制御」を足す
2. スライダーの値にキーフレームを打つ（例：0秒で0、2秒で1000）
3. ソーステキストに次の式を書く

Math.round(effect("スライダー制御")("スライダー"));

英語版では effect("Slider Control")(“Slider”) です。

キーフレームにイージーイーズをかけたり、グラフエディターで速さを変えたりできます。

うまくいかないとき

• 数字の幅が変わって左右に揺れる：等幅の数字があるフォントにするか、段落の揃えを右揃えにする
• エラーになる：式を書いたのが「ソーステキスト」か、スライダーの名前が式と同じかを見る
• カンマが入らない：数字を String() で文字にしてから replace しているかを見る

エクスプレッションのほかの記事は、After Effectsの使い方まとめからご覧いただけます。

カウントの条件と表示を確かめる練習

練習用テキストのソーステキストへ1例ずつ貼ります。

0→1000を0～2秒で数える基本式なら0秒「0」、1秒「500」、2秒「1000」です。

開始・終了値を1000→0にすると減算にも使えます。

桁区切りは標準JavaScriptで確認済みですが、AEのソーステキスト表示は未検証です。

負数の半端がちょうど0.5なら、Math.round(-1.5) は-1です。

正負対称の四捨五入が必要な用途では、この丸め方を使う前に表示仕様を決めます。

toFixed は文字列を返し、2進数の小数表現によって境界の丸めが予想と異なる場合があります。

合計計算や金額の確定処理には使わず、表示例として確認してください。

スライダー例の貼付先もソーステキストです。

エフェクトを追加した後、ピックウィップで参照文字列を作り、末尾の丸め処理を加えます。

戻すときは式を無効にするか保存した元の式を戻し、スライダーの練習キーも元の状態に戻します。

練習用エクスプレッション6本をダウンロードできます。

READMEの貼付先を確認し、1つずつ練習用プロパティに使います。

AE本体での動作確認は含みません。

まとめ

• ソーステキストに Math.round(linear(time, 0, 2, 0, 1000)) と書けば数え上がる
• 3桁ごとのカンマは正規表現で入れる
• 小数点は toFixed でそろえる
• 細かく動かすならスライダー制御と組み合わせる

参考：Adobe「Expression language reference」（linear・ease の説明、2026年10月3日に公式資料を確認）。