.mdxファイルを作成する
src/pages
ディレクトリに、 .mdx
ファイルを作成することで、Webアプリケーションのページを作成します。ファイルパスをベースにURLが生成されます。ページのタイトルを追加する
.mdx
ファイルに、ページのタイトルを追加します。ページの最初の見出しがタイトルとして扱われます。コンポーネントを配置する
開発サーバーを起動する
src/pages/new-page-1.mdx
-> /new-page-1
src/pages/new-page-2/index.mdx
-> /new-page-2
src/pages/new-page-3/sub-page.mdx
-> /new-page-3/sub-page
src/pages/_app.tsx
グローバルなレイアウトを設定できます。<Outlet>
に子ルートが配置されます。
404.tsx
グローバルな 404 ページを設定できます。
defineState()
defineState()
を使用してください。defineState()
は、オブジェクトを引数に取り、初期値として設定します。
.value
.value
プロパティを呼び出すことでアクセスできます。
topPageState.
と defineState()
で宣言した変数名を毎回指定するのが面倒な場合は、変数を分割代入することで短縮することができます。.update()
update()
メソッドを使用してください。
defineState()
で宣言した状態に対して、ユーザー入力を反映させるためのコンポーネントが用意されています。
詳しくは、入力コンポーネントを参照してください。
入力コンポーネントを使用すると、簡単にユーザー入力を状態に反映させることができます。
variables
というプロパティを受け取ることができるようになっています。
このプロパティに defineState()
で宣言した状態の値を渡すことで、ユーザーが入力した値を Python 関数や SQL ファイルに渡すことができます。
loadData()
loadData()
関数を利用して、Python や SQL の実行結果を取得することができます。
defineState()
で定義した State
を渡すこともできます。
State
を渡した場合は、 State
の値の変更に合わせて再度データを取得します。QueryState<T>
オブジェクトが返却されます。
QueryState
はState
の拡張であり、State
と同様に.value
を通じて値にアクセスできます。
.value
でアクセスできる値はtype
パラメータによって異なります。
type="json"
: 以下の形式のオブジェクトが返却されます。type="html"
: HTML文字列が返却されます。
type="image"
: base64エンコードされた画像データが返却されます。
type="markdown"
: Markdown文字列が返却されます。
Query
に追加されたQueryState
の独自のプロパティ、メソッドは以下です。
refresh()
を利用することで、データの再取得をトリガーすることができます。
clearCache
をtrue
にすると、データの再取得の完了を待たずにフロントエンドに保持されたクエリ結果を削除します。
loadData()
を利用して取得したデータを表示する例postData()
postData()
関数を利用して、バックエンドの Python や SQL を実行することができます。
run
と running
メソッドを持つオブジェクトが返却されます。
run(variables?: Record<string, unknown>, key?: string)
: バックエンド関数を実行します。variables
には Python や SQL に渡す変数を指定します。running(key?: string)
: 実行中かどうかを返します。key
には複数のバックエンド関数を実行する場合に指定します。key
を指定することで、それぞれの箇所から実行された関数を区別することができます。