タグアーカイブ フロントエンド

WordPress開発もモダンに。Moment.jsからJavaScript Temporal APIへの移行ガイド

JavaScriptにおける日時操作のデファクトスタンダードであった「Moment.js」が、メンテナンスモードに入って久しい。現在、その後継として期待されているのが、ブラウザ標準の「Temporal API（テンポラルAPI）」だ。

2026年3月現在、Temporal APIは主要なブラウザでの実装が進み、実用段階に入りつつある。本記事では、WordPress開発においてMoment.jsからTemporal APIへ移行するための具体的なレシピと、その重要性を解説する。

この移行は、単なるライブラリの置き換えではない。サイトのパフォーマンス向上と、日時計算における予期せぬバグを根絶するための重要なステップだ。

Moment.jsの終焉とTemporal APIの登場背景

長年、JavaScriptの標準機能であるDateオブジェクトは、その使い勝手の悪さが指摘されてきた。この穴を埋めるために普及したのがMoment.jsだ。しかし、現代のWeb開発において、Moment.jsはいくつかの致命的な課題を抱えている。

Moment.jsが抱えていた3つの課題

第一の課題は、オブジェクトの「可変性（Mutable）」だ。Momentオブジェクトに対して操作を行うと、元のデータ自体が書き換わってしまう。これは、意図しない場所で日付が変わってしまうバグの原因となりやすい。

第二の課題は、バンドルサイズの肥大化だ。Moment.jsは巨大なライブラリであり、一部の機能しか使わない場合でも、ファイル全体を読み込む必要がある。これは、WordPressサイトの表示速度、特にLCP（Largest Contentful Paint）に悪影響を及ぼす。

第三に、タイムゾーン処理の複雑さがある。標準のMoment.jsだけではタイムゾーンを扱えず、追加のライブラリ（moment-timezone）が必要だった。これらの課題を解消すべく、ECMAScriptの標準仕様として策定されたのがTemporal APIだ。

Temporal APIがもたらす技術的メリット

Temporal APIは、不変性（Immutable）を前提に設計されている。すべての計算結果は新しいオブジェクトとして返されるため、元のデータが汚染される心配がない。また、ブラウザにネイティブ実装されるため、追加のライブラリ読み込みが不要になり、JSの実行コストが劇的に低下する。

さらに、月指定が「1から始まる」点も大きな改善だ。従来のDate APIやMoment.jsでは、1月を「0」と数える仕様が直感に反し、多くの開発者を悩ませてきた。Temporalでは、1月は「1」として扱われる。

Temporal APIの基本オブジェクトと使い分け

Temporal APIは、用途に応じて複数のオブジェクトを使い分ける設計になっている。Moment.jsのように1つのオブジェクトですべてを済ませるのではなく、情報の精度に応じて適切な型を選択する。

主要な4つのオブジェクト

• Temporal.Instant: UTC（協定世界時）に基づく特定の瞬間を表す。タイムスタンプの保存に適している。
• Temporal.ZonedDateTime: タイムゾーン情報を含む日時。特定地域の「カレンダー上の日時」を扱う際に使用する。
• Temporal.PlainDate / PlainTime: タイムゾーン情報を持たない、日付のみ、または時刻のみのデータ。
• Temporal.Duration: 「2時間30分」といった、時間の長さを表す。

例えば、WordPressの投稿公開日時を扱う場合は「ZonedDateTime」が適している。一方、ユーザーの誕生日などはタイムゾーンに依存しないため、「PlainDate」を使うのが正しい。このように、データの性質を型で定義できるのがTemporalの強みだ。

実践：Moment.jsからTemporalへの移行レシピ

既存のMoment.jsコードをどのようにTemporalへ書き換えるべきか、代表的なパターンを見ていく。基本的な操作において、Temporalはより厳格な構文を要求するが、その分コードの信頼性は高まる。

日時の生成とパース（解析）

Moment.jsでは、柔軟すぎるがゆえに曖昧な文字列も解釈しようとした。Temporalでは、ISO 8601形式などの標準的な文字列のみを受け付ける。

// Moment.js
const mNow = moment();
const mSpecific = moment("2026-03-15");

// Temporal API
const tNow = Temporal.Now.instant();
const tSpecific = Temporal.PlainDate.from("2026-03-15");

「ISO 8601」とは、日付と時刻を表記するための国際規格（例：2026-03-15T13:00:00Z）のことだ。Temporalはこの規格に準拠していない文字列を渡すとエラーを投げるため、開発段階で不具合に気づきやすくなる。

Intl APIを活用したロケール対応のフォーマット

Moment.jsは独自形式のトークン（’YYYY-MM-DD’など）を使用していた。これに対し、Temporalはブラウザ標準の「Intl.DateTimeFormat（国際化API）」と親和性が高く、ユーザーの言語設定に合わせた表示が容易だ。

// Moment.js
moment().format('LL'); // "2026年3月15日"

// Temporal
const now = Temporal.Now.instant();
now.toLocaleString('ja-JP', { dateStyle: 'long' }); // "2026年3月15日"

「ロケール」とは、言語や地域による表記規則の集まりを指す。Temporalで`toLocaleString`メソッドを使うことで、エンジニアが手動でフォーマットを指定しなくても、ブラウザが自動的にその国に最適な形式で表示してくれる。

日時計算における「不変性」の重要性

日時の加算や減算において、Temporalの「不変性（イミュータビリティ）」は最大の武器となる。Moment.jsで頻発していた「計算後に元の変数の値が変わってしまう」という副作用が、構造的に排除されている。

副作用のない加減算

以下のコード比較を見れば、その違いは一目瞭然だ。

// Moment.js (元のオブジェクトが書き換わる)
const startDate = moment("2026-03-01");
const endDate = startDate.add(7, 'days');
console.log(startDate.format('YYYY-MM-DD')); // "2026-03-08" (意図せず変更された)

// Temporal (元のオブジェクトはそのまま)
const tStart = Temporal.PlainDate.from("2026-03-01");
const tEnd = tStart.add({ days: 7 });
console.log(tStart.toString()); // "2026-03-01" (安全)

この「不変性」により、関数に日付オブジェクトを渡しても、その関数内で勝手に日付が書き換えられる心配がなくなる。これは、大規模なプラグイン開発や複数のエンジニアが関わるプロジェクトにおいて、デバッグ時間を大幅に短縮する要因となる。

タイムゾーン操作とパフォーマンスへの影響

WordPressサイトの多くは、サーバーのタイムゾーンとユーザーのタイムゾーンが異なる環境で運用されている。Temporal APIは、標準で強力なタイムゾーンサポートを備えている。

外部ライブラリ不要のタイムゾーン変換

Moment.jsでタイムゾーンを扱うには、膨大なデータベースを含む`moment-timezone`が必要だった。これがバンドルサイズを1MB近く押し上げることも珍しくない。

// Temporalでのタイムゾーン変換
const instant = Temporal.Now.instant();
const tokyoTime = instant.toZonedDateTimeISO('Asia/Tokyo');
const londonTime = instant.toZonedDateTimeISO('Europe/London');

Temporalでは、ブラウザが内部に持っているタイムゾーンデータベースを利用するため、追加のデータ読み込みが一切不要だ。これにより、サイトのJavaScript合計サイズが削減され、モバイルユーザーのUX（ユーザー体験）向上に直結する。

独自の分析：WordPress開発におけるTemporalへの期待

WordPress開発の文脈において、Temporal APIの導入は「管理画面の高速化」と「ブロックエディタの堅牢性向上」に寄与する。特にGutenberg（ブロックエディタ）では、複雑な日時計算を伴うカスタムブロックが増えている。

これまで、イベント予約システムやカレンダー連携機能を実装する際、Moment.jsの重さがネックになることがあった。Temporalへの移行により、スクリプトの実行ブロック時間が短縮され、エディタの入力レスポンスが改善される。また、Polyfill（ポリフィル）を利用することで、Safariなどの未対応ブラウザをサポートしつつ、将来的なネイティブ移行への準備を整えることが可能だ。

「Polyfill」とは、新しい機能をサポートしていない古いブラウザでも、その機能を使えるようにするための補完コードのことだ。現時点では、`@js-temporal/polyfill`を導入することで、最新の構文を安全に使用できる。

この記事のポイント

• Moment.jsはレガシー化: メンテナンスモードであり、新規プロジェクトでの使用は推奨されない。
• 不変性の確保: Temporal APIは計算によって元のデータを書き換えないため、バグが激減する。
• パフォーマンス向上: ブラウザ標準機能のため、ライブラリの読み込みが不要になり軽量化される。
• 1ベースの月指定: 1月を「1」と数える直感的な仕様に変更された。
• 強力なタイムゾーン支援: 外部データなしで正確な地域時刻の変換が可能。

出典

• Smashing Magazine WordPress「Moving From Moment.js To The JS Temporal API」（2026年3月13日）
• MDN Web Docs「Temporal」（2026年3月1日参照）
• Moment.js Documentation「Project Status」（2020年9月）

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp