モダンな開発環境を用いた カンタン／安全なカスタマイズ開発 / kintone devCamp Boost! 2023

kintone devCamp Boost! (2023年) のセッション資料です。
カスタマイズ開発をより快適にするツール・ライブラリを紹介しました。
セッションではハンズオンも実施しました。

- イベントHP：https://page.cybozu.co.jp/-/devcampboost/
- テンプレートリポジトリ：https://github.com/mshrtsr/kintone-devCamp-Boost-2023/
- 完成サンプルリポジトリ：https://github.com/mshrtsr/kintone-customize-auto-calc-total-cost

Transcript

1. モダンな開発環境を用いた カンタン／安全なカスタマイズ開発 サイボウズ株式会社 kintone DXチーム tasshi
2. 2 tasshi (田代 雅治) サイボウズ株式会社 kintone DXチーム所属 • プロダクトオーナー • エンジニア 趣味 • サイクリング
3. 3 kintone DXチーム kintoneエコシステムの開発者により良い Developer eXperience (DX)を提供するチーム 現在は2つのOSSを主に開発・保守 • kintone/js-sdk • kintone/cli-kintone
4. 4 kintone/js-sdk kintoneの拡張機能・連携サービスを 開発しやすくするライブラリ・支援ツール群 • APIクライアント • プラグインテンプレート • プラグイン・カスタマイズアップローダ など
5. 5 kintone/cli-kintone (v1) kintoneを操作するためのコマンドラインツール レコードのインポート/エクスポート/削除が可能 • データバックアップ（添付ファイル含む） • 他基幹システム連携 など ※v0系は2023年10月末にメンテナンス終了
6. 6 Cybozu Inside Out https://blog.cybozu.io/entry/2023/06/09/113000
7. 7 それではセッション開始です！ お待たせしました
8. 8 このセッションでは npmエコシステムやサイボウズが提供している 便利なツール・ライブラリをフル活用した カンタン/安全なkintoneカスタマイズ開発を 体験しながら学んでいただけます！
9. 9 Resume 知識編 – ツールの紹介(30min) 実践編 – カスタマイズを開発 (60min)
10. 10 ツールの説明 知識編
11. 11 カンタン/安全なカスタマイズ開発 カンタン： • 作業が自動化されている • コードの記述量が少ない など 安全： • 人為的ミスが発生しにくい • コードの品質が保たれている など
12. 12 紹介するカスタマイズ開発フロー コーディング ビルド テスト 反映 APIを少ない記述量で操作 静的解析でバグを早期発見 1つのJavaScript ファイルに変換 kintoneアプリに 自動アップロード 自動テスト • TypeScript • ESLint/Prettier • @kintone/rest-api-client • @kintone/dts-gen • Vite • Vitest • @kintone/customize- uploader +これらのサイクルを高速で実行できること
13. 13 TypeScript JavaScriptの代替言語 (AltJS)の1つ JavaScript + 型チェック • 変数名の間違いや異なる型への代入に気付ける • エディタの補完による快適コーディング JavaScriptと文法がほぼ同じ（スーパーセット） • 学習コストや導入コストが低い
14. 14 ESLint/Prettier ESLint: リンター • バグの原因になる構文などを指摘・修正 • var禁止、未使用変数禁止 など Prettier: フォーマッター • インデントや改行を統一 ESLint + Prettierを併用することが多い =>自動的に開発者間で一貫した書き方ができる
15. 15 @kintone/rest-api-client kintone REST APIをJavaScriptから 簡単に操作するためのライブラリ • レコード一括処理のメソッド • リクエスト/レスポンスの型サポート ※Node.js/ブラウザ両方で使用可能
16. 16 @kintone/dts-gen kintoneアプリからTypeScript向けの 型定義ファイル(d.ts)を生成するCLIツール メリット • JS APIで取得したレコードに型を指定可能 • イベントハンドラなどをより安全に書ける ※生成した型はrest-api-clientでは使用不可
17. 17 モジュールバンドラー 複数のJSファイルの依存関係を解決して 1つのJSファイルに変換するツール メリット • 大規模プロジェクトを複数JSに分割して開発できる • 異なるカスタマイズ・プラグイン間の変数アクセスを最小にできる • ダウンロード時のパフォーマンスが向上する（HTTP/1.1） Browserify, Webpack, Rollup, Viteなど → 今回は設定が簡単なViteを使います！
18. 18 自動テスト プログラムによって実行される試験手順 メリット • 繰り返し発生するテストの自動化 • 複数パターンで検証が必要なテストの効率化 • 人為的ミスを防止 後述のCI/CDサービスを組み合わせることで 継続的にコードの品質をチェックできる →今回はViteと相性の良いVitestを使用します！
19. 19 @kintone/customize-uploader kintoneカスタマイズを アップロード/ダウンロードするCLIツール メリット • カスタマイズのデプロイを自動化 • 開発中のカスタマイズを素早く反映 • アプリのカスタマイズ設定をバックアップ
20. 20 GitHub Actions GitHubが提供するCI/CDサービス CI/CD ≒自動化プロセスによってソフトウェアの検証・デプ ロイを継続的に行う手法 コミット・プルリクエストなどをトリガーに指定した 自動処理を実行可能 • 自動試験やデプロイなど
21. 21 kintoneカスタマイズを 作ってみましょう！ 実践編
22. 22 テーマ：顧客管理アプリの自動更新 案件管理アプリのレコード追加・更新時に 顧客管理アプリの総費用フィールドを自動更新 案件管理 アプリ 顧客管理 アプリ レコード追加・更新 ※総費用フィールドを追加 (数値) 総費用フィールドを更新
23. 23 セットアップ 以下のリポジトリの「セットアップ」を実施 https://github.com/mshrtsr/kintone-devCamp-Boost-2023
24. 24 1. 必須ツールのインストール • Node.js • Visual Studio Code (VSCode) • Git (任意)
25. 25 2. リポジトリのセットアップ リポジトリをダウンロード • 「Code」→「Download ZIP」を選択 • ダウンロードしたZIPファイルを展開 リポジトリをセットアップ cd kintone-devCamp-Boost-2023 npm install npm run setup
26. 26 3. VSCodeのセットアップ 1. VSCodeでリポジトリをオープン 2. 拡張機能(Extensions)メニュー 3. “@recommended”と入力 4. プラグインをインストール
27. 27 4. アプリの作成 kintoneアプリストアにアクセス ↓ 「営業支援パック」を追加 ※案件管理アプリにカスタマイズを追加します
28. 28 5. 認証情報・アプリ情報の設定 以下のファイルを編集 .env • KINTONE_BASE_URL: kintone環境のURL • KINTONE_USERNAME: ユーザー名 • KINTONE_PASSWORD: パスワード customize-manifest.json • app: カスタマイズを追加するアプリID
29. 29 6. 動作確認 カスタマイズをビルド・デプロイ npm run build npm run upload アプリのレコード一覧画面で ダイアログが表示されたら成功！！
30. 30 それでは開発スタートです！ いつでも質問OKです！
31. 31 開発手順 1. 顧客管理アプリに総費用フィールドを追加 2. 案件管理アプリにイベントハンドラを追加 3. 案件管理アプリから関連するレコードを取得 4. レコードから費用を集計 5. 顧客管理アプリの総費用フィールドを更新 ※リポジトリのREADMEのTipsも参照
32. 32 型定義ファイル(.d.ts)の生成 カスタマイズで操作するアプリの型定義を生成 npm run generate:dts アプリID 今回は以下の2つのアプリの型定義ファイルを使用 • 顧客管理アプリ • 案件管理アプリ ※READMEのTips 2を参照
33. 33 ビルドプロセスの起動 以下のコマンドを実行 npm run start ファイルの変更時にカスタマイズが 自動的にビルド・アップロードされる
34. 34 1. 総費用フィールドを追加 顧客管理アプリに数値フィールドを追加 ※フィールドコードは「総費用」
35. 35 2. イベントハンドラを追加 案件管理アプリにイベントハンドラを追加 • app.record.create.submit.success • app.record.edit.submit.success ✅ イベントオブジェクトの型を指定する ※READMEのTips 1を参照
36. 36 3. 関連するレコードを取得 追加・更新されたレコードと 顧客名が一致するレコードを取得 1. イベントからアプリID・顧客名を取得 2. REST APIで関連するレコードを取得 ✅ レコード取得にはrest-api-clientを使用する ✅ レコードには生成した型定義を反映する ※READMEのTips 2, 3を参照
37. 37 4. レコードから費用を集計 取得したレコードから総費用を集計 （あともう少しで完成です）
38. 38 5. 総費用フィールドを更新 顧客管理アプリの総費用フィールドを更新 1. 顧客管理アプリの更新対象のレコードを取得 2. 集計結果を反映して更新 ✅ 更新対象のレコードにも型定義を指定 ※READMEのTips 2, 3を参照
39. 39 時間の余った方は 追加実装にもチャレンジしてみてください 例 • レコード削除時に再集計する • インライン編集時に再集計する • 再集計実行ボタンを追加する
40. 40 終わりに ご参加いただきありがとうございました！ 今後のカスタマイズ開発の参考になれば幸いで す。 js-sdk/cli-kintoneへのフィードバックは GitHubのIssueでいつでも受け付けています！ ※バグ修正・機能改善に繋がります
41. 41 付録 補足情報など
42. 42 Vite (ヴィート) 高速動作を特徴とするビルドツール メリット • 開発時は依存モジュールをesbuildで高速に処理 • esbuildはGo製の超高速バンドラ • 設定ファイル無しでも使用可能(Zero config) • 実際には細かい挙動を調整したい場合が多い • webpackと比べて記述量はかなり少なくて済む • rollupプラグインを利用可能 ※今回はライブラリモードのためesbuildは不使用
43. 43 Vitest (ヴィテスト) Vite環境のためのテスティングライブラリ メリット • 実行速度が高速 • デファクトスタンダードのJestと互換性 • ゼロコンフィグ