Uncaught TypeError: $ is not a function エラー

いつも大変お世話になっております。

タイトルの通りのエラーです。

(B)の //管理者用フィールドへボタンを配置の、” $(` "の部分で止まります。

 

・テーブルに明細行を追加する際にデータをコピーして表示する方法(A) と

・一覧画面で1レコードごとにボタン配置(B) を参考にさせていただきました。

 

競合?しているのでしょうか?JQueryの読み込みの問題でしょうか?

未熟者で恐縮ですが、どなたかアドバイスいただけると幸いです。

 

(A)

jQuery.noConflict();

(($) => {

    "use strict";

    //発注伝票の追加編集画面で、テーブル行を複写する。

    let copyRowNo = -1;

    const events = [

        //レコード編集画面表示後、レコード追加画面表示後

        //レコード編集画面表示後フィールド値変更、レコード追加画面表示後フィールド値変更    

        "app.record.edit.show", "app.record.create.show",

        "app.record.edit.change.発注詳細", "app.record.create.change.発注詳細",

    ];

    kintone.events.on(events, (event) => {

        const record = event.record;

        $('button.remove-row-image-gaia').each((index, element) => {

            if ($(element).parent().find('button.xp-copy-row-image-gaia').length === 0) {

                $('<button type="button" class="xp-copy-row-image-gaia" title="行を複写する"></button>').insertAfter(element);

                $(element).parent().on('click', 'button.xp-copy-row-image-gaia', () => {

                    if (copyRowNo === -1) {

                        const tr_idx = $(this).parents('tr')[0].rowIndex - 1;

                        copyRowNo = tr_idx;

                        $(this).parent().find('button.add-row-image-gaia')[0].click();

                    }

                });

            }

        });

        if (copyRowNo >= 0 && event.changes && event.changes.row) {

            const copyFrom = record['発注詳細'].value[copyRowNo].value;

            const copyTo = event.changes.row.value;

            copyTo['商品名'].value = copyFrom['商品名'].value;

            copyTo['単位'].value = copyFrom['単位'].value;

        }

        copyRowNo = -1;

        return event;

    });

})(jQuery);

 

(B)

(() => {

    "use strict";

  kintone.events.on('app.record.index.show', function (event) {
     
        const field = 'field_for_button'; //管理者用フィールド

        const records = event.records;

        let element = kintone.app.getFieldElements(field);

        //管理者用フィールドへボタンを配置

        for (let i in records) {

            let rec_id = records[i].$id.value;

            $(`

          <button id="button_${rec_id}" class="kintoneplugin-button-dialog-ok" name='${rec_id}'>

            ${records[i]['ボタン表示内容'].value}

          </button>

        `)

                .appendTo(element[i]);

        }

        $('.kintoneplugin-button-dialog-ok').on('click', function (e) {

            const id = $(this).attr('name');

            let record = "";

            for (let i in records) {

                if (records[i].$id.value == id) {

                    record = records[i];

                    const check1 = records[i].発注No.value;

                    const check2 = records[i].発注先.value;

                    //確認ダイアログ

                    Swal.fire({

                        customClass: 'swal-text',

                        title: '登録確認',

                        html: '<strong>' + check1 + '</strong>' + '<br>' + '<strong>' + check2 + '</strong>' + '<br>' + '仕入伝票へ登録しますか?',

                        icon: 'warning',

                        showCancelButton: true,

                        confirmButtonColor: '#3085d6',

                        cancelButtonColor: '#d33',

                        confirmButtonText: '実行する',

                        cancelButtonText: 'キャンセル',

                        //reverseButtons: true //確認キャンセルボタン位置逆転

                  }).then((result) => {
                  }).then((resp1) => {
                  }).then(() => {
                  }).then(() => {
                    }).catch((error) => {

                        // キャンセル時のエラーを処理

                        if (error.message === 'Cancelled') {

                            Swal.fire(

                                'キャンセル',

                                'キャンセルしました。',

                                'error',

                            );

                        } else {

                            event.error = error.message;

                            Swal.fire(

                                'エラー',

                                'エラーが発生しました。' + error.message,

                                'error'

                            );

                        }

                        return event;

                    });

                }

            };

        });

    });

})();

 

Bの処理にも同様に

(($) => {
// 処理
})(jQuery);

を入れれば問題ないかと思います。Aの処理の最初で「jQuery.noConflict()」が記述されていますが、これはそのまま「jQueryを対立させない」という意味で、本来は「$」でjQueryが使えるものの、この省略表記を使えなくするための宣言です(他のライブラリ等も$を使うことがあるので、それらと競合させないために追加で実装されたものです)。この宣言をした状態では「$」の省略表記が使えなくなるので、正規表記の「jQuery」を使います(そのため、Bの処理の「$」を全て「jQuery」にすれば動作します)。

その上で

(($) => {
  // 処理
})(jQuery);

が「この関数内では『$』を『jQuery』と見なす(実際には即時関数の引数『$』に『jQuery』を渡しているだけです)」という意味になるので、追記が必要ということになります。

mls-hashimoto

お世話になります。

早々にご回答いただきありがとうございました。

なかなか作業できずお返事遅くなり失礼致しました。

修正後、一覧画面でのエラーは解消されたのですが、行複写コピーを実行すると別のエラーになってしまいました。

 

試行錯誤してみましたが、単体では使えていたような気がするのですが、Bのjsを削除しても解消されず、何を修正すれば良いのか見当もつかず。

またお時間ありましたら、ご回答いただけると幸いです。

mls-hashimoto

functionをアロー関数にした箇所を戻したところ、成功しました。

貴重なお時間をありがとうございましたm(__)m

渡邉祐子 さま

thisが使われていましたね。function関数とアロー関数とでthisは挙動が変わるんですが、見落としておりました。

無事に実装できたようで何よりです。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。