1. Sitecore JavaScriptレンダリングSDK (JSS)

JSSアプリをJSS 22.1にアップグレードする

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore JavaScriptレンダリングSDKバージョン22.1では、アプリにいくつかの変更を加える必要があります。

始める前に

このトピックでは、次の方法について説明します。

  1. 編集ユーティリティのインポートパスを置き換える (すべてのフレームワーク) 

  2. Angularアプリを更新する 

  3. Reactアプリを更新する 

  4. Vue.jsアプリを更新する 

  5. アプリケーションの依存関係を更新する 

メモ

JSS Next.jsアプリケーションを更新するには、このトピックではなく、JSS Next.jsアプリのJSS 22.0.0から22.1への詳細なアップグレード ガイド に従ってください。

編集ユーティリティのインポートパスを置き換える (すべてのフレームワーク)

@sitecore-jss/sitecore-jss/utilsにあるすべての編集ユーティリティを、より意味のある@sitecore-jss/sitecore-jss/editingに移動しています。その結果、コード内の古い場所を参照するimportステートメントのパスを置き換える必要があります。

この変更は、次のユーティリティに影響します。

  • ChromeCommand 

  • DefaultEditFrameButton 

  • DefaultEditFrameButtonIds 

  • DefaultEditFrameButtons 

  • EditButtonTypes 

  • EditFrameDataSource 

  • ExperienceEditor 

  • FieldEditButton 

  • handleEditorAnchors 

  • HorizonEditor 

  • isEditorActive 

  • mapButtonToCommand 

  • Metadata 

  • resetEditorChromes 

  • WebEditButton 

警告

古いパスは、JSSの次のリリースまでのみ機能し続けます。したがって、必要な変更をできるだけ早く行うことを強くお勧めします。

Angularアプリを更新する

手記

このセクションの一部の手順では、JSS 21.8のアップグレードガイドを繰り返しています。したがって、これらの変更を既に適用している場合は、ここで繰り返す必要はありません。

Angularアプリケーションを更新するには:

  1. TypeScriptを ~5.2.2に更新します。

  2. Angularとそのすべての主要な依存関係を、関連する依存関係とともにバージョン17に更新します。次の一覧は、リリース時点で必要なバージョンを示しています。

    • Angularの主な依存関係:

      "@angular/animations": "~17.3.11",
"@angular/common": "~17.3.11",
"@angular/compiler": "~17.3.11",
"@angular/core": "~17.3.11",
"@angular/forms": "~17.3.11",
"@angular/platform-browser": "~17.3.11",
"@angular/platform-browser-dynamic": "~17.3.11",
"@angular/platform-server": "~17.3.11",
"@angular/router": "~17.3.11",

    • Angular devの依存関係:

      "@angular-builders/custom-webpack": "^17.0.2",
"@angular-devkit/build-angular": "^17.3.8",
"@angular-eslint/builder": "^17.5.2",
"@angular-eslint/eslint-plugin": "^17.5.2",
"@angular-eslint/eslint-plugin-template": "^17.5.2",
"@angular-eslint/schematics": "^17.5.2",
"@angular-eslint/template-parser": "^17.5.2",
"@angular/cli": "~17.3.8",
"@angular/compiler-cli": "~17.3.11",
"@angular/language-service": "~17.3.11",

    • その他の主な依存関係:

      "@ngx-translate/core": "~15.0.0",
"@ngx-translate/http-loader": "~8.0.0",
"apollo-angular": "~6.0.0",
"bootstrap": "^5.3.3",
"core-js": "~3.37.1",
"tslib": "^2.6.3",
"zone.js" "~0.14.7",

    • その他の開発依存関係:

      "@types/node": "~20.14.10",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"body-parser": "~1.20.2",
"eslint": "^8.56.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jsdoc": "48.7.0",

    • 残りの依存関係はすべて、現在のバージョンのままにしておくことができます。

  3. scripts/generate-config.tsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • configText propの割り当てでは、configprop?の後に、次のようなtoStringメソッド呼び出しとそれに続くtrimメソッド呼び出しを追加します。

      config[prop]?.toString().trim()

    • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

      // Before
}",\n`;

// After
}";\n`;

    以下は、JSS 22.1に適した更新された割り当ての例です。

    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]?.toString().trim()}";\n`;

  4. また、scripts/generate-config.jsファイルで、computedConfigpropに対して手順3を繰り返します。以下は、JSS 22.1に適した更新された割り当ての例です。

    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
  computedConfig[prop]?.toString().trim()
};\n`;

  5. /server.bundle.tsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • 次のimportステートメントを見つけます。

      import 'zone.js/dist/zone-node';

    • このステートメントを次のように置き換えます。

      import 'zone.js';

  6. src/polyfills.tsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • 次のimportステートメントがある場合は、見つけて削除します。

      import 'zone.js/dist/zone-node';
import 'zone.js/dist/zone';

    • 次のように、新しいimportステートメントを追加します。

      import 'zone.js';

  7. src/test.tsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • zone.js/distを含むimport文を見つけて削除します。

    • 次のように、新しいimportステートメントを追加します。

      import 'zone.js/testing';

  8. 既存のアプリにAngular 17のアップグレードの影響を受ける可能性のある他のカスタマイズがある場合は、Angular 17アップグレードガイド を参照して、さらに必要な変更についてのガイダンスを確認してください。

  9. アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

Reactアプリを更新する

編集サポートの簡略化により、sitecore-jss-react packageに新たな破壊的変更が加えられ、アプリにいくつかの変更を加える必要があります。

Reactアプリケーションを更新するには:

  1. ComponentConsumerPropsが削除されたため、それを参照するimportステートメントがある場合は、代わりにWithSitecoreContextPropsを使用するようにすべて更新してください。

  2. scripts/generate-config.jsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • configText propの割り当てで、次のようなtrimメソッド呼び出しをconfigprop?の後に追加します。

      config[prop]?.trim()

    • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

      // Before
}",\n`;

// After
}";\n`;

    以下は、JSS 22.1に適した更新された割り当ての例です。

    configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
  config[prop]?.trim()
}";\n`;

  3. アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

Vue.jsアプリを更新する

Vue.jsアプリケーションを更新するには:

  1. scripts/generate-config.jsファイルをカスタマイズしていない場合は、22.1バージョンに置き換えてください。それ以外の場合は、次のようにファイルを変更します。

    • configText propの割り当てで、次のようなtrimメソッド呼び出しをconfigprop?の後に追加します。

      config[prop]?.toString().trim()

    • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

      // Before
}",\n`;

// After
}";\n`;

    以下は、JSS 22.1に適した更新された割り当ての例です。

    configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || "${
  config[prop]?.trim()
}";\n`;

  2. また、scripts/generate-config.jsファイルで、computedConfigpropに対して手順1を繰り返します。以下は、JSS 22.1に適した更新された割り当ての例です。

    configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || ${
  computedConfig[prop]?.trim()
};\n`;

  3. アプリケーションのJSSパッケージを更新し、依存関係をインストールします。

アプリケーションの依存関係を更新する

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

依存関係を更新するには:

  1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.1に更新します。

  2. 次のコマンドを使用して依存関係をインストールします。

    npm install
この記事を改善するための提案がある場合は、 お知らせください!