その他のフレームワーク

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

Version: 22.x

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

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

Sitecore JavaScript Rendering SDKバージョン22.4では、アプリにいくつかの修正を加える必要があります。

他の変更点として、22.4リリースではすべてのコア @sitecore-jssパッケージからAxios依存性が削除されました。この依存関係はコアJSS機能に深く根付いており、その削除により、JSSアプリがネイティブノードフェッチ、代替のフェッチライブラリ、最新のAxiosバージョン(最新のセキュリティ修正や機能を含む)を通じてSitecoreと通信する柔軟性が高まります。

!注デフォルトのフェッチャーとしてのAxiosの削除に関する変更の詳細は、関連する変更ログエントリを参照してください。

!注始める前に

まだでなければ、アプリをJSS 22.3にアップグレードしてください。

アップグレードの影響を理解するために、JSS 22.4のリリースノートに精通してください。

このトピックでは、以下の方法を説明します:

Angularアプリのアップデート
Reactアプリの更新
アプリの更新Vue.js
アプリケーションの依存関係を更新する:::

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

Angularアプリのアップデート

Angularアプリケーションの更新:

存在する場合は、すべてのAxiosインポート文を以下のように置き換えます。

既存の輸入

代替輸入

AxiosDataFetcher

NativeDataFetcher

AxiosResponse

NativeDataFetcherResponse

AxiosDataFetcherConfig

NativeDataFetcherConfig
アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

Reactアプリの更新

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

アプリケーション全体( src/dataFetcher.jsを除く)では、すべてのAxiosインポート文を以下のように置き換えてください。

既存の輸入

代替輸入

AxiosDataFetcher

NativeDataFetcher

AxiosResponse

NativeDataFetcherResponse

AxiosDataFetcherConfig

NativeDataFetcherConfig
アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

さらに、データフェッチロジックをAxiosからJSSネイティブ実装(Node.js内蔵ロジックベース)に切り替えたい場合は、以下の変更を加えてください。

server/server.jsでは、以下のことを行ってください。
- Axiosインポート文を削除してください:
  
  import axios from 'axios';
- 以下の輸出明細をご覧ください:
  
  export const setUpDefaultAgents = (httpAgent, httpsAgent) => { ... };
- その文の中の以下の文を削除してください:
  
  axios.defaults.httpAgent = httpAgent; axios.defaults.httpsAgent = httpsAgent;
src/dataFetcher.jsでは、以下のことを行ってください。
- AxiosFetcherインポートステートメントを見つけてください。
- その文を削除し、次の文に置き換えてください。
  
  import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-react';
- dataFetcher機能を見つけてください。
- その関数を削除し、次のものに置き換えてください:
  
  export async function dataFetcher(url, data) { const fetcher = new NativeDataFetcher({ credentials: 'include' }); const response = await fetcher.fetch(url, { method: data ? 'POST' : 'GET', headers: { 'Content-Type': 'application/json', }, body: data ? JSON.stringify(data) : undefined, }); return response.data; }
package.jsonでは、以下のことを行ってください。
1. 以下の依存関係を削除してください:
  
  "axios": "^1.2.3",
2. 変更を適用npm install。

アプリの更新Vue.js

Vue.js申請を更新するには:

アプリケーション全体( src/dataFetcher.jsを除く)では、すべてのAxiosインポート文を以下のように置き換えてください。

既存の輸入

代替輸入

AxiosDataFetcher

NativeDataFetcher

AxiosResponse

NativeDataFetcherResponse

AxiosDataFetcherConfig

NativeDataFetcherConfig
アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

さらに、データフェッチロジックをAxiosからJSSネイティブ実装(Node.js内蔵ロジックベース)に切り替えたい場合は、以下の変更を加えてください。

server/server.jsでは、以下のことを行ってください。
- Axiosインポート文を削除してください:
  
  import axios from 'axios';
- 以下の輸出明細をご覧ください:
  
  export const setUpDefaultAgents = (httpAgent, httpsAgent) => { ... };
- その文の中の以下の文を削除してください:
  
  axios.defaults.httpAgent = httpAgent; axios.defaults.httpsAgent = httpsAgent;
src/dataFetcher.jsでは、以下のことを行ってください。
- Axiosインポートステートメントを見つけてください。
- その文を削除し、次の文に置き換えてください。
  
  import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-vue';
- dataFetcher機能を見つけてください。
- その関数を削除し、次のものに置き換えてください:
  
  export async function dataFetcher(url, data) { const fetcher = new NativeDataFetcher({ credentials: 'include' }); const response = await fetcher.fetch(url, { method: data ? 'POST' : 'GET', headers: { 'Content-Type': 'application/json', }, body: data ? JSON.stringify(data) : undefined, }); return response.data; }
package.jsonでは、以下のことを行ってください。
1. 以下の依存関係を削除してください:
  
  "axios": "^1.2.3",
2. 変更を適用npm install。

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

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

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

既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.4に更新してください。
以下のコマンドで依存関係をインストールします:

npm install

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