[jp-sync] Sync JP docs: remove HammerModule references, add Angular 22 migration section (#373)

github-actions[bot] · Copilot · TomoyaWashio · web-flow · commit 4bb5b17c239f · 2026-06-29T11:26:53.000+03:00
* jp-sync: remove HammerModule references, add Angular 22 migration section Sync Japanese docs with EN changes from PR #359 (fix(ng22): removing mentions of hammermodule). - calendar: update DocsAside prose, remove HammerModule from imports - carousel: remove HammerModule DocsAside block and imports - date-picker: update DocsAside prose, remove HammerModule from imports - date-range-picker: update prose, remove HammerModule from imports - general/update-guide: add '21.1.x から 22.0.x' migration section; fix '8.x.x から 9.0.x' paragraph (remove dead link, merge sentences) - grid: remove HammerModule DocsAside block - hierarchical-grid: remove HammerModule DocsAside block - list: remove HammerModule DocsAside block and imports - month-picker: update DocsAside prose, remove HammerModule from imports - navdrawer: update DocsAside prose, remove HammerModule from imports - paginator: remove HammerModule from imports - slider: remove HammerModule DocsAside block, imports, and standalone app.config.ts code block - stepper: remove HammerModule from imports - time-picker: update DocsAside prose, remove HammerModule from imports - treegrid/tree-grid: remove HammerModule DocsAside block Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix(docs): improve JP documentation * Revert "fix(docs): improve JP documentation" This reverts commit bc82597. * Update HammerModule usage instructions in update guide * Fix wording for IgxTimePicker dependency note --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: TomoyaWashio <148823993+TomoyaWashio@users.noreply.github.com>
diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx
@@ -40,20 +40,19 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 次に、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
 <DocsAside type="info" title="情報">
-<ApiLink type="Calendar" label="**IgxCalendarComponent**" /> はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。
+<ApiLink type="Calendar" label="**IgxCalendarComponent**" /> は [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) に依存関係があり、AppModule に追加する必要があります。
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
+    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
     ...
 })
 export class AppModule {}
@@ -64,7 +63,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
 // import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -74,8 +72,8 @@ import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
     template: '<igx-calendar></igx-calendar>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */
+    imports: [BrowserAnimationsModule, IGX_CALENDAR_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxCalendarComponent] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx
@@ -41,20 +41,15 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 
 次に、**app.module.ts** ファイルに `IgxCarouselModule` をインポートします。
 
-<DocsAside type="info" title="情報">
-このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。
-</DocsAside>
-
 ```typescript
 // app.module.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IgxCarouselModule } from 'igniteui-angular/carousel';
 // import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., HammerModule, IgxCarouselModule],
+    imports: [..., IgxCarouselModule],
     ...
 })
 export class AppModule {}
@@ -65,7 +60,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
 // import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -82,8 +76,8 @@ import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
-    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
+    imports: [IGX_CAROUSEL_DIRECTIVES]
+    /* or imports: [IgxCarouselComponent, IgxSlideComponent] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx
@@ -38,18 +38,17 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 次に、**app.module.ts** ファイルに `IgxDatePickerModule` をインポートします。
 
 <DocsAside type="info" title="情報">
-ピッカーが <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> を使用し、タッチ操作のために **BrowserAnimationsModule** と **HammerModule** (**オプション**) に依存関係があり、これらもモジュールに追加する必要があります。
+ピッカーが <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> を使用し、**BrowserAnimationsModule** に依存関係があり、モジュールに追加する必要があります。
 </DocsAside>
 
 ```typescript
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerModule } from 'igniteui-angular/date-picker';
 // import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule],
+    imports: [..., IgxDatePickerModule, BrowserAnimationsModule],
     ...
 })
 export class AppModule {}
@@ -60,7 +59,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
 // import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -74,8 +72,8 @@ import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
+    imports: [BrowserAnimationsModule, IGX_DATE_PICKER_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxDatePickerComponent, IgxLabelDirective] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/date-range-picker.mdx b/docs/angular/src/content/jp/components/date-range-picker.mdx
@@ -34,20 +34,19 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 
 次に、**app.module.ts** ファイルに `IgxDateRangePickerModule` をインポートします。
 
-<ApiLink type="DateRangePicker" /> は <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> を使用しますが、タッチ操作のために **BrowserAnimationsModule** と**オプション**の **HammerModule** に依存関係があり、これらも `AppModule` に追加する必要があります。
+<ApiLink type="DateRangePicker" /> は <ApiLink type="Calendar" label="**IgxCalendarComponent**" /> を使用しますが、**BrowserAnimationsModule** に依存関係があり、`AppModule` に追加する必要があります。
 
 ```typescript
 // app.module.ts
 
 import { IgxDateRangePickerModule } from 'igniteui-angular/date-range-picker';
 // import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     ...
-    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule, HammerModule],
+    imports: [..., IgxDateRangePickerModule, BrowserAnimationsModule],
     ...
 })
 export class AppModule {}
@@ -58,7 +57,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-range-picker';
 // import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@@ -68,8 +66,8 @@ import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-range-pi
     template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */
+    imports: [BrowserAnimationsModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
+    /* or imports: [BrowserAnimationsModule, IgxDateRangePickerComponent] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx
@@ -62,6 +62,24 @@ ng update @angular/cli
 
 例: 6.2.4 から 7.1.0 にアップデートする場合、[6.x .. から] セクションから始めて変更を適用していきます。
 
+## 21.1.x から 22.0.x の場合
+
+Angular はタッチ ジェスチャー用の `HammerModule` の提供を終了しました。Ignite UI for Angular コンポーネントでタッチ操作（パン、スワイプ、タップ）を引き続き使用するには、`angular.json` の `scripts` 配列で HammerJS をグローバル スクリプトとして読み込みます。
+
+```json
+"architect": {
+  "build": {
+    "options": {
+      "scripts": [
+        "node_modules/hammerjs/hammer.min.js"
+      ]
+    }
+  }
+}
+```
+
+グローバルに読み込まれると、Ignite UI for Angular は `window.Hammer` を自動検出してタッチ ジェスチャーの処理に使用します。追加のインポートやモジュール登録は不要です。
+
 ## 21.0.x から 21.1.x の場合
 
 バージョン 21.1.0 では、Sass テーマ フレームワークの廃止予定の `css-vars` ミックスインの代わりに使用できる新しい `tokens` ミックスインが付属しています。表面的には外観的な変更ですが、新しい `tokens` ミックスインは、すべての Ignite UI フレームワークで機能する汎用的なグローバル コンポーネント テーマ トークンを生成します。`css-vars` ミックスインは現在廃止されており、将来のバージョンで削除される予定です。そのため、できるだけ早く新しい `tokens` ミックスインに切り替えることをお勧めします。
@@ -1426,8 +1444,7 @@ The `ng update` process will update all enumeration names, like `AvatarType`, `T
 
 ## 8.x.x から 9.0.x の場合
 
-Angular 9 の重大な変更により、Hammer プロバイダー は暗黙的に追加されていません。
-[詳細は](https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 )を参照してください。このため、以下のコンポネントの**タッチ**操作が正しく動作するには、アプリケーションのルート モジュールに `HammerModule` をインポートする必要があります。
+Angular 9 の重大な変更により、Hammer プロバイダーは暗黙的に追加されなくなりました。このため、以下のコンポーネントの**タッチ**操作を正しく動作させには、アプリケーションのルート モジュールに `HammerModule` をインポートする必要があります。
 
 - igxGrid
 - igxHierarchicalGrid
diff --git a/docs/angular/src/content/jp/components/grid/grid.mdx b/docs/angular/src/content/jp/components/grid/grid.mdx
@@ -67,10 +67,6 @@ Boston Marathon 2021 – この Angular グリッドの例では、ユーザー
 
 ## Ignite UI for Angular Data Grid を使用した作業の開始
 
-<DocsAside type="info" title="情報">
-このコンポーネントは、**オプションで** [HammerModule](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。
-</DocsAside>
-
 Ignite UI for Angular Data Grid コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
 
 ```cmd
diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
@@ -31,10 +31,6 @@ Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの
 このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
-<DocsAside type="info" title="情報">
-このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が想定通りに動作するために、アプリケーションのルート モジュールにインポートできます。
-</DocsAside>
-
 Ignite UI for Angular Hierarchical Data Grid コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
 
 ```cmd
diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx
@@ -34,20 +34,15 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 
 次に、**app.module.ts** ファイルに `IgxListModule` をインポートします。
 
-<DocsAside type="info" title="情報">
-このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。
-</DocsAside>
-
 ```typescript
 // app.module.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IgxListModule } from 'igniteui-angular/list';
 // import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., IgxListModule, HammerModule],
+    imports: [..., IgxListModule],
     ...
 })
 export class AppModule {}
@@ -58,7 +53,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
 // import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -74,8 +68,8 @@ import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
     `,
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [IGX_LIST_DIRECTIVES, HammerModule]
-    /* or imports: [IgxListComponent, IgxListItemComponent, HammerModule] */
+    imports: [IGX_LIST_DIRECTIVES]
+    /* or imports: [IgxListComponent, IgxListItemComponent] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/month-picker.mdx b/docs/angular/src/content/jp/components/month-picker.mdx
@@ -35,20 +35,19 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
 <DocsAside type="info" title="情報">
-<ApiLink type="MonthPicker" label="**IgxMonthPickerComponent**" /> はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。
+<ApiLink type="MonthPicker" label="**IgxMonthPickerComponent**" /> は [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) に依存関係があり、AppModule に追加する必要があります。
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
+    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
     ...
 })
 export class AppModule {}
@@ -59,7 +58,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
 // import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
@@ -69,8 +67,8 @@ import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
     template: '<igx-month-picker></igx-month-picker>',
     styleUrls: ['home.component.scss'],
     standalone: true,
-    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
-    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
+    imports: [BrowserAnimationsModule, IgxMonthPickerComponent]
+    /* or imports: [BrowserAnimationsModule, IGX_CALENDAR_DIRECTIVES] */
 })
 export class HomeComponent {}
 ```
diff --git a/docs/angular/src/content/jp/components/navdrawer.mdx b/docs/angular/src/content/jp/components/navdrawer.mdx
@@ -37,20 +37,19 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
 はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。
 
 <DocsAside type="info" title="情報">
-<ApiLink type="NavigationDrawer" /> はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。
+<ApiLink type="NavigationDrawer" /> は [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) に依存関係があり、AppModule に追加する必要があります。
 </DocsAside>
 
 ```typescript
 // app.module.ts
 ...
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
 // import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
     ...
-    imports: [..., BrowserAnimationsModule, HammerModule, IgxNavigationDrawerModule],
+    imports: [..., BrowserAnimationsModule, IgxNavigationDrawerModule],
     ...
 })
 export class AppModule {}
@@ -61,7 +60,6 @@ export class AppModule {}
 ```typescript
 // home.component.ts
 
-import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgFor } from '@angular/common';
 import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
@@ -95,8 +93,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
   `,
   styleUrls: ['home.component.scss'],
   standalone: true,
-  imports: [BrowserAnimationsModule, HammerModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
-  /* or imports: [BrowserAnimationsModule, HammerModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
+  imports: [BrowserAnimationsModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
+  /* or imports: [BrowserAnimationsModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
 })
 export class HomeComponent {
   public navItems: Product[];
diff --git a/docs/angular/src/content/jp/components/paginator.mdx b/docs/angular/src/content/jp/components/paginator.mdx
diff --git a/docs/angular/src/content/jp/components/slider/slider.mdx b/docs/angular/src/content/jp/components/slider/slider.mdx
diff --git a/docs/angular/src/content/jp/components/stepper.mdx b/docs/angular/src/content/jp/components/stepper.mdx
diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx
diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
