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

そのほかの道具

Script

rx.script

公式ドキュメント

工房の注文書

訪問者のブラウザが教えてくれるタイムゾーンと言語を、サーバーを通さずにカードにすぐ表示してください。

rx.scriptはページに<script>タグを入れて JavaScript を実行します。短いコードを直接書くか、srcで JavaScript ファイルを読み込みます。条件付きレンダリングと一緒に使っても安全なので、スクリプトを入れるかどうかを State で決められます。分析ツールやソーシャルウィジェットのスクリプトを付けるときに特に役立ちます。

Open the browser console (F12) to see the log.

rx.vstack(
    rx.script("console.log('inline javascript')"),
    rx.text("Open the browser console (F12) to see the log.", size="2"),
)

State でスクリプトを出し入れする

rx.scriptには目に見えるプロパティがないので、実習台の代わりに State で動かしてみます。rx.condが真になった瞬間にスクリプトが入って実行され、下の段落の文章を書き換えます。スクリプトを外しても、すでに起きたこと（書き換わった文章）は元に戻りません。スクリプトの効果はページに残るという点を覚えておきましょう。

The script has not run yet.

class ScriptToggleState(rx.State):
    enabled: bool = False

    @rx.event
    def toggle(self):
        self.enabled = not self.enabled


rx.vstack(
    rx.button(
        rx.cond(ScriptToggleState.enabled, "Remove script", "Add script"),
        on_click=ScriptToggleState.toggle,
        variant="soft",
    ),
    rx.cond(
        ScriptToggleState.enabled,
        rx.script("document.getElementById('script_toggle_out').textContent = 'Script ran at ' + new Date().toLocaleTimeString();"),
    ),
    rx.text("The script has not run yet.", id="script_toggle_out", size="2"),
)

プロパティ	値	既定値	用途
最初の子要素	JavaScript の文字列	なし	すぐに実行するコード。子要素と`src`のどちらかは必須
`src`	URL	なし	読み込む JavaScript ファイル
`async_`	`True` / `False`	なし	ダウンロードでき次第、別に実行
`defer`	`True` / `False`	なし	文書を読み終えてから実行
`type`	`"module"`などの MIME	なし	スクリプトの種類
`char_set` `cross_origin` `integrity` `referrer_policy`	文字列	なし	外部ファイルのエンコーディング、CORS、整合性チェック、リファラー
`custom_attrs`	dict	なし	`data-*`のようなそのほか必要な属性
`id` `key` `class_name` `on_mount` `on_unmount`		なし	そのほかに受け取るプロパティ。ほかのプロパティを渡すと警告が出る

短く、長ければファイルに

複雑なインラインスクリプトは避けます。2〜3行を超えるなら、assetsフォルダーに.jsファイルとして置いてsrcで読み込むほうが直しやすくなります。分析・ソーシャルのスクリプトが求めるdata-*属性はcustom_attrsで渡します。この講座では外部スクリプトを読み込まないので、コードとしてだけ示します。

# load assets/my-custom.js (files in assets/ are served under /)
rx.script(src="/my-custom.js")

# tracking/social scripts: pass the data-* attributes they need via custom_attrs
rx.script(
    src="//gc.zgo.at/count.js",
    custom_attrs={"data-goatcounter": "https://reflextoys.goatcounter.com/count"},
)

公式ドキュメントは、rx.scriptが Next.js のnext/scriptを使うと説明し、描かれたタグにdata-nscript="afterInteractive"が付くと書いています。 Reflex 0.10 は Next.js の代わりに React Router を使い、rx.scriptはreact-helmetでタグを文書の<head>に入れます。そのため上のコードはおおよそ次のように描かれます。

<!-- Reflex 0.10: react-helmet puts it in the document <head> -->
<script src="//gc.zgo.at/count.js" data-goatcounter="https://reflextoys.goatcounter.com/count"></script>

イベントで実行する：rx.call_script

ページに常に付いているスクリプトではなく、「ボタンを押したときに一度」実行するコードなら、rx.call_scriptイベントのほうが適しています。 callbackを渡すと、JavaScript の結果の値を State のハンドラーで受け取れます。

unknown

class ScriptCallState(rx.State):
    language: str = "unknown"

    @rx.event
    def receive_language(self, value: str):
        self.language = value


rx.hstack(
    rx.button(
        "Read browser language",
        on_click=rx.call_script("navigator.language", callback=ScriptCallState.receive_language),
        variant="outline",
    ),
    rx.badge(ScriptCallState.language),
    align="center",
)

注文書を仕上げる

カードが描かれるときに入ったインラインスクリプトが、ブラウザのIntlとnavigator.languageを読み取って見出しの文章を書き換えます。サーバーには何も送りません。

Your time zone

Detecting...

rx.card(
    rx.script(
        "const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;"
        " document.getElementById('script_order_tz').textContent = tz + ' · ' + navigator.language;"
    ),
    rx.text("Your time zone", size="1", color_scheme="gray"),
    # the script rewrites this text before React takes over the page,
    # so tell React the mismatch is expected
    rx.heading("Detecting...", id="script_order_tz", size="4", custom_attrs={"suppressHydrationWarning": True}),
    max_width="320px",
)

工房ノート

rx.script("コード") はインライン、rx.script(src="/file.js") はファイル。どちらかは必須。
rx.cond と一緒に使えば State で出し入れできる。すでに実行された効果は残る。
2〜3行を超えるなら assets フォルダーの .js ファイルに。data-* 属性は custom_attrs。
0.10 の rx.script は next/script ではなく react-helmet で <head> に入る。
ボタンを押したときに一度実行するコードには rx.call_script(callback=...) が適している。

← 前へ

そのほかの道具 · Html Embed

そのほかの道具 · Memo

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex