Format numbers

数値のフォーマット

.tsx ファイルを編集する際は、ユーザーに表示されるすべての数値が @tryghost/shade/utils の formatNumber ユーティリティを使用してフォーマットされていることを確認してください。

インポート

import { formatNumber } from '@tryghost/shade/utils';

formatNumber を使用する場面

ユーザーに表示される数値をレンダリングする際は、以下を含め、formatNumber() を使用してください:

• メンバー数、訪問者数、購読者数
• メールのエンゲージメント指標 (開封、クリック、バウンス)
• 収益額 (金額には centsToDollars() と組み合わせて使用)
• 投稿の分析 (閲覧数、リンククリック数)
• UI に表示されるあらゆる件数や数量

正しい使用例

<span>{formatNumber(totalMembers)}</span>
<span>{formatNumber(link.count || 0)}</span>
<span>{`${currencySymbol}${formatNumber(centsToDollars(mrr))}`}</span>
<span>{post.members > 0 ? `+${formatNumber(post.members)}` : '0'}</span>

避けるべきアンチパターン

TSX ファイルで数値をフォーマットする際は、以下のパターンをいずれも使用しないでください:

// BAD: raw .toLocaleString()
<span>{count.toLocaleString()}</span>

// BAD: manual Intl.NumberFormat
<span>{new Intl.NumberFormat('en-US').format(count)}</span>

// BAD: raw number without formatting
<span>{memberCount}</span>

// BAD: manual regex formatting
<span>{count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</span>

関連ユーティリティ

• formatPercentage() - パーセンテージ用 (例: 開封率、クリック率)
• abbreviateNumber() - 短縮表記用 (例: 1.2M、50k)
• centsToDollars() - formatNumber に渡す前にセントをドルに変換

いずれも @tryghost/shade/utils からインポートされます。