目指せ!JavaScript カスタマイズ中級者(5)〜TypeScript 編〜
はじめに
今回は次の2つのツールを使って実践的なTypeScriptコードを書きます。
- @kintone/dts-gen :kintoneでTypeScriptを使いやすくするツール
- kintone JavaScript Client (@kintone/rest-api-client)
TypeScriptを使ってJavaScriptカスタマイズをする基本的な方法については、当サイトの別記事 TypeScript で kintone カスタマイズ開発をしてみようで紹介しています。
目指せ中級者シリーズの記事一覧は以下を参照してください。
目指せ中級者シリーズ
TypeScript とは:TypeScript を使うメリット
TypeScriptとは、Microsoftが開発したオープンソースのプログラミング言語で、JavaScriptに「型」情報を追加できるようになっています。
「型」というのは変数などに格納される値が、数値なのか文字列なのかなど判別するために宣言します。
数値型や文字列型など基本的なもの以外にも、ユーザー独自の型も定義できます。
型情報のおかげで、扱おうとしているデータの中身が実行せずともコードを書くタイミングで明らかになるため、バグを起こしにくくなります。
たとえば、APIから取得できるkintoneの数値・計算フィールドの値は数字ではなく文字列ですが、それに直接乗算しようとすると、数値ではないのでエラーと判断されます。
次の例は、数値・計算フィールドにそのまま乗算しようとするとエラーになる例です。
計算フィールド「合計金額」にrecord.合計金額.value * 0.1
で乗算しようとしてエラーが表示されています。
他にも、あるオブジェクトの中に該当のキーがない場合など、アクセスしようとするとIDEがエラーと判断します。
次の例は、存在しないオブジェクトのプロパティにアクセスしようとした際のIDEのエラーです。
オブジェクトrecord.文字列.value
に値を代入しようとしたものの、実際には「文字列」というフィールドコードは存在しないためエラーが表示されています。
TypeScriptで、kintoneのアプリの各フィールドの型情報を用意し、それを利用することで上記のようにkintoneのフィールドコードを間違えたりせずに書くことができます。
特にテーブルの階層が深い複雑な構造や、REST APIのリクエストパラメーターやレスポンスに対して大きな効果を発揮します。
実際にやるとどうなるのか、サンプルを試してみましょう。
準備
コード: https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate
git clone
またはリンク先右上の緑色のClone or downloadボタンからZipファイルをダウンロードして利用してください。
以降の導入方法は上記ページのReadmeを参照ください。
上記コードのURL自体は
目指せ中級者!実践 JavaScript カスタマイズレベルアップ(1)〜webpack 編〜から(4)までものと同一です。
前回までの記事をお試しいただいた方も念の為再度ディレクトリー直下でnpm install
をやっておいてください。
細かい設定内容は後述しますが、これでTypeScriptを利用するための必要パッケージがインストールされます。
サンプル
第 4 回の記事と同様のサンプルを使って、TypeScriptならどう書くかという感じでコードを書いてみたいと思います。
第4回の記事と同様のアプリを利用するので上記記事の「アプリの用意と設定」のようにアプリを用意してから以下お試しください。
型情報の取得
コードを編集する前に、JavaScript APIの型にアクセスするための型定義を用意します。
@kintone/dts-gen
というライブラリを使うことで、JavaScriptAPIで扱うための型定義をアプリから取得できます。
下記コマンドを実行し、見積アプリから型情報を取得しておきます。
作成されたものを型定義ファイルといいます。
型定義ファイルは、サンプルにすでにはいっていますが、次のコマンドを実行することでお使いの環境のアプリの定義で上書きされます。
|
|
今回のサンプルコードのケースでは、見積アプリと商品アプリの2アプリを利用します。
見積アプリのみJavaScriptAPIで値を書き換えるため、見積アプリの型定義ファイルを @kintone/dts-genで生成します。
商品アプリはREST APIで書き換えるため、別途サンプルコード内に型を定義する必要があります。
コマンドが成功すると、次のような型定義ファイル(src/types/Quote.d.ts
)が生成されます。
|
|
サンプルコード
生成された型定義ファイルを使って、TypeScriptでkintoneカスタマイズをしてみましょう。
ダウンロードしたソースコードのsrc/apps/quote_ts/index.ts
を確認してください。
|
|
実際にコードを編集してみて、27行目あたりでrecord
の中身をみようとするとどうなるか、Visual Studio Codeの挙動を試してみてください。
下記画像のように、record.
と入力していくと見積アプリのフィールドに基づいたサジェストがされるはずです。
サンプルコードの説明
ここではTypeScriptのすべては説明できませんが、サンプルコードの概要をかいつまんで紹介します。
実際には、第4回で紹介しているコードとはあまり差分はありません。次に示す型情報の扱いのみ違いがあります。
26 行目:event.record
の型情報を付与
|
|
とかかれた箇所ですが、これは先述の @kintone/dts-genで作成した型定義を当てています。こうすることで、「event.record
は見積アプリのレコードですよ」ということを定義できます。
これを
型アサーション
といいます。
4 行目〜18 行目:製品アプリの型定義(@kintone/rest-api-client 用)
実は、
@kintone/rest-api-client
はTypeScriptをサポートしています。
ただし、@kintone/rest-api-clientの型定義は、@kintone/dts-genのようにコマンドから作成できません。
そのため、このように製品アプリの型を自身で用意する必要があります。
@kintone/rest-api-clientの型定義方法の詳細は
ドキュメント
を確認してください。
48 行目: @kintone/rest-api-client に型情報を渡す
|
|
としている行ですが、4行目~18行目で定義した製品アプリの型情報(SavedProduct
)を渡すことで、getRecords()
で返ってくるレコードは、SavedProduct型ですよと教えています。
これにより、REST APIから返却されたレコードについてもサジェストされるようになります。
サンプルコードのビルド
ブラウザーにTypeScriptを直接動作させることはできませんが、TypeScript→JavaScriptに変換できるようにwebpackの設定を追記しています。
ビルドコマンドを打つことで、JavaScriptに変換できるので、それをアップロードします。
|
|
詳細は、
目指せ中級者!実践 JavaScript カスタマイズレベルアップ(3)〜自動で一括ファイルアップロード編〜を確認してください。
自動ファイルアップロードもできます。
おわりに
TypeScript自体と、それに対応するkintoneのエコシステムが醸成されてきた結果、このようにかなりよい開発体験を得ることができるようになってきました。
kintoneを扱う上で完全には避けられない、フィールドコードの勘違いなど、大分減らせることでバグも未然に防ぐことができ、かなりTypeScriptでkintoneをカスタマイズするのは大分魅力的だと思っています。
今回の記事でTypeScriptに興味がでたら、ぜひ入門者用の書籍などを参考にして学んでみてください。TypeScriptは昨今ではかなり人気でもあり、今後の開発の役に立つと思います。