JavaScript 編は、
VSCode でF5でホーム画面を起動して JavaScript をステップ実行する を見てください。
ゴール
- F5でホーム画面を起動 (CakePHP以外でもステップ実行までの手順は基本同じ？はずです)
書かないこと
- CakePHP のインストール手順
- TypeScriptの導入方法
前提
| プロジェクトルート | 公開ルート | ポート |
|---|---|---|
| c:\src\cake-app | c:\src\cake-app\webroot | 8765 |
- CakePHP ビルトイン の簡易ウェブサーバ (port:8765) を起動していること
C:\src\cake-app\bin>cake server
Welcome to CakePHP v3.8.11 Console
Version
| - | version |
|---|---|
| VScode | 1.43.2 |
| Debugger for Chrome | 4.12.6 |
| Debugger for Firefox | 2.7.1 |
| npm | 6.13.4 |
| TypeScript | 3.8.3 |
tree
.
├── node_modules
│ └── typescript
├── package.json
├── src
│ ├── Template
│ │ └── Pages
│ │ └── home.ctp # ホーム画面
│ └── TS
│ ├── debug.ts # ステップ実行対象
│ └── tsconfig.json
│
├── tsconfig.json
└── webroot
└── js
├── debug.js # src/TS/debug.ts のトランスパイル結果
└── debug.js.map
準備
- デバッグ構成ファイルを作る
-
(お好きな方の) 拡張をインストールしてデバッグ構成ファイルを編集
/.vscode/launch.json{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome TypeScript", "url": "http://localhost:8765/", "webRoot": "${workspaceFolder}/webroot" } ] }/.vscode/launch.json{ "version": "0.2.0", "configurations": [ { "type": "firefox", "request": "launch", "name": "Launch Firefox TypeScript", "url": "http://localhost:8765", "webRoot": "${workspaceFolder}/webroot", "pathMappings": [ { // サーバ上のTSファイルの場所 "url": "http://localhost:8765/src/TS/", // ローカルPCのTSファイルの場所 "path": "${workspaceFolder}/src/TS" } ] } ] } -
ステップ実行対象を作成
src/TS/debug.tsnamespace StepMode.Test { export class Debug { public onReady(): void { console.log("4.call onReady"); } public constructor() { console.log("2.call constructor"); } } console.log("1.create instance"); const instance = new Debug(); console.log("3.event handle"); document.addEventListener("DOMContentLoaded", () => instance.onReady()); } -
ホーム画面
home.ctpでステップ実行対象を読み込む (<head></head>内に追記)--- a/src/Template/Pages/home.ctp +++ b/src/Template/Pages/home.ctp @@ -43,6 +43,8 @@ $cakeDescription = 'CakePHP: the rapid development PHP framework'; <?= $this->Html->css('style.css') ?> <?= $this->Html->css('home.css') ?> <link href="https://fonts.googleapis.com/css?family=Raleway:500i|Roboto:300,400,700|Roboto+Mono" rel="stylesheet"> + <?= $this->Html->script('debug.js') ?> + <!-- ↑同じ <script src="/js/debug.js"></script> --> </head> -
TypeScript 設定ファイル
tsconfig.jsonを編集 (ルートディレクトリでtsc --initしてtsconfig.jsonを生成してから修正する箇所)--- a/tsconfig.json +++ b/tsconfig.json @@ -3,14 +3,14 @@ /* Basic Options */ - "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ + "module": "none", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ + "sourceMap": true, /* Generates corresponding '.map' file. */ -
TSディレクトリ配下に
tsconfig.jsonを作成 (手で作成)src/TS/tsconfig.json{ "extends": "../../tsconfig", "files": [ "debug.ts" ], "compilerOptions": { "outFile": "../../webroot/js/debug.js", }, }
1. トランスパイル `debug.ts -> debug.js`
```package.json
"scripts": {
"tsc_build": "tsc --build ./src/TS",
c:\src\cake-app>npm run tsc_build
ステップ実行
- F5でホーム画面を起動して「ブレークモード」になることを確認
※ firefoxの場合、ページのリロードが必要な場合あり Troubleshooting