Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tasshi
August 23, 2023

モダンな開発環境を用いた カンタン/安全なカスタマイズ開発 / 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

tasshi

August 23, 2023
Tweet

More Decks by tasshi

Other Decks in Programming

Transcript

  1. 12 紹介するカスタマイズ開発フロー コーディング ビルド テスト 反映 APIを少ない記述量で操作 静的解析でバグを早期発見 1つのJavaScript ファイルに変換

    kintoneアプリに 自動アップロード 自動テスト • TypeScript • ESLint/Prettier • @kintone/rest-api-client • @kintone/dts-gen • Vite • Vitest • @kintone/customize- uploader +これらのサイクルを高速で実行できること
  2. 13 TypeScript JavaScriptの代替言語 (AltJS)の1つ JavaScript + 型チェック • 変数名の間違いや異なる型への代入に気付ける •

    エディタの補完による快適コーディング JavaScriptと文法がほぼ同じ(スーパーセット) • 学習コストや導入コストが低い
  3. 14 ESLint/Prettier ESLint: リンター • バグの原因になる構文などを指摘・修正 • var禁止、未使用変数禁止 など Prettier:

    フォーマッター • インデントや改行を統一 ESLint + Prettierを併用することが多い =>自動的に開発者間で一貫した書き方ができる
  4. 18 自動テスト プログラムによって実行される試験手順 メリット • 繰り返し発生するテストの自動化 • 複数パターンで検証が必要なテストの効率化 • 人為的ミスを防止

    後述のCI/CDサービスを組み合わせることで 継続的にコードの品質をチェックできる →今回はViteと相性の良いVitestを使用します!
  5. 28 5. 認証情報・アプリ情報の設定 以下のファイルを編集 .env • KINTONE_BASE_URL: kintone環境のURL • KINTONE_USERNAME:

    ユーザー名 • KINTONE_PASSWORD: パスワード customize-manifest.json • app: カスタマイズを追加するアプリID
  6. 29 6. 動作確認 カスタマイズをビルド・デプロイ npm run build npm run upload

    アプリのレコード一覧画面で ダイアログが表示されたら成功!!
  7. 42 Vite (ヴィート) 高速動作を特徴とするビルドツール メリット • 開発時は依存モジュールをesbuildで高速に処理 • esbuildはGo製の超高速バンドラ •

    設定ファイル無しでも使用可能(Zero config) • 実際には細かい挙動を調整したい場合が多い • webpackと比べて記述量はかなり少なくて済む • rollupプラグインを利用可能 ※今回はライブラリモードのためesbuildは不使用