RevoGrid DataGrid MCP

StencilJS で構築された高性能なデータグリッドコンポーネント。

グリッド内の行数にハードリミットはなく、100 万行以上、数百万のセル、数千列を効率的にレンダリングできます。

ヨーロッパや米国の大手企業の一部で使用されています。

デモと API • 主な機能 • Pro 機能 • 使い方 • インストール • ドキュメント • ライセンス

RevoGrid の Material テーマ。

主な機能

• 高パフォーマンス：グリッド内の行数にハードリミットはなく、100 万行以上、数百万のセルをレンダリングできます。仮想化により、DOM は表示中のビューポートに集中します。

• アクセシビリティ：WAI-ARIA のベストプラクティスに準拠しています。

• RTL サポート：アラビア語、ヘブライ語、ペルシア語など、RTL 言語を包括的にサポートします。列の自動並べ替え、適切なテキスト配置、RTL インターフェース向けのレイアウト調整に対応しています。

• キーボードサポート：

  • Excel のようなフォーカス操作により、効率的な移動と編集ができます。
  • Excel、Google Sheets、その他のシート形式とのコピー＆ペーストにシームレスに対応します。

• 軽量：初期バンドルサイズを最小限に抑えています。ポリフィルと一緒にインポートすることも、最新のブラウザー向けにモジュールとしてインポートすることもできます。

• インテリジェントな仮想 DOM：行をスマートに再構成し、再描画を最小限に抑えます。

• 仮想スクロール：すべての行や列を DOM にレンダリングせずに、大規模なデータセットを処理します。

• ドラッグ＆ドロップ：行と列をドラッグ＆ドロップで並べ替えられます。

• 並べ替え：複数のオプションがあり、列ごとにカスタマイズできるほか、高度なイベント処理にも対応しています。

• フィルタリング：

  • 定義済みのシステムフィルター。
  • 複数列のフィルター。
  • 条件付きフィルター。
  • 既存のコレクションを保持。
  • 選択。
  • スライダー。
  • ヘッダーのフィルタリング。
  • システムフィルターを拡張し、独自のフィルターセットを追加できるカスタムフィルター。 空白フィルターでは、ソース値の同一性と所有プロパティの有無が保持されます。デフォルトでは、 null、所有されている undefined、厳密に "" と一致する値、および所有プロパティがない場合は空白です。 空白文字のみの文字列、false、0、NaN、配列、オブジェクトは空白ではありません。この ポリシーはグリッドレベルで設定でき、列ごとに blankSemantics で上書きできます。 既存の保存済み empty および notEmpty 演算子 ID との互換性は維持され、 「空白である」および「空白ではない」と表示されます。

  const filter = {
    blankSemantics: {
      whitespaceOnlyString: true,
      emptyArray: true,
      isBlank(value, context, fallbackResult) {
        return value === 'N/A' || fallbackResult;
      },
    },
  };
  
  const columns = [{
    prop: 'tags',
    filter: 'array',
    // Partial column policy; other fields inherit the grid policy.
    blankSemantics: { emptyArray: false },
  }];
  

  継承されたプロパティは、プロパティがないものとして扱われます。cellParser は通常の比較に使う値を提供しますが、 空白チェックに使う生の値は置き換えません。コールバックには、ソース値、行モデル、 列、プロパティ、解析済みの値、所有プロパティかどうか、有効なポリシー、およびフォールバック結果が渡されます。 「空白ではない」は、解決された空白述語の厳密な逆です。型付き演算子は引き続き厳密に動作し、 空白設定によって false、0、配列が別のソース値に正規化されることはありません。

• エクスポート：

  • CSV：RevoGrid の主要なデータワークフロー向けの組み込みファイルエクスポートです。
  • PDF：軽量な @revolist/revogrid-pdf-export プラグインを使用した、ブラウザー側での PDF エクスポートです。
  • Excel（Pro）：RevoGrid Pro 向けの、レイアウト、スタイル、固定ペイン、結合セル、数式に対応したワークブックエクスポートです。

• カスタムサイズ：列と行にカスタムサイズを定義できます。コンテンツに基づく自動サイズ調整にも対応しています。

• 列のサイズ変更：列幅を調整します。

• 行のサイズ変更：行ヘッダーの端からサイズを変更するか、行の高さの上限を任意で設定して、行全体の端からサイズを変更できるようにします。

• 列の自動サイズ調整：コンテンツに合わせて列幅を自動調整し、最適な読みやすさと効率的なレイアウトを実現します。

• 固定／スティッキー／フリーズ要素：

  • 列（左側または右側に固定します）。
  • 行（上側または下側に固定します）。

• グループ化：

  • 列のグループ化（ネストされたヘッダー）。
  • 列グループのドリルダウン：列グループを折りたたんでグリッド表示をすっきりさせ、不要な列を非表示にしてデータを整理できます。作業スペースを整理された効率的な状態に保ちながら、重要な情報に集中するのに最適です。
  • 行のグループ化（ネストされた行）。

• 列の型：詳細はこちら

  • テキスト／文字列（デフォルト）。
  • 数値。
  • 選択／ドロップダウン。
  • 日付。
  • カスタム（任意のテンプレートを使って拡張スタイルを作成します）。

• 範囲操作：

  • 選択。
  • 編集。

• テーマパッケージ：

  • Excel 風（デフォルト）。
  • Material（コンパクト、ダーク、ライト）。

• 拡張性：拡張を容易にする、最新の VNode 機能と tsx のサポートです。

• トリミングされた行：必要に応じて行を非表示にします。

• プラグインシステム：カスタムプラグインを簡単に作成したり、既存のプラグインを拡張したりできます。

• カスタマイズ：

  • 列ヘッダーテンプレート。
  • 行ヘッダーテンプレート。
  • セルのプロパティ（レンダリングされるセルにカスタムプロパティを定義します）。
  • セルテンプレート（独自のセルビューを作成します）。
  • セルエディター（定義済みのエディターやセルタイプを使用するか、独自のカスタムエディターやセルタイプを適用します）。

• AI エージェントと MCP：Codex、Cursor、Claude Code、VS Code を、バージョンに対応した RevoGrid のドキュメント、サンプル、移行情報、機能の利用可否、型付き API コンテキストに接続します。

• 豊富な API とその他の改善点：RevoGrid では、ほかにも数百におよぶ細かなカスタマイズや改善点を確認できます。

RevoGrid Pro の機能

RevoGrid Pro は、データ入力、分析、レイアウト、検証、リモートデータのワークフロー、エンタープライズ向け計画のための高度なプラグインで、コアグリッドを拡張します。

• 高度なデータ構造：

  • 階層型データビュー：展開可能な行、ネストされた関係、並べ替え、フィルタリング、編集、ドラッグ＆ドロップに適した階層処理を備えたツリーデータを表示します。
  • 行の転置：ユーザーがエンティティを縦型フォームのようなグリッドで確認したい場合に、レコードを行方向のビューに切り替えます。

• ヘッダー、列、グリッド構造：

  • マルチレベルヘッダー／列グループ：関連する列を共通の親グループの下に配置できる、積み重ね型のネストされたヘッダーを構築します。
  • 複数行ヘッダー：高密度のテーブル、グループ化されたラベル、スプレッドシート風のヘッダーレイアウト向けに、複数のヘッダー行を表示します。
  • 列グループパネル：ユーザーが列をグループ化パネルにドラッグして、行グループをインタラクティブに作成できるようにします。
  • 列グループのレンダリング同期：列の移動、サイズ変更、仮想化の更新中も、グループ化されたヘッダーのレンダリングを同期させます。
  • グループ内での列移動：グループ化されたヘッダーの関係と有効なグループ境界を維持しながら、列を移動します。
  • 列の折りたたみと展開（ドリルダウン）：グループ化された列を折りたたんで概要に集中し、詳細が必要なときに展開します。
  • 列の非表示：基盤となるデータセットを変更せずに、列を非表示または再表示して、対象を絞ったビューを作成します。
  • 列追加ポップアップ：利用可能なフィールド定義から列を追加する UI フローを提供します。
  • 列の選択：一括操作、コピー、書式設定、分析のために、ヘッダーから列全体を選択します。
  • 列の伸縮：サイズ制約を守りながら列幅を配分し、利用可能なグリッド領域を埋めます。
  • 列の自動サイズ調整：内容を測定し、読みやすさを考慮して列幅を自動調整します。
  • セルの結合：グループラベル、レポート、スプレッドシート風のレイアウト向けに、行と列をまたいでセルを結合します。
  • 自動結合／同じ値の結合：値が一致する隣接セルを自動で結合し、視覚的な繰り返しを減らします。
  • 固定セルと行：スクロール中も、重要な行、セル、合計、ラベル、アクション領域を表示したままにします。
  • オーバーレイレイヤー：グリッド本体を置き換えることなく、より豊かなインタラクションのために一時的な UI レイヤーをグリッドの上に配置します。

• リモートデータと大規模データセットのワークフロー：

  • 無限スクロールによるサーバー読み込み：ユーザーのスクロールに合わせてリモートデータを読み込み、大規模なデータセットでもメモリと DOM の使用量を抑えます。
  • 無限スクロール：行をチャンク単位で取得して解放する、総数ベースまたは動的なスクロールパターンに対応します。
  • ページネーション：大規模なデータセットをページ単位のビューに分割し、組み込みのナビゲーションコントロールを提供します。
  • リモートページネーション：ページインデックス、ページサイズ、合計件数、サーバーから読み込んだ行をグリッドと同期させます。
  • サーバーサイドグループ化：リモートソースからグループ化された行ブロックを要求し、必要に応じてグループパスを展開し、リモートフィルタリング、並べ替え、エクスポートと組み合わせます。

• データ管理と変更追跡：

  • 監査証跡の履歴：追跡、レビュー、コンプライアンスを重視したワークフローのために、データ変更の履歴を記録します。
  • 履歴：ユーザーによる編集を追跡し、グリッドの変更を元に戻したり、やり直したりするためのコントロールを提供します。
  • 履歴コントロール：元に戻す操作とやり直す操作の履歴を移動するための、すぐに使える UI コントロールを追加します。
  • 範囲適用プレビュー：コピー、貼り付け、または入力による変更を、対象セルに適用する前にプレビューします。
  • スマート自動入力：初期値、連続データ、またはパターンを使って範囲を入力し、繰り返しのデータ入力を効率化します。
  • Excel のエクスポート／インポート：xlsx、xlsm、xlsb、xls を含む Excel ブック形式をエクスポートおよびインポートします。
  • 複数列のエクスポートヘッダー：構造化グリッドをエクスポートする際、グループ化された複数階層の列ヘッダーを保持します。
  • JSON 対応クリップボード：解析とレンダリングを制御しながら、構造化された JSON／オブジェクト値をコピーして貼り付けます。

• 選択と範囲操作：

  • 複数範囲選択：スプレッドシート形式のコピー、編集、操作のワークフローで、複数の選択範囲を扱います。
  • 範囲選択の制限：パフォーマンスとワークフローのルールを守るため、設定可能な上限で選択範囲を制限します。
  • 行のチェックボックス選択：一括選択とキーボード操作に配慮した動作を備えたチェックボックスコントロールで行を選択します。
  • 行の高度なドラッグ＆ドロップ：カスタムのドラッグハンドル、複数行への対応、制御可能なドロップ処理を使って行を並べ替えます。
  • 行の展開：詳細表示、子要素、またはカスタム行コンテンツのために、行を展開する操作を追加します。
  • カスタム行見出し：ラベル、アクション、または行に関するコンテキスト情報に合わせて、行ヘッダーの内容をカスタマイズします。

• フィルタリング、検索、グループ化：

  • 高度な選択フィルタリング：カテゴリデータに対し、複数条件を指定できる選択コントロールでフィルタリングします。
  • 選択フィルターの連動：各選択肢に応じて依存するフィルターで選択可能な値を絞り込む、連動フィルターを設定します。
  • 高度なスライダーフィルタリング：範囲スライダーで数値をフィルタリングします。
  • ヘッダー入力フィルタリング：すばやく列ごとに検索できるよう、ヘッダー領域にフィルター入力欄を配置します。
  • 日付フィルター：日付固有の条件や範囲で、時間データをフィルタリングします。
  • 行グループ化のドラッグ＆ドロップ：フィールドをパネルにドラッグして、行を動的にグループ化します。
  • グループ集計：合計、平均、件数、最小値、最大値などのグループ集計値を計算します。
  • サーバーサイドのグループ集計：リモートのグループ化データと、サーバーから返される集計値を組み合わせます。

• 計算と数式：

  • 数式エンジン：セル参照、動的な計算、幅広い関数に対応した Excel 風の数式を追加します。
  • 数式バー：数式を確認および編集する専用の場所をユーザーに提供します。
  • 数式の名前管理：数式で再利用できる名前付き参照を定義します。
  • 数式の依存関係の強調表示：関連するセルを強調表示し、数式の入力値と出力値を把握できるようにします。
  • サマリーヘッダー：ヘッダーレベルの UI に計算済みのサマリー値を表示します。

• データの可視化とセルのレンダリング：

  • セル内のチャート：進捗ライン、値付き進捗ライン、スパークライン、棒グラフ、タイムライン、評価用の星、バッジ、変化インジケーター、親指アイコン、円グラフなどのコンパクトなビジュアルを表示します。
  • ヒートマップとコールドマップ：グラデーションと凡例で値を色分けし、値の大小をすばやく比較できるようにします。
  • 条件付き書式：セルの値、行データ、またはカスタムロジックに基づいてスタイルルールを適用します。
  • 複数セルの書式設定：行単位の条件に応じて、同じ列内で異なるレンダラーやエディターを選択します。
  • セルのフラッシュ：最近変更された値を強調表示し、ライブ更新を見つけやすくします。
  • アバター、バッジ、進捗、評価、リンク、チャートの列タイプ：一般的なデータのビジュアルパターンに対応する、すぐに使えるレンダラーを利用します。
  • 配列レンダラー：専用のレンダラーで、配列のような値をセル内に表示します。
  • ボタン：行単位のコマンド用に、グリッドセル内にアクションボタンを追加します。

• 編集とデータ入力：

  • 動的フォーム編集：カスタムオプションとより豊富な入力欄を備えた生成フォームで、行データを編集できます。
  • 行全体の編集：行内の複数の列を、連携した一連の編集操作として編集できます。
  • セルのチェックボックスエディター：レンダラーとエディターの両方として機能するチェックボックスセルを使用できます。
  • セルのスライダーエディター：インラインスライダーで、範囲が制限された数値を編集できます。
  • セルのカウンターエディター：プラス／マイナスの操作と設定可能なステップ幅で、数値を調整できます。
  • テキストエリアエディター：グリッドから移動せずに、長いテキスト値を編集できます。
  • ドロップダウンエディター：ドロップダウンまたはカスタムポップアップで値を編集できます。
  • タイムラインエディター：視覚的な操作で、日付範囲やタイムライン形式の値を編集できます。
  • セルの検証：無効なセルを強調表示し、カスタムルールで無効な編集をブロックしたり、修正方法を案内したりできます。
  • 入力検証：エディターの入力をグリッドに確定する前に検証できます。

• ユーザー操作と UX：

  • コンテキストメニュー：セル、行、列、ヘッダーに対し、切り取り、コピー、貼り付け、挿入、削除、カスタムコマンドなどの操作を含むメニューを作成できます。
  • ツールチップ：セルやカスタムグリッド要素にカーソルを合わせたとき、コンテキストに応じた情報を表示できます。
  • 次の行へのフォーカス（WCAG）：データ入力ワークフロー中に、次の行へ自動的にフォーカスを移動できます。
  • WCAG ヘルパー：キーボードやスクリーンリーダーを利用するグリッド操作を改善できます。
  • セルフォーカスヘルパー：カスタム編集やナビゲーションのシナリオに合わせて、フォーカス動作を拡張できます。
  • 情報パネル：グリッド操作に関連するステータス情報や補助情報を表示できます。
  • ローダー：リモートデータの取得、エクスポート、または時間のかかる処理の実行中に、読み込み状態を表示できます。

• 開発と統合：

  • イベントマネージャー：管理された単一のレイヤーを通じてグリッドイベントを調整し、カスタマイズやクリーンアップを容易にします。
  • 監視可能なプロパティ：プロパティの変更に反応し、プラグインの状態をグリッド設定と同期できます。
  • プラグインの依存関係：機能を連携させる必要がある場合に、プラグイン間の関係を宣言して解決できます。
  • ディメンションアニメーション：行と列のサイズ変更をアニメーション化し、レイアウトの遷移を滑らかにします。
  • ドロップダウン基盤：カスタムエディターやプラグイン UI で、ポップアップ／ドロップダウンサービスを再利用できます。
  • グリッドプリセットとユーティリティ：再利用可能なグリッド設定、ヘルパー関数、共有プラグイン動作を組み合わせられます。

• エンタープライズ向け分析と計画：

  • ピボットテーブル：動的な行、列、値のディメンション、組み込みおよびカスタムの集計、階層化された行、生成された列グループ、フラットなヘッダー、総計と小計、行に値を表示するレイアウト、行と列のドリルダウン、グループ化された集計値、ドラッグ＆ドロップによる設定、コンパクトなフィールドパネル、サーバーサイドエンジン／ストアのコントラクト、リモートでの並べ替えとフィルタリング、ドリルダウンのコントラクト、フィールドレジストリの検証、キャッシュキー、シリアライズ可能なエラー、状態の保存／読み込みを備えた多次元分析を構築できます。
  • ピボットコンフィギュレーター：ピボットの行、列、値、フィルター、フィールドレイアウトを選択できるドラッグ＆ドロップ UI をユーザーに提供します。
  • ガントとスケジューリング：タスク、依存関係、カレンダー、リソース、割り当て、ベースラインの各モデルを使用してプロジェクトを計画できます。サマリータスクとマイルストーン、WBS 階層、自動スケジューリング、稼働カレンダーと祝日、制約付きスケジューリング、依存関係の検証、リード／ラグを伴う FS、SS、FF、SF の依存関係、クリティカルパスと余裕時間、ベースライン、リソースフィルタリング、タスクの移動・サイズ変更・作成・進捗の各操作、インデント／インデント解除、タイムラインのズーム、範囲の強調表示、非稼働時間の網掛け、ラベル、カスタムマーカーにも対応しています。
  • ガントツールバー：ガントビューで、タイムラインのナビゲーション、ベースライン、クリティカルパス、エクスポートの操作をすぐに利用できます。
  • ガントタスクエディターダイアログ：構造化されたダイアログで、タスクのフィールド、依存関係、リソース、スケジューリングの詳細を編集できます。

• 高度なサポート：

  • AI エージェントのサポート：Pro AI ツールを使用して、プラグイン、レンダラー、テンプレート、グリッド設定を生成できます。
  • RevoGrid MCP - AI ネイティブなグリッドインテリジェンス：AI コーディングツールを、バージョン対応のドキュメント、サンプル、移行情報、機能の解決、型付けされた API コンテキストに接続します。
  • GitHub によるサポート：GitHub ベースのワークフローを通じて、エンジニアリングサポートを受けられます。
  • メールによるサポート：Pro およびエンタープライズ向けの実装に関する質問について、直接サポートを受けられます。

フレームワークに対応

私は RevoGrid です。大規模なデータセットを「Excel のような」データテーブルやリストとして効率的に表示するソリューションです。
各セル内にネイティブコンポーネントをレンダリングできます。

インストール

このライブラリは、NPMJS Revolist アカウントでスコープ付き NPM パッケージとして公開されています。 デモサイトで詳細をご確認ください。

NPM の場合：

npm i @revolist/revogrid --save;

Yarn の場合：

yarn add @revolist/revogrid;

ブラウザーのサポート

最新 ✔	最新 ✔	最新 ✔	最新 ✔	最新 ✔

フレームワーク

<revo-grid /> では、GitHub Actions を活用した高度な継続的デリバリー（CD）システムを開発しました。この高度なシステムは、React、Angular、Svelte、Vue 2、Vue 3、Python 向け Plotly Dash など、複数のフレームワークに対応するグリッドのバージョンを自動的にビルドして配信し、完全な型サポートを提供します。これによりバージョンが継続的に配信され、サポート対象のすべてのフレームワークで最新のグリッド機能強化とアップグレードを利用できます✨。将来的には（バージョン 5）、モノレポベースの開発に切り替える予定です。

• Vue 3 および Vue 2
• React
• Angular
• Svelte
• Dash / Python
• JavaScript

基本的な使い方

RevoGrid は Web コンポーネントとして動作します。コンポーネントをページに配置するだけで、ほかの HTML 要素と同じようにそのプロパティにアクセスできます。また、グリッドをプロジェクトに統合する方法も複数用意されています。

• グリッドをプロジェクトにインポートする

JavaScript データグリッドの簡単な使い方

// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];
// Define the data source for the grid
grid.source = [{ name: 'New Item', details: 'Item Description' }];

カスタムセルテンプレート

// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [
  {
    prop: 'name',
    name: 'Custom cell template',
    // Custom cell template
    cellTemplate(h, { value }) {
      return h(
        'div',
        {
          style: { backgroundColor: 'red' }, // Styling the cell background
          class: { 'inner-cell': true }, // Adding a CSS class
        },
        value || '' // Display the cell content or an empty string if undefined
      );
    },
  },
];
// Define the data source for the grid
grid.source = [{ name: 'New Item' }];

例とガイド

• Vue 3 と Vue 2
• React
• Angular
• Svelte
• Dash / Python
• JavaScript

バージョン

• 2.0+：プラグインシステム、グループ化、並べ替え、フィルタリングを導入しました。

• 3.0+：破壊的変更を導入しました：

  • 冗長なビューポートコンポーネントを削除しました。
  • Bootstrap などのライブラリに対応するため、クラス名を変更しました：
    • row -> rgRow
    • col -> rgCol
    • data-cell -> rgCell
    • data-header-cell -> rgHeaderCell
  • 最新のイベント命名規則に合わせ、すべてのメソッド名を小文字に変更しました。たとえば、afterEdit は afteredit になりました。詳細は API を確認してください。
  • Vite、Parcel など、最新のすべてのフロントエンドツールでグリッドを使用できるよう、純粋な ESM モジュールのサポートを追加しました。遅延読み込みなしでカスタム要素をインポートできるようになりました。ポリフィルはご自身で用意してください。

• 4.0+：破壊的変更を導入しました。詳しくは移行ガイドをご覧ください。

• 型サポートを再設計しました： - 非推奨の名前空間を削除しました： - 変更前：RevoGrid.ColumnRegular - 変更後：ColumnRegular; - 型のインポートを改善しました： - 変更前：import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces' - 変更後：import { ColumnRegular } from '@revolist/revogrid'。 - ビューポートの型名を全体的に変更しました。たとえば、変更前：rowDefinitions: [{ type: "row", index: 0, size: 145 }]、変更後：rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]。

  • イベントの命名規則を更新しました。イベントの使用箇所を見直してください。イベント名はすべて小文字になり、最新のイベント命名規則に準拠しています。たとえば、afterEdit -> afteredit です。
  • イベントに関する複数の破壊的変更を導入しました。beforerowrender は BeforeRowRenderEvent を返すようになりました。詳細はすべてのイベントを確認してください。

• 主な改善点：

  • フレームワーク全体のアプローチを見直しました。高度なサポートとプロ機能を備えた Pro バージョンを導入しました。
  • スロットのサポートを導入しました。
  • モバイルサポートを強化するため、スクロールシステムを更新しました。
  • 高度なテンプレートをサポートしました。テンプレートとエディター向けに additionalData を導入しました。Prop から親／ルートアプリのコンテキストにアクセスできます。
  • ドキュメントを再設計しました。
  • 重大な問題を修正し、全体的なパフォーマンスを大幅に改善して、グリッドを何倍も高速化しました。
  • プラグインサポートを強化し、グリッドプロバイダーへの完全なアクセスを可能にしました。
  • ドキュメントを更新しました。
  • Angular、React、Svelte、Vue を完全にサポートし、ネイティブレンダリングを提供しました。

• 次の予定

  • ロードマップをご確認ください。

スポンサー

惜しみないご支援をいただいているスポンサーの皆様に、心より感謝申し上げます。皆様のご支援により、RevoGrid の保守と開発を続けることができます。

スポンサーになる

あなたまたはあなたの会社が RevoGrid の継続的な開発を支援したいと考えている場合は、 へのご協力をご検討いただくか、Pro 版をご利用ください。あなたの支援は、私たちがプロジェクトの改善を続け、コミュニティに最高のツールを提供する力になります。

RevoGrid を支援していただきありがとうございます！ 🙏

テスト

RevoGrid は信頼性と安定性を確保するために徹底的にテストされています。

スイート	コマンド	対象範囲
ユニット	npm run test	サービス、ユーティリティ、純粋なロジック
E2E (Playwright)	npm run test:e2e	実際のブラウザでのレンダリングと操作

E2E テスト

エンドツーエンドテストでは @stencil/playwright を使用して、実際の Chromium ブラウザで <revo-grid> を実行します。開発サーバーは次を実行すると自動的に起動します:

npm run test:e2e

テストファイルは e2e/ にあり、e2e/helpers.ts のヘルパーを共有します:

ローカル起動のトラブルシューティング

限定的なローカル作業では、開発サーバーを起動する前に、新規または変更したテストが検出可能であることを確認してください:

./node_modules/.bin/playwright test e2e/pinning.spec.ts --grep "test name" --list

次に、Playwright の Web サーバーライフサイクルを呼び出さずにコンパイルエラーを検出するため、ウォッチモードではない Stencil ビルドを実行します:

./node_modules/.bin/stencil build --dev --serve --no-open

テストが実行される前に Playwright が ERR_SOCKET_BAD_PORT やポート 65536 などの Stencil 開発サーバー起動エラーで失敗した場合は、e2e アサーションの失敗ではなく、環境または起動の問題として扱ってください。node -v を確認し、別のローカルサーバーがすでに localhost:3333 を使用していないかを確認してから、その環境状態を変更した後にのみ再試行してください。

コントリビューション

参加することで、スキルを高め、貴重な経験を積み、革新的なプロジェクトに大きな影響を与える機会を得られます。あなたの貢献は、大きいか小さいかに関わらず価値があります。

なぜコントリビュートするのか？

• 知識を広げる: 複雑なライブラリに取り組むことで、最新の Web 技術を深く掘り下げ、コーディングスキルを向上させ、パフォーマンス最適化、データ処理、コンポーネントベースアーキテクチャのベストプラクティスを学ぶことができます。
• 経験: のようなオープンソースプロジェクトに貢献することで、実践的な経験を得られ、ポートフォリオに大きな追加要素となります。これは、協力して作業する能力、複雑な問題を解決する能力、プロジェクトの成功に貢献する能力を示します。
• プロフェッショナルとしての成長: 貢献することで、才能ある開発者のネットワークの一員になれます。これは、メンターシップの機会、コラボレーション、キャリアに役立つプロフェッショナルなつながりにつながる可能性があります。

ライセンス

MIT

---