3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kintone/dts-gen導入メモ

3
Last updated at Posted at 2026-02-26

【はじめに】

2025年5月から、株式会社Kaienで社内SEとして働いている島田です。
当社はkintoneをガッツリ使っており、私はそのkintoneのJavaScript(厳密に言うとTypeScript)カスタマイズを担当しています。ここ数カ月、@kintone/dts-genを導入したらkintoneカスタマイズの開発体験がグッと上がったので、その話を書きます。

【対象読者】

  • kintoneカスタマイズをTypeScriptで書いている(または書きたい)
  • kintoneカスタマイズにおけるフィールド名のタイポを減らしたい
  • kintone JavaScriptカスタマイズのフィールド設定を手動で行っていて疲弊している

【TypeScriptについて】

TypeScript、便利ですよね。

  • 定義してない変数や、存在しないプロパティ参照をエラーで教えてくれる
  • オブジェクトの後に .(ドット)を打った瞬間、そのオブジェクトで利用可能なプロパティやメソッドだけがリストアップされるため、開発速度が向上する

TypeScript公式ドキュメントでも、型情報があると「正しいプロパティにアクセスできているかのチェック」や「プロパティ候補の提案(補完)」ができる、という趣旨が明記されています。 (TypeScript)

この開発体験を知ってしまうと、型のない世界には戻れないです。
(先日久しぶりにGASの開発でJavaScriptを使用したのですが、メソッドに渡す引数の数が間違ってるのにエラーすら出してもらえなくてキーボードかち割りそうになりました)


【@kintone/dts-gen(kintone-dts-gen)とは】

弊社は、kintoneのカスタマイズは、全てTypeScriptで行っています。このkintone × TypeScriptの開発効率をグッと上げてくれるのが、kintone-dts-genです。

kintone-dts-genは、kintoneアプリのフィールド構成から、TypeScriptの型定義ファイル(.d.ts)を生成してくれるCLIツールです。 (Cybozu Dev)

kintone-dts-genは、kintoneアプリのTypeScript型定義ファイル(.d.ts)を生成できるCLIツール
フィールドの型を一括作成でき、TypeScriptでのkintoneカスタマイズ開発を効率化できる
…という位置づけ。 (Cybozu Dev)


【何ができるのか】

kintone-dts-genを使うと、アプリにあるフィールドの型定義ファイルを自動で生成してくれます。

src\types\appK91.d.ts
declare namespace KintoneTypes {
  interface AppK91Fields {
    事業所名: kintone.fieldTypes.SingleLineText;
    定員: kintone.fieldTypes.Number;
    メールアドレス: kintone.fieldTypes.SingleLineText;
    ...
  }
  interface SavedAppK91Fields extends AppK91Fields {
    $id: kintone.fieldTypes.Id;
    $revision: kintone.fieldTypes.Revision;
    更新者: kintone.fieldTypes.Modifier;
    作成者: kintone.fieldTypes.Creator;
    レコード番号: kintone.fieldTypes.RecordNumber;
    更新日時: kintone.fieldTypes.UpdatedTime;
    作成日時: kintone.fieldTypes.CreatedTime;
  }
}

これを使って、kintoneのイベントハンドラで、よくあるやつをこのように型定義します↓

// event.record を “生成した型” として扱う
const record = event.record as KintoneTypes.SavedAppK91Fields;

1) record. でフィールド名のサジェストが出る

record. と打った瞬間に、そのアプリのフィールドが候補としてズラッと出るようになります。

image.png

2) 「存在しないフィールド」がエラーになる

image.png

  • フィールドコードのタイポ
  • そもそもアプリに存在しないフィールド参照

これらにすぐに気が付くことができるため、開発の手戻りがぐっと減ります。


【AI中心の開発とのシナジー】

導入メリットは多々ありますが、私が特に恩恵を感じているのはAI中心の開発です。

TypeScriptは、型情報があることで補完や誤り検知が効くだけではなく、コードの意図が明確な状態になりやすいです(=人間にもAIにも読みやすい)。
TypeScript公式も、型があると「正しいプロパティにアクセスできているかチェックでき、そこからプロパティ候補も提案できる」という流れを説明しています。 (TypeScript)

そして @kintone/dts-gen を入れると、kintone特有の event.record が、「どのフィールドを」「どういう型として」扱っているかが(少なくとも型の上では)明確になります。
結果として、AIに実装を手伝ってもらう時も「フィールド参照のズレ」が減って、手戻りが少なくなった体感があります。


【導入方法】

詳細な導入手順はサイボウズの公式ドキュメントにまとまっているのでこちらをご確認ください。 (Cybozu Dev)

  • cybozu developer network:kintone-dts-gen (Cybozu Dev)

【まとめ】

  • @kintone/dts-gen は kintoneアプリのフィールドから型定義(.d.ts)を生成できるツール
  • event.record に型を乗せると、補完が効く/タイポや存在しないフィールド参照が型エラーで止まるようになる
  • AI中心の開発でも、型情報が「文脈」になるため、出力の精度が向上する。

【参考】

  • cybozu developer network:kintone-dts-gen (Cybozu Dev)
  • cybozu developer network:kintoneアプリの型定義ファイルを活用して、kintoneカスタマイズをTypeScriptで開発してみよう(@kintone/dts-genに触れている) (Cybozu Dev)
  • TypeScript Handbook:Types for Tooling(型が補完や誤り検知に効く) (TypeScript)
3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?