フロントエンドを構築する
Morph では、マークダウンを使用してフロントエンドを構築します。マークダウンファイルにコンポーネントを配置することで、Web アプリケーションの UI を構築することができます。
開発の流れ
Morph でのフロントエンド開発の手順は以下の通りです。
.mdxファイルを作成する
src/pages
ディレクトリに、 .mdx
ファイルを作成することで、Webアプリケーションのページを作成します。ファイルパスをベースにURLが生成されます。
ページのタイトルを追加する
.mdx
ファイルに、ページのタイトルを追加します。ページの最初の見出しがタイトルとして扱われます。
コンポーネントを配置する
コンポーネントリファレンスを参照しながら、あなたのデータアプリに適したコンポーネントを配置してください。
開発サーバーを起動する
開発サーバーを起動することで、Webアプリケーションをローカルで確認することができます。
ファイルベースルーティング
mdx ファイルのパスをベースに、アプリケーションの URL が生成されます。
例:
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
プロパティを呼び出すことでアクセスできます。
Tips
この例のように、 topPageState.
と defineState()
で宣言した変数名を毎回指定するのが面倒な場合は、変数を分割代入することで短縮することができます。
状態を更新する: .update()
状態を更新するには、 update()
メソッドを使用してください。
入力コンポーネントの利用
Morph フレームワークでは、 defineState()
で宣言した状態に対して、ユーザー入力を反映させるためのコンポーネントが用意されています。
詳しくは、入力コンポーネントを参照してください。
入力コンポーネントを使用すると、簡単にユーザー入力を状態に反映させることができます。
データコンポーネントに値を渡す
データコンポーネントは variables
というプロパティを受け取ることができるようになっています。
このプロパティに defineState()
で宣言した状態の値を渡すことで、ユーザーが入力した値を Python 関数や SQL ファイルに渡すことができます。
[Advanced] データ API の利用
実行結果を取得する: loadData()
loadData()
関数を利用して、Python や SQL の実行結果を取得することができます。
Python や SQL の nameを指定します。
取得するデータの形式を指定します。
Python や SQL に渡す Variables オブジェクトです。
任意のオブジェクトの他に、 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()
を利用して取得したデータを表示する例
Python や SQL を手動実行する: postData()
postData()
関数を利用して、バックエンドの Python や SQL を実行することができます。
実行対象のPython や SQL の nameを指定します。
実行中の状態を管理するための run
と running
メソッドを持つオブジェクトが返却されます。
run(variables?: Record<string, unknown>, key?: string)
: バックエンド関数を実行します。variables
には Python や SQL に渡す変数を指定します。running(key?: string)
: 実行中かどうかを返します。key
には複数のバックエンド関数を実行する場合に指定します。
key を利用して複数の postData を区別する
複数の箇所から実行することができる UI の場合、key
を指定することで、それぞれの箇所から実行された関数を区別することができます。