syncfusion-javascript-common

Syncfusion JavaScript コントロールの共通機能

Syncfusion JavaScript コントロールには、ユーザーエクスペリエンスを向上させ、異文化への対応を確実にし、すべてのコントロールで基盤となる機能を提供する包括的な共通ユーティリティと機能が含まれています。このスキルでは、堅牢な JavaScript アプリケーションを構築するためのインストール設定、アニメーション、グローバリゼーション、状態管理、セキュリティに関する考慮事項について説明します。

目次

• ドキュメントとナビゲーションガイド
• クイックスタート
• 共通機能

ドキュメントとナビゲーションガイド

はじめにとインストール

📄 参照: references/getting-started.md

• Webpack のセットアップ - Syncfusion コントロールを Webpack バンドラーに統合します
• Electron のセットアップ - Electron デスクトップアプリケーションで Syncfusion コントロールを使用します
• Cordova のセットアップ - Apache Cordova モバイルアプリにコントロールを統合します
• Ionic のセットアップ - Ionic フレームワーク向けに Syncfusion コントロールを設定します
• Meteor のセットアップ - Meteor.js アプリケーションでコントロールを設定します
• SharePoint のセットアップ - SharePoint 環境に Syncfusion コントロールをデプロイします

---

グローバリゼーション

📄 参照: references/globalization.md

• アラビア語、ヘブライ語、ペルシャ語向けの右から左（RTL）表示のサポート
• 多言語対応のためのローカライズ（l10n）
• CLDR データを使用した国際化（i18n）
• 数値と通貨の書式設定
• 日付と時刻の書式設定

---

高度な機能

📄 参照: references/advanced-features.md)

• アニメーション効果（FadeIn、ZoomOut、SlideUp など）
• アニメーションのタイミング（duration、delay、グローバル設定）
• ドラッグ＆ドロップ操作（Draggable、Droppable）
• テンプレートのカスタマイズと最適化
• enablePersistence による状態の永続化
• セキュリティのベストプラクティスと HTML のサニタイズ

---

クイックスタート

Syncfusion JavaScript コントロールパッケージとテーマパッケージをインストールする

npm install @syncfusion/ej2-grids@latest @syncfusion/ej2-tailwind3-theme@latest --save

注: @syncfusion/ej2-base パッケージはすべての Syncfusion コントロールの依存関係にあり、Syncfusion JavaScript パッケージをインストールすると自動的にインストールされます。package.json ファイルに明示的に追加する必要はありません。

スタイルをインポートする

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

ライセンスキーを登録する

手順 1: 環境変数を設定します。

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

手順 2: NPX コマンドを使用してライセンスを有効化します。

npx syncfusion-license activate

注: ほかのライセンス登録方法については、Syncfusion ライセンスキー登録ドキュメントを参照してください。

基本的なコントロールの設定

import { Grid, Page } from '@syncfusion/ej2-grids';

const data: Object[] = [
  { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
  { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
];

const grid: Grid = new Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', width: 100 },
    { field: 'CustomerID', width: 100 },
    { field: 'Freight', width: 100, format: 'C2' }
  ]
});

// Inject required services
Grid.Inject(Page);

grid.appendTo('#grid');

<div id="grid"></div>

共通機能

状態の永続化を有効にする

import { Grid } from '@syncfusion/ej2-grids';

const grid: Grid = new Grid({
  dataSource: data,
  enablePersistence: true
});

grid.appendTo('#grid');

RTL サポートを有効にする

import { enableRtl } from '@syncfusion/ej2-base';
import { ListView } from '@syncfusion/ej2-lists';

// Global RTL enablement
enableRtl(true);

// OR per-control
const listView: ListView = new ListView({
  enableRtl: true
});
listView.appendTo('#listview');

アニメーション効果を追加する

import { Animation } from '@syncfusion/ej2-base';

const element: HTMLElement | null = document.getElementById('element');

if (element) {
  const animation: Animation = new Animation({ 
    duration: 5000, 
    delay: 2000 
  });
  animation.animate(element, { name: 'FadeOut' });
}

ドラッグ＆ドロップを実装する

import { Draggable, Droppable } from '@syncfusion/ej2-base';

const draggableElement: HTMLElement | null = document.getElementById('draggable');
const droppableElement: HTMLElement | null = document.getElementById('droppable');

if (draggableElement && droppableElement) {
  const draggable: Draggable = new Draggable(draggableElement, { 
    clone: false 
  });
  
  const droppable: Droppable = new Droppable(droppableElement, {
    drop: (e: DropEventArgs) => {
      if (e.droppedElement) {
        e.droppedElement.textContent = 'Dropped!';
      }
    }
  });
}

<div id="draggable">Drag me</div>
<div id="droppable">Drop here</div>