💣kintone開発でよくあるアンチパターンとその解決策🩹

はじめに

kintoneは手軽に業務アプリを構築できるプラットフォームとして人気がありますが、自由度が高い反面、保守性や拡張性に課題を抱えがちです。特に、開発が進むにつれてコードが肥大化し、イベント処理の迷路に迷い込み、複数アプリ連携で泥沼化するケースも…。

今回は、kintone開発でよくあるアンチパターンを取り上げ、それぞれのリファクタリング例や解決策を紹介します。

お知らせ①

🌟無料＆登録不要でプラグインのお試しが可能！🌟

kintoneユーザーの皆さん！

エムザスのkintoneプラグインはもう試しましたか？🤔
エムザスでは以下のようなプラグインを開発しています！👇

EMレポ - レコードの内容をPDF / Excelに出力できるプラグイン

EMsheet - kintoneのレコードをExcelのように表示して編集できるプラグイン

EMdocMaker - アプリの関連図や定義書を出力し、アプリの分析ができるプラグイン

       

EMログ - 標準の監査ログでは取得できないアプリの操作ログを取得できるプラグイン

   

 

 

 

 

デモ環境で、ほとんどの機能が今すぐお試しいただけます✨

＼無料 & 登録不要！／

デモ環境で今すぐプラグインを試す！

 

さらに、お客様のドメインで無料で3ヶ月間、すべての機能を試すこともできます！🎉

＼たった1分で申し込み完了！／

3ヶ月無料でフル機能お試しを申し込む！

それでは、本題に入ります！

💥 アンチパターン1：複雑すぎるイベント処理

症状：

• kintone.events.on() が10行以上並ぶ

• 同じイベントで複数処理が動くが、順序依存になっている

• Promiseチェーンやasync/awaitの整合性が取れていない

問題点：

• 修正の影響範囲が読みづらい

• イベントフローの把握が困難

• バグの温床になりやすい

🩹解決策：

✅ 共通処理を関数に分離：


function validateInput(event) {
  // 入力チェック
  return event;
}

function formatValues(event) {
  // 値の整形
  return event;
}

kintone.events.on('app.record.create.submit', function(event) {
  validateInput(event);
  formatValues(event);
  return event;
});

function validateInput(event) {
  // 入力チェック
  return event;
}

function formatValues(event) {
  // 値の整形
  return event;
}

kintone.events.on('app.record.create.submit', function(event) {
  validateInput(event);
  formatValues(event);
  return event;
});

✅ イベント定義の一元管理：

const EVENT_TYPES = [
  'app.record.create.submit',
  'app.record.edit.submit',
];

kintone.events.on(EVENT_TYPES, async (event) => {
  try {
    await doSomething(event);
    return event;
  } catch (e) {
    event.error = '処理中にエラーが発生しました';
    return event;
  }
});

const EVENT_TYPES = [
  'app.record.create.submit',
  'app.record.edit.submit',
];

kintone.events.on(EVENT_TYPES, async (event) => {
  try {
    await doSomething(event);
    return event;
  } catch (e) {
    event.error = '処理中にエラーが発生しました';
    return event;
  }
});

💥 アンチパターン2：DOM直叩き

症状：

• document.querySelector()やgetElementsByClassName()を多用
• setTimeout()で描画タイミングを調整している
• kintone UI Component未使用

問題点：

• kintoneのDOM構造変更に弱い
• スタイリングの破綻リスクが高い
• 非推奨の非公式手法

🩹解決策：

✅ kintone UI Componentの活用：

kintone UI Component公式リファレンス

import { Button } from '@kintone/kintone-ui-component';

const myButton = new Button({
  text: '実行',
  type: 'submit'
});

myButton.on('click', () => {
  alert('クリックされました');
});

kintone.app.record.getSpaceElement('my_space').appendChild(myButton.render());

import { Button } from '@kintone/kintone-ui-component';

const myButton = new Button({
  text: '実行',
  type: 'submit'
});

myButton.on('click', () => {
  alert('クリックされました');
});

kintone.app.record.getSpaceElement('my_space').appendChild(myButton.render());

✅ スペースフィールドの利用：

• DOM操作ではなく、kintoneのUI部品を組み合わせる方向に転換する

💥 アンチパターン3：複数アプリ連携の混乱

症状：

• kintone.api()が乱立し、どこで何を取得しているかわからない
• アプリIDがコード内にベタ書き
• 連携先の仕様変更にコードが追従できない

問題点：

🩹解決策：

• テスト・デバッグがしづらい
• アプリ間の依存性が高く、壊れやすい
• 保守の属人化

✅ APIラッパーを作成して集約管理：

const AppAPI = {
  getCustomerById: async (id) => {
    const appId = 123; // 顧客管理アプリ
    const query = `顧客ID = "${id}"`;
    const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: appId,
      query,
    });
    return resp.records[0] || null;
  }
};

const AppAPI = {
  getCustomerById: async (id) => {
    const appId = 123; // 顧客管理アプリ
    const query = `顧客ID = "${id}"`;
    const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: appId,
      query,
    });
    return resp.records[0] || null;
  }
};

✅ アプリ設定の外部管理（例：定数ファイルで分離）：

const APP_IDS = {
  CUSTOMER: 123,
  ORDER: 456,
};

const APP_IDS = {
  CUSTOMER: 123,
  ORDER: 456,
};

✅ データ連携の責務分離：

• ロジックを1ファイル1責務で管理
• services/やrepositories/フォルダでAPI呼び出しを整理

🎯 まとめ：良いkintone開発のために

kintone開発は「とりあえず動く」から始められる反面、スケールすると破綻しやすい側面もあります。小さなアンチパターンを放置せず、設計の見直しやリファクタリングを習慣化することで、開発チーム全体の生産性が向上します。

🧰 おすすめリソース

• kintone開発ドキュメント
• kintone UI Component公式
• GitHub: kintone/js-sdk

✍️ おわりに

この記事が「気がつけば沼…」になりかけているkintone開発者の一助となれば幸いです。アンチパターンは誰にでも起こりうるもの。大切なのは気づいた時にどう軌道修正するかです。

もしあなたのプロジェクトでも「これ、まずいかも…？」という兆候があれば、早めに見直しを始めましょう 💪

ブログの一覧ページへ