実践的なサンプル。ライブデモ。
サンプルを選ぶと全画面で開き、ライブプレビューとソースが並んで表示されます。
コンポーネント
4静的・動的パラメーター、子要素、同一性で照合されるリスト、ネストしたデータを扱うプレーンな関数。各プレビューはマウント回数を数えます。
静的・動的パラメーター
値のパラメーターは、コンポーネントが構築されるときに一度だけ読まれます。関数のパラメーターは update() ごとに読まれます。どちらの場合もコンポーネント自体は一度しか実行されず、マウント回数がそれを証明します。
子要素と修飾子
コンポーネントはスプレッドで子要素を転送します: ビルダー、テキスト、属性オブジェクト、修飾子。条件付きの部分は when() に入れるので、それを囲むコンポーネントが作り直されることはありません。
リストの同一性
list() は項目が配列にある間、その行を保持します: 入力やフォーカスを失わずに並び替え、挿入、リネームができます。スイッチを入れると update ごとにオブジェクトを複製し、同一性を壊すコストを示します。
ネストしたデータ
メンバーとタスクを持つチーム: 階層ごとに 1 つのコンポーネント、ネストした list() 呼び出し、同じオブジェクトに対する関数としての派生カウント。深い変更はそのノードだけをパッチします。
API
13構成要素ごとに 1 つの小さなデモ。ドキュメントに埋め込まれているものと同じです。
タグビルダー
ビルダーは属性、静的な子要素、動的なテキストを受け取ります。Rename は状態を変更してから update() を呼び出します。
コンポーネント
コンポーネントはプレーンな関数です。Counter() の各呼び出しは自分のカウントを持ちます。
属性
属性の値は関数にできます。2 つ目のボタンは busy を反転して update() を呼び出し、Save の disabled と aria-busy がそれに従います。
イベント
onInput と onKeyDown はプレーンな属性です。入力してから Escape を押すとクリアされます。
ライフサイクル
onMount がインターバルを開始し、そのクリーンアップを返します。アンマウントでクリーンアップが実行されるので、タイマーが再びマウントされるまでカウントは止まります。
明示的な更新
count++ は変数を変えるだけです。テキストは次の update() で追いつきます。ボタンからでも、このページの他の何かからでも。
動的な値
名前を編集してください。静的なテキストは要素が構築されたときに固定されました。動的なテキストは update() ごとに再実行されます。forceUpdate() はツリーを作り直すので、静的なテキストも追いつきます。
update()
すべての update() はすべての動的な値を実行します。データが変わっていなくてもです。このページの他のデモもカウントを増やします。
scope()
両方のボタンは項目を追加してユーザーをリネームします。update('cart') はスコープ内のパネルだけを更新します。
when()
最初に真になった条件が勝ちます。どれも真でなければ .else() が描画されます。新しいブランチはゼロから構築されます。
list()
行は同一性で照合されます。行にチェックを入れてから Reverse: 同じ <li> がチェックボックスごと移動します。
region() と into()
積み重ねられたメインリージョンとサイドリージョンを持つレイアウトを、その外側から埋めます。Home に入力し、ダイアログを開いて閉じてください: テキストは残ります。Article は 1 つの into() で両方のリージョンを埋めます。
forceUpdate()
update() は動的な lang 行だけを更新します。forceUpdate() は App を再び呼び出し、同じ <h1> をパッチします。明示的な形式はページ全体ではなくこのツリーだけを作り直します。
スタイリング
3クラスを作り、クラスを合成し、小さなテーマを使います。
フォーム
3プレーンな状態に対するプレーンな関数としてのバリデーション、touched なフィールド、ステップ、動的な行。
フィールドバリデーション
プレーンな状態に対する関数としてのルール、フィールドが touched になってから表示されるエラー、保留状態付きのデバウンスされた非同期チェック、そしてそのすべてを待つ送信。
マルチステップウィザード
1 つのデータオブジェクトに対する when() ブランチとしての 3 ステップ。Next はそのステップのフィールドを touched にし、通過したときだけ進みます。Review は Edit リンク付きですべてを一覧します。
動的な行
配列の請求書明細を list() で描画します。各行は自分でバリデーションし、合計は有効な行だけを数え、他の行が追加・削除されても各行は入力内容を保持します。
SVG
27SVG タグビルダーで作るチャート、アニメーション、ツール、ゲーム。プレーンなデータ、ポインターイベント、update() で駆動します。
棒グラフ
配列から rect を作ります。その y と height はデータの関数なので、update() がバーを動かします。
折れ線グラフ
d が点から組み立てられるパスに、グラデーションの面と点ごとの circle を添えます。
ドーナツチャート
スライスごとに 1 つの circle。stroke-dasharray がリングの分け前を、stroke-dashoffset が開始位置を与えます。
SVG アニメーション
ビルダーとしての SMIL: animateSvg が太陽を脈動させ、animateTransformSvg が惑星を周回させます。動的な dur が速度を設定します。
ゲージ
stroke-dashoffset で満たされる円弧と、CSS transform で回る針。どちらも 1 つの数値の関数です。
レーダーチャート
5 つの軸に 5 つの値。形は d がデータから計算される 1 つのパスなので、update() がそれを変形させます。
ヒートマップ
fill-opacity がレベルに従う rect のグリッド。セルをクリックすると値が上がり、titleSvg の子要素がツールチップになります。
ホバーツールチップ
SVG 要素のポインターイベント。onPointerEnter がアクティブな点を選び、ツールチップのグループがそこへスライドします。
カーブエディター
3 次ベジェのハンドルをドラッグします。onPointerDown が点を選び、svg 上の onPointerMove がそれを動かし、パスが追従します。
時計
針は transform が時刻の関数である line です。onMount が刻みを開始し、クリーンアップを返します。
アイコントグル
CSS トランジションでバツ印に変形するメニューアイコンと、クリックで始まる SMIL アニメーションで弾むハート。
ライブストリーム
2 つの系列がタイマーで左へ流れます。1 ティックと同じ長さの CSS トランジションがスライドを滑らかにし、ホバーすると任意のサンプルを読めます。
ローソク足チャート
40 のスロットがそれぞれ自分のローソク足を読みます。時間足を変え、移動平均を切り替え、ホバーして数値を見るか、ライブのローソク足が刻むのを眺めてください。
バーチャートレース
10 本のバーは DOM から離れません。順位が translateY を設定するので、値が変わるとトランジションが各バーをその行へスライドさせます。
積み上げ面グラフ
4 つのバンドが積み上げ、ストリーム、パーセントのレイアウト間で変形します。系列を隠してもそのバンドの厚さがゼロになるだけなので、すべてのパスが形を保ちます。
ツリーマップ
ドリルダウンできる squarified レイアウト。指標を切り替えるとすべてのセルが新しい枠へスライドし、グループをクリックするとその子に入れ替わります。
ライブヒストグラム
4 つの分布からサンプルが流れ込みます。ビンは変更ごとに数え直され、フィットした釣鐘曲線が平均に追従し、スライダーがビンの数を設定します。
お絵かきパッド
ポインターイベントが polyline を描きます。list() がストロークごとに 1 つを描画し、描き途中のストロークは update() ごとに伸びます。
ロータリーノブ
カスタムスライダー: ポインターの角度が値を設定し、矢印キーが値を刻み、pathLength="100" が値をダッシュに変えます。
カラーホイール
角度で色相を、距離で彩度を選びます。90 個のくさび形、放射グラデーション、暗い円盤でホイールを作ります。
スピログラフ
リングの内側を車輪が転がり、ペンがその軌跡を描きます。各フレームは 1 本のダッシュを伸ばし、自分の scope() だけを更新します。
跳ねるボール
requestAnimationFrame ループの中の重力、壁、衝突。引いて放すとボールを打ち出します。
ねばねばブロブ
ぼかしとカラーマトリックスのフィルターがブロブを溶け合わせます。circle の軌跡がポインターに追従します。
力学グラフ
ノードは反発し、リンクは引き寄せ、レイアウトは静止するまで冷えていきます。ノードをドラッグするか、クリックして子を生やしてください。
ブラシとズーム
概要図で範囲をブラシすると上のチャートがズームします。ブラシに追従する clipPath が選択範囲に色を付けます。
三目並べ
コンピューターと対戦します。when() が各マークを追加し、ダッシュの CSS アニメーションがそれを描き込みます。
円形テキスト
バッジの文字を入力してください。textPath がテキストを円に沿って曲げ、textLength がちょうど 1 周に収めます。
ルーティング
6ルートテーブル、マッチング、アクティブなルート、レイヤー、ローダー。nuclo-router は別パッケージです: npm install nuclo nuclo-router。
ルーティングされたアプリ
フレーム内で動く、独自のルーターを持つ本物のアプリ: ルートテーブル、1 つの outlet()、プレーンなリンク、保留状態、404。あちこちクリックしてから Back を使ってください。
ネストしたルート
Docs は子ルートを持つレイアウトです。トピックはその outlet() に描画され、./topic リンクはレイアウトのルートを基準に解決されます。ノートに入力してからトピックを切り替えてください: レイアウトは作り直されません。
ルートローダー
投稿ページは、ページが構築される前に実行される load() をエクスポートします。待っている間の router.pending と、壊れた投稿で throw したときの Retry 付きエラー状態を見てください。
レイヤー
注文フォームは顧客ページをレイヤーとしてプッシュし、その結果を await します。フォームは再描画されないのでメモは残ります。Save がプッシュを解決し、Cancel か Back が閉じます。
複数のルーターと読み込み
2 つのルーター、2 つのスピナー。ショップのレイアウトとそのセクションの両方が load() を持ち、1 つの router.pending の下で並行して実行されます。サイドバーには作成されたが開始されていない独自のルーターがあり、その読み込みフラグは onNavigate から更新されます。
パターンマッチング
静的、:param、*rest のパターンと、2 つの親の下にマウントされたセクションテーブル。パスを入力して、何も読み込まずに解決する match() を見てください。
アプリ
15より大きなプログラムを全画面で、実際のソースをタブの裏に: ウィンドウ付きのデスクトップ、データグリッド、チャット、ゲーム、エディター、そして自分の状態を自分で持つライブラリ。
ページビルダー
ページに直接書き、グリップをドラッグしてブロックを並び替えたりレイアウトに移したり、/ を押して挿入し、右クリックでアクションを出します。グリッドとフレックスのレイアウトをスタイリングし、編集を取り消し、スマートフォンサイズでプレビューし、HTML をエクスポートします。
アルゴリズムステッパー
エンジンはプレーンな JavaScript です: 配列を変更し、ステップごとに yield するジェネレーター。プレイヤーは next() と update() を呼び出し、バーは同じオブジェクトに対する list() なので、スワップで 2 つの要素が移動します。
カンバンボード
チームのボード: タスクを追加し、人に割り当て、ダイアログで編集し、人や検索で絞り込み、列の間でドラッグし、削除を取り消します。列とカードは同じオブジェクトのプレーンな配列で、すべての移動は splice() です。行は同一性で照合されるので、カードのドラッグ、並び替え、割り当て、編集はその要素を再利用します。画面上のマウント回数がそれを証明します。
three.js インスペクター
自分の状態を自分で持つライブラリ。パネルは位置、色、フラグを three.js のオブジェクトから直接読み取り、編集をそこへ書き戻します。レンダーループは 1 フレームに 1 回 update() を呼び出します。何もミラーリングされません。
無限スクロール
終わりのないフィード: 高速な偽の fetch() が各ページをその場で生成し、1 つのプレーンな配列に入れます。DOM にあるのはビューポート近くの行だけ: list() が 2 つのスペーサーの間に posts.slice(start, end) を描画するので、10 万件の投稿でもページは軽いままです。本当の末尾にあるセンチネルが、見える前に次のページを要求します。
デスクトップ
ファイル、ノート、ターミナル、電卓、タイマー、カンバンボード、ファイナンス、カレンダーを備えた動作するデスクトップ。フォルダーを作成・整理し、ノートを編集し、ブラウザに保存される 1 つの共有シミュレートディスク上でシェルコマンドを使います。電卓にはキーボードから直接入力でき、ターミナルはどこをクリックしても入力行にフォーカスし、ボードでは列の間でカードをドラッグでき、ファイナンスのスプレッドシートで台帳を付けるとチャートが動きます（台帳は IndexedDB に保存されます）。ウィンドウは移動、リサイズ、アプリの切り替えの間も状態を保ち、動作中のタイマーは into() でタスクバーのトレイを埋めます。
ノードグラフ
数値、テキスト、スイッチを演算、比較、If ノードに配線すると、入力するたびにすべての値が更新されます。関数もグラフです: その Input と Output ノードがすべての Call のポートになり、Call は自分自身の関数を指定できるので、factorial と sum は If を出口として再帰します。エンジンはプレーンな JavaScript です: 各ノードは入力を求めて yield するジェネレーターで、1 つのループが自前のスタックからそれらを駆動するため、sum(50000) は JavaScript のコールスタックに触れずに約 0.1 秒で 5 万段の呼び出しをネストします。出口のない再帰を止めるのはステップ予算だけです。ドラッグは x と y を書き込み、キャンバスのスコープだけを更新します。実行回数は、移動でグラフが一度も実行されないことを示します。
データグリッド
10,000 個のプレーンな行オブジェクトに対する作業テーブル。検索、フィルター、ソート、ページングは配列に対するプレーンな関数で、テーブル本体は現在のページに対する list() です。行は同一性で照合されるので、ソートはページに残る行を移動させ、編集された行はどこでも同じオブジェクトです。構築された行数がそれを証明します。
チャット
3 つのチャンネルを持つチャット。各チャンネルは履歴、カーソル、入力中、下書き、スクロール位置を持つ 1 つのプレーンなオブジェクトなので、切り替えてもすべてのチャンネルがそのまま保たれ、update("chat-sidebar") は未読バッジだけを更新します。履歴は unshift() と、追加した高さ分だけ増える scrollTop で、上方向に無限に読み込まれます。あなたのメッセージはサーバーが受け取る前に表示され、send() は同じオブジェクトをパッチし、Retry、Edit、Delete、リアクションはその行を作り直しません。メッセージはコード、太字、リンク、@メンションを描画します。
ライブダッシュボード
毎秒 20 回から毎秒 1 回まで、異なる頻度で更新されるカード。各カードは scope() で、そのタイマーがカードの id を付けて update() を呼び出すので、ティックはそのカードだけを評価します。すべての動的な値は画面上で数えられます: プレーンな update() に切り替えると、時計は 1 回変わるために毎秒およそ 100 回評価されます。
ピクセルエディター
絵は 1024 個の色文字列からなる 1 つのプレーンな配列で、各セルはそこから色を読みます。ストロークは配列に書き込んで update() を呼び出し、終わるとエディターは slice() でコピーを保存します。Undo、Redo、そして履歴 list() の各ステップは古い配列を戻すだけ: ストアも、イミュータブルなデータもありません。
スネーク
ゲームループは、プレーンなオブジェクトに対して step() を呼び出し、ティックごとに update() を一度呼び出すタイマーです。スネークはそのセルオブジェクトの list() で、各ティックで尾のオブジェクトが新しい頭になるため、1 つの要素が移動し、何も構築されません: 構築されたセグメント数はスネークが食べたときにだけ増えます。餌は keyframes() アニメーションで現れます。
ステップシーケンサー
自分のクロックを自分で持つライブラリ。Web Audio は独自のタイムラインですべての音を先行予約し、パターンはグリッドが反転しスケジューラーが読むプレーンな 2 次元の真偽値配列なので、クリックは次の周回で聞こえます。再生ヘッドは可聴ステップが変わったときにだけ自分の scope() を更新します。音声は最初の Play で開始し、マウントのクリーンアップで閉じるので、サンプルを離れると音は止まります。
ロケール切り替え
すべてのラベルは単一言語アプリと同じように書かれた静的な値なので、update() は二度と読み直しません: カートのクリックは数量と合計だけを更新します。言語の切り替えはこのツリーで forceUpdate() を呼び出し、コンポーネントを再実行して lang と dir を含む同じ要素をパッチします。金額、複数形、日付、リストは Intl から得られ、カートと入力済みのクーポンは切り替え後も残ります。
テーマエディター
小さなコンポーネントライブラリ: createCss() がトークンに名前を付け、variants() がそれらからボタン、バッジ、カード、入力欄、アラート、スイッチを組み立てます。トークンは CSS 変数なので、すべてのクラスは一度だけコンパイルされます。各コントロールはプレーンなテーマオブジェクトに書き込んで update() を呼び出し、それが 1 つの style 要素のテキストを書き換えます。