TypeScriptでkintoneカスタマイズ開発をやってみよう

TypeScriptを使ったkintoneカスタマイズのチュートリアルです。

前提知識

次のツールを使ってチュートリアルを行いますので前提知識となります。

node, npm, npx
webpack
babel
TypeScript

設定ファイルはTypeScriptの公式で紹介されているレポジトリを参考にしています。

1. プロジェクトの初期化と必要パッケージのインストール

プロジェクトの初期化を行います。

npm init

プロジェクトの初期化が完了したら開発に必要なパッケージのインストールを行います。

npm install -D @kintone/dts-gen \
                         @babel/core @babel/plugin-proposal-class-properties \
                         @babel/plugin-proposal-object-rest-spread \
                         @babel/preset-env \
                         @babel/preset-typescript \
                         babel-loader \
                         fork-ts-checker-webpack-plugin \
                         typescript \
                         webpack \
                         webpack-cli

@kintone/dts-genはTypeScriptでkintoneカスタマイズおよびプラグイン開発を行うために必要なツールです. 参考: @kintone/dts-gen - npm

@kintone/dts-gen はkintoneのアプリ情報から型情報を生成するコマンドラインツールと kintone上に定義されている組み込みメソッドの型情報が定義されています。

2. kintoneのアプリ情報から型情報を生成する

コマンドラインから次のコマンドを実行してフィールドの型情報を生成します。 kintone側でフィールドの変更を行った場合は、再度生成してください。

npx @kintone/dts-gen --host http://***.cybozu.com \
                 -u username \
                 -p password \
                 --app-id 12 \
                 --type-name SampleFields \
                 --namespace company.name.types \
                 -o src/sample-fields.d.ts

基本的なオプションは次のとおりです。

--host ... カスタマイズする予定のURL
-u ... ユーザー名
-p ... パスワード
--app-id ... カスタマイズするID
--type-name ... 出力する型名(未指定の場合Fields)
- 保存ずみの型としてSavedFields, 保存前の型としてFieldsが生成されます
--namespace ... 出力する名前空間 (未指定の場合 kintone.types)
-o ... 出力するファイル名

--help で詳細を確認できます. なお、--demo というオプションでサンプルの型情報を生成することもできます。

3. tsconfig.jsonを作成する

TypeScriptのコンパイル設定ファイルである tsconfig.json を作成します。¹ プロジェクトに合わせて修正してください。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "declarationDir": "dist/types",
    "declaration": true,
    "target": "es5",
    "module": "es2015",
    "strict": true
  },
  "files" : [
    "./node_modules/@kintone/dts-gen/kintone.d.ts",
    "./src/sample-fields.d.ts"
  ],
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

kintone上で利用できるグローバルメソッドが@kintone/dts-gen/kintone.d.tsに入っていますので、(2)で生成した型情報とともにfilesで指定するとコンパイル時に型情報を参照してくれます。

4. webpack.config.jsを作成する

src/kintone-typescript-sample.ts というファイルをエントリーポイントにサンプルプログラムを作成します。それに合わせてwebpack.config.jsを作成します。²

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: {
    "kintone-typescript-sample" : "./src/kintone-typescript-sample.ts"
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
  },

  plugins: [
    new ForkTsCheckerWebpackPlugin(),
  ]
};

.babelrcも作成します . ³

{
  "presets": [
    "@babel/env",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

5. 簡単なプログラムを書いてみる

意味があるプログラムではないですが、TypeScriptでプロパティ参照してもコンパイルに成功します。

const HANDLE_EVENT = "app.record.create.show";
interface KintoneEvent {
    record: kintone.types.SavedFields;
}
kintone.events.on(HANDLE_EVENT, (event: KintoneEvent) => {
    event.record.Number.value = "1";
    event.record.Table.value[0].value.Number_Table.value = "1";
});

プログラムをビルドしてみましょう。

npx webpack-cli --mode development

次のような出力がでてきたらビルドの成功です。

Starting type checking service...
Using 1 worker with 2048MB memory limit
Hash: 2b19dc578431992634bb
Version: webpack 4.29.3
Time: 2010ms
Built at: 2019-02-14 21:58:08
                       Asset      Size                     Chunks             Chunk Names
kintone-typescript-sample.js  4.15 KiB  kintone-typescript-sample  [emitted]  kintone-typescript-sample
Entrypoint kintone-typescript-sample = kintone-typescript-sample.js

2019年のkintoneカスタマイズはTypeScriptに挑戦してみてはいかがでしょうか？

チュートリアルは以上です。お疲れ様でした。今回のサンプルコードはgithubにおいてあるので参考にしてみてください。

github.com