kintoneのJavaScript読み込み順まとめ

kintoneのJavaScript読み込み順まとめ
                 
最終更新日から90日以上経過しています。

kintoneには1つ1つのアプリに対してJavaScriptを適用できますが、JavaScriptが適用できるのはアプリだけではありません。

JavaScriptが適用できるのは、

  • アプリ
  • プラグイン
  • ドメイン共通

と幾つかあるので、どのような順で読み込まれるのか調べてみました。

調査の目的

例えばドメイン共通JSの方がアプリJSよりも早く読み込まれるのであれば、

アプリIDを定数で保持しておくようなJSをドメイン共通に適用しておき、アプリJSから参照する

ような使い方ができる気がしました。

後は各JSの読み込み順を把握しておく事で、JS同士の競合が発生しないように気を使えるかな、と。

何にしろ、調べておいて損はなさそう。

調査方法

アプリプラグインドメイン共通それぞれに下記のようなJSを仕込みます。

(function() {
    "use strict";
    kintone.events.on("app.record.index.show", function(e) {
        console.log('アプリのJS 1'); // 「アプリ」部分と番号だけ変える
    });
})();

アプリ

JavaScriptを3つ適用。

プラグイン

プラグインを3つ適用し、それぞれのプラグインにJSを3つ適用する。

各プラグインのmanifest.jsonもほぼ同じ。

冒頭に記載したような内容のJSを3つ適用しています。

    "desktop": {
        "js": [
            "js/plugin_1_1.js",
            "js/plugin_1_2.js",
            "js/plugin_1_3.js"
        ],
        "css": [
        ]
    },

ドメイン共通

JavaScriptを3つ適用。

結果

結果はこんな感じ

  1. ドメイン共通のJavaScript
  2. アプリのJavaScript
  3. プラグインのJavaScript

のようです。

ドメイン共通内、アプリ内、プラグイン内の適用順はシンプルに上から読み込まれる、という事ですね。

ポイントとしては、プラグイン毎の読み込み順は、プラグイン3⇒プラグイン1で読み込まれている通り、ドメインへのインストールが新⇒古の順で読み込まれるという事。

そしてこの順番を変えたい場合、1度アンインストール⇒インストールの順でしか変更できないという事。

おわりに

最近だとwebpackを使う事が多いだろうから、あまり気にする必要もないのかな?

webpack導入していない開発環境の方には参考になるかも。

kintoneカテゴリの最新記事