---
title: "JSS提供のフィールドヘルパーコンポーネントVue.js"
slug: "field-helper-components-provided-by-jss-for-vue-js"
abstract: "Sitecoreデータのレンダリングを支援するためにVue.jsのためにJSSが提供するコンポーネントを説明しています。"
---
# JSS提供のフィールドヘルパーコンポーネントVue.js

JSS for Vue.jsは、Sitecoreフィールド値のレンダリングを支援する補助コンポーネントを提供します。

sitecore-jss-vueから露出したヘルパーコンポーネントは、通常ステートを持つコンポーネントであるPlaceholderを除き、状態のない関数型コンポーネントです。

[Vue.jsにおける属性継承](https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance)に従い、コンポーネントに渡された非プロパティ属性は囲みタグ上でHTML属性として描画されます。コンポーネントに渡されたイベントも伝播されます。

> !注sitecore-jss-vueから公開されたヘルパーコンポーネントは、app.component()などの方法でグローバルに登録されていません。これはグローバルコンポーネント空間を汚染しないように、またWebpackやRollupのようなバンドルツールの木構造調整機能と整合させる意図的なものです。したがって、自分のコンポーネントで使いたいヘルパーコンポーネントはローカルで要求またはインポートする必要があります。

以下は、サポートされているすべてのフィールドヘルパーコンポーネントの一覧であり、それらの使い方の例を示します。以下の例では、フィールドデータはプレースホルダーコンポーネントによって提供されています。

## 本文

<template>
 <sc-text tag="h1" :field="fields.title" />
</template>
<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScText: Text
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

デフォルト

field

レンダリングしたいフィールド。通常はSitecoreのフィールドタイプのうち、単行テキストまたはマルチラインテキストのいずれかですが、数値タイプも使えます。

\-

tag

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

span

editable

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

true

encode

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

true

マルチラインテキストの場合、提供された編集可能な値では、行切れが <br />に置き換えられます。編集不可の値を使えば、field.value処理してJSONの換行を望むマークアップに置き換えたり、CSSの白字表示値(プリラップ)を使うことができます。

## リッチテキスト

<template>
 <sc-rich-text tag="div" :field="fields.text" />
</template>
<script>
import { RichText } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScRichText: RichText
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

デフォルト

field

レンダリングしたいフィールド。Sitecoreのリッチテキスト型でなければなりません。

\-

tag

HTML 要素名がリッチテキスト値をラップします。

div

editable

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

true

## 画像

Imageコンポーネントは、コンポーネントに属性として提供されている場合、srcSet属性に特別な扱いを与えます。 srcSetの各要素に対してクエリ文字列パラメータを表すオブジェクトの配列を提供できます。これにより、sizesプロパティと組み合わせることでサーバー側レンダリング付きのレスポンシブ画像が可能になります。

<template>
 <sc-image :media="fields.image" />
</template>
<script>
import { Image } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScImage: Image
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

デフォルト

media

レンダリングしたいルートフィールドです。Sitecore画像タイプでなければなりません。

\-

editable

Sitecore形式の出力を使用する必要があるかどうかを示します。

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) 。  
  
\> \[!注\]  
\> JSSメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットは [サーバー上でホワイトリスト](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/media-handler.html)化されなければなりません。

\-

## リンク

<template>
 <sc-link :field="fields.link" />
</template>
<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScLink: Link
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

デフォルト

field

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

\-

editable

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

true

## ファイル

<template>
 <sc-file :field="fields.file" />
</template>
<script>
import { File } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScFile: File
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

field

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

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

## 日付

<template>
 <sc-date :field="fields.date" :formatter="formatDate" />
</template>
<script>
import { Date } from '@sitecore-jss/sitecore-jss-vue';
export default {
 props: {
 fields: Object
 }
 components: {
 ScDate: Date
 },
 methods: {
 formatDate(date) {
 return date && date.toISOString();
 }
 }
};
</script>

以下の表は入力の性質を示しています:

名称

概要

デフォルト

field

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

\-

tag

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

span

editable

Experience Editor/Sitecore形式のHTML出力を使う必要があるかどうかを示します。

true

formatter

フィールド値を解析された JavaScript Date オブジェクトとして受け取り、その値をコンポーネントのラッピング tag でレンダリングする関数です

\-