Merge pull request #1890 from IgniteUI/localization-2026-02-09

[JA] Update topics with the latest Grid Lite breaking changes

Author: ChronosSF

doc/jp/components/grid-lite/binding.md

@@ -24,69 +24,75 @@ _language: ja
 
 コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。
 
+<!-- WebComponents -->
 ```typescript
 grid.data = [...{
-  /** レコードが続きます */
+  /** レコードが続きます*/
 }];
+```
 
-// 新しいデータを反映するように列の構成を更新します。
-grid.columns = [...];
+```html
+<igc-grid-lite>
+    <!-- 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 -->
+    <igc-grid-lite-column field="id"></igc-grid-lite-column>
+</igc-grid-lite>
 ```
+<!-- end: WebComponents -->
 
-```typescript
-grid.data = [...{
-  /** レコードが続きます */
+```tsx
+this.gridRef.current.data = [...{
+  /** レコードが続きます*/
 }];
 
-// 新しいデータを反映するように列の構成を更新します。
-grid.columns = [...];
+return (
+    <igc-grid-lite data={data}>
+        {/* 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 */}
+        <igc-grid-lite-column field="id"></igc-grid-lite-column>
+    </igc-grid-lite>
+);
 ```
 
 ```razor
-<IgbGridLite Data="data" Columns="columns" />
+<IgbGridLite Data="data">
+    <!-- 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 -->
+    <IgbGridLiteColumn Field="Id" />
+</IgbGridLite>
+
 @code {
     this.data = new List<T>
     {
         // レコードが続きます
     };
-
-    // 新しいデータを反映するように列の構成を更新します。
-    this.columns = new List<IgbColumnConfiguration>
-    {
-        // 列定義
-    };
 }
 ```
+
 <!-- React, WebComponents -->
-グリッドで `autoGenerate` が有効になっている場合、古い列設定をリセットした場合にのみ、新しい列設定を「推測します」。
+グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
 <!-- end: React, WebComponents -->
 
 <!-- Blazor -->
-グリッドで `AutoGenerate` が有効になっている場合、古い列設定をリセットした場合にのみ、新しい列設定を「推測します」。
+グリッドで `AutoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
 <!-- end: Blazor -->
 
+<!-- React, WebComponents -->
 ```typescript
 grid.autoGenerate = true;
 
-/** 列定義 */
-grid.columns = [];
-
 /** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */
 grid.data = [];
 ```
+<!-- end: React, WebComponents -->
 
+<!-- Blazor -->
 ```razor
-<IgbGridLite Data="data" AutoGenerate="true" Columns="columns" />
+<IgbGridLite Data="data" AutoGenerate="true" />
 
 @code {
-
-    // 列定義
-    this.columns = new List<IgbColumnConfiguration>();
-
     // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
     this.data = new List<T>();
 }
 ```
+<!-- end: Blazor -->
 <!-- React, WebComponents -->
 >[!NOTE]
 >{GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。
@@ -106,8 +112,8 @@ grid.data = [];
 
 <!-- TODO ## API References
 
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
 
 -->
 

doc/jp/components/grid-lite/cell-template.md

@@ -10,57 +10,83 @@ _language: ja
 
 # 列セル テンプレート
 
-デフォルトでは、グリッドは列のキーを使用してセル内の値を文字列としてレンダリングします。基本的なシナリオではこれで問題ありませんが、レンダリング結果をカスタマイズしたい場合や、最終出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレート レンダラーを使用します。
+デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。これは基本的なシナリオでは問題ありませんが、レンダリングされる出力をカスタマイズしたい場合や、最終的な出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレートをカスタマイズできます。
 
 列の `cellTemplate` プロパティを設定することで、これを実現できます。
 
 <!-- React, WebComponents -->
 
 ```typescript
-{
-  cellTemplate?: (params: GridLiteCellContext<T, K>) => TemplateResult;
-}
+// 列要素への参照を取得します
+const column = document.querySelector('igc-grid-lite-column[field="price"]');
+
+// cellTemplate プロパティを設定します
+column.cellTemplate = (params: IgcCellContext<T, K>) => { return html`<!-- template content -->`};
 ```
 
 <!-- End: React, WebComponents -->
 
+<!-- Blazor -->
+
+```razor
+<!-- Templates TBD in Blazor -->
+<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
+```
+
+<!-- End: Blazor -->
+
 ## フォーマッタ関数として使用する
 
 簡単なシナリオでは、必要に応じてフォーマット済みの値を返すだけで済みます。以下は数値をロケール通貨形式で表示する例です。
 
 <!-- React, WebComponents -->
 
 ```typescript
-const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' });
+const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
 
-{
-  ...
-  /** 値 `value = 123456.789` に対してカスタム通貨形式を返します。 */
-  cellTemplate: (params) => asCurrency(params.value) // => "€123,456.79"
-  ...
-}
+// 列要素への参照を取得します
+const column = document.querySelector('igc-grid-lite-column');
+
+// 値 `value = 123456.789` に対してカスタム通貨形式を返します。
+column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79"
 ```
 
 <!-- End: React, WebComponents -->
 
+<!-- Blazor -->
+
+```razor
+<!-- Templates TBD in Blazor -->
+<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
+```
+
+<!-- End: Blazor -->
+
 データ ソース内の異なるフィールドの値を組み合わせることも可能です。
-<!-- TODO: 
-Refer to the API documentation for `GridLiteCellContext` for more information. -->
+<!-- TODO:
+詳細については、`GridLiteCellContext` の API ドキュメントを参照してください。 -->
 
 <!-- React, WebComponents -->
 
 ```typescript
-const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' });
+const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
 
-{
-  ...
-  /** 価格が 99.99 の品目 10 個の注文に対してカスタム通貨形式を返します。 */
-  cellTemplate: ({value, row}) => asCurrency(value * row.data.count) // => "€999.90"
-  ...
-}
+// 列要素への参照を取得します
+const column = document.querySelector('igc-grid-lite-column');
+
+// 価格が 99.99 の品目 10 個の注文に対してカスタム通貨形式を返します
+column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // => "€999.90"
 ```
 <!-- End: React, WebComponents -->
 
+<!-- Blazor -->
+
+```razor
+<!-- Templates TBD in Blazor -->
+<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
+```
+<!-- End: Blazor -->
+
 ## カスタム DOM テンプレート
 
 `cellTemplate` プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセルコンテナー内にレンダリングされます。
@@ -75,16 +101,24 @@ const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency
 // Lit パッケージから `html` タグ関数をインポートします。
 import { html } from "lit";
 
-{
-  key: 'rating',
-  // グリッド内の `rating` 値を表すために別の Web コンポーネントを使用します。
-  cellTemplate: ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`
-  ...
-}
+// 列要素への参照を取得します
+const column = document.querySelector('igc-grid-lite-column[field="rating"]');
+
+// グリッド内の `rating` 値を表すために別の Web コンポーネントを使用します
+column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`;
 ```
 
 <!-- End: React, WebComponents -->
 
+<!-- Blazor -->
+
+```razor
+<!-- Templates TBD in Blazor -->
+<IgbGridLiteColumn Field="Rating"></IgbGridLiteColumn>
+```
+
+<!-- End: Blazor -->
+
 >[!NOTE]
 >テンプレートが複雑であればあるほど、パフォーマンス コストが増加します。パフォーマンスが重要な場合は複雑な DOM 構造を避けてください。