テンプレートを使用しないでブロックを使用する

フロントエンドフレームワークは強力なデフォルトのテンプレートシステムを提供していますが、ブロックを直接使用して、異なるコンテキストや既存のアプリケーション内でこれらのブロックを使用することも可能です。例えば、フロントエンドフレームワークが提供する既存のブロックページをNext.jsアプリケーションで使用することができます。

基本的な使用法

一般的に、すべてのブロックは BlockComponentProps インターフェースを受け入れます。このインターフェースを使用して、ブロックのデータ、アプリケーションロジックと統合するためのコールバック、その他のオプションを渡すことができます。 既存のアプリケーションで各必須プロパティをどのように処理するかについて説明します。

• errorMessageI18nHandler: この関数はグローバルに定義された定数にすることができます。
• logger: 独自のグローバルロガーを定義するか、フロントエンドSDKが提供するデフォルトのロガーを使用できます。
• onNavigate: この関数は、アプリケーションでのナビゲーションを処理するグローバル関数であるべきです。 ルーティングライブラリ用にコールバックを作成し、この関数が呼び出せるようにします。
• screenMode: これはアプリケーションの現在の画面モード（'mobile'、'desktop'、'bigDesktop'）です。 アプリケーションに適したプロパティを渡します。このモードが変更された場合、コンポーネントを再レンダリングするのを忘れないでください。
• params: これはブロックコンポーネントに対応するURLパラメータです。ルーティングライブラリからこれを渡すことができます。
• searchParams & setSearchParams: これは現在のページのクエリパラメータと、それを更新するためのコールバックです。ルーティングライブラリからこれを渡します。 ブロックはクエリパラメータが変更されるとページを再レンダリングすることを期待しているため、アプリケーションの高レベルでこの状態を管理する必要があります。
• sessionState & setSessionState: アプリケーションから現在のセッション状態を渡し、それを更新するためのコールバックを渡します。セッションの状態は、アプリケーションの高レベルコンポーネントで管理すべきです。
• pageTitle & setPageTitle: アプリケーションから現在のページタイトルを渡し、それを変更するためのコールバックを渡します。ページタイトルの状態も、アプリケーションの高レベルコンポーネントで管理するべきです。
• showToast: 一時的に画面にトーストメッセージを表示するための関数です。react-toastify などのライブラリを使用して実装することができます。
• urlForRoute: この関数は、特定のブロック名に対応するURLを決定するコールバックであるべきです。他のページをその生のパスとして参照したい場合、この関数をそのままの形で設定するか、ページ名からルートへのマッピングを独自に実装できます。

さらに、matchedBlockPage というオプションのプロパティがあります。これは現在レンダリングされているブロックに関するメタ情報をレンダリングするために使用されます。これは大多数のケースでは指定する必要はありませんが、ナビゲーションなど他のブロックをレンダリングするブロックの場合、この情報をレンダリングするために必要な場合があります。