はじめに
ノーコードを謳っている Kintone ですが、実際に使っていくとどんどん要望が出てきて、最終的にはめちゃくちゃカスタマイズすることになるかと思います（笑）
Cybozu も開発の助けになる記事をたくさん用意してくれています👍
それらを参考に現時点での私が考えるKintoneカスタマイズの最強構成をご紹介します！
サンプルコード
詳細はコードを見ていただければと。
テンプレートとして使っていただいて大丈夫です👍
技術スタック
- TypeScript...プログラム言語
- React...JavaScript ライブラリ
- Vite...バンドルツール
- Vitest...Vite ネイティブのテストフレームワーク
- Eslint...静的解析ツール
- Prettier...コードフォーマッター
- GitHub Actions...CI/CD のプラットフォーム
ディレクトリ構成
kintone-app/
├─.github # プルリクテンプレートや自動デプロイの設定
├─src/
│ ├─apps/ # kintone 各アプリのカスタマイズを管理するディレクトリ
│ | ├─(app name)/ # 各アプリのカスタマイズ用ファイルを格納する
│ | | ├─features # 機能ごとにロジック等を管理するディレクトリ
│ | | ├─types # 各アプリで使用する型定義
│ | | ├─index.ts # エントリーポイントとなるファイル
│ ├─components # ボタンやフォームなど汎用的なコンポーネントを格納する
│ ├─constants # 汎用的な変数を格納
│ ├─global # kintone 全体のカスタマイズを管理するディレクトリ
│ ├─utils # 汎用的な関数を格納
CI/CD
アプリへの JavaScript の反映は手動では行わない方針です。
各人が勝手に js ファイルを上げ始めるとまじでやばいので、ここは対応必須です😢
作業ブランチにプッシュしたら自動でテストを実行します。
検証ブランチにプッシュしたら自動デプロイします。
本番アプリへのデプロイはリリース公開時に行います。
バンドルツール
Cybozu のブログで webpack を紹介していますが、かなり複雑なのでやめた方が良いです。
Vite の方がシンプルで高速なのでおすすめです。
ブランチ戦略
これは好きな方法を選択してもらって大丈夫ですが、Kintoneカスタマイズは基本的に少規模だと思うので、ぐるなびさんの記事にある GitFeatureFlow がシンプルでおすすめです。
最後に
ノーコードゆえなんとなーくでカスタマイズしていくと本当に悲惨なことになります😭
事前にある程度ルールを決めてデプロイ自動化などやることがKintoneとうまく付き合っていくコツかなと。
手遅れになる前にちゃんと設計して快適なカスタマイズを行なっていきましょう！