ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

データ表示

Moment

rx.momentrx.MomentDelta

公式ドキュメント

工房の注文書

レビュー一覧の各投稿の下に、「3分前」「2時間前」のように投稿時刻を相対時間で表示してください。マウスを乗せると正確な時刻も見えるように。

rx.momentはreact-momentをラップした日付表示コンポーネントです。日付を好きな形式に変え、「5分前」のような相対時間やタイムゾーンの変換をブラウザで処理します。

このページの例は、下のStateのdate_nowを使います。サーバーが起動したときの時刻（UTC）で、「Update」を押すと現在の時刻に変わり、下の例すべてに反映されます。ReflexのドキュメントではdatetimeをそのままStateに置いていますが、ここではISO形式の文字列にしています。rx.momentはどちらも受け付けます。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now),
    rx.button("Update", on_click=MomentDateState.update_moment_date, size="1", variant="soft"),
)

プロパティを変えてみる

formatのトークンはmoment.jsのルールに従います（YYYY 年、MM 月、DD 日、HH 時、mm 分、ss 秒、ddd 曜日）。from_nowをオンにすると、形式の代わりに相対時間が表示されます。

プロパティを変えてみる

format

from_now

from_now_short

with_title

rx.moment("2026-01-01T09:00:00Z", format="YYYY-MM-DD HH:mm", tz="Asia/Seoul", from_now=False, from_now_short=False, with_title=False)

tzを変えると、同じ瞬間がその地域の時刻で表示されます。with_titleをオンにしてマウスを乗せると、完全な日付がツールチップで出ます。

プロパティ	値	用途
最初の引数 / `date`	文字列、`datetime`、`date` …	表示する日付。なければ現在の時刻
`format`	`"YYYY-MM-DD"`のような形式	表示形式
`from_now` / `to_now`	`True` / `False`	「5分前」/「5分後」のような相対時間
`from_now_short`	`True` / `False`	「1h」「2d」のように短く
`from_now_during`	ミリ秒	その時間の間だけ相対時間、その後は`format`
`add` / `subtract`	`rx.MomentDelta(...)`	表示するときだけ日付を足したり引いたりする
`tz`	`"Asia/Seoul"`のようなタイムゾーン	そのタイムゾーンで表示
`locale`	`"fr"` `"ko"` …	このコンポーネントの言語。既定は`"en"`
`interval`	ミリ秒（0なら停止）	定期的に描き直す
`with_title` / `title_format`		マウスを乗せると見える完全な日付と、その形式
`diff` · `unit` · `decimal`		2つの日付の差
`duration` · `duration_from_now` · `trim`		経過時間の表示
`unix` · `parse` · `local`		入力日付の解釈の仕方、ローカル時刻での出力
`on_change`	イベント	最初に表示されたときと、日付が描き直されたとき

相対時間

日付をそのまま見せるより、「どれくらい前」かのほうが読みやすいことはよくあります。from_nowは今からその日付まで（「2 hours ago」）、to_nowは逆方向（「in 2 hours」）を表示します。from_now_shortは「2h」のように短くします。from_now_during=100000なら100秒の間だけ相対時間で、その後はformatどおりに表示されます。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, from_now=True),
    rx.moment(MomentDateState.date_now, to_now=True),
    rx.moment("2026-01-01T09:00:00Z", from_now=True, from_now_short=True),
    rx.moment(MomentDateState.date_now, from_now_during=100000, format="YYYY-MM-DD HH:mm"),
)

形式

formatで好きな形を作ります。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, format="HH:mm:ss"),
    rx.moment(MomentDateState.date_now, format="ddd, MMM D YYYY, h:mm A"),
)

日付を足す・引く

addとsubtractにrx.MomentDeltaを渡すと、Stateの日付はそのままで、画面に表示するときだけ日付をずらします。キーはyears、quarters、months、weeks、days、hours、minutes、secondsで、Reflex 0.10にはmillisecondsもあります。左の列が2ずつ足したもの、右の列が2ずつ引いたものです。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.grid(
    *[
        rx.moment(MomentDateState.date_now, add=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    *[
        rx.moment(MomentDateState.date_now, subtract=rx.MomentDelta(**{unit: 2}), format="YYYY-MM-DD - HH:mm:ss")
        for unit in ["years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds"]
    ],
    rows="8",
    flow="column",
    column_gap="6",
    row_gap="1",
    width="max-content",
)

言語

rx.momentの既定は英語で、localeを渡したコンポーネントだけがその言語に変わります。ほかのコンポーネントやページには影響しません。固定の言語名を渡すとその言語ファイルだけを読み込み、Stateの値を渡すとすべての言語ファイルを読み込みます。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY"),
    rx.moment(MomentDateState.date_now, format="dddd D MMMM YYYY", locale="fr"),
    rx.moment(MomentDateState.date_now, format="LL dddd", locale="ko"),
    rx.moment(MomentDateState.date_now, from_now=True, locale="ko"),
)

タイムゾーン

tzを渡すと、同じ瞬間をその地域の時刻で表示します。形式のzはタイムゾーンの略称です。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment(MomentDateState.date_now, tz="America/Los_Angeles", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Europe/Paris", format="YYYY-MM-DD HH:mm z"),
    rx.moment(MomentDateState.date_now, tz="Asia/Seoul", format="YYYY-MM-DD HH:mm z"),
)

ブラウザで定期的に描き直す

日付を渡さなければ、ブラウザの現在時刻を使います。interval（ミリ秒）を渡すとその間隔ごとに描き直すので、時計になります。サーバーとはやり取りせず、ブラウザの中だけで動きます。

rx.moment(interval=1000, format="HH:mm:ss")

on_change

on_changeは、コンポーネントが最初に表示されたとき、そして日付が描き直されるたびに呼ばれ、その日付の文字列を渡します。interval=0で定期的に描き直さない場合でも、最初に表示されたときに一度は呼ばれます。再読み込みやページ移動で再び表示されるとまた呼ばれ、開発モードではReact Strict Modeのせいで最初に2回呼ばれることがあります。スイッチをオンにすると2秒ごとに呼ばれます。

on_change fired 0 times

class MomentTickState(rx.State):
    updating: bool = False
    ticks: int = 0
    last: str = ""

    @rx.event
    def on_moment_tick(self, date: str):
        self.ticks += 1
        self.last = date

    @rx.event
    def set_moment_updating(self, value: bool):
        self.updating = value


rx.vstack(
    rx.hstack(
        rx.moment(
            format="HH:mm:ss",
            interval=rx.cond(MomentTickState.updating, 2000, 0),
            on_change=MomentTickState.on_moment_tick,
        ),
        rx.switch(checked=MomentTickState.updating, on_change=MomentTickState.set_moment_updating),
        align="center",
    ),
    rx.text("on_change fired ", MomentTickState.ticks, " times", size="2"),
    rx.text(MomentTickState.last, size="1", color_scheme="gray"),
)

そのほかのプロパティ

公式ドキュメントのプロパティ表にだけある機能です。上から、日付の差（日）、日付の差（月、小数）、2つの時刻の間の経過時間、その日付から今までの経過時間、UNIX時刻（秒）の解釈、決まった形式で読み取る（parse）、マウスを乗せると完全な日付が見える相対時間です。

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.vstack(
    rx.moment("2026-10-24", diff="2026-01-01", unit="days"),
    rx.moment("2026-10-24", diff="2026-01-01", unit="months", decimal=True),
    rx.moment(date="2026-10-24T12:00:00Z", duration="2026-10-24T09:30:00Z"),
    rx.moment("2026-01-01T00:00:00Z", duration_from_now=True, interval=1000),
    rx.moment("1767225600", unix=True, format="YYYY-MM-DD"),
    rx.moment("24/10/2026", parse="DD/MM/YYYY", format="YYYY-MM-DD"),
    rx.moment(MomentDateState.date_now, from_now=True, with_title=True, title_format="YYYY-MM-DD HH:mm:ss"),
)

注文書を仕上げる

レビューの下に相対時間を小さく置き、with_titleでマウスを乗せると正確な時刻が見えるようにします。interval=30000なので、30秒ごとに「a few seconds ago」が「a minute ago」のようにひとりでに変わります。

Jin left a review

from datetime import datetime, timezone


class MomentDateState(rx.State):
    date_now: str = datetime.now(timezone.utc).isoformat()

    @rx.event
    def update_moment_date(self):
        self.date_now = datetime.now(timezone.utc).isoformat()


rx.card(
    rx.hstack(
        rx.avatar(fallback="JK", size="3", radius="full"),
        rx.vstack(
            rx.text("Jin left a review", weight="bold", size="2"),
            rx.moment(
                MomentDateState.date_now,
                from_now=True,
                with_title=True,
                title_format="YYYY-MM-DD HH:mm",
                interval=30000,
                font_size="12px",
                color=rx.color("gray", 11),
            ),
            spacing="0",
        ),
        align="center",
    ),
    max_width="320px",
)

工房ノート

rx.moment(日付, format="YYYY-MM-DD")で形式を変え、from_now/to_nowで相対時間。
add/subtract=rx.MomentDelta(days=2)は、表示するときだけ日付をずらす。
tzでタイムゾーン、localeでこのコンポーネントだけの言語（既定は英語）。
日付なしでinterval=1000ならブラウザの時計。on_changeは最初に表示されたときにも呼ばれる。

← 前へ

データ表示 · Scroll Area

開閉と切り替え · Tabs

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex