---
title: "ウォークスルー:JSSアプリケーションにおけるSitecoreフォームの使用"
slug: "walkthrough--using-a-sitecore-form-in-jss-applications"
abstract: "Next.jsやReactアプリケーションでSitecoreフォームを使いましょう"
---
# ウォークスルー:JSSアプリケーションにおけるSitecoreフォームの使用

このウォークスルーでは、JSSアプリケーションでSitecoreフォームを使い、Sitecore Forms APIを活用したフォームの実装例をReactやNext.jsで紹介します。

> !注JSSには[Forms APIを消費するReactの例](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-forms-for-react.html "JSS Forms for React")があります。他のフレームワークでフォームのスキーマデータを利用することは可能ですが、サンプルコンポーネントは提供されていません。

このウォークスルーは、JSSの基本に精通しており、ReactまたはNext.js JSSアプリをセットアップしてSitecoreにデプロイしていることを前提としています。

このウォークスルーでは、以下の方法を説明します:

-   フォームはSitecoreで作成してください。
-   JSSアプリケーション用のフォームレンダリングコンポーネントを作成します。
-   フォームレンダリングをアプリルートに追加してください。
-   フォームをJSSアプリケーションに実装してください。

## Sitecoreでフォームを作成してください

JSSでフォームを使用するには、フォームをSitecoreで作成する必要があります。

フォームを作成するには:

1.  Sitecoreの **フォーム** ダッシュボードで **「作成**」をクリックします。
    
2.  新しいフォームを一から作成するには、「 **空白フォーム**」をクリックし、フォームの基準となるテンプレートを選択してください。
    
3.  フォームに「送信」ボタンを追加するには、「 **フォーム要素** 」の **「構造** 」セクションで、**送信** ボタンの要素をフォームキャンバスにドラッグしてください。
    
4.  フォームデータを保存し、フォームが自動的にクリアされないようにするには、送信アクションを*Save Data*に設定し、**ページへリダイレクト**してください。
    
    > !注JSSアプリでは、アプリケーションを送信後に別のページにリダイレクトすることはクライアント側のルーティングで簡単に実現できます。ページの実際の再読み込みである必要はありません。
    

## JSSアプリケーション用のフォームレンダリングコンポーネントを作成します

フォームをJSSアプリに追加するには、フォームをレンダリングするためのコンポーネントが必要です。フォームレンダリングコンポーネントは通常のJSSコンポーネントですが、フォームの切断モードはサポートされていないため、まずSitecoreで作成する必要があります。

フォームレンダリングコンポーネントを作成するには:

1.  JSS CLI: jss deploy component Form --allowedPlaceholders jss-mainを使ってコンポーネント定義をSitecore作成します。
2.  フォームを追加したいプレースホルダー名に許可されている場所を変更してください。
3.  Sitecoreコンテンツエディターで作成したレンダリングアイテム(/sitecore/layout/Renderings/Project/$yourappname/Form)に移動します。
4.  Datasource locationフィールドを/sitecore/formsに設定してください。
5.  Datasource templateフィールドを/sitecore/templates/System/Forms/Formに設定してください。
6.  Rendering Contents ResolverフィールドをSitecore Forms Resolverに設定します。これによりJSSフォームデータがアイテムデータではなくコンポーネントに届きます。

## フォームレンダリングをアプリルートに追加してください

フォームレンダリングをアプリルートに追加するには:

1.  エクスペリエンスエディターで、フォームを追加したいJSSルート項目に移動します。
    
2.  新しいFormコンポーネントを許可されているプレースホルダーに挿入します。
    
3.  以前作成したSitecoreフォームを「関連コンテンツ」として選択してください。
    
    > !注コンポーネントが実装表示を欠いているという警告です。これは、フォームの見た目をまだ定義していないため予想されます。
    

## フォームをJSSアプリケーションに実装してください

JSSアプリケーションでのフォーム実装は、アプリケーション作成に使ったフレームワークSDKによって異なります。

JSSアプリでフォームを実装するには、以下のいずれかの方法に従ってください。

-   [JSS Next.jsアプリでSitecoreフォームを実装してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/implement-a-sitecore-form-in-a-jss-next-js-app.html "Implement a Sitecore form in a JSS Next.js app")。
-   [JSS ReactアプリでSitecoreフォームを実装](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/implement-a-sitecore-form-in-a-jss-react-app.html "Implement a Sitecore form in a JSS React app")してください。