【Electron連載】第３回 準備編ーVSCodeでデバッグ準備

↑【Electron連載（目次）】Electronでアプリ完成までのメモ

さてさて、今回はVSCodeでElectronアプリのデバッグ環境を準備するまでやるで。

#タスクランナーの設定
VSCodeのタスクランナー機能を使うで。

1.まずは、VSCode上でF1キーを押してコマンドパレットを表示や。
2."task"と入力してリストに出てくる「タスクランナーの構成」を選択してや。
3.次のリストの「TypeScript - tsconfig.json」を選択や。
4.デフォルトで下のtask.jsonが作成されるで。

task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

#tsconfig.json作成
まずはTypeScriptをコンパイルする設定や。

プロジェクトのルートフォルダにtsconfig.jsonを作成してや。
んで、下のソースを記述っと。

tsconfig.json

{
    "compilerOptions": {  
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

tsconfigに関してはこっちが詳しいで
http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json

とりあえず、コンパイラオプションとコンパイル対象外フォルダの設定な。
本来なら、出力フォルダは別にするほうがいいかもしれへんけど、
そこまで大規模じゃないんで、コンパイル対象外フォルダはnode_moduleだけな。
もうちょっと規模が大きくなってきたらsrcとdistで分けて運用するかも。

#launch.jsonの設定
んじゃ、VSCodeから起動する設定やで。

1.VSCodeの左の丸の中の虫マークをクリック（Ctrl+Shift+D）してデバッグサイドバー表示してな。
2.上の「構成がありません」と出てるリストボックスから「構成の追加」を選択してや。
3.launch.jsonファイルが作成され、画面中央にリストボックスが表示されるので、「Node.js:Electron Main」と書いてあるリストを選択や。
4.launch.jsonに最初からある、type:nodeの部分を削除やで。
5.起動jsファイルの指定がmain.jsになっているのでindex.jsに変更。
6.一応、「runtimeExecutable」で指定されているファイル（コマンド）が存在するか確認しておいてや。

launch.json

{
    // 使用できる Node.js デバッグ属性を学ぶために、インテリセンスを使用してください。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "program": "${workspaceRoot}/index.js", //main.js -> index.jsに修正
            "protocol": "legacy"
        }
        //ここの下にある部分は削除
    ]
}

#index.ts準備
とりあえず、空ウィンドウを出すだけのコードを記述や。
1.VSCodeで左のバーのファイルエクスプローラーからプロジェクトルートに新規ファイル作成な。
2.ファイル名をindex.tsにしてや。
3.下のソースをコピペしてな。

index.ts

/// <reference path="node_modules/electron/electron.d.ts" />

const electron = require('electron');
const BrowserWindow: typeof Electron.BrowserWindow = electron.BrowserWindow;
const app: Electron.App = electron.app;

class MyApplication {
    mainWindow: Electron.BrowserWindow = null;

    constructor(public app: Electron.App){
        this.app.on('window-all-closed', this.onWindowAllClosed);
        this.app.on('ready', this.onReady);
    }

    onWindowAllClosed = () => {
        if(process.platform != 'darwin'){
            this.app.quit();
        }
    }

    onReady = () => {
        this.mainWindow = new BrowserWindow({
            width: 800,
            height: 400,
            minWidth: 500,
            minHeight: 200,
            acceptFirstMouse: true,
            titleBarStyle: 'hidden'
        });

        this.mainWindow.on('closed', () => {
            this.mainWindow = null;
        });
    }
}

const myapp = new MyApplication(app);

#ビルド＆実行

index.tsにエラーがないことを確認してや。

1.Ctrl+Shift+Bを押してTypeScriptのビルドするで。
2.index.jsとindex.js.mapが作成されていることを確認してや。
3.index.tsの適当なところの行番号の左をクリックして、ブレークポイントを設定や。
4.F5を押して実行や。
5.ブレークポイントで止まるか確認してや。

＞ 第４回　基本編－メイン／レンダラープロセスの話