kintoneのカスタマイズ効率をあげよう3 – 型補完

Featured Image(Photo) by Fatos Bytyqi on Unsplash

更新履歴

  • 2020/8/21 index.tsにkintoneイベントの型定義を追加しました

はじめに

kintoneのカスタマイズ効率をあげよう2 – 自動適用の続きです。

本記事ではTypeScriptと@kintone/dts-genを利用して強力な補完機能の力を手に入れます。具体的にはこのようなことが可能になります。

TypeScriptとはマイクロソフトが開発しているオープンソースのプログラミング言語で、変数に型情報を定義できます。Visual Studio Codeなどのエディタを併用することでコーディング中にエラーを検知できます。また、型情報を元に補完機能を利用できるようになります。

@kintone/dts-genとはアプリのフォーム設定から型を生成するツールです。すごく便利です。

TypeScriptと@kintone/dts-genを使いこなしてカスタマイズ効率をさらにアップしましょう。

TypeScriptのインストール

> npm install --save-dev typescript

@kintone/dts-genのインストール

> npm install --save-dev @kintone/dts-gen

アプリの型定義ファイルを作成

以下のコマンドを実行して型定義ファイルfields.d.tsを作成します。

> npx kintone-dts-gen --host https://{subdomain}.cybozu.com/ -u {username} -p {password} --app-id {appid}

フォルダ構成の変更

ファイルが増えてきたのでsrcフォルダを作成して、そこにindex.jsとfields.d.tsを移動します。index.jsはindex.tsにリネームします。

現時点のフォルダ構成は以下のようになっているはずです。

TypeScriptの設定ファイルを作成

トップフォルダで以下のコマンドを実行して設定ファイルtsconfig.jsonを作成します。

> npx tsc --init

tsconfig.jsonファイルにfilesとincludes項目を追加します。

{
  "compilerOptions": {
    // 省略
  },
  "files" : [
    "./node_modules/@kintone/dts-gen/kintone.d.ts",
    "./src/fields.d.ts"
  ],
  "include": [
    "./src/**/*"
  ],
}

index.tsの編集

以下の内容を貼り付けます。

(function () {
  "use strict";

  interface IndexEvent {
    appId: number;
    viewType: string;
    viewId: number;
    viewName: string;
    records: kintone.types.SavedFields[];
    offset: number;
    size: number;
    date: null;
    type: string;
  }

  interface DetailEvent {
    appId: number;
    record: kintone.types.SavedFields;
    recordId: number;
    type: string;
  }

  kintone.events.on("app.record.index.show", function (event: IndexEvent) {
    console.log(event);
  });

  kintone.events.on("app.record.detail.show", function (event: DetailEvent) {
    console.log(event);
  });
})();
recordsの取り扱い

一覧の表示形式(viewType)によって変わります。ここでは表形式(list)を想定しています。

補完機能を試す

Wow!!!

TypeScriptをJavaScriptにトランスパイルする

TypeScriptのままではkintoneに適用できません。これをJavaScriptにトランスパイル(変換)します。

Visual Studio CodeではCtrl + Shift + Bでトランスパイルできます。
tsc: build – tsconfig.jsonでトランスパイルを1回実行します。
tsc: watch – tsconfig.jsonはソースコードが変更される度に自動でトランスパイルします。

トランスパイルするとsrcフォルダにindex.jsファイルが作成されます。このファイルをcustomize-uploaderで適用したら完了です。

Visual Studio Codeには他にも便利な機能があります。

ここまでのまとめ

ここまでのまとめは以下にあります。
https://github.com/potaracom/kintone-customize-template2

この記事を書いた人