API › @builder.io/qwik

_qrlSync

この API は開発者向けのアルファプレビューとして提供されており、受け取ったフィードバックに基づいて変更される可能性があります。本番環境ではこの API を使用しないでください。

関数を同期的にロード可能な QRL に抽出します。

注: 同期 QRL 関数は、エクスポートを含むどの変数もクロージャできません。

_qrlSync: <TYPE extends Function>(fn: TYPE, serializedFn?: string) =>
  SyncQRL<TYPE>;

パラメータ

型

説明

fn

TYPE

抽出された関数

serializedFn

string

（オプション） 文字列形式でシリアライズされた関数。

SyncQRL<TYPE>

このセクションを編集

"q:slot"

'q:slot'?: string;

"xlink:actuate"

'xlink:actuate'?: string | undefined;

"xlink:arcrole"

'xlink:arcrole'?: string | undefined;

"xlink:href"

'xlink:href'?: string | undefined;

"xlink:role"

'xlink:role'?: string | undefined;

"xlink:show"

'xlink:show'?: string | undefined;

"xlink:title"

'xlink:title'?: string | undefined;

"xlink:type"

'xlink:type'?: string | undefined;

"xml:base"

'xml:base'?: string | undefined;

"xml:lang"

'xml:lang'?: string | undefined;

"xml:space"

'xml:space'?: string | undefined;

"xmlns:xlink"

'xmlns:xlink'?: string | undefined;

$

Qwik オプティマイザのマーカー関数。

$(...) を使用して、Qwik オプティマイザに $(...) 内の式を QRL で参照される遅延ロード可能なリソースに抽出するように指示します。

$: <T>(expression: T) => QRL<T>;

パラメータ

型

説明

式

T

遅延ロードする必要がある式

QRL<T>

このセクションを編集

AnchorHTMLAttributes

export interface AnchorHTMLAttributes<T extends Element> extends Attrs<'a', T>

拡張: Attrs<'a', T>

このセクションを編集

AreaHTMLAttributes

export interface AreaHTMLAttributes<T extends Element> extends Attrs<'area', T>

拡張: Attrs<'area', T>

このセクションを編集

AriaAttributes

TS はこれらを、Qwik と互換性のない React 構文で定義しています。例：aria-atomic の代わりに ariaAtomic。

export interface AriaAttributes

プロパティ

修飾子

型

説明

"aria-activedescendant"?

string | undefined

（オプション） DOM フォーカスが複合ウィジェット、テキストボックス、グループ、またはアプリケーションにあるときに、現在アクティブな要素を識別します。

"aria-atomic"?

Booleanish | undefined

（オプション） 補助技術が、aria-relevant 属性によって定義された変更通知に基づいて、変更された領域のすべてまたは一部のみを提示するかどうかを示します。

"aria-autocomplete"?

'none' | 'inline' | 'list' | 'both' | undefined

（オプション） テキストの入力が、入力に対してユーザーが意図した値の 1 つ以上の予測の表示をトリガーする可能性があり、予測が行われた場合にどのように提示されるかを指定します。

"aria-busy"?

Booleanish | undefined

（オプション） 要素が変更されており、補助技術が変更をユーザーに公開する前に完了するまで待機する必要があることを示します。

"aria-checked"?

boolean | 'false' | 'mixed' | 'true' | undefined

（オプション） チェックボックス、ラジオボタン、その他のウィジェットの現在の「チェック済み」状態を示します。

"aria-colcount"?

number | undefined

（オプション） テーブル、グリッド、またはツリーグリッド内の列の総数を定義します。

"aria-colindex"?

number | undefined

（オプション） テーブル、グリッド、またはツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。

"aria-colspan"?

number | undefined

（オプション） テーブル、グリッド、またはツリーグリッド内のセルまたはグリッドセルによってスパンされる列数を定義します。

"aria-controls"?

string | undefined

（オプション） 現在の要素によってコンテンツまたは存在が制御される要素（または複数の要素）を識別します。

"aria-current"?

boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined

（オプション） コンテナまたは関連要素のセット内の現在の項目を表す要素を示します。

"aria-describedby"?

string | undefined

（オプション） オブジェクトを説明する要素（または複数の要素）を識別します。

"aria-details"?

string | undefined

（オプション） オブジェクトの詳細な拡張説明を提供する要素を識別します。

"aria-disabled"?

Booleanish | undefined

（オプション） 要素が認識可能だが無効であり、編集または操作できないことを示します。

"aria-dropeffect"?

'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined

（オプション） ドラッグされたオブジェクトがドロップターゲットでリリースされたときに実行できる機能を示します。

"aria-errormessage"?

string | undefined

（オプション） オブジェクトのエラーメッセージを提供する要素を識別します。

"aria-expanded"?

Booleanish | undefined

（オプション） 要素、またはそれが制御する別のグループ化要素が現在展開されているか折りたたまれているかを示します。

"aria-flowto"?

string | undefined

（オプション） ユーザーの裁量で、補助技術がドキュメントソース順の一般的なデフォルトの読み取りをオーバーライドできるように、コンテンツの代替読み取り順で次の要素（または複数の要素）を識別します。

"aria-grabbed"?

Booleanish | undefined

（オプション） ドラッグアンドドロップ操作での要素の「グラブ」状態を示します。

"aria-haspopup"?

boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined

（オプション） 要素によってトリガーできるメニューやダイアログなどのインタラクティブなポップアップ要素の可用性とタイプを示します。

"aria-hidden"?

Booleanish | undefined

（オプション） 要素がアクセシビリティ API に公開されているかどうかを示します。

"aria-invalid"?

boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined

（オプション） 入力された値がアプリケーションで予期される形式に準拠していないことを示します。

"aria-keyshortcuts"?

string | undefined

（オプション） 作成者が要素をアクティブ化またはフォーカスを与えるために実装したキーボードショートカットを示します。

"aria-label"?

string | undefined

（オプション） 現在の要素にラベルを付ける文字列値を定義します。

"aria-labelledby"?

string | undefined

（オプション） 現在の要素にラベルを付ける要素（または複数の要素）を識別します。

"aria-level"?

number | undefined

（オプション） 構造内の要素の階層レベルを定義します。

"aria-live"?

'off' | 'assertive' | 'polite' | undefined

（オプション） 要素が更新されること、およびライブリージョンからユーザーエージェント、補助技術、およびユーザーが予期できる更新のタイプを説明することを示します。

"aria-modal"?

Booleanish | undefined

（オプション） 要素が表示されたときにモーダルかどうかを示します。

"aria-multiline"?

Booleanish | undefined

（オプション） テキストボックスが複数行の入力を受け入れるか、1 行の入力のみを受け入れるかを示します。

"aria-multiselectable"?

Booleanish | undefined

（オプション） ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。

"aria-orientation"?

'horizontal' | 'vertical' | undefined

(オプション) 要素の向きが水平、垂直、または不明/曖昧のいずれであるかを示します。

"aria-owns"?

string | undefined

(オプション) DOM要素間の視覚的、機能的、または文脈的な親子関係を定義するために、1つまたは複数の要素を識別します。この関係はDOM階層を使用して表現できない場合に役立ちます。

"aria-placeholder"?

string | undefined

(オプション) コントロールに値がない場合に、ユーザーがデータ入力をする際に役立つ短いヒント（単語または短いフレーズ）を定義します。ヒントは、サンプル値、または予期される形式の簡単な説明の可能性があります。

"aria-posinset"?

number | undefined

(オプション) 現在のlistitemまたはtreeitemのセットにおける要素の番号または位置を定義します。セット内のすべての要素がDOMに存在する場合は不要です。

"aria-pressed"?

boolean | 'false' | 'mixed' | 'true' | undefined

(オプション) トグルボタンの現在の「押された」状態を示します。

"aria-readonly"?

Booleanish | undefined

(オプション) 要素が編集不可能だが、操作は可能であることを示します。

"aria-relevant"?

'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined

(オプション) ライブリージョン内のアクセシビリティツリーが変更されたときに、ユーザーエージェントがトリガーする通知を示します。

"aria-required"?

Booleanish | undefined

(オプション) フォームを送信する前に、要素へのユーザー入力が必要であることを示します。

"aria-roledescription"?

string | undefined

(オプション) 要素の役割に関する人間が読める、作成者によってローカライズされた説明を定義します。

"aria-rowcount"?

number | undefined

(オプション) テーブル、グリッド、またはツリーグリッド内の行の総数を定義します。

"aria-rowindex"?

number | undefined

(オプション) テーブル、グリッド、またはツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。

"aria-rowspan"?

number | undefined

(オプション) テーブル、グリッド、またはツリーグリッド内のセルまたはグリッドセルがスパンする行数を定義します。

"aria-selected"?

Booleanish | undefined

(オプション) さまざまなウィジェットの現在の「選択された」状態を示します。

"aria-setsize"?

number | undefined

(オプション) 現在のlistitemまたはtreeitemのセット内のアイテム数を定義します。セット内のすべての要素がDOMに存在する場合は不要です。

"aria-sort"?

'none' | 'ascending' | 'descending' | 'other' | undefined

(オプション) テーブルまたはグリッド内のアイテムが昇順または降順でソートされているかどうかを示します。

"aria-valuemax"?

number | undefined

(オプション) レンジウィジェットの最大許容値を定義します。

"aria-valuemin"?

number | undefined

(オプション) レンジウィジェットの最小許容値を定義します。

"aria-valuenow"?

number | undefined

(オプション) レンジウィジェットの現在の値を定義します。

"aria-valuetext"?

string | undefined

(オプション) レンジウィジェットのaria-valuenowの人間が読めるテキストの代替を定義します。

このセクションを編集

AriaRole

export type AriaRole =
  | "alert"
  | "alertdialog"
  | "application"
  | "article"
  | "banner"
  | "button"
  | "cell"
  | "checkbox"
  | "columnheader"
  | "combobox"
  | "complementary"
  | "contentinfo"
  | "definition"
  | "dialog"
  | "directory"
  | "document"
  | "feed"
  | "figure"
  | "form"
  | "grid"
  | "gridcell"
  | "group"
  | "heading"
  | "img"
  | "link"
  | "list"
  | "listbox"
  | "listitem"
  | "log"
  | "main"
  | "marquee"
  | "math"
  | "menu"
  | "menubar"
  | "menuitem"
  | "menuitemcheckbox"
  | "menuitemradio"
  | "navigation"
  | "none"
  | "note"
  | "option"
  | "presentation"
  | "progressbar"
  | "radio"
  | "radiogroup"
  | "region"
  | "row"
  | "rowgroup"
  | "rowheader"
  | "scrollbar"
  | "search"
  | "searchbox"
  | "separator"
  | "slider"
  | "spinbutton"
  | "status"
  | "switch"
  | "tab"
  | "table"
  | "tablist"
  | "tabpanel"
  | "term"
  | "textbox"
  | "timer"
  | "toolbar"
  | "tooltip"
  | "tree"
  | "treegrid"
  | "treeitem"
  | (string & {});

このセクションを編集

AudioHTMLAttributes

export interface AudioHTMLAttributes<T extends Element> extends Attrs<'audio', T>

拡張: Attrs<'audio', T>

このセクションを編集

BaseHTMLAttributes

export interface BaseHTMLAttributes<T extends Element> extends Attrs<'base', T>

拡張: Attrs<'base', T>

このセクションを編集

BlockquoteHTMLAttributes

export interface BlockquoteHTMLAttributes<T extends Element> extends Attrs<'blockquote', T>

拡張: Attrs<'blockquote', T>

このセクションを編集

Booleanish

export type Booleanish = boolean | `${boolean}`;

このセクションを編集

ButtonHTMLAttributes

export interface ButtonHTMLAttributes<T extends Element> extends Attrs<'button', T>

拡張: Attrs<'button', T>

このセクションを編集

cache

cache(policyOrMilliseconds: number | 'immutable'): void;

パラメータ

型

説明

policyOrMilliseconds

number | 'immutable'

void

CanvasHTMLAttributes

export interface CanvasHTMLAttributes<T extends Element> extends Attrs<'canvas', T>

拡張: Attrs<'canvas', T>

このセクションを編集

ClassList

クラスリストは、文字列、ブール値、配列、またはオブジェクトにできます。

配列の場合、各アイテムはクラスリストであり、それらはすべて追加されます。

オブジェクトの場合、キーはクラス名文字列であり、値はクラス名文字列を追加するかどうかを決定するブール値です。

export type ClassList =
  | string
  | undefined
  | null
  | false
  | Record<string, boolean | string | number | null | undefined>
  | ClassList[];

参照: ClassList

このセクションを編集

cleanup

cleanup(): void;

戻り値

void

ColgroupHTMLAttributes

export interface ColgroupHTMLAttributes<T extends Element> extends Attrs<'colgroup', T>

拡張: Attrs<'colgroup', T>

このセクションを編集

ColHTMLAttributes

export interface ColHTMLAttributes<T extends Element> extends Attrs<'col', T>

拡張: Attrs<'col', T>

このセクションを編集

Component

Qwikコンポーネントを表す型。

Componentは、component$を呼び出すことによって返される型です。

interface MyComponentProps {
  someProp: string;
}
const MyComponent: Component<MyComponentProps> = component$(
  (props: MyComponentProps) => {
    return <span>{props.someProp}</span>;
  },
);

export type Component<PROPS = unknown> = FunctionComponent<PublicProps<PROPS>>;

参照: FunctionComponent, PublicProps

このセクションを編集

component$

UIの作成に使用できるQwikコンポーネントを宣言します。

component$を使用してQwikコンポーネントを宣言します。Qwikコンポーネントは、Qwikフレームワークが、他のQwikコンポーネントとは独立してコンポーネントを遅延ロードして実行できるようにする特別な種類のコンポーネントであり、コンポーネントのライフサイクル フックとイベントハンドラーも遅延ロードします。

余談：標準の同期動作をする通常の（標準JSX）コンポーネントも宣言できます。

Qwikコンポーネントは、コンポーネントの実装をすぐにロードすることを強制せずに、コンポーネントをどのように使用する必要があるかを記述するファサードです。最小限のQwik定義は次のとおりです。

例

カウンターコンポーネントの作成方法を示す例

export interface CounterProps {
  initialValue?: number;
  step?: number;
}
export const Counter = component$((props: CounterProps) => {
  const state = useStore({ count: props.initialValue || 0 });
  return (
    <div>
      <span>{state.count}</span>
      <button onClick$={() => (state.count += props.step || 1)}>+</button>
    </div>
  );
});

• component$はコンポーネントが宣言される方法です。- { value?: number; step?: number }は、コンポーネントのパブリック（props）インターフェースを宣言します。- { count: number }は、コンポーネントのプライベート（state）インターフェースを宣言します。

上記は次のようにも使用できます。

export const OtherComponent = component$(() => {
  return <Counter initialValue={100} />;
});

参照: component、useCleanup、onResume、onPause、useOn、useOnDocument、useOnWindow、useStyles

component$: <PROPS = unknown>(onMount: OnRenderFn<PROPS>) => Component<PROPS>;

パラメータ

型

説明

onMount

OnRenderFn<PROPS>

Component<PROPS>

このセクションを編集

ComponentBaseProps

export interface ComponentBaseProps

プロパティ

修飾子

型

説明

"q:slot"?

string

(オプション)

key?

string | number | null | undefined

(オプション)

このセクションを編集

componentQrl

UIの作成に使用できるQwikコンポーネントを宣言します。

component$を使用してQwikコンポーネントを宣言します。Qwikコンポーネントは、Qwikフレームワークが、他のQwikコンポーネントとは独立してコンポーネントを遅延ロードして実行できるようにする特別な種類のコンポーネントであり、コンポーネントのライフサイクル フックとイベントハンドラーも遅延ロードします。

余談：標準の同期動作をする通常の（標準JSX）コンポーネントも宣言できます。

Qwikコンポーネントは、コンポーネントの実装をすぐにロードすることを強制せずに、コンポーネントをどのように使用する必要があるかを記述するファサードです。最小限のQwik定義は次のとおりです。

例

カウンターコンポーネントの作成方法を示す例

export interface CounterProps {
  initialValue?: number;
  step?: number;
}
export const Counter = component$((props: CounterProps) => {
  const state = useStore({ count: props.initialValue || 0 });
  return (
    <div>
      <span>{state.count}</span>
      <button onClick$={() => (state.count += props.step || 1)}>+</button>
    </div>
  );
});

• component$はコンポーネントが宣言される方法です。- { value?: number; step?: number }は、コンポーネントのパブリック（props）インターフェースを宣言します。- { count: number }は、コンポーネントのプライベート（state）インターフェースを宣言します。

上記は次のようにも使用できます。

export const OtherComponent = component$(() => {
  return <Counter initialValue={100} />;
});

参照: component、useCleanup、onResume、onPause、useOn、useOnDocument、useOnWindow、useStyles

componentQrl: <PROPS extends Record<any, any>>(
  componentQrl: QRL<OnRenderFn<PROPS>>,
) => Component<PROPS>;

パラメータ

型

説明

componentQrl

QRL<OnRenderFn<PROPS>>

Component<PROPS>

このセクションを編集

ComputedFn

export type ComputedFn<T> = () => T;

このセクションを編集

ContextId

ContextIdは、コンテキストのタイプセーフなIDです。

コンテキストは、prop-drillingなしでストアを子コンポーネントに渡す方法です。

createContextId()を使用してContextIdを作成します。ContextIdは、コンテキストのシリアル化可能な識別子にすぎません。コンテキスト値自体ではありません。値については、useContextProvider()およびuseContext()を参照してください。Qwikは、再開可能性を維持する方法でコンテキストプロバイダーとコンシューマーを追跡できるようにするために、コンテキストのシリアル化可能なIDを必要とします。

例

// Declare the Context type.
interface TodosStore {
  items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
 
// Example of providing context to child components.
export const App = component$(() => {
  useContextProvider(
    TodosContext,
    useStore<TodosStore>({
      items: ["Learn Qwik", "Build Qwik app", "Profit"],
    }),
  );
 
  return <Items />;
});
 
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
  const todos = useContext(TodosContext);
  return (
    <ul>
      {todos.items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
});

export interface ContextId<STATE>

プロパティ

修飾子

型

説明

__brand_context_type__

readonly

STATE

コンテキストの型情報を格納するデザインタイムプロパティ。

id

readonly

string

コンテキストの一意のID。

このセクションを編集

CorePlatform

プラットフォーム抽象化のための低レベルAPI。

異なるプラットフォーム（ブラウザー、ノード、サービスワーカー）は、requestAnimationFrameやインポートなどの処理方法が異なる場合があります。Qwikをプラットフォームに依存しないようにするために、QwikはCorePlatform APIを使用してプラットフォームAPIにアクセスします。

CorePlatformは、シンボルのインポートも担当します。インポートマップは、クライアント（ブラウザー）とサーバーで異なります。このため、サーバーには、シンボルをjavascriptチャンクにマップするために使用されるマニフェストがあります。マニフェストはCorePlatformにカプセル化されています。このため、サーバーで同時に複数のアプリケーションが実行されている可能性があるため、CorePlatformをグローバルにすることはできません。

これは低レベルAPIであり、これにアクセスする必要はないはずです。

export interface CorePlatform

プロパティ

修飾子

型

説明

chunkForSymbol

(symbolName: string, chunk: string | null, parent?: string) => readonly [symbol: string, chunk: string] | undefined

シンボルのチャンク名を取得します。

アプリケーションがサーバー上で実行されている場合、シンボルは異なるファイルからインポートされる可能性があります（サーバービルドは通常、単一のjavascriptチャンクであるため）。このため、チャンクをサーバー形式からクライアント（ブラウザー）形式に変換する必要があります。これは、マニフェストでシンボル（グローバルに一意）を検索することによって行われます。（マニフェストは、シンボルからクライアントチャンク名へのマッピングです。）

importSymbol

(containerEl: Element | undefined, url: string | URL | undefined | null, symbol: string) => ValueOrPromise<any>

QRLからシンボル値を取得します。

Qwikは、データとクロージャーを遅延ロードする必要があります。このために、Qwikは、必要なリソースのシリアル化可能な参照であるQRLを使用します。QRLには、importSymbolを使用して参照を取得するために必要なすべての情報が含まれています。

なぜimport()を使用しないのですか？import()は現在のファイルに対して相対的であり、現在のファイルは常にQwikフレームワークであるためです。したがって、QRLには、Qwikフレームワークファイルではなく、アプリケーションベースに対して相対的にインポートをシリアル化できるようにする追加情報があります。

isServer

boolean

サーバープラットフォームで実行されている場合はTrue。

nextTick

(fn: () => any) => Promise<any>

次のティックで操作を実行します。

raf

(fn: () => any) => Promise<any>

次のrequest-animation-frameで操作を実行します。

このセクションを編集

CorrectedToggleEvent

これは、ToggleEventのTS定義を修正します。

export interface CorrectedToggleEvent extends Event

拡張: Event

プロパティ

修飾子

型

説明

newState

readonly

'open' | 'closed'

prevState

readonly

'open' | 'closed'

このセクションを編集

createComputed$

警告: このAPIは現在廃止されています。

これはテクノロジプレビューです。

ComputedFnで使用されているシグナルが変更されると更新される読み取り専用シグナルを返します。useComputed$とは異なり、これはフックではなく、常に新しいシグナルを作成します。

createComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>;

パラメータ

型

説明

qrl

ComputedFn<T>

Signal<Awaited<T>>

このセクションを編集

createComputedQrl

createComputedQrl: <T>(qrl: QRL<ComputedFn<T>>) => Signal<Awaited<T>>;

パラメータ

型

説明

qrl

QRL<ComputedFn<T>>

Signal<Awaited<T>>

このセクションを編集

createContextId

アプリケーションで使用するコンテキストIDを作成します。名前はスペースなしで記述する必要があります。

コンテキストは、prop-drillingなしでストアを子コンポーネントに渡す方法です。

createContextId()を使用してContextIdを作成します。ContextIdは、コンテキストのシリアル化可能な識別子にすぎません。コンテキスト値自体ではありません。値については、useContextProvider()およびuseContext()を参照してください。Qwikは、再開可能性を維持する方法でコンテキストプロバイダーとコンシューマーを追跡できるようにするために、コンテキストのシリアル化可能なIDを必要とします。

例

// Declare the Context type.
interface TodosStore {
  items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
 
// Example of providing context to child components.
export const App = component$(() => {
  useContextProvider(
    TodosContext,
    useStore<TodosStore>({
      items: ["Learn Qwik", "Build Qwik app", "Profit"],
    }),
  );
 
  return <Items />;
});
 
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
  const todos = useContext(TodosContext);
  return (
    <ul>
      {todos.items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
});

createContextId: <STATE = unknown>(name: string) => ContextId<STATE>;

パラメータ

型

説明

name

string

コンテキストの名前。

ContextId<STATE>

このセクションを編集

createSignal

警告: このAPIは現在廃止されています。

これはテクノロジプレビューです。

シグナルを作成します。

初期状態が関数の場合、関数が呼び出されて実際の初期状態が計算されます。

createSignal: UseSignal;

このセクションを編集

CSSProperties

export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number>

拡張: CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number>

このセクションを編集

DataHTMLAttributes

export interface DataHTMLAttributes<T extends Element> extends Attrs<'data', T>

拡張: Attrs<'data', T>

このセクションを編集

DelHTMLAttributes

export interface DelHTMLAttributes<T extends Element> extends Attrs<'del', T>

拡張: Attrs<'del', T>

このセクションを編集

DetailsHTMLAttributes

export interface DetailsHTMLAttributes<T extends Element> extends Attrs<'details', T>

拡張: Attrs<'details', T>

このセクションを編集

DevJSX

export interface DevJSX

プロパティ

修飾子

型

説明

columnNumber

number

fileName

string

lineNumber

number

stack?

string

(オプション)

このセクションを編集

DialogHTMLAttributes

export interface DialogHTMLAttributes<T extends Element> extends Attrs<'dialog', T>

拡張: Attrs<'dialog', T>

このセクションを編集

DOMAttributes

DOM要素が受け入れるQwik固有の属性

export interface DOMAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL>

拡張: DOMAttributesBase<EL>, QwikEvents<EL>

プロパティ

修飾子

型

説明

class?

ClassList | Signal<ClassList> | undefined

(オプション)

このセクションを編集

EagernessOptions

export type EagernessOptions = "visible" | "load" | "idle";

このセクションを編集

Element

type Element = JSXOutput;

参照: JSXOutput

ElementChildrenAttribute

interface ElementChildrenAttribute

プロパティ

修飾子

型

説明

children

JSXChildren

ElementType

type ElementType = string | FunctionComponent<Record<any, any>>;

参照: FunctionComponent

EmbedHTMLAttributes

export interface EmbedHTMLAttributes<T extends Element> extends Attrs<'embed', T>

拡張: Attrs<'embed', T>

このセクションを編集

ErrorBoundaryStore

export interface ErrorBoundaryStore

プロパティ

修飾子

型

説明

error

any | undefined

このセクションを編集

event$

event$: <T>(qrl: T) => QRL<T>;

パラメータ

型

説明

qrl

T

QRL<T>

このセクションを編集

EventHandler

DOMイベントハンドラ

export type EventHandler<EV = Event, EL = Element> = {
  bivarianceHack(event: EV, element: EL): any;
}["bivarianceHack"];

このセクションを編集

eventQrl

eventQrl: <T>(qrl: QRL<T>) => QRL<T>;

パラメータ

型

説明

qrl

QRL<T>

QRL<T>

このセクションを編集

FieldsetHTMLAttributes

export interface FieldsetHTMLAttributes<T extends Element> extends Attrs<'fieldset', T>

拡張: Attrs<'fieldset', T>

このセクションを編集

FormHTMLAttributes

export interface FormHTMLAttributes<T extends Element> extends Attrs<'form', T>

拡張: Attrs<'form', T>

このセクションを編集

Fragment

Fragment: FunctionComponent<{
  children?: any;
  key?: string | number | null;
}>;

このセクションを編集

FunctionComponent

JSXOutputを返すpropsオブジェクトを受け取る任意の関数。

key、flags、およびdevパラメータは内部で使用されます。

export type FunctionComponent<P = unknown> = {
  renderFn(
    props: P,
    key: string | null,
    flags: number,
    dev?: DevJSX,
  ): JSXOutput;
}["renderFn"];

参照: DevJSX, JSXOutput

このセクションを編集

getPlatform

CorePlatformを取得します。

CorePlatformは、シンボルからjavascriptインポートチャンクへのマッピングを含むマニフェストの取得も担当します。このため、CorePlatformはグローバルにすることができず、現在実行中のアプリケーションに固有です。サーバー上では、単一のサーバーインスタンスで多くの異なるアプリケーションが実行されている可能性があり、このため、CorePlatformはアプリケーションドキュメントに関連付けられています。

getPlatform: () => CorePlatform;

戻り値

CorePlatform

このセクションを編集

h

export declare namespace h

Function

説明

h(type)

h(type, data)

h(type, text)

h(type, children)

h(type, data, text)

h(type, data, children)

h(sel, data, children)

このセクションを編集

h

export declare namespace h

Function

説明

h(type)

h(type, data)

h(type, text)

h(type, children)

h(type, data, text)

h(type, data, children)

h(sel, data, children)

このセクションを編集

HrHTMLAttributes

export interface HrHTMLAttributes<T extends Element> extends Attrs<'hr', T>

拡張: Attrs<'hr', T>

このセクションを編集

HTMLAttributeAnchorTarget

export type HTMLAttributeAnchorTarget =
  | "_self"
  | "_blank"
  | "_parent"
  | "_top"
  | (string & {});

このセクションを編集

HTMLAttributeReferrerPolicy

export type HTMLAttributeReferrerPolicy = ReferrerPolicy;

このセクションを編集

HTMLAttributes

export interface HTMLAttributes<E extends Element> extends HTMLElementAttrs, DOMAttributes<E>

拡張: HTMLElementAttrs, DOMAttributes<E>

このセクションを編集

HTMLCrossOriginAttribute

export type HTMLCrossOriginAttribute =
  | "anonymous"
  | "use-credentials"
  | ""
  | undefined;

このセクションを編集

HTMLElementAttrs

export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase<HTMLElement>

拡張: HTMLAttributesBase, FilterBase<HTMLElement>

このセクションを編集

HTMLFragment

HTMLFragment: FunctionComponent<{
  dangerouslySetInnerHTML: string;
}>;

このセクションを編集

HtmlHTMLAttributes

export interface HtmlHTMLAttributes<T extends Element> extends Attrs<'html', T>

拡張: Attrs<'html', T>

このセクションを編集

HTMLInputAutocompleteAttribute

export type HTMLInputAutocompleteAttribute =
  | "on"
  | "off"
  | "billing"
  | "shipping"
  | "name"
  | "honorific-prefix"
  | "given-name"
  | "additional-name"
  | "family-name"
  | "honorific-suffix"
  | "nickname"
  | "username"
  | "new-password"
  | "current-password"
  | "one-time-code"
  | "organization-title"
  | "organization"
  | "street-address"
  | "address-line1"
  | "address-line2"
  | "address-line3"
  | "address-level4"
  | "address-level3"
  | "address-level2"
  | "address-level1"
  | "country"
  | "country-name"
  | "postal-code"
  | "cc-name"
  | "cc-given-name"
  | "cc-additional-name"
  | "cc-family-name"
  | "cc-number"
  | "cc-exp"
  | "cc-exp-month"
  | "cc-exp-year"
  | "cc-csc"
  | "cc-type"
  | "transaction-currency"
  | "transaction-amount"
  | "language"
  | "bday"
  | "bday-day"
  | "bday-month"
  | "bday-year"
  | "sex"
  | "url"
  | "photo";

このセクションを編集

HTMLInputTypeAttribute

export type HTMLInputTypeAttribute =
  | "button"
  | "checkbox"
  | "color"
  | "date"
  | "datetime-local"
  | "email"
  | "file"
  | "hidden"
  | "image"
  | "month"
  | "number"
  | "password"
  | "radio"
  | "range"
  | "reset"
  | "search"
  | "submit"
  | "tel"
  | "text"
  | "time"
  | "url"
  | "week"
  | (string & {});

このセクションを編集

IframeHTMLAttributes

export interface IframeHTMLAttributes<T extends Element> extends Attrs<'iframe', T>

拡張: Attrs<'iframe', T>

このセクションを編集

ImgHTMLAttributes

export interface ImgHTMLAttributes<T extends Element> extends Attrs<'img', T>

拡張: Attrs<'img', T>

このセクションを編集

implicit$FirstArg

___(...)から____$(...)の便利なメソッドを作成します。

関数が遅延ロード可能なリソースを最初の引数として受け取ることは非常に一般的です。このため、Qwikオプティマイザーは、$で終わる任意の関数から最初の引数を自動的に抽出します。

これは、foo$(arg0)とfoo($(arg0))がQwikオプティマイザーに関して同等であることを意味します。前者は後者の単なる省略形です。

たとえば、これらの関数呼び出しは同等です

• component$(() => {...})はcomponent($(() => {...}))と同じです

export function myApi(callback: QRL<() => void>): void {
  // ...
}
 
export const myApi$ = implicit$FirstArg(myApi);
// type of myApi$: (callback: () => void): void
 
// can be used as:
myApi$(() => console.log("callback"));
 
// will be transpiled to:
// FILE: <current file>
myApi(qrl("./chunk-abc.js", "callback"));
 
// FILE: chunk-abc.js
export const callback = () => console.log("callback");

implicit$FirstArg: <FIRST, REST extends any[], RET>(
    fn: (qrl: QRL<FIRST>, ...rest: REST) => RET,
  ) =>
  (qrl: FIRST, ...rest: REST) =>
    RET;

パラメータ

型

説明

fn

(qrl: QRL<FIRST>, ...rest: REST) => RET

最初の引数を自動的に$にする必要がある関数。

((qrl: FIRST, ...rest: REST) => RET)

このセクションを編集

InputHTMLAttributes

export type InputHTMLAttributes<T extends Element> = Attrs<
  "input",
  T,
  HTMLInputElement
>;

このセクションを編集

InsHTMLAttributes

export interface InsHTMLAttributes<T extends Element> extends Attrs<'ins', T>

拡張: Attrs<'ins', T>

このセクションを編集

IntrinsicAttributes

interface IntrinsicAttributes extends QwikIntrinsicAttributes

拡張: QwikIntrinsicAttributes

IntrinsicElements

export interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements

拡張: IntrinsicHTMLElements, IntrinsicSVGElements

このセクションを編集

isSignal

指定されたオブジェクトがSignalであるかどうかをチェックします。

isSignal: <T = unknown>(obj: any) => obj is Signal<T>

パラメータ

型

説明

obj

any

Signalかどうかをチェックするオブジェクト。

obj is Signal<T>

Boolean - オブジェクトがSignalの場合はTrue。

このセクションを編集

jsx

JSXトランスパイラがJSXNodeを作成するために使用します。オプティマイザーはこれを使用せず、代わりに_jsxQ、_jsxS、および_jsxCを直接使用することに注意してください。

jsx: <T extends string | FunctionComponent<any>>(
  type: T,
  props: T extends FunctionComponent<infer PROPS>
    ? PROPS
    : Record<any, unknown>,
  key?: string | number | null,
) => JSXNode<T>;

パラメータ

型

説明

type

T

props

T extends FunctionComponent<infer PROPS> ? PROPS : Record<any, unknown>

key

string | number | null

(オプション)

JSXNode<T>

このセクションを編集

JSXChildren

export type JSXChildren =
  | string
  | number
  | boolean
  | null
  | undefined
  | Function
  | RegExp
  | JSXChildren[]
  | Promise<JSXChildren>
  | Signal<JSXChildren>
  | JSXNode;

参照: JSXChildren, Signal, JSXNode

このセクションを編集

jsxDEV

jsxDEV: <T extends string | FunctionComponent<Record<any, unknown>>>(
  type: T,
  props: T extends FunctionComponent<infer PROPS>
    ? PROPS
    : Record<any, unknown>,
  key: string | number | null | undefined,
  _isStatic: boolean,
  opts: JsxDevOpts,
  _ctx: unknown,
) => JSXNode<T>;

パラメータ

型

説明

type

T

props

T extends FunctionComponent<infer PROPS> ? PROPS : Record<any, unknown>

key

string | number | null | undefined

_isStatic

boolean

opts

JsxDevOpts

_ctx

unknown

JSXNode<T>

このセクションを編集

JSXNode

JSXノード。内部構造です。代わりにJSXOutputを使用することをお勧めします。

export interface JSXNode<T extends string | FunctionComponent | unknown = unknown>

プロパティ

修飾子

型

説明

children

JSXChildren | null

dev?

DevJSX

(オプション)

flags

number

immutableProps

Record<any, unknown> | null

key

string | null

props

T extends FunctionComponent<infer P> ? P : Record<any, unknown>

type

T

このセクションを編集

JSXOutput

コンポーネントの有効な出力

export type JSXOutput =
  | JSXNode
  | string
  | number
  | boolean
  | null
  | undefined
  | JSXOutput[];

参照: JSXNode, JSXOutput

このセクションを編集

JSXTagName

export type JSXTagName =
  | keyof HTMLElementTagNameMap
  | Omit<string, keyof HTMLElementTagNameMap>;

このセクションを編集

KeygenHTMLAttributes

警告: このAPIは現在廃止されています。

html5で

export interface KeygenHTMLAttributes<T extends Element> extends Attrs<'base', T>

拡張: Attrs<'base', T>

このセクションを編集

KnownEventNames

Qwikが認識しているイベントの名前。それらはすべて小文字ですが、JSX側では、より優れたDXのためにパスカルケースです。（onAuxClick$ vs onauxclick$）

export type KnownEventNames = LiteralUnion<AllEventKeys, string>;

このセクションを編集

LabelHTMLAttributes

export interface LabelHTMLAttributes<T extends Element> extends Attrs<'label', T>

拡張: Attrs<'label', T>

このセクションを編集

LiHTMLAttributes

export interface LiHTMLAttributes<T extends Element> extends Attrs<'li', T>

拡張: Attrs<'li', T>

このセクションを編集

LinkHTMLAttributes

export interface LinkHTMLAttributes<T extends Element> extends Attrs<'link', T>

拡張: Attrs<'link', T>

このセクションを編集

MapHTMLAttributes

export interface MapHTMLAttributes<T extends Element> extends Attrs<'map', T>

拡張: Attrs<'map', T>

このセクションを編集

MediaHTMLAttributes

export interface MediaHTMLAttributes<T extends Element> extends HTMLAttributes<T>, Augmented<HTMLMediaElement, {
    crossOrigin?: HTMLCrossOriginAttribute;
}>

拡張: HTMLAttributes<T>, Augmented<HTMLMediaElement, { crossOrigin?: HTMLCrossOriginAttribute; }>

プロパティ

修飾子

型

説明

crossOrigin?

HTMLCrossOriginAttribute

(オプション)

このセクションを編集

MenuHTMLAttributes

export interface MenuHTMLAttributes<T extends Element> extends Attrs<'menu', T>

拡張: Attrs<'menu', T>

このセクションを編集

MetaHTMLAttributes

export interface MetaHTMLAttributes<T extends Element> extends Attrs<'meta', T>

拡張: Attrs<'meta', T>

このセクションを編集

MeterHTMLAttributes

export interface MeterHTMLAttributes<T extends Element> extends Attrs<'meter', T>

拡張: Attrs<'meter', T>

このセクションを編集

NativeAnimationEvent

警告: このAPIは現在廃止されています。

AnimationEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeAnimationEvent = AnimationEvent;

このセクションを編集

NativeClipboardEvent

警告: このAPIは現在廃止されています。

ClipboardEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeClipboardEvent = ClipboardEvent;

このセクションを編集

NativeCompositionEvent

警告: このAPIは現在廃止されています。

CompositionEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeCompositionEvent = CompositionEvent;

このセクションを編集

NativeDragEvent

警告: このAPIは現在廃止されています。

DragEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeDragEvent = DragEvent;

このセクションを編集

NativeFocusEvent

警告: このAPIは現在廃止されています。

FocusEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeFocusEvent = FocusEvent;

このセクションを編集

NativeKeyboardEvent

警告: このAPIは現在廃止されています。

KeyboardEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeKeyboardEvent = KeyboardEvent;

このセクションを編集

NativeMouseEvent

警告: このAPIは現在廃止されています。

MouseEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeMouseEvent = MouseEvent;

このセクションを編集

NativePointerEvent

警告: このAPIは現在廃止されています。

PointerEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativePointerEvent = PointerEvent;

このセクションを編集

NativeTouchEvent

警告: このAPIは現在廃止されています。

TouchEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeTouchEvent = TouchEvent;

このセクションを編集

NativeTransitionEvent

警告: このAPIは現在廃止されています。

TransitionEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type NativeTransitionEvent = TransitionEvent;

このセクションを編集

NativeUIEvent

警告: このAPIは現在廃止されています。

UIEventを使用し、現在のイベントターゲットに対するハンドラー関数の2番目の引数を使用します。

export type NativeUIEvent = UIEvent;

このセクションを編集

NativeWheelEvent

警告: このAPIは現在廃止されています。

WheelEventを使用し、現在のイベントターゲットに対するハンドラー関数の2番目の引数を使用します。

export type NativeWheelEvent = WheelEvent;

このセクションを編集

noSerialize

noSerialize()関数の戻り値の型。TYPEまたはundefinedになります。

export type NoSerialize<T> =
  | (T & {
      __no_serialize__: true;
    })
  | undefined;

このセクションを編集

NoSerialize

noSerialize()関数の戻り値の型。TYPEまたはundefinedになります。

export type NoSerialize<T> =
  | (T & {
      __no_serialize__: true;
    })
  | undefined;

このセクションを編集

Numberish

export type Numberish = number | `${number}`;

このセクションを編集

ObjectHTMLAttributes

export interface ObjectHTMLAttributes<T extends Element> extends Attrs<'object', T>

継承元: Attrs<'object', T>

このセクションを編集

OlHTMLAttributes

export interface OlHTMLAttributes<T extends Element> extends Attrs<'ol', T>

継承元: Attrs<'ol', T>

このセクションを編集

OnRenderFn

export type OnRenderFn<PROPS> = (props: PROPS) => JSXOutput;

参照: JSXOutput

このセクションを編集

OnVisibleTaskOptions

export interface OnVisibleTaskOptions

プロパティ

修飾子

型

説明

戦略？

VisibleTaskStrategy

(オプション) "VisibleTask"を最初に実行するタイミングを決定するために使用する戦略。

• intersection-observer: 要素がビューポートに表示されたときにタスクが最初に実行されます。内部的にはIntersectionObserver APIを使用します。 - document-ready: ドキュメントの準備ができたときにタスクが最初に実行されます。内部的にはドキュメントのloadイベントを使用します。 - document-idle: ドキュメントがアイドル状態のときにタスクが最初に実行されます。内部的にはrequestIdleCallback APIを使用します。

このセクションを編集

OptgroupHTMLAttributes

export interface OptgroupHTMLAttributes<T extends Element> extends Attrs<'optgroup', T>

継承元: Attrs<'optgroup', T>

このセクションを編集

OptionHTMLAttributes

export interface OptionHTMLAttributes<T extends Element> extends Attrs<'option', T>

継承元: Attrs<'option', T>

このセクションを編集

OutputHTMLAttributes

export interface OutputHTMLAttributes<T extends Element> extends Attrs<'output', T>

継承元: Attrs<'output', T>

このセクションを編集

ParamHTMLAttributes

警告: このAPIは現在廃止されています。

古いDOM API

export interface ParamHTMLAttributes<T extends Element> extends Attrs<'base', T, HTMLParamElement>

継承元: Attrs<'base', T, HTMLParamElement>

このセクションを編集

PrefetchGraph

この API は開発者向けのアルファプレビューとして提供されており、受け取ったフィードバックに基づいて変更される可能性があります。本番環境ではこの API を使用しないでください。

コンテナのプリフェッチグラフをロードします。

各Qwikコンテナには、独自のプリフェッチグラフを含める必要があります。

PrefetchGraph: (opts?: {
  base?: string;
  manifestHash?: string;
  manifestURL?: string;
  nonce?: string;
}) => JSXNode<"script">;

パラメータ

型

説明

opts

{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }

(オプション) プリフェッチグラフのロードオプション。

• base - グラフのベース。デフォルトのインストールでは、これはq:baseの値/build/にデフォルト設定されます。ただし、複数のMFEがページにインストールされている場合は、各MFEに独自のベースが必要です。 - manifestHash - ロードするマニフェストファイルのハッシュ。指定しない場合、ハッシュはコンテナ属性q:manifest-hashから抽出され、デフォルトのビルドファイル${base}/q-bundle-graph-${manifestHash}.jsonが想定されます。 - manifestURL - 標準以外のバンドルグラフの場所名の場合にロードするマニフェストファイルのURL。

JSXNode<"script">

このセクションを編集

PrefetchServiceWorker

この API は開発者向けのアルファプレビューとして提供されており、受け取ったフィードバックに基づいて変更される可能性があります。本番環境ではこの API を使用しないでください。

バンドルをプリフェッチするサービスワーカーをインストールします。

ページごとにサービスワーカーは1つしか存在できません。ページ上に複数の個別のQwikコンテナが存在できるため、各コンテナはPrefetchGraphコンポーネントを使用してプリフェッチグラフをロードする必要があります。

PrefetchServiceWorker: (opts: {
  base?: string;
  scope?: string;
  path?: string;
  verbose?: boolean;
  fetchBundleGraph?: boolean;
  nonce?: string;
}) => JSXNode<"script">;

パラメータ

型

説明

opts

{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }

プリフェッチサービスワーカーのオプション。

• base - サービスワーカーのベースURL import.meta.env.BASE_URL または /。デフォルトは import.meta.env.BASE_URL - scope - サービスワーカーがアクティブになるベースURL。デフォルトは / - path - サービスワーカーへのパス。パスが/で始まる場合を除き、デフォルトはqwik-prefetch-service-worker.jsであり、その場合はベースが無視されます。デフォルトはqwik-prefetch-service-worker.js - verbose - サービスワーカーインストールの詳細ログ。デフォルトはfalse - nonce - セキュリティ目的のオプションのnonce値。デフォルトはundefined。

JSXNode<'script'>

このセクションを編集

ProgressHTMLAttributes

export interface ProgressHTMLAttributes<T extends Element> extends Attrs<'progress', T>

継承元: Attrs<'progress', T>

このセクションを編集

PropFnInterface

警告: このAPIは現在廃止されています。

代わりにQRL<>を使用してください

export type PropFnInterface<ARGS extends any[], RET> = {
  __qwik_serializable__?: any;
  (...args: ARGS): Promise<RET>;
};

このセクションを編集

PropFunction

QRL<T>のエイリアス。歴史的な関連性のみ。

export type PropFunction<T> = QRL<T>;

参照: QRL

このセクションを編集

PropFunctionProps

警告: このAPIは現在廃止されています。

代わりに、関数propsでQRL<>を使用してください

export type PropFunctionProps<PROPS extends Record<any, any>> = {
  [K in keyof PROPS]: PROPS[K] extends undefined
    ? PROPS[K]
    : PROPS[K] extends ((...args: infer ARGS) => infer RET) | undefined
      ? PropFnInterface<ARGS, Awaited<RET>>
      : PROPS[K];
};

参照: PropFnInterface

このセクションを編集

PropsOf

コンポーネントまたはタグからPropsを推論します。

export type PropsOf<COMP> = COMP extends string
  ? COMP extends keyof QwikIntrinsicElements
    ? QwikIntrinsicElements[COMP]
    : QwikIntrinsicElements["span"]
  : NonNullable<COMP> extends never
    ? never
    : COMP extends FunctionComponent<infer PROPS>
      ? PROPS extends Record<any, infer V>
        ? IsAny<V> extends true
          ? never
          : ObjectProps<PROPS>
        : COMP extends Component<infer OrigProps>
          ? ObjectProps<OrigProps>
          : PROPS
      : never;

参照: QwikIntrinsicElements, FunctionComponent, Component

const Desc = component$(
  ({ desc, ...props }: { desc: string } & PropsOf<"div">) => {
    return <div {...props}>{desc}</div>;
  },
);
 
const TitleBox = component$(
  ({ title, ...props }: { title: string } & PropsOf<Box>) => {
    return (
      <Box {...props}>
        <h1>{title}</h1>
      </Box>
    );
  },
);

このセクションを編集

PublicProps

定義されたコンポーネントのPROPSを拡張し、デフォルトのprops（childrenとq:slot）を追加し、プレーン関数をQRL引数に許可します。

export type PublicProps<PROPS> = (PROPS extends Record<any, any>
  ? Omit<PROPS, `${string}$`> & _Only$<PROPS>
  : unknown extends PROPS
    ? {}
    : PROPS) &
  ComponentBaseProps &
  ComponentChildren<PROPS>;

参照: ComponentBaseProps

このセクションを編集

qrl

QRL型は、遅延ロード可能かつシリアライズ可能なリソースを表します。

QRLはQwik URLの略です。

遅延ロードされるリソースを参照したい場合は、QRLを使用します。QRLは、コード（関数）によく使用されますが、スタイルなどの場合にstringなどの他のリソースにも使用できます。

QRLは、Qwikオプティマイザーによって生成される不透明なトークンです。（QRLのプロパティには、バージョン間で変更される可能性があるため、依存しないでください。）

## QRL参照の作成

QRLの作成は、$(...)関数を使用して行われます。$(...)は、コードを遅延ロードされるシンボルに抽出する必要があることをマークするQwikオプティマイザーの特別なマーカーです。

useOnDocument(
  "mousemove",
  $((event) => console.log("mousemove", event)),
);

上記のコードでは、Qwikオプティマイザーは$(...)を検出し、以下に示すようにコードを変換します

// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
 
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");

注：qrl(...)は、Qwikオプティマイザーの変換の結果です。アプリケーションでこの関数を直接呼び出す必要はありません。qrl(...)関数は、Qwikオプティマイザー変換後でのみ呼び出す必要があります。

## QRLの使用

リソース（ほとんどの場合関数）への遅延ロード可能な参照を取得したい場合は、アプリケーションでQRL型を使用します。

// Example of declaring a custom functions which takes callback as QRL.
export function useMyFunction(callback: QRL<() => void>) {
  doExtraStuff();
  // The callback passed to `onDocument` requires `QRL`.
  useOnDocument("mousemove", callback);
}

上記の例では、コードについて考える方法は、コールバック関数を要求するのではなく、遅延ロード可能なコールバック関数への参照を要求しているということです。具体的には、関数のロードは、実際に必要になるまで遅延される必要があります。上記の例では、関数はdocumentでmousemoveイベントが発生するまでロードされません。

## QRL参照の解決

場合によっては、QRL参照を実際の値に解決する必要がある場合があります。これは、QRL.resolve(..)関数を使用して実行できます。

// Assume you have QRL reference to a greet function
const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!"));
 
// Use `qrlImport` to load / resolve the reference.
const greet: () => void = await lazyGreet.resolve();
 
//  Invoke it
greet();

注：elementは、QRLが相対的であり、解決するためのベースロケーションが必要なため必要です。ベースロケーションは、<div q:base="/url">の形式でHTMLにエンコードされています。

## QRL.resolved

QRL.resolve()が返されると、値はQRL.resolvedに保存されます。これにより、QRL.resolve()を再度待機することなく値を使用できます。

## 質問：なぜimport()を使用しないのですか？

一見すると、QRLはimport()と同じ目的を果たします。ただし、考慮する必要がある3つの微妙な違いがあります。

1. 1. QRLはHTMLにシリアライズ可能である必要があります。2. QRLはq:baseに対して相対的にフレームワークによって解決される必要があります。3. QRLは、字句的にスコープされた変数をキャプチャできる必要があります。4. QRLは、Qwikオプティマイザーの有無にかかわらず実行する場合の違いをカプセル化します。5. QRLを使用すると、チャンク名とシンボル名を意識することなく、遅延ロードされた境界を表現できます。

次のようなコードを記述することを想定してみましょう。

return <button onClick={() => (await import('./chunk-abc.js')).onClick}>

上記のコードは、次のようなDOMにシリアライズする必要があります

<div q:base="/build/">
  <button on:click="./chunk-abc.js#onClick">...</button>
</div>

1. チャンク（./chunk-abc.js）とシンボル（onClick）をHTMLに簡単に抽出する方法がないことに注意してください。2. 仮に抽出できたとしても、import('./chunk-abc.js')はimport()ファイルが宣言されている場所に対して相対的になることに注意してください。ロードを行っているのはフレームワークであるため、./chunk-abc.jsはフレームワークファイルに対して相対的になります。これは、バンドラーによって生成された元のファイルに対して相対的になる必要があるため、正しくありません。3. 次に、フレームワークは./chunk-abc.jsを解決する必要があり、HTMLにエンコードされたベースロケーションが必要です。4. QRLは、字句的にスコープされた変数をキャプチャできる必要があります。（import()は、変数をキャプチャしないトップレベルのシンボルのみをロードできます。）5. 開発者は、importについて、また、チャンクとシンボルに名前を付けることを考えたくありません。「これは遅延すべきだ」と言いたいだけです。

これらは、Qwikが独自のQRLの概念を導入する主な理由です。

export type QRL<TYPE = unknown> = {
  __qwik_serializable__?: any;
  __brand__QRL__: TYPE;
  resolve(): Promise<TYPE>;
  resolved: undefined | TYPE;
  getCaptured(): unknown[] | null;
  getSymbol(): string;
  getHash(): string;
  dev: QRLDev | null;
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;

このセクションを編集

QRL

QRL型は、遅延ロード可能かつシリアライズ可能なリソースを表します。

QRLはQwik URLの略です。

遅延ロードされるリソースを参照したい場合は、QRLを使用します。QRLは、コード（関数）によく使用されますが、スタイルなどの場合にstringなどの他のリソースにも使用できます。

QRLは、Qwikオプティマイザーによって生成される不透明なトークンです。（QRLのプロパティには、バージョン間で変更される可能性があるため、依存しないでください。）

## QRL参照の作成

QRLの作成は、$(...)関数を使用して行われます。$(...)は、コードを遅延ロードされるシンボルに抽出する必要があることをマークするQwikオプティマイザーの特別なマーカーです。

useOnDocument(
  "mousemove",
  $((event) => console.log("mousemove", event)),
);

上記のコードでは、Qwikオプティマイザーは$(...)を検出し、以下に示すようにコードを変換します

// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
 
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");

注：qrl(...)は、Qwikオプティマイザーの変換の結果です。アプリケーションでこの関数を直接呼び出す必要はありません。qrl(...)関数は、Qwikオプティマイザー変換後でのみ呼び出す必要があります。

## QRLの使用

リソース（ほとんどの場合関数）への遅延ロード可能な参照を取得したい場合は、アプリケーションでQRL型を使用します。

// Example of declaring a custom functions which takes callback as QRL.
export function useMyFunction(callback: QRL<() => void>) {
  doExtraStuff();
  // The callback passed to `onDocument` requires `QRL`.
  useOnDocument("mousemove", callback);
}

上記の例では、コードについて考える方法は、コールバック関数を要求するのではなく、遅延ロード可能なコールバック関数への参照を要求しているということです。具体的には、関数のロードは、実際に必要になるまで遅延される必要があります。上記の例では、関数はdocumentでmousemoveイベントが発生するまでロードされません。

## QRL参照の解決

場合によっては、QRL参照を実際の値に解決する必要がある場合があります。これは、QRL.resolve(..)関数を使用して実行できます。

// Assume you have QRL reference to a greet function
const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!"));
 
// Use `qrlImport` to load / resolve the reference.
const greet: () => void = await lazyGreet.resolve();
 
//  Invoke it
greet();

注：elementは、QRLが相対的であり、解決するためのベースロケーションが必要なため必要です。ベースロケーションは、<div q:base="/url">の形式でHTMLにエンコードされています。

## QRL.resolved

QRL.resolve()が返されると、値はQRL.resolvedに保存されます。これにより、QRL.resolve()を再度待機することなく値を使用できます。

## 質問：なぜimport()を使用しないのですか？

一見すると、QRLはimport()と同じ目的を果たします。ただし、考慮する必要がある3つの微妙な違いがあります。

1. 1. QRLはHTMLにシリアライズ可能である必要があります。2. QRLはq:baseに対して相対的にフレームワークによって解決される必要があります。3. QRLは、字句的にスコープされた変数をキャプチャできる必要があります。4. QRLは、Qwikオプティマイザーの有無にかかわらず実行する場合の違いをカプセル化します。5. QRLを使用すると、チャンク名とシンボル名を意識することなく、遅延ロードされた境界を表現できます。

次のようなコードを記述することを想定してみましょう。

return <button onClick={() => (await import('./chunk-abc.js')).onClick}>

上記のコードは、次のようなDOMにシリアライズする必要があります

<div q:base="/build/">
  <button on:click="./chunk-abc.js#onClick">...</button>
</div>

1. チャンク（./chunk-abc.js）とシンボル（onClick）をHTMLに簡単に抽出する方法がないことに注意してください。2. 仮に抽出できたとしても、import('./chunk-abc.js')はimport()ファイルが宣言されている場所に対して相対的になることに注意してください。ロードを行っているのはフレームワークであるため、./chunk-abc.jsはフレームワークファイルに対して相対的になります。これは、バンドラーによって生成された元のファイルに対して相対的になる必要があるため、正しくありません。3. 次に、フレームワークは./chunk-abc.jsを解決する必要があり、HTMLにエンコードされたベースロケーションが必要です。4. QRLは、字句的にスコープされた変数をキャプチャできる必要があります。（import()は、変数をキャプチャしないトップレベルのシンボルのみをロードできます。）5. 開発者は、importについて、また、チャンクとシンボルに名前を付けることを考えたくありません。「これは遅延すべきだ」と言いたいだけです。

これらは、Qwikが独自のQRLの概念を導入する主な理由です。

export type QRL<TYPE = unknown> = {
  __qwik_serializable__?: any;
  __brand__QRL__: TYPE;
  resolve(): Promise<TYPE>;
  resolved: undefined | TYPE;
  getCaptured(): unknown[] | null;
  getSymbol(): string;
  getHash(): string;
  dev: QRLDev | null;
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;

このセクションを編集

QRLEventHandlerMulti

このAPIは、開発者向けのベータプレビューとして提供されており、受け取ったフィードバックに基づいて変更される可能性があります。本番環境でこのAPIを使用しないでください。

Qwikイベントのイベントハンドラー。ハンドラーQRLまたはハンドラーQRLの配列にすることができます。

export type QRLEventHandlerMulti<EV extends Event, EL> =
  | QRL<EventHandler<EV, EL>>
  | undefined
  | null
  | QRLEventHandlerMulti<EV, EL>[]
  | EventHandler<EV, EL>;

参照: QRL, EventHandler, QRLEventHandlerMulti

このセクションを編集

QuoteHTMLAttributes

export interface QuoteHTMLAttributes<T extends Element> extends Attrs<'q', T>

継承元: Attrs<'q', T>

このセクションを編集

QwikAnimationEvent

警告: このAPIは現在廃止されています。

AnimationEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikAnimationEvent<T = Element> = NativeAnimationEvent;

参照: NativeAnimationEvent

このセクションを編集

QwikAttributes

プレーンハンドラーのない、関数パラメーターとして使用するQwik DOM属性

export interface QwikAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL, false>

継承元: DOMAttributesBase<EL>, QwikEvents<EL, false>

プロパティ

修飾子

型

説明

class?

ClassList | undefined

(オプション)

このセクションを編集

QwikChangeEvent

警告: このAPIは現在廃止されています。

Event を使用し、現在のイベントターゲットに対してハンドラー関数の 2 番目の引数を使用します。また、Qwik では、InputEvent を使用する onInput$ が React の onChange のように動作するイベントであることに注意してください。

export type QwikChangeEvent<T = Element> = Event;

このセクションを編集

QwikClipboardEvent

警告: このAPIは現在廃止されています。

ClipboardEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikClipboardEvent<T = Element> = NativeClipboardEvent;

参照: NativeClipboardEvent

このセクションを編集

QwikCompositionEvent

警告: このAPIは現在廃止されています。

CompositionEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikCompositionEvent<T = Element> = NativeCompositionEvent;

参照: NativeCompositionEvent

このセクションを編集

QwikDOMAttributes

export interface QwikDOMAttributes extends DOMAttributes<Element>

拡張: DOMAttributes<Element>

このセクションを編集

QwikDragEvent

警告: このAPIは現在廃止されています。

DragEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikDragEvent<T = Element> = NativeDragEvent;

参照: NativeDragEvent

このセクションを編集

QwikFocusEvent

警告: このAPIは現在廃止されています。

FocusEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikFocusEvent<T = Element> = NativeFocusEvent;

参照: NativeFocusEvent

このセクションを編集

QwikHTMLElements

関数内で使用するための、プレーンなハンドラーのない DOM プロパティ

export type QwikHTMLElements = {
  [tag in keyof HTMLElementTagNameMap]: Augmented<
    HTMLElementTagNameMap[tag],
    SpecialAttrs[tag]
  > &
    HTMLElementAttrs &
    QwikAttributes<HTMLElementTagNameMap[tag]>;
};

参照: HTMLElementAttrs, QwikAttributes

このセクションを編集

QwikIdleEvent

ドキュメントが最初にアイドル状態になったときに、qwik-loader によってドキュメント上で発行されます。

export type QwikIdleEvent = CustomEvent<{}>;

このセクションを編集

QwikInitEvent

ドキュメントが最初にインタラクティブになったときに、qwik-loader によってドキュメント上で発行されます。

export type QwikInitEvent = CustomEvent<{}>;

このセクションを編集

QwikIntrinsicElements

このインターフェイスは、ネイティブ DOM 要素とカスタム Qwik 要素の両方の利用可能な属性を保持します。カスタマイズ可能なラッパーコンポーネントを定義する方法を示す例

import { component$, Slot, type QwikIntrinsicElements } from "@builder.io/qwik";
 
type WrapperProps = {
  attributes?: QwikIntrinsicElements["div"];
};
 
export default component$<WrapperProps>(({ attributes }) => {
  return (
    <div {...attributes} class="p-2">
      <Slot />
    </div>
  );
});

注：PropsOf<'div'>を使用する方がより短く記述できます。

export interface QwikIntrinsicElements extends QwikHTMLElements, QwikSVGElements

拡張: QwikHTMLElements, QwikSVGElements

このセクションを編集

QwikInvalidEvent

警告: このAPIは現在廃止されています。

Event を使用し、現在のイベントターゲットに対してハンドラー関数の 2 番目の引数を使用します。

export type QwikInvalidEvent<T = Element> = Event;

このセクションを編集

QwikJSX

export declare namespace QwikJSX

インターフェイス

説明

ElementChildrenAttribute

IntrinsicAttributes

IntrinsicElements

型エイリアス

説明

Element

ElementType

このセクションを編集

QwikKeyboardEvent

警告: このAPIは現在廃止されています。

KeyboardEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikKeyboardEvent<T = Element> = NativeKeyboardEvent;

参照: NativeKeyboardEvent

このセクションを編集

QwikMouseEvent

警告: このAPIは現在廃止されています。

MouseEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikMouseEvent<T = Element, E = NativeMouseEvent> = E;

参照: NativeMouseEvent

このセクションを編集

QwikPointerEvent

警告: このAPIは現在廃止されています。

PointerEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikPointerEvent<T = Element> = NativePointerEvent;

参照: NativePointerEvent

このセクションを編集

QwikSubmitEvent

警告: このAPIは現在廃止されています。

SubmitEvent を使用し、現在のイベントターゲットに対してハンドラー関数の 2 番目の引数を使用します。

export type QwikSubmitEvent<T = Element> = SubmitEvent;

このセクションを編集

QwikSVGElements

関数内で使用するための、プレーンなハンドラーのない SVG プロパティ

export type QwikSVGElements = {
  [K in keyof Omit<
    SVGElementTagNameMap,
    keyof HTMLElementTagNameMap
  >]: SVGProps<SVGElementTagNameMap[K]>;
};

参照: SVGProps

このセクションを編集

QwikSymbolEvent

モジュールが遅延読み込みされたときに qwik-loader によって発行されます。

export type QwikSymbolEvent = CustomEvent<{
  symbol: string;
  element: Element;
  reqTime: number;
}>;

このセクションを編集

QwikTouchEvent

警告: このAPIは現在廃止されています。

TouchEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikTouchEvent<T = Element> = NativeTouchEvent;

参照: NativeTouchEvent

このセクションを編集

QwikTransitionEvent

警告: このAPIは現在廃止されています。

TransitionEventを使用し、現在のイベントターゲットのハンドラ関数の2番目の引数を使用します

export type QwikTransitionEvent<T = Element> = NativeTransitionEvent;

参照: NativeTransitionEvent

このセクションを編集

QwikUIEvent

警告: このAPIは現在廃止されています。

UIEventを使用し、現在のイベントターゲットに対するハンドラー関数の2番目の引数を使用します。

export type QwikUIEvent<T = Element> = NativeUIEvent;

参照: NativeUIEvent

このセクションを編集

QwikVisibleEvent

要素が可視になったときに qwik-loader によって発行されます。useVisibleTask$ で使用されます。

export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;

このセクションを編集

QwikWheelEvent

警告: このAPIは現在廃止されています。

WheelEventを使用し、現在のイベントターゲットに対するハンドラー関数の2番目の引数を使用します。

export type QwikWheelEvent<T = Element> = NativeWheelEvent;

参照: NativeWheelEvent

このセクションを編集

ReadonlySignal

export type ReadonlySignal<T = unknown> = Readonly<Signal<T>>;

参照: Signal

このセクションを編集

render

JSX をレンダリングします。

このメソッドを使用して JSX をレンダリングします。この関数はリコンサイルを実行します。つまり、コンテンツを破棄して再作成するのではなく、常に DOM に既にあるものを再利用しようとします。サブスクリプションのクリーンアップに使用できるクリーンアップ関数を返します。

render: (
  parent: Element | Document,
  jsxOutput: JSXOutput | FunctionComponent<any>,
  opts?: RenderOptions,
) => Promise<RenderResult>;

パラメータ

型

説明

parent

Element | Document

jsxNode の親として機能する要素。可能な限り、レンダリングは既存のノードを再利用しようとします。

jsxOutput

JSXOutput | FunctionComponent<any>

レンダリングする JSX

opts

RenderOptions

(オプション)

Promise<RenderResult>

クリーンアップ関数を含むオブジェクト。

このセクションを編集

RenderOnce

RenderOnce: FunctionComponent<{
  children?: unknown;
  key?: string | number | null | undefined;
}>;

このセクションを編集

RenderOptions

export interface RenderOptions

プロパティ

修飾子

型

説明

serverData?

Record<string, any>

(オプション)

このセクションを編集

RenderResult

export interface RenderResult

メソッド

説明

cleanup()

このセクションを編集

RenderSSROptions

export interface RenderSSROptions

プロパティ

修飾子

型

説明

base?

string

(オプション)

beforeClose?

(contexts: QContext[], containerState: ContainerState, containsDynamic: boolean, textNodes: Map<string, string>) => Promise<JSXNode>

(オプション)

beforeContent?

JSXNode<string>[]

(オプション)

containerAttributes

Record<string, string>

containerTagName

string

manifestHash

string

serverData?

Record<string, any>

(オプション)

stream

StreamWriter

このセクションを編集

Resource

このメソッドは、追跡された値が変更されるたびに実行され、データを返す、非同期メモ化関数のように機能します。

ただし、useResource は、データと、データが利用可能かどうかを示す状態を含む ResourceReturn オブジェクトをすぐに返します。

ステータスは次のいずれかになります。

• 'pending' - データはまだ利用できません。- 'resolved' - データは利用可能です。- 'rejected' - エラーまたはタイムアウトのため、データは利用できません。

例

入力された都市名が変更されるたびに、useResource を使用して天気をリクエストするためのフェッチを実行する方法を示す例。

const Cmp = component$(() => {
  const cityS = useSignal("");
 
  const weatherResource = useResource$(async ({ track, cleanup }) => {
    const cityName = track(cityS);
    const abortController = new AbortController();
    cleanup(() => abortController.abort("cleanup"));
    const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
      signal: abortController.signal,
    });
    const data = await res.json();
    return data as { temp: number };
  });
 
  return (
    <div>
      <input name="city" bind:value={cityS} />
      <Resource
        value={weatherResource}
        onResolved={(weather) => {
          return <div>Temperature: {weather.temp}</div>;
        }}
      />
    </div>
  );
});

Resource: <T>(props: ResourceProps<T>) => JSXOutput;

パラメータ

型

説明

props

ResourceProps<T>

JSXOutput

このセクションを編集

ResourceCtx

export interface ResourceCtx<T>

プロパティ

修飾子

型

説明

previous

readonly

T | undefined

track

readonly

Tracker

メソッド

説明

cache(policyOrMilliseconds)

cleanup(callback)

このセクションを編集

ResourceFn

export type ResourceFn<T> = (ctx: ResourceCtx<unknown>) => ValueOrPromise<T>;

参照: ResourceCtx, ValueOrPromise

このセクションを編集

ResourceOptions

useResource$() に渡すオプション

export interface ResourceOptions

プロパティ

修飾子

型

説明

timeout?

number

(オプション) タイムアウト（ミリ秒単位）。リソースが指定されたミリ秒数よりも長くかかる場合は、タイムアウトします。リソースが拒否されます。

このセクションを編集

ResourcePending

export interface ResourcePending<T>

プロパティ

修飾子

型

説明

loading

readonly

boolean

value

readonly

Promise<T>

このセクションを編集

ResourceProps

export interface ResourceProps<T>