73416


Web系ごく初心者ですので用語の誤り、説明行き届かない点などご指摘ください．

## 背景（今までやったこと）

Laravelを使用してPHPアプリを作っています．Modelを定義して、Viewを作って、Controllerを作ってと、一通り目的のページを出力するまでたどり着きました．`index.list.blade.php`がテンプレートファイルになるのですが、ここに山ほどJavaScriptのコードを書かねばなりません．しかし、そんなことをやり始めたらロジック（JavaScript）とスタイル（というか表示出力のHTML）がグッチャングッチャンになることは目に見えています．ならばJavaScriptは別ファイルに納めてと考えたのですが、いままでちょこちょこJavaScriptの小規模なプログラムを作ってきた経験はありますが、あまりに簡単に粗雑でトリッキーなコードが書けてしまうので、こういうのは精神衛生上よろしくないと考えてVSCode+Node.jsでTypeScriptに挑戦してみました．

## 困っている点

コードをTypeScriptで書く分については、型付けができるので大変気に入っております．ところが、作成した`index.list.blade.ts`をコンパイルして`index.list.blade.js`に落とした場合、最初は次のようなエラーが出てしまいました．

[code]

    <!DOCTYPE html >
    <html>
        <head>
            <meta charset="UTF-8"/>
            <title>Index List</title>
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}"/>
            <link rel="stylesheet" type="text/css" href="{{ asset('css/datatables.min.css') }}"/>
            <script type="text/javascript" src="{{ asset('javascript/jquery-3.5.1.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('javascript/bootstrap.bundle.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('javascript/datatables.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('javascript/index.list.blade.js') }}"></script>
            ...
        </head>
    
[/code]

ブラウザのエラーメッセージ：

> Uncaught ReferenceError: define is not defined at index.list.blade.js:20

これはWebページを参照して、`require.js`が必要なようでしたので

[code]

    <!DOCTYPE html >
    <html>
        <head>
            <meta charset="UTF-8"/>
            <title>Index List</title>
            <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}"/>
            <link rel="stylesheet" type="text/css" href="{{ asset('css/datatables.min.css') }}"/>
            <script type="text/javascript" src="{{ asset('javascript/jquery-3.5.1.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('javascript/bootstrap.bundle.min.js') }}"></script>
            <script type="text/javascript" src="{{ asset('javascript/datatables.min.js') }}"></script>
            <!--script type="text/javascript" src="{{ asset('javascript/index.list.blade.js') }}"></script-->
            <script type="text/javascript" data-main="{{ asset('javascript/index.list.blade.js') }}" src="{{ asset('javascript/require.js') }}"></script>
            ...
        </head>
    
[/code]

で回避できました．

ところが、従来`index.list.blade.php`に書いておりました`$(function(){})`がTypeScriptの中だとfireしてくれません．

[元のTypeScriptのコード：index.list.blade.ts]

[code]

    /// <reference path="typings/index.d.ts" />
    
    import * as dlg from "./index.list.blade.dlg";
    
    interface IndexKeyObj{
        no:string;
        brand:string;
        type:string;
        year:string;
        class:string;
        lang:string;
        indexExists:boolean;
        generateIndex:boolean;
        status:string;
    }
    
    let indexKeyTable:Array<IndexKeyObj>=[];
    /**
     * Document ready function
     */
    $(function () {
            console.log("Hello World!");
            let index_rows = $("table#index-table tr.index-row");
            // Construct index data structure
            index_rows.each(function () {
                let no: string = $(this).children(".no").text();
                let brand: string = $(this).children(".brand").text();
                let type: string = $(this).children(".type").text();
                let year: string = $(this).children(".year").text();
                let bclass: string = $(this).children(".class").text();
                let lang: string = $(this).children(".lang").text();
                let indexExists: boolean = $(this).children(".index").text() === "-" ? false : true;
                let indexKeyObj: IndexKeyObj = { "no": no, "brand": brand, "type": type, "year": year, "class": bclass, "lang": lang, "indexExists": indexExists, "generateIndex": false, "status": "" };
                //console.log(index_key_obj);    
                indexKeyTable.push(indexKeyObj);
            });
    
[/code]

[コンパイル後のJavaScript：index.list.blade.js]

[code]

    var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
        if (k2 === undefined) k2 = k;
        Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
    }) : (function(o, m, k, k2) {
        if (k2 === undefined) k2 = k;
        o[k2] = m[k];
    }));
    var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
        Object.defineProperty(o, "default", { enumerable: true, value: v });
    }) : function(o, v) {
        o["default"] = v;
    });
    var __importStar = (this && this.__importStar) || function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
        __setModuleDefault(result, mod);
        return result;
    };
    define("index.list.blade.dlg", ["require", "exports"], function (require, exports) {
        "use strict";
        Object.defineProperty(exports, "__esModule", { value: true });
        exports.dlgOk = void 0;
        function dlgOk(msg) {
            $("div#indexModal div.modal-header").css("visibility", "hidden");
            $("div#indexModal div.modal-footer button.btn-secondary").html("OK");
            $("div#indexModal div.modal-footer button.btn-primary").css("visibility", "hidden");
            $("div#indexModal div.modal-body").html(msg);
            $("div#indexModal").modal("show");
        }
        exports.dlgOk = dlgOk;
    });
    /// <reference path="typings/index.d.ts" />
    define("index.list.blade", ["require", "exports", "index.list.blade.dlg"], function (require, exports, dlg) {
        "use strict";
        Object.defineProperty(exports, "__esModule", { value: true });
        dlg = __importStar(dlg);
        var indexKeyTable = [];
        /**
         * Document ready function
         */
        $(function () {
            console.log("Hello World!");
            var index_rows = $("table#index-table tr.index-row");
            // Construct index data structure
            index_rows.each(function () {
                var no = $(this).children(".no").text();
                var brand = $(this).children(".brand").text();
                var type = $(this).children(".type").text();
                var year = $(this).children(".year").text();
                var bclass = $(this).children(".class").text();
                var lang = $(this).children(".lang").text();
                var indexExists = $(this).children(".index").text() === "-" ? false : true;
                var indexKeyObj = { "no": no, "brand": brand, "type": type, "year": year, "class": bclass, "lang": lang, "indexExists": indexExists, "generateIndex": false, "status": "" };
                //console.log(index_key_obj);    
                indexKeyTable.push(indexKeyObj);
            });
    
[/code]

## 教えていただきたい点

TypeScriptの中のコードで`$(function(){})`を起動することはできないのでしょうか？方法がありましたらご教授お願い致します．

## 環境

Windows10 64bit, VSCode+Node.js, ブラウザはChromeです．

不足の情報がありましたらお知らせください．


CC BY-SA 4.0
2021-01-19T14:05:50.640
73415
2021-01-19T15:36:30.513
9503
question
javascript jquery laravel typescript
TypeScriptでJQueryの$(function () {})を処理させるには？


失礼いたしました．

[Is there a Main()-like function in
TypeScript?](https://stackoverflow.com/questions/25273366/is-there-a-main-
like-function-in-typescript)

に書いてある通りでした．例えば

[code]

    $(function () {});
    
[/code]

を

[code]

    function initWindow(){}
    
[/code]

に書き換えて、コードの最後で

[code]

    initWindow();
    
[/code]

で呼び出すだけで事足りました．


CC BY-SA 4.0
2021-01-19T15:36:30.513
73416
2021-01-19T15:36:30.513
9503
73415
answer