syncfusion-react-spreadsheet-editor

Syncfusion React Spreadsheet Editor

概要

このスキルは、アプリケーションに Syncfusion Spreadsheet Editor を統合するための React（JSX/TSX）コードの生成を支援します。React プロジェクトで Excel のような機能を構築するために、そのまま使えるコードスニペット、API のガイダンス、ベストプラクティスを提供します。

主な機能

• ファイル操作： Excel ファイル（xlsx、xls、xlsb）および CSV ファイルのインポート／エクスポート、PDF へのエクスポート
• データ管理： データバインディング、編集、並べ替え、フィルタリング、検証
• セル操作： 書式設定（フォント、色、罫線、配置）、セルの結合、テキストの折り返し
• 数式と計算： Excel の組み込み数式、カスタム関数、名前付き範囲
• コラボレーション： メモ、コメント、スレッド形式のディスカッション
• 高度な機能： グラフ、画像、ハイパーリンク、条件付き書式、ウィンドウ枠の固定、シート保護、大規模なデータセット向けの仮想化

クイックスタートの例

例 1：書式を設定したスプレッドシートを生成する

ユーザー：「データを含むスプレッドシートを作成し、セルのスタイルを適用してください」

結果： 提供されたデータをスプレッドシートに読み込み、基本的なセル書式を適用する React（JSX）コードスニペットが生成されます。

例 2：ファイルを読み込むコードを生成する

ユーザー：「スプレッドシートを作成し、最初に Excel ファイルを読み込んでください」

結果： スプレッドシートを初期化し、起動時に Excel ファイルをプログラムで開く React（JSX）コードスニペットが生成されます。

はじめに — 最小限の React コード

通常の Web プロジェクト向けの最小限の React Spreadsheet セットアップ：

import * as React from 'react';
import { SheetsDirective, SheetDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function Default() {
    const spreadsheetRef = React.useRef(null);
    return (<div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <SpreadsheetComponent ref={spreadsheetRef}>
                    <SheetsDirective>
                        <SheetDirective>
                          <RowsDirective>
                                  <RowDirective>
                                      <CellsDirective>
                                          <CellDirective value="Hello, Spreadsheet!" ></CellDirective>
                                      </CellsDirective>
                                  </RowDirective>
                              </RowsDirective>
                            </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>);
}
export default Default;

---

ユーザーのプロジェクト向けに React（JSX）コードを生成する

トリガーキーワード： "react spreadsheet", "spreadsheet editor", "syncfusion spreadsheet", "excel component", "load excel file", "open excel file", "import excel", "export excel file", "save excel", "export to pdf", "export to csv", "view excel", "configure spreadsheet", "create spreadsheet", "add spreadsheet", "spreadsheet data", "cell formatting", "apply formulas", "insert chart", "data binding", "spreadsheet validation", "freeze panes", "protect sheet"

ワークフロー：

1. 要求された Spreadsheet 機能（データバインディング、数式、グラフ、エクスポートなど）を特定します。

2. 要求された機能に対応する API とコードパターンを把握するため、関連する references/*.md ファイルを読みます。

   • 作成、初期化、レンダリング、パッケージ設定、CSS 設定、または基本的な Spreadsheet に関する要求の場合は、まず references/getting-started.md を読みます。

3. コードの生成、パッケージのインストール、ファイルの作成、プロジェクトファイルの変更を行う前に必ず停止します。ユーザーがすでに受け取り方法を選択しているか確認してください。

4. 受け取り方法がまだ選択されていない場合は、必ず最初に次の簡潔な選択式の質問をします。

   「生成した Spreadsheet コードをどのように受け取りますか？」

   • オプション 1： 特定のプロジェクトファイル内のコードを置き換える（ファイルパスの提示と確認が必要です）
   • オプション 2： このスキルの出力フォルダー {skill-root}/syncfusion-react-spreadsheet-editor/output/app.jsx（または .tsx）にコードを保存する
   • オプション 3： コードをチャット画面に直接表示する

5. ユーザーがオプション 1を選択した場合は、コードを生成または置き換える前に、提示されたプロジェクトファイル／フォルダーのパスを検証します。

   • 提示されたパスが既存の React プロジェクトで、package.json が含まれている場合は、従来どおり続行します。
   • 提示されたパスが空のフォルダーであるか、React プロジェクトが含まれていない場合は、ファイルを編集せず、チャットも終了しません。
   • プロジェクトファイルを置き換えるには React プロジェクトが必要であることを説明します。
   • references/getting-started.md を使用して、まず React をセットアップ／インストールするかどうかを尋ねます。
   • ユーザーが明示的に確認しない限り、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行は行いません。

6. ユーザーが受け取り方法を選択し、オプション 1 の場合はパスの検証が完了した後に限り、references/*.md の API とスニペットを使用して React（JSX／TSX）コードを生成し、ユーザーのプロジェクトに合わせて具体的なプレースホルダーに置き換えます。

7. ユーザーがオプション 1 を明示的に選択し、有効な React プロジェクトのファイル／フォルダーのパスを提示して許可した場合を除き、ワークスペースのプロジェクトファイルは変更しないでください。

8. React プロジェクトまたは package.json が見つからない場合は、まず React プロジェクトが必要であることを説明し、references/getting-started.md に基づいたセットアップ方法を案内します。ユーザーが React アプリの作成を明示的に依頼し、許可した場合を除き、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行は行いません。

9. 新しい React アプリケーション／プロジェクトを作成できるのは、ユーザーが次のように明示的に依頼した場合に限ります。

   • "create a React application and render Spreadsheet"
   • "create a new React app with Spreadsheet"
   • "create Vite/Next.js app and add Spreadsheet"

   ユーザーが Spreadsheet コンポーネントの作成、追加、レンダリング、または設定のみを依頼した場合は、新しい React アプリケーションをスキャフォールドしないでください。既存の React プロジェクト向けの Spreadsheet コンポーネント／コード生成として扱います。

10. 既存の React プロジェクト向けにコードを生成する場合は、references/getting-started.md に基づいて、必要なパッケージと CSS のセットアップ方法も案内します。

11. コードを提示した後に、完全な React スニペットと簡潔な統合手順を提供します。

運用上の制約（出力ディレクトリ、一時ファイル、使用可能なライブラリなど）については、## Rules セクションを参照してください。

コードリファレンス

すべてのコードスニペットとサンプルは references/ フォルダーにあります。各ファイルには以下が含まれています。

• 最小限の React(JSX) コード — 動作する、そのまま使えるスニペット
• プレースホルダー — ユーザーがカスタマイズする必要がある値
• 注意事項 — React のベストプラクティスと制約

ファイル	トピック
getting-started.md	プロジェクトのセットアップ、パッケージのインストール、CSS の参照、基本的なレンダリング、初期データのバインド
data-binding.md	ローカル配列、JSON、リモート（DataManager）
formulas.md	数式、集計、名前付き範囲
formatting.md	セルの書式設定、罫線、テキストの折り返し
rich-text-formatting.md	セル内のリッチテキスト書式設定、フォントスタイル、色、上付き／下付き文字
number-formatting.md	数値の書式設定、小数、通貨、日付
conditional-formatting.md	ルール、条件に基づく強調表示、数式ベースのルール
data-validation.md	入力規則、無効な値の強調表示
sorting-filtering.md	並べ替え、フィルター
find-replace.md	検索、置換
import-export.md	保存（XLSX/CSV/PDF）、開く、openFromJson
charts.md	グラフの挿入、編集、削除
images.md	画像の挿入、変更
hyperlink.md	ハイパーリンクの追加、削除
comments.md	スレッド形式のコメント、返信、スレッドの解決
notes.md	シンプルなセルのメモ、表示の固定、追加／編集／削除
protection.md	シートの保護、セルのロック、権限
edit-cell.md	startEdit、endEdit、updateCell、編集モード
freeze-panes.md	行／列の固定、ウィンドウ枠の分割
row-column.md	行／列の挿入、削除、サイズ変更、非表示
merge-cells.md	セルの結合、結合解除、複数セルにまたがる表示
print.md	ページ設定、ヘッダー／フッター、拡大縮小、余白
misc-operations.md	オートフィル、クリア、シート管理、goTo
clipboard.md	コピー、切り取り、貼り付け（貼り付け形式の指定）
selection.md	セル／範囲の選択、複数選択、getSelectedRange
scrolling-virtualization.md	仮想スクロール、大規模データセット、パフォーマンス
wrap.md	テキストの折り返し、複数行表示、行の高さ
defined-names.md	名前付き範囲、名前の定義、refersTo の形式
custom-functions.md	カスタム計算関数、addCustomFunction
ribbon-customization.md	リボンタブ、ツールバー項目、ファイルメニューのカスタマイズ
context-menu.md	右クリックのコンテキストメニュー、contextMenuBeforeOpen
localization.md	多言語対応、ロケール、RTL、数値／日付形式
events.md	イベント処理、イベントプロパティ、イベントパターン
autofill.md	オートフィルのパターン、フィルの種類、連続データ
collaborative-editing.md	リアルタイムの共同編集、共有ワークブックの同期、プレゼンスインジケーター

コード生成の主要ルール（React（JSX）優先）

1. React（JSX）優先のスニペット — すべての例とスニペットは React JSX で記述し、現在の @syncfusion/ej2-react-spreadsheet npm パッケージでコンパイルできる必要があります。ユーザーが React TSX を求めた場合は、React TSX のコードを提供してください。

2. このマニフェストにインラインコードを記載しない — 実行可能なスニペットは references/*.md を参照してください。このファイルは簡潔なポリシーとインデックスとして維持します。

3. リファレンスファイルの要件 — 各リファレンスには以下を含める必要があります。

   • 最小限の React（JSX）コード（完全で実行可能）
   • プレースホルダー（置き換える値を明確に表示）
   • 注意事項（React との統合手順とベストプラクティス）

4. ライセンスの取り扱い — ライセンスキーをハードコードしないでください。環境変数またはプロジェクト設定を参照するようユーザーに案内してください。

5. データの整合性を維持する — シートの生成または編集時には、既存の数式、参照、書式を保持してください。

6. 存在しない API を作り出さない — 検証済みの Syncfusion Spreadsheet Editor Component のメソッド名のみを使用してください。

7. まずリファレンスを読む — 要求された機能についてコードを生成する前に、必ず関連する references/*.md ファイルを読んでください。

8. リファレンスに厳密に基づいて作成する — React コードは、リファレンスファイルに記載された API、メソッド、プロパティ、イベント、スニペットのみに厳密に基づいて作成してください。リファレンスファイルに明記されていない API、メソッド、プロパティ、イベントを作り出したり、推測したり、提案したりしないでください。

ルール

• ユーザーがオプション 2 を選択した場合、出力ファイルは {skill-root}/syncfusion-react-spreadsheet-editor/output/ ディレクトリに配置する必要があります。
• Syncfusion Spreadsheet API のみを使用する — 代替のスプレッドシートライブラリ（例：react-spreadsheet、handsontable、ag-grid）を推奨または使用しないでください。
• 一時ファイルを作成しない — 出力ディレクトリ外に一時スクリプト、中間ファイル、またはひな形を作成しないでください。
• React 専用コード — 生成するコードはすべて有効な React（JSX/TSX）でなければなりません。バニラ JavaScript、jQuery、または React 以外のパターンを生成しないでください。
• オプション 1 のパス検証： ユーザーがオプション 1 を選択した場合、ファイルの編集または置き換えを行う前に、指定されたプロジェクトのファイル／フォルダのパスを必ず検証してください。
  • パスに package.json を含む既存の React プロジェクトがある場合は、通常のコード置き換えフローを続行してください。
  • パスが空、または React プロジェクトが含まれていない場合は、ファイルを編集せず、チャットを終了しないでください。
  • 終了する代わりに、必ず追加の質問をしてください。
  • プロジェクトファイルを置き換えるには React プロジェクトが必要であることを説明してください。
  • references/getting-started.md を使ったセットアップの案内を希望するか、先に React をセットアップ／インストールするかを尋ねてください。
  • ユーザーが明示的に確認しない限り、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行を自動で行わないでください。
• React アプリ作成の制約： 新しい React アプリケーションの作成またはひな形の作成は、「React アプリケーションを作成して Spreadsheet を表示する」や「Vite/Next.js アプリを作成して Spreadsheet を追加する」など、ユーザーが React アプリ／プロジェクトの作成を明示的に求めた場合に限ります。「データを含むスプレッドシートを作成する」や「Spreadsheet を追加する」などの通常のプロンプトは、既存の React プロジェクト向けのコンポーネントコード生成として扱ってください。

セキュリティ

• ドキュメントのみ： このスキルに含まれるのはドキュメントとリファレンススニペットのみであり、同梱された実行可能なランタイムコードはありません。ランタイムファイルが明示的に追加されていない限り、このリポジトリはドキュメントとして扱ってください。
• 外部からのダウンロード： 例では、デモ用に Syncfusion のドメインまたは CDN を参照する場合があります。固定バージョンのパッケージ（NuGet/npm）を優先し、署名を検証してください。本番環境では、整合性を確認せずに CDN の使用例をコピーしないでください。
• データの外部流出： リモートエンドポイントを呼び出す例では、プレースホルダー（example.com に統一）を使用します。信頼できないホストに機密データを送信しないでください。サンプルにはモックまたはローカルのエンドポイントを使用してください。
• プロンプトインジェクション／信頼できない入力： コード例には、ユーザーが指定した URL の検証と許可リスト化、アップロードのサニタイズ、レンダリング前の出力の HTML エンコードに関する指針が含まれています。