---
title: "JSS ReactアプリでSitecoreフォームを実装してください"
slug: "implement-a-sitecore-form-in-a-jss-react-app"
abstract: "React JSSアプリケーションでSitecoreフォームを実装する"
---
# JSS ReactアプリでSitecoreフォームを実装してください

[Sitecoreフォームを作成し、SitecoreのJSSアプリルートに追加](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--using-a-sitecore-form-in-jss-applications.html "Walkthrough: Using a Sitecore form in JSS applications")した後、JSSフォームコンポーネントを実装してJSSアプリケーション内でSitecoreフォームをレンダリングできます。

JSSアプリでSitecoreフォームを使用するには、動作するセッションクッキーが必要です。この目的のために:

-   [環境でSSLを有効にするか、Sitecoreインスタンスでセキュアクッキーを無効にしている必要があります。](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/secure-cookies-and-local-jss-app-development.html "Secure cookies and local JSS app development")
-   React JSSアプリは [RESTレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-layout-api.html "JSS Layout API")を使う必要があります。
-   サーバー側で [JSS Reactアプリケーションをレンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html "Walkthrough: Rendering a JSS app server-side using the headless JSS proxy")しています。

React JSSアプリケーションでSitecoreフォームをレンダリングするには:

1.  JSSアプリケーションのルートディレクトリで、次のコマンドを実行して必要なパッケージをインストールします:
    
    npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
    
2.  フォームをレンダリングするには、アプリケーションにSitecoreフォームスキーマのレンダリング方法を伝える必要があります。レンダリングアプリのsrcディレクトリのコンポーネントファイルで、例えばsrc/components/JssReactForm.tsx、フォームコンポーネントを実装します:
    
    import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
    import React from 'react';
    import { withRouter } from 'react-router-dom';
    import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';
    
    const JssReactForm = ({ fields, history }) => (
     <Form
     form={fields}
     sitecoreApiHost={sitecoreApiHost}
     sitecoreApiKey={sitecoreApiKey}
     onRedirect={(url) => history.push(url)}
     />
    );
    
    export default withRouter(JssReactForm);
    
    > !注headlessモードでは、リクエストを直接Sitecoreインスタンスに送るとエラーが発生します。 sitecoreApiHostを *空文字列*に設定する必要があります。例えばsitecoreApiHost={''}、のようにリクエストは直接Node.jsサーバーに送られます。
    
3.  JSSアプリを接続モードで起動してください:
    
    jss start:connected
    

フォームデータがJSONとしてページにダンプされているのを見ることができます。