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

はじめに

コード量に比例してプログラムに手を入れるのが難しいと感じることはありませんか？

実行時に型が決定されるJavaScriptのようなタイプのプログラミング言語はコード量が増えてくるとメンテナンスが難しくなる傾向があります。

こういった問題を解決するためにTypeScriptという言語があります。

本記事ではTypeScriptを使ったkintoneカスタマイズの方法について解説します。

TypeScriptとは？

TypeScriptはMicrosoftが開発するJavaScriptの拡張言語です。

TypeScriptの大きな特徴の一つとして静的型チェックがあります。

TypeScriptはJavaScriptの拡張言語ですが、型情報をプログラム内に埋め込むことができます。

コンパイルと呼ばれるTypeScriptからJavaScriptへの変換処理を通して型チェックを行います。

型チェックに失敗するとTypeScriptからJavaScriptへの変換に失敗します。

プログラム内に適度に型情報を入れることで可読性や型チェックを行うことができるため、

大規模なコードでもメンテナンスしやすいコードを書きやすくなります。

TypeScriptの詳しい文法や変換される様子などは公式ドキュメントに譲ります。

参考: TypeScript in 5 minutes ,TypeScript Playground, TypeScript Deep Dive日本語版

最後に地味に嬉しい特徴として、VSCodeやInitelliJ IDE(IDEA,Webstorm) ではTypeScriptの型情報から強力な補完機能の力を得ることができます。

コード補完については本記事の最後にGIFアニメを載せておきましたので興味ある方はごらんください。

 前提知識について

この記事は、WebpackとBabelを前提としています。Webpackについての知識がまったくない方はWebpack入門 を参照してください。

また、実際の開発のときにはTypeScriptによる型チェックだけでなくESLintやPrettierなどの静的解析ツールをあわせて利用することを強くおすすめします。

本記事は、TypeScriptでkintoneカスタマイズ開発をやってみように加筆・修正したものになります。

チュートリアル

チュートリアルでは、TypeScriptを使った簡単なkintoneカスタマイズを開発をしてみます。

※ Windows(Powershell)環境では、改行前のエスケープ文字「\（バックスラッシュ）」を「`（アクサングラーブ）」に置き換えてください。

 ディレクトリ構造は次のようになります

カスタマイズをするアプリを準備する

今回はアプリストアの「案件管理」アプリをカスタマイズしてみたいと思います。

プロジェクトの初期化を行う

プロジェクトの初期化を行います。TypeScriptでkintone開発をするために必要なツールをインストールします。

• @kintone/dts-gen ... kintoneカスタマイズを開発するためのツール
• @babel~~ .... ソースコード変換ツール
• fork-ts-checker-webpack-plugin ... 型チェックをwebpackのビルドの中で行うツール
• typescript ... TypeScriptコンパイラ
• webpack,webpack-cli ... ビルドツール

kintoneアプリのフィールド情報から型情報を生成してみよう

@kintone/dts-genはkintoneのJavaScriptカスタマイズ用の関数定義に加えて、指定したアプリからフィールド情報を取り出すコマンドラインツールが同梱されています。

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

上の例を実行すると fields.d.tsというkintoneのフィールド情報をもとにした型定義ファイルが生成されます。
kintoneのフィールド情報を更新したときはもう一度フィールド情報を作り直すようにしてください。
生成されたfield.d.tsをsrcディレクトリ下に配置しておきましょう。

webpack.config.jsを作成する

 webpack.config.jsの例:

設定ファイルの雛形は webpack-typescript-babel(github) のwebpack.config.jsを参考にしています。

tsconfig.json を作成する

tsconfig.jsonの例

files ... コンパイル対象のファイルを指定します。型情報のファイルを指定することでコンパイル時に関数が未定義関数のエラーにならないようにしています。

includes ... コンパイル対象のファイルを指定しています。filesと比べると*などのglobパターンを利用できます。

excludes ... コンパイル対象から除外するファイルを指定しています。

"files" にチュートリアルで生成した型定義情報とkintone上で利用できる関数定義ファイル(kintone.d.ts)を追加します。

TypeScriptコンパイラは型チェック時に設定ファイルを読み込み、型定義情報どおりにプログラムが書けているかチェックを行ってくれます。

これ以外の設定方法としてスラッシュを3回書く記法もあります。こちらを使いたい場合はTypeScriptの公式ドキュメントを参照してください。

設定ファイルの雛形は webpack-typescript-babel(github) のtsconfig.jsonを参考にしています。細かな設定は、TypeScriptの公式ドキュメントを参照してください。

Babelの設定ファイルを配置する 

babel.config.jsの例

本チュートリアルでは、型チェックをTypeScriptで行います。

ES5へのプログラム変換をBabelで行うようにします。これはTypeScriptはPolyfillを行わないためです。

BabelでPolyfillも一緒にするようにしています。(よくわからなければ読み飛ばしてOKです)

TypeScriptでプログラムを書いてみよう

src/kintone-typescript-sample.ts:

webpackでビルドしてみよう 

次のような出力がでてくると成功です

チュートリアルは以上です。お疲れ様でした。

IDEで補完される様子を見てみよう

IDEの細かな設定を行っていない状態だと補完が有効に効かず、IDEは過去の入力履歴程度を提案してくれる程度です。

しかし、TypeScriptの型情報があると補完を強力に効かせたコーディングを行うことができます。

1. 型情報を定義している様子

kintone.types.SavedFieldsは@kintone/dts-genで自動生成された型情報です

2. kintone.events.onなどのkintone上で利用できる関数も補完してくれます

3. フィールドコードの補完してくれるのでコーディングがはかどります

4. 設定するデータ型を間違えるとコンパイルエラーになって、間違いを教えてくれます

VSCodeでのコーディングの様子を撮影していますが、型情報があっていない部分はエラー表示してくれます。

このTipsは、2019年3月版 kintoneで確認したものになります。