Vue.js

SpreadJSでは、JavaScriptライブラリの1つであるVue.jsがサポートされます。Vue.jsは、開発者に複雑なユーザーインターフェイスおよびWebアプリケーションを構築するためにツールを提供します。

Vueを使用するには、次の手順を実行します。

Vueアプリを作成する
コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
```
npm init vue@latest // プロジェクト名に「sjs-vue-app」を指定します
cd sjs-vue-app
```
コマンドを実行すると、ディレクトリ内の指定の場所にVue.jsプロジェクトが作成されます。Vue.jsプロジェクトの作成方法については、https://ja.vuejs.org/guide/quick-start.html を参照してください。
SpreadJS Vueモジュールをインストールする
次のコマンドを使用して、SpreadJS Vue モジュールをプロジェクトにインストールします。
```
npm install @mescius/spread-sheets@xx.x.x
npm install @mescius/spread-sheets-vue@xx.x.x
npm install @mescius/spread-sheets-resources-ja@xx.x.x
```
type=warning
'xx.x.x'の部分には製品のバージョンを指定してください。（例：17.1.10）
バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。
製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。

Vue.jsアプリでSpreadJSを使用する

次のサンプルコードを使用して、main.jsファイルを編集します。

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue';

let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount('#app')

次のサンプルコードを使用して、App.vueファイルを編集します。

 <template>
   <div>
   <gc-spread-sheets
     :hostClass="hostClass"
     @workbookInitialized="initWorkbook">
     <gc-worksheet
       :dataSource="dataTable"
       :autoGenerateColumns = 'autoGenerateColumns'
     >
       <gc-column
         :width="width"
         :dataField= "'price'"
         :visible = 'visible'
         :formatter = 'formatter'
         :resizable = 'resizable'
       ></gc-column>
     </gc-worksheet>
   </gc-spread-sheets>
   </div>
 </template>

 <script setup>
 import "@mescius/spread-    sheets/styles/gc.spread.sheets.excel2016colorful.css";
 import * as GC from "@mescius/spread-sheets";
 import "@mescius/spread-sheets-vue";
 import "@mescius/spread-sheets-resources-ja";
 import { computed, ref } from 'vue';

 // 日本語カルチャを設定します
 GC.Spread.Common.CultureManager.culture('ja-jp');

 const hostClass= 'spread-host';
 const autoGenerateColumns = ref(true);
 const width = ref(300);
 const formatter = ref("$ #.00");
 const visible = ref(true);
 const resizable = ref(false);

 const dataTable = computed(() => {
   let dataTable = [];
   for (let i = 0; i < 42; i++) {
     dataTable.push({ price: 100 * Math.random() + i + 0.56 });
   }
   return dataTable;
 });

 function initWorkbook(spread) {
   let sheet = spread.getActiveSheet();
   let rowCount = sheet.getDataSource().length;

   var ranges=[new GC.Spread.Sheets.Range(0,0,rowCount,1)];
   var style1 = new GC.Spread.Sheets.Style();
   style1.backColor = "#FFB4C8";
   sheet.conditionalFormats.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.lessThan, 30, 0, style1, ranges);

   var style2 = new GC.Spread.Sheets.Style();
   style2.backColor = "#B4FFB4";
   sheet.conditionalFormats.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 100, 0, style2, ranges);
 }
 </script>

 <style scoped>
 .spread-host {
   width: 500px;
   height: 600px;
 }
 </style>

アプリケーションを保存して実行する
```
npm run dev
```

Vue3でTypescriptを使用

Vue3はTypeScriptをサポートし、静的解析によって多くの一般的な実行時の問題を特定することができます。TypeScriptをを使用するには、次の手順を実行します。

Vue3アプリを作成する
コマンドプロンプトで次のコマンドを実行して、Vueアプリを作成します。
```
npm init vue@latest sjs-vue-app
```
このコマンドは、Vueプロジェクトに追加できるプロジェクト名およびその他のオプション機能のプロンプトを表示します。
TypeScriptを追加する
プロジェクトに含める機能で、「TypeScript」を選択します。
コマンドプロンプトで次のコマンドを実行して、「sjs-vue-app」フォルダに移動します。
```
cd sjs-vue-app
```
SpreadJS Vueモジュールをインストールする
次のコマンドを使用して、SpreadJS Vueモジュールをプロジェクトにインストールします。
```
npm install 
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```

Vue3アプリでSpreadJSを使用する

SpreadJSのVueコンポーネントを直接使用します。次のサンプルコードを使用して、App.vueファイルに必要なモジュールをインポートし、<script setup>でTypeScriptを使用します。

<template>
  <div id="spread-host">
    <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
      <GcWorksheet>
      </GcWorksheet>
    </gc-spread-sheets>
  </div>
</template>

<script setup lang="ts">
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import { GcSpreadSheets, GcWorksheet } from '@mescius/spread-sheets-vue'
function initWorkbook(spread: GC.Spread.Sheets.Workbook) {
  let sheet = spread.getActiveSheet();
  sheet
    .getCell(0, 0)
    .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    .value("Hello SpreadJS");
}
</script>

<style>
.spreadHost {
  width: 800px;
  height: 800px;
}
</style>

メモ: コンポーネントをローカルでインポートしている場合、追加の設定は必要ありません。

App.vue file

アプリケーションを保存して実行する
次のコマンドを使用して、プロジェクトを保存し、実行します。
```
npm run dev
```

<gc-spread-sheets>、<gc-worksheet>、および、<gc-column>は、タグ階層の基本要素です。他の要素は、それぞれ設定して使用します。なお、タグ階層は、以下のとおりです。

<gc-spread-sheets>
<gc-worksheet>
<gc-column></gc-column>
    ...
</gc-worksheet>
  ...
</gc-spread-sheets>

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。