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
に落とした場合、最初は次のようなエラーが出てしまいました.
<!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>
ブラウザのエラーメッセージ:
Uncaught ReferenceError: define is not defined at index.list.blade.js:20
これはWebページを参照して、require.js
が必要なようでしたので
<!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>
で回避できました.
ところが、従来index.list.blade.php
に書いておりました$(function(){})
がTypeScriptの中だとfireしてくれません.
[元のTypeScriptのコード:index.list.blade.ts]
/// <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);
});
[コンパイル後のJavaScript:index.list.blade.js]
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);
});
教えていただきたい点
TypeScriptの中のコードで$(function(){})
を起動することはできないのでしょうか?方法がありましたらご教授お願い致します.
環境
Windows10 64bit, VSCode+Node.js, ブラウザはChromeです.
不足の情報がありましたらお知らせください.
index.list.blade.ts
をコンパイルして」とありますが、これはwebpackでしょうか?使い方の雰囲気からしてlaravel-mixあたりのような気がしますが。おそらくwebpackあたりを正しく使えているとrequire.js
は不要になると思います。 「ところが、従来index.list.blade.phpに書いておりました$(function(){})がTypeScriptの中だとfireしてくれません.」 このとき何かしらのエラーログがブラウザのコンソールに表示されていないでしょうか?