---
title: "ReactアプリケーションにおけるSitecoreフィールドのレンダリング用JSSコンポーネント"
slug: "jss-components-for-rendering-sitecore-fields-in-react-applications"
abstract: "React用のJSSコンポーネントについて説明し、Sitecoreフィールドのレンダリングを助けます。"
---
# ReactアプリケーションにおけるSitecoreフィールドのレンダリング用JSSコンポーネント

JSS for Reactは、Reactアプリケーション内でSitecoreフィールドをレンダリングするのに役立つコンポーネントを提供します。

以下の表は、SitecoreフィールドタイプとJSS Reactコンポーネント間の対応を示しています。

Sitecoreフィールドタイプ

JSS Reactコンポーネント

日付

Date

ファイル

File

画像

Image

一般リンク

Link

単行テキスト、多行テキスト、または数値タイプ

Text

リッチテキスト

RichText

以下は、サポートされているコンポーネントの一覧と、それらの使用例です。例では、フィールドデータはPlaceholderコンポーネントによって提供されています。

## 日付

Dateコンポーネントは、JSSアプリケーション内の日付と時間のコンテンツフィールドのレンダリングを支援します。

Date成分は以下の性質を持ちます:

名称

概要

デフォルト

field

必須。  
  
レンダリングしたいフィールド。Sitecore Date型でなければなりません。

\-

tag

日付値をラップするHTML要素の名前。

span

editable

インライン編集を明示的に有効化または無効化してください。 true と field.editable に値がある場合、 field.editable は処理されコンポーネント出力としてレンダリングされます。 falseの場合、 field.editable 値は無視されレンダリングされません。

true

render

フィールド値を解析されたJavaScript Dateオブジェクトとして受け取り、コンポーネントのラッピング tag でレンダリングする値を返す関数です。日付および日付時間のローカリゼーションのフォーマットに使用できます。

\-

### 使用例

フィールドを使うには、コンポーネントにインポートする必要があります:

import { DateField } from '@sitecore-jss/sitecore-jss-react';

コンポーネントの使い方は以下の通りです:

-   簡単な日付フィールドをレンダリングするには:
    
    <DateField field={props.fields.date} />
    
-   datetimeフィールドをレンダリングするには:
    
    <DateField field={props.fields.dateTime} />
    
-   日付をUTC形式の文字列としてレンダリングするには:
    
    <DateField field={props.fields.date} render={(date) => date.toUTCString()} />
    
    > !注編集モードではrenderプロパティは無視されます。
    
    このコンポーネントはフォーマット設定のためにJS Dateオブジェクトへの直接アクセスを提供します。したがって、以下のようにローカライズされた日付および日付時間文字列をレンダリングするために使用できます。
    
    <DateField field={props.fields.date} render={(date) => date.toLocaleDateString()} />
    <DateField
     field={props.fields.dateTime}
     render={(date) => <em>{date.toLocaleString()}</em>}
    />
## ファイル

Fileコンポーネントはファイルリンクをレンダリングします。

File成分は以下の性質を持ちます:

名称

概要

value

必須。  
  
レンダリングしたいルートフィールドです。これは、 src、 title、 displayNameのプロパティを持つSitecoreファイルタイプを表しています。

children

レンダリングされた <a/> タグを埋め込むReactノードです。デフォルト値はファイルです。

> !重要ファイルフィールドはエクスペリエンスエディターでのインライン編集をサポートしていません。しかし、コンポーネントのデフォルトフィールドエディターを使って編集することは可能です。

### 使用例

フィールドを使うには、コンポーネントにインポートする必要があります:

import { File } from '@sitecore-jss/sitecore-jss-react';

コンポーネントの使い方は以下の通りです:

-   簡単なファイルリンクをレンダリングするには:
    
    <File field={props.fields.file} />
    
-   カスタムアンカーテキストで新しいタブで開くファイルリンクをレンダリングするには:
    
    <File field={props.fields.file} target="\_blank">
     View file
    </File>W
## 画像

Imageコンポーネントは編集可能でレスポンシブな画像をレンダリングすることを可能にします。

Image成分は以下の性質を持ちます:

名称

概要

field

必須。  
  
画像フィールドデータ。 ImageFieldValue または ImageField オブジェクトタイプを受け入れます。

editable

画像のインライン編集を有効または無効にできるブール値です。  
  
デフォルト: true。

imageParams

画像URLに追加された[クエリ文字列パラメータ](https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/media-options-and-query-string-parameters-in-the-sitecore-asp-net-cms)に変換するImageSizeParametersの配列です。

srcSet

ネイティブ画像のsrcset属性の値として使われる、カンマ区切り文字列を生成するためのImageSizeParameters定義の配列です。

mediaUrlPrefix

メディアURLの接頭辞を /-/jssmedia または /~/jssmediaに置き換えるカスタム正規表現です。

> !重要imageParamsやsrcSetプロパティを使用する際は、セキュリティ上の理由から画像パラメータを [サーバー上でホワイトリスト化](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/media-handler.html "Media Handler") しなければなりません。
> 
> コンポーネントに追加のプロパティを渡すことができます。例えば、ネイティブ画像sizes属性の値を指定して、サーバー側のレスポンシブなレンダリング画像を有効にすることができます。

### 使用例

Imageコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:

import { Image } from '@sitecore-jss/sitecore-jss-react';

Imageコンポーネントを使ってレンダリングできます:

-   シンプルな画像:
    
    <Image media={props.fields.sample1} />
    
-   レスポンシブ画像:
    
    <Image
     field={props.fields.sample2}
     srcSet={{ mw: 300 }, { mw: 100 }}
     sizes="(min-width: 960px) 300px, 100px"
     className="img-fluid"
    />
    
-   高度な設定が可能な画像。例えば、以下のサンプルは、Experience EditorのようなSitecoreコンテンツおよびレイアウトエディタでは編集できない画像をレンダリングしています。画像はimageParamsプロパティに基づいてサーバー側でリサイズされます:
    
    <Image
     field={props.fields.sample2}
     editable={false}
     imageParams={{ mw: 100, mh: 50 }}
     height="50"
     width="94"
     data-sample="other-attributes-pass-through"
    />
## リンク

Linkコンポーネントは、General Link Sitecoreフィールドタイプの内容をレンダリングするのに役立ちます。

Link成分は以下の性質を持ちます:

名称

概要

デフォルト

field

レンダリングしたいルートフィールド。それはSitecoreのGeneral Linkタイプでなければなりません。

\-

editable

エディターを使うかSitecore形式のHTML出力を使うかを示します。  
  
\> \[!注\]  
\> Sitecoreからの編集可能な出力を使用する場合、LinkはSitecore提供されたマークアップの周りにラッパースパンを作成し、そのスパンにホスト要素の属性を適用します。

true

showLinkTextWithChildrenPresent

子が存在してもリンク記述の表示を有効または無効にするブール式です。  
  
\> \[!注\]  
\> この設定は技術的な制約により、Sitecoreエクスペリエンスエディターでは無視され、説明は常にレンダリングされます。

### 使用例

Linkフィールドヘルパーコンポーネントを使用するには、それをコンポーネントにインポートする必要があります:

import { Link } from '@sitecore-jss/sitecore-jss-react';

Linkコンポーネントを使ってレンダリングできます:

-   外部リンク:
    
    <Link field={props.fields.externalLink} />
    
-   HTMLやその他のコンポーネントを含む内部リンク:
    
    <Link field={props.fields.internalLink}>
     <em>HTML</em> or other components can be used within link renderers, for example, links to images.
    </Link>
    
-   メールリンク:
    
    <Link field={props.fields.emailLink} />
    
-   コンテンツパラメータのリンク:
    
    <Link field={props.fields.paramsLink} />
    

リンクコンポーネントは追加のプロパティや属性を受け入れます。例えば:

<Link
 field={props.fields.externalLink}
 showLinkTextWithChildrenPresent={true}
 className="font-weight-bold"
 data-otherattributes="pass-through-to-anchor-tag"
/>
## 本文

Textコンポーネントは、単行テキスト、複数行テキスト、または数値フィールドSitecoreレンダリングするのに役立ちます。

Text成分は以下の性質を持ちます:

名称

概要

デフォルト

field

レンダリングしたいフィールド。

\-

tag

テキスト値をラップしたいHTML要素の名前です。

span

editable

エディターを使うかSitecore形式のHTML出力を使うかを示します。

true

encode

出力値のエンコーディングHTML有効または無効化します。偽値はまた editable: falseを意味します。

true

マルチラインテキストの場合、提供された編集可能な値の中で、行区切りは <br />に置き換えられます。編集不可の値を使用する場合、field.value処理してJSONの換行を望むマークアップに置き換えるか、プリラップのようなCSSの空白設定値を利用できます。

### 使用例

Textコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:

import { Text } from '@sitecore-jss/sitecore-jss-react';

レンダリングは以下の通りです:

-   デフォルトオプションがあるテキストフィールド:
    
    <Text field={props.fields.sample} />
    
-   カスタムタグ、CSSクラス、カスタム属性を持つ編集不可のテキストフィールド:
    
    <Text
     field={props.fields.sample2}
     tag="section"
     editable={false}
     encode={false}
     className="font-weight-bold"
     data-sample="other-attributes-pass-through"
    />
    

Sitecoreテキストフィールドの生値をレンダリングしたい場合は、インポート文にgetFieldValue関数を追加してください。その後、アプリケーション内で生の値を確認できます。例えば:

<div>Raw value (not editable): {getFieldValue(props.fields, 'sample')}</div>
## リッチテキスト

RichTextコンポーネントはリッチテキストフィールドSitecoreレンダリングするのに役立ちます。

RichText成分は以下の性質を持ちます:

名称

概要

デフォルト

field

レンダリングしたいフィールド。

\-

tag

テキスト値をラップしたいHTML要素の名前です。

div

editable

エディターを使うかSitecore形式のHTML出力を使うかを示します。

true

### 使用例

RichTextコンポーネントを使用するには、それを自分のコンポーネントにインポートする必要があります:

import { RichText } from '@sitecore-jss/sitecore-jss-react';

レンダリングは以下の通りです:

-   デフォルトのオプションがあるフィールド:
    
    <RichText field={props.fields.sample} />
    
-   カスタムタグ、CSSクラス、カスタム属性を持つ編集不可のリッチテキストフィールド:
    
    <RichText
     field={props.fields.sample2}
     tag="section"
     editable={false}
     className="font-weight-bold"
     data-sample="other-attributes-pass-through"
    />