---
title: "JSS開発のベストプラクティス"
slug: "jss-development-best-practices"
abstract: "JSSアプリ開発時のベストプラクティス"
---
# JSS開発のベストプラクティス

JSSアプリケーションは通常のJavaScriptアプリケーションにはないユースケースをサポートしなければなりません。したがって、JSSアプリケーションを開発する際には、JSSアプリが期待される機能を確実に提供するために、いくつかのベストプラクティスに従う必要があります。

## ハードコーディングレイアウトは避けましょう

コンテンツオーサー管理と互換性のあるアプリを作るには、コンポーネント階層やテキスト、画像などの非コードコンテンツのハードコーディングを避ける必要があります。代わりに、コンポーネント内のJSSパッケージのコンポーネントを使用してください。これにより、コンテンツオーサーが生成する動的なデータでコンポーネントを補填できます。

コンポーネントのネストを明示的にハードコーディングしないでください。代わりに、JSSライブラリの <Placeholder> コンポーネントを使って、コンテンツ作成者が他のコンポーネントをネストできるようにコンポーネント内に「バスケット」を作成しましょう。

> !ヒントこの推奨の適用を検証するために、Sitecoreエディター(Horizon、Experience Editor)が正常に動作しているか確認してください。コンテンツ作成者は、レンダリングを挿入できる必要があります。レンダリングを削除し、移動できます。

## ハードコーディングフィールドは避けてください

もしコンポーネントにコンテンツオーサーが制御しなければならない値がある場合は、JSSライブラリ( TextやImageなど)から関連するフィールドコンポーネントを取り込み、それらの値の代わりにこれらのコンポーネントを使用してください。フィールド値をハードコーディングしたり、他の方法で注入したりしないでください。

> !ヒントこの推奨の申請を検証するために、Sitecoreエディター(Horizon、Experience Editor)が期待通りに動作しているか確認してください。コンテンツ作成者はすべてのデータソースフィールドをインラインで編集できる必要があります。

## 作成要件について問い合わせてください

Sitecoreは、強力なマーケティング機能を備えた複雑なアプリケーションを構築するためのツールのコレクションです。

Sitecoreサイトが構築された後、Sitecoreはユーザーにさまざまなツールや連携を提供し、エンドユーザーのウェブサイト *体験* を分析、育成、パーソナライズします。Sitecoreサイト、ひいてはJSSアプリの主要なクライアントは、マーケター、Sitecore管理者、コンテンツオーサーです。開発者として、これらのクライアントのビジネス要件を満たすJSSアプリを構築しなければなりません。つまり、JSSアプリはSitecoreのオーサリングインターフェースと互換性を保ち、サイトやコンテンツ管理機能を制限する技術的な制限を導入しないようにしなければなりません。

## カスタムルートの要件は注意深く扱いましょう

Sitecoreでは、コンテンツオーサーは希望するURL構造に基づいてコンテンツツリーを整理することで各ページのURLを制御できます。JSSアプリはこの機能を完全にサポートすることが期待されています。JSSアプリは、コンテンツオーサーが制御するURL構造をサポートする [カスタムルーティング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/route-handling-and-data-fetching-in-jss-apps.html "Route handling and data fetching in JSS apps") を実装しています。