deleteCheckinModalをVanilla化

resources/assets/js/@types/jquery-tissue.d.ts

@@ -1,5 +0,0 @@
-// tissue.ts で定義されているjQuery Pluginの型定義
-
-interface JQuery<TElement = HTMLElement> {
-    deleteCheckinModal: () => this;
-}

resources/assets/js/app.ts

@@ -1,6 +1,6 @@
 import * as Cookies from 'js-cookie';
 import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch';
-import { linkCard, pageSelector } from './tissue';
+import { linkCard, pageSelector, deleteCheckinModal } from './tissue';
 
 require('./bootstrap');
 
@@ -24,11 +24,15 @@ $(() => {
     document.querySelectorAll('.tis-page-selector').forEach(pageSelector);
 
     document.querySelectorAll('.link-card').forEach(linkCard);
-    const $deleteCheckinModal = $('#deleteCheckinModal').deleteCheckinModal();
+
-    $(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) {
+    const elDeleteCheckinModal = document.getElementById('deleteCheckinModal');
-        event.preventDefault();
+    if (elDeleteCheckinModal) {
-        $deleteCheckinModal.modal('show', this);
+        const $deleteCheckinModal = deleteCheckinModal(elDeleteCheckinModal);
-    });
+        $(document).on('click', '[data-target="#deleteCheckinModal"]', function (event) {
+            event.preventDefault();
+            $deleteCheckinModal.modal('show', this);
+        });
+    }
 
     $(document).on('click', '[data-href]', function (_event) {
         location.href = $(this).data('href');

resources/assets/js/bootstrap.ts

@@ -1,5 +1,2 @@
-// jQuery
-import './tissue';
-
 // Bootstrap
 import 'bootstrap';

resources/assets/js/tissue.ts

@@ -1,6 +1,6 @@
 import { fetchGet } from './fetch';
 
-function suicide<T>(e: T) {
+export function suicide<T>(e: T) {
     return function (): never {
         throw e;
     };
@@ -45,33 +45,34 @@ export function linkCard(el: Element) {
                 el.classList.remove('d-none');
             }
         });
+
+    return el;
 }
 
 export function pageSelector(el: Element) {
-    if (!(el instanceof HTMLSelectElement)) return;
+    if (el instanceof HTMLSelectElement) {
-    el.addEventListener('change', function () {
+        el.addEventListener('change', function () {
-        location.href = this.options[this.selectedIndex].dataset.href as string;
+            location.href = this.options[this.selectedIndex].dataset.href as string;
-    });
+        });
+    }
+    return el;
 }
 
-(function ($) {
+export function deleteCheckinModal(el: Element) {
-    $.fn.deleteCheckinModal = function () {
+    return $(el)
-        return this.each(function () {
+        .on('show.bs.modal', function (event) {
-            $(this)
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                .on('show.bs.modal', function (event) {
+            const target = $(event.relatedTarget!);
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const modal = $(this);
-                    const target = $(event.relatedTarget!);
+            modal.find('.modal-body .date-label').text(target.data('date'));
-                    const modal = $(this);
+            modal.data('id', target.data('id'));
-                    modal.find('.modal-body .date-label').text(target.data('date'));
+        })
-                    modal.data('id', target.data('id'));
+        .find('.btn-danger')
-                })
+        .on('click', function (_event) {
-                .find('.btn-danger')
+            const modal = $('#deleteCheckinModal');
-                .on('click', function (_event) {
+            const form = modal.find('form');
-                    const modal = $('#deleteCheckinModal');
+            form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
-                    const form = modal.find('form');
+            form.submit();
-                    form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
+        })
-                    form.submit();
+        .end();
-                });
+}
-        });
-    };
-})(jQuery);