Featured Image(Photo) by Fatos Bytyqi on Unsplash
更新履歴
- 2021/1/29 customize-uploaderのバージョンアップに対応しました
- 2020/10/8 フォルダ構成を変更しました
- 2020/10/7 ESLint設定のTypeScript対応を追加しました
- 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
アプリの型定義ファイルを作成
アプリは何を選択しても構いません。本手順ではアプリストアの顧客リストを利用します。

package.jsonのscriptsにdtsの設定を追加します。認証情報はcustomize-uploaderと同じものを利用してくれます。
"scripts": {
"dts": "kintone-dts-gen --app-id xxx -o ./types/fields.d.ts",
},
以下のコマンドを実行して型定義ファイルfields.d.tsを作成します。
> npm run dts
環境変数を設定していない場合は以下のように「–」以降に引数として指定してください。
> npm run dts -- --base-url https://{subdomain}.cybozu.com -u {username} -p {password}
フォルダ構成の変更
ファイルが増えてきたのでsrcフォルダを作成して、そこにindex.jsを移動します。index.jsはindex.tsにリネームします。
typesフォルダを作成して、そこにfields.d.tsを移動します。
現時点のフォルダ構成は以下のようになっているはずです。

TypeScriptの設定ファイルを作成
以下のコマンドを実行して設定ファイルtsconfig.jsonを作成します。
> npx tsc --init
tsconfig.jsonファイルにfilesとincludes項目を追加します。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"./node_modules/@kintone/dts-gen/kintone.d.ts",
"./types/fields.d.ts"
],
"include": ["./src/**/*"]
}
ESLint設定のTypeScript対応
これからはTypeScriptでコードを書くのでESLintの設定を以下の通り更新します。
module.exports = {
extends: ["@cybozu/eslint-config/presets/typescript-prettier"],
};
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);
});
})();
一覧の表示形式(viewType)によって変わります。ここでは表形式(list)を想定しています。
補完機能を試す
Wow!!!

TypeScriptのフォーマット設定
Visual Studio Codeの設定ファイルを開き、以下を追記します。開き方がわからない人はkintoneのカスタマイズ効率をあげよう1 – エディタ設定を見てください。
{
// 省略
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll": true
}
},
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で適用したら完了です。
index.jsの場所がトップフォルダからsrcフォルダに変更になりました。これに合わせてmanifestファイルを更新してください。ここでは説明は省略します。
Visual Studio Codeには他にも便利な機能があります。
ここまでの設定
ここまでの設定は以下にあります。
https://github.com/potaracom/kintone-customize-template2