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

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

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

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

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

始める前に

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

  1. Angularアプリを更新する 

  2. Reactアプリを更新する 

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

  4. NodeヘッドレスSSR Experience Edgeアプリを更新する

  5. NodeヘッドレスSSRプロキシ アプリを更新する

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

メモ

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

Angularアプリを更新する

AngularアプリをJSS 22.3にアップグレードするには、複数の変更を行う必要があります。このプロセスのステップ1から6は、次のようにまとめることができます。

  • JssContextServiceとそれに対するすべての参照を更新する (sitecore-jss-angularコンポーネントの一部がアプリケーションの状態に依存するようになったため)。

  • SSRの辞書データを取得する際のパフォーマンスを向上させるために、i18nの初期化を更新しました。

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

  1. src/app/jss-context.service.tsで、次の手順を実行します。

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

      import { LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';

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

      import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';

    • BehaviorSubjectインポートを削除します。

    • 次のフィールドを削除します。

      state: BehaviorSubject<JssState>;

    • 次のgetステートメントを追加し、次に示すようにコンストラクターを置き換えます。

      get state() {
  return this.stateService.state;
}
get stateValue() {
  return this.stateService.getStateValue();
}
constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
}

    • this.state.nextのすべてのインスタンスをthis.stateService.setStateに置き換えます。

    • this.state.valueのすべてのインスタンスをthis.stateService.getStateValue()に置き換えます。

  2. src/app/jss-context.server-side.service.tsで、次の手順を実行します。

    • 次のimportステートメントを追加します。

      import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';

    • JssDataFetcherServiceインポートを削除します。

    • コンストラクタを変更してJssStateService渡し、基本クラスに伝達します。例えば：

      constructor(
  protected transferState: TransferState,
  protected layoutService: JssLayoutService,
  protected stateService: JssStateService<JssState>,
  // this initial state from sitecore is injected by server.bundle for "integrated" mode
  @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
) {
  super(transferState, layoutService, stateService);
}

  3. app.module.tsで、HttpClient import文を削除します。

    以下は、JSS 22.3に適した更新ファイルの例です。

    TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (transferState: TransferState) =>
      new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
    deps: [TransferState],
  },
}),

  4. app.server.module.tsで、TransferStateをインポートします。

    以下は、JSS 22.3に適した更新ファイルの例です。

    import { NgModule, TransferState } from "@angular/core";

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (
      ssrViewBag: {
        [key: string]: unknown;
        dictionary: { [key: string]: string };
      },
      transferState: TransferState
    ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
    deps: ['JSS_SERVER_VIEWBAG', TransferState],
  },
}),

  5. app/i18n/jss-translation-server-loader.service.tsで、次の手順を実行します。

    • TransferStateを注入します。

    • dictionaryデータがtransferStateに設定されていることを確認します。

    以下は、JSS 22.3に適した更新ファイルの例です。

    import {
  Inject,
  Injectable,
  makeStateKey,
  StateKey,
  TransferState,
} from "@angular/core";    
import { DictionaryPhrases } from "@sitecore-jss/sitecore-jss-angular";
...
    
export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
  'dictionary'
);

export class JssTranslationServerLoaderService implements TranslateLoader {
  constructor(
    @Inject('JSS_SERVER_VIEWBAG')
    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
    private transferState: TransferState
  ) {}

  getTranslation(_lang: string) {
    const dictionary = this.serverViewBag.dictionary;

    this.transferState.set(dictionaryStateKey, dictionary);
    ...
  }
}

  6. app/i18n/jss-translation-client-loader.service.tsで、次の手順を実行します。

    • TransferStateを注入します。

    • transferState内の辞書データを確認し、サーバーによって利用可能で提供されている場合はそれを使用します。

    以下は、JSS 22.3に適した更新ファイルの例です。

    import { dictionaryStateKey } from './jss-translation-server-loader.service';
import { Injectable, TransferState } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
import { EMPTY, Observable, of } from 'rxjs';
import { JssTranslationLoaderService } from './jss-translation-loader.service';
import { dictionaryStateKey } from './jss-translation-server-loader.service';

@Injectable()
export class JssTranslationClientLoaderService implements TranslateLoader {
  constructor(
    private fallbackLoader: JssTranslationLoaderService,
    private transferState: TransferState
  ) {}

  getTranslation(lang: string): Observable<DictionaryPhrases> {
    const dictionary = this.transferState.get(dictionaryStateKey, null);
  
    if (dictionary) {
      return of(dictionary);
    }
    ...
  }
}

  7. ルート .gitignoreファイルで、.angularのルールを追加します (まだ追加していない場合)。

  8. src/environments/.gitignoreの内容を次のように置き換えます (まだ行っていない場合)。

    *
!.gitignore

  9. package.jsonで、次のdevDependenciesを更新します。

    "@types/node": "~22.9.0",
"@typescript-eslint/eslint-plugin": "^8.14.0",
"@typescript-eslint/parser": "^8.14.0",
...
"typescript": "~5.4.0",

  10. src/tsconfig.app.jsonで、compilerOptionsから次のものを削除します。

    "types": []

  11. src/tsconfig.server.jsonについて手順10を繰り返します。

  12. tsconfig.jsonで、次のように"types": "node"typeRootsの上に追加します。

    ...
"types": ["node"],
"typeRoots": ["node_modules/@types"],
...

  13. 新しいプラグインアーキテクチャにconfigとgenerate-component-factoryを分割する場合は、次の操作を行います。

    • プラグインファイルをAngularテンプレートからアプリの /scripts/configディレクトリと /scripts/generate-component-factoryディレクトリにコピーします。

    • scripts/bootstrap.tsファイルに./scripts/configと./generate-component-factoryをインポートします。

    • Angularテンプレートからscripts/generate-plugins.tsファイルをコピーし、bootstrap.tsファイルにインポートします。

    JSS 22.3に適した更新されたbootstrap.tsファイルの例を次に示します。

    /*
   PLUGINS GENERATION
*/
require("./generate-plugins");

/*
  CONFIG GENERATION
*/
require("./generate-config");

/*
  COMPONENT FACTORY GENERATION
*/
require("./generate-component-factory");

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

Reactアプリを更新する

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

  • .eslintrcで、次の例に示すように、ecmaVersionを13に設定します。

    "ecmaFeatures": {
  "jsx": true
},
"ecmaVersion": 13,
"babelOptions": {
  "presets": ["@babel/preset-react"]
}

Vue.jsアプリを更新する

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

  1. package.jsonでは、次の依存関係は不要になり、削除できます。

    • @vue/server-renderer

    • @vue/compiler-sfc

  2. 次のパッケージを記載されているバージョンに更新します。

    テーブル 1.

    パッケージ

    新しいバージョン

    vue

    ^3.5.12

    @vue/apollo-option

    ^4.0.0

    @vue/apollo-ssr

    ^4.0.0



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

NodeヘッドレスSSR Experience Edgeアプリを更新する

NodeヘッドレスSSR Experience Edgeアプリを更新するには:

  • 次のパッケージを記載されているバージョンに更新します。

    テーブル2.

    パッケージ

    新しいバージョン

    @types/node

    ^22.9.0

    typescript

    ~5.6.3



NodeヘッドレスSSRプロキシ アプリを更新する

NodeヘッドレスSSRプロキシ アプリを更新するには:

  • 次のパッケージを記載されているバージョンに更新します。

    テーブル3。

    パッケージ

    新しいバージョン

    @types/node

    ^22.9.0

    typescript

    ~5.6.3



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

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

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

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

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

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