syncfusion-javascript-spreadsheet-editor

Syncfusion JavaScript Spreadsheet Editor

概要

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

主な機能

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

クイックスタートの例

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

ユーザー： "データを使ってスプレッドシートを作成し、セルのスタイルを適用する"

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

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

ユーザー： "スプレッドシートを作成し、最初に Excel ファイルを読み込む"

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

はじめに — 最小限の JavaScript（ES6）コード

プレーンなウェブプロジェクト向けの最小限の JavaScript（ES6）セットアップ：

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

const spreadsheet = new Spreadsheet({
  sheets: [{ rows: [{ cells: [{ value: 'Hello, Spreadsheet!' }] }] }],
  created: () => {
    // All post-initialization code goes here
  }
});
spreadsheet.appendTo('#spreadsheet');

プレースホルダー：

• #spreadsheet — コンポーネントを描画する HTML 要素の ID
• sheets — データを含むシートオブジェクトの配列

---

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

トリガーキーワード： "javascript 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-javascript-spreadsheet-editor/output/app.ts にコードを保存します
   • オプション 3： チャットウィンドウにコードを直接共有します

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

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

6. ユーザーが提供モードを選択し、オプション 1 のパス検証が完了した後にのみ、references/*.md の API とコードスニペットを使用し、ユーザーのプロジェクトに合わせて具体的なプレースホルダーを置き換えながら、TypeScript コードの生成に進みます。

7. 実装のスコープは created イベントハンドラー内に限定します — ユーザーが別のイベントハンドラー（例：beforeSave、cellSave など）を明示的に指定しない限り、すべてのコード実装を Spreadsheet の created イベント内に配置します。

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

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

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

• 「JavaScript アプリケーションを作成して Spreadsheet を表示して」
• 「Spreadsheet を使った TypeScript アプリを作成して」
• 「Webpack／TypeScript アプリを作成して Spreadsheet を追加して」

ユーザーが Spreadsheet コントロールの作成、追加、表示、設定のみを依頼した場合は、新しい JavaScript／TypeScript アプリケーションをスキャフォールディングしないでください。既存プロジェクト向けの Spreadsheet コントロール／コード生成として扱います。 11. 既存の JavaScript／TypeScript プロジェクト向けのコードを生成する場合は、references/getting-started.md に基づく、必要なパッケージおよび CSS のセットアップ方法を含めます。 12. コードを提示した後、完全な TypeScript スニペットと簡潔な統合手順を提示します。

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

コードリファレンス

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

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

ファイル	トピック
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	リアルタイムの共同編集、共有ブックの同期、プレゼンスインジケーター

コード生成の主なルール（TypeScript 優先）

1. TypeScript 優先のスニペット — すべての例とスニペットは TypeScript で記述し、現在の @syncfusion/ej2-spreadsheet npm パッケージでコンパイルできる必要があります。

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

3. イベントのデフォルトのスコープ — ユーザーが別のイベント（例：beforeSave、cellSave など）での実装を明示的に要求しない限り、すべての実装は Spreadsheet の created イベントハンドラー内に配置する必要があります。これにより、Spreadsheet コンポーネントが完全に初期化された後に、すべての操作が実行されます。

4. 参照ファイルの要件 — 各参照ファイルには、以下を含める必要があります。

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

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

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

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

8. 最初に参照ファイルを読む — 機能のリクエストがあった場合、コードを生成する前に、必ず関連する references/*.md ファイルを読んでください。

9. 参照ファイルに厳密に基づいて作成する — 参照ファイルに記載された API、メソッド、プロパティ、イベント、スニペットのみに基づいて TypeScript コードを作成してください。参照ファイルに明示されていない API、メソッド、プロパティ、イベントを作り上げたり、推測したり、提案したりしてはいけません。

ルール

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