年末年始Webアプリ開発自習の記録6: Node.js+Electron+Vue.js開発環境準備

#はじめに
**[連休を機に考える、怠惰な私の自習戦略][Plan]**にて立てた計画に沿った自習の記録です。
前回：**[年末年始Webアプリ開発自習の記録5: Node.js+TypescriptでHabiticaにPOSTを送るWebアプリケーション作成][Prev]**

#やりたいこと

- URLから特定要素を組み替えるダウンローダー
    - 目標1
        - デスクトップのアプリを作る。Electronの出番だ
        - 最低限の入力フォーム
        - URLから取得したページの特定要素を探す
        - 特定要素を組み替えて新しいURLを作るロジック
        - 出来上がった新しいURLからファイルをダウンロードする
        - GUIを極限まで手抜きすれば年末年始の間にいけそう

例えばドライバーリストのページにリンクが貼ってあり、遷移した先にダウンロードリンクがあるような場合です。
Indexのページから既にダウンロードリンクを知ることができる場合、Indexのページから必要な要素を抜き出し、組み替えることでダウンロードリンク一覧を生成できるはずです。そしてできたリンクのリストから自動でダウンロードするといった流れです。

残念ながら前回Typescriptを頑張りすぎて時間をかけすぎてしまいました。早くも年末年始の休み最終日ですが、準備で終わりそうです。

#electron-vueを使ったセットアップ
**[electron-vueの日本語ドキュメント](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/)**を参考に、セットアップを始めます。

```:vue-cliインストール
> npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue
C:\Program Files\nodejs\vue-list -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list
C:\Program Files\nodejs\vue-init -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 18.981s
```

```:electron-vueプロジェクト作成
> vue init simulatedgreg/electron-vue simple-downloader

? Application Name simple-downloader
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? builder
? author 

   vue-cli · Generated "simple-downloader".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd simple-downloader
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)
```

```:追加パッケージの取得
> cd .\simple-downloader\
> npm install

npm WARN deprecated babel-preset-babili@0.1.4: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated mailcomposer@4.0.1: This project is unmaintained
npm WARN deprecated uws@9.14.0: stop using this version
npm WARN deprecated socks@1.1.9: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN deprecated buildmail@4.0.1: This project is unmaintained
npm WARN deprecated boom@2.10.1: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated hoek@2.16.3: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated cryptiles@2.0.5: This version is no longer maintained. Please upgrade to the latest version.

> uws@9.14.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> electron-chromedriver@1.8.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\electron-chromedriver
> node ./download-chromedriver.js

successfully dowloaded and extracted!

> node-sass@4.11.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-64_binding.node
Download complete..] - :
Binary saved to C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\dmorita\AppData\Roaming\npm-cache\node-sass\4.11.0\win32-x64-64_binding.node

> electron@2.0.16 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 5.39 kB (5.39 kB/s)

> node-sass@4.11.0 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> webpack-cli@3.2.0 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\webpack-cli
> opencollective postinstall


     *** Thank you for using webpack-cli! ***

Please consider donating to our open collective
     to help us maintain this package.

  https://opencollective.com/webpack/donate

                    ***


> simple-downloader@0.0.1 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> npm run lint:fix


> simple-downloader@0.0.1 lint:fix C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN karma-webpack@3.0.5 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN simple-downloader@0.0.1 No repository field.
npm WARN simple-downloader@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1930 packages from 2056 contributors and audited 19868 packages in 104.062s
found 6 vulnerabilities (1 low, 5 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
```

```:動かしてみる
> npm run dev

> simple-downloader@0.0.1 dev C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> node .electron-vue/dev-runner.js

         ___                      __
   __   /\_ \       __     ___   /\ \__    _ __    ___     ___              __  __  __  __     __
 / ,.`\ \//\ \    / ,.`\  /'___\ \ \ ,_\  /\` __\ / __`\ /' _ `\   _______ /\ \/\ \/\ \/\ \  / ,.`\
/\  __/   \_\ \_ /\  __/ /\ \__/  \ \ \/  \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\  __/
\ \____\  /\____\\ \____\\ \____\  \ \ \_  \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
 \/____/  \/____/ \/____/ \/____/   \ \__\  \/_/  \/___/  \/_/\/_/           \/__/   \/___/  \/____/
                                     \/__/
  getting ready...

┏ Main Process ---------------

  compiling...

┗ ----------------------------

┏ Renderer Process -----------

  Hash: 4c0d930b09a5bd821bc1
  Version: webpack 4.28.3
  Time: 2893ms
  Built at: 2019-01-06 16:55:38
                  Asset       Size    Chunks             Chunk Names
  imgs/logo--assets.png   60.4 KiB            [emitted]
             index.html  455 bytes            [emitted]
            renderer.js   1.16 MiB  renderer  [emitted]  renderer
  Entrypoint renderer = renderer.js
  [0] multi ./.electron-vue/dev-client ./src/renderer/main.js 40 bytes {renderer} [built]
  [./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/vue-hot-reload-api/dist/index.js] 6.13 KiB {renderer} [built]
  [./node_modules/vue-loader/lib/runtime/componentNormalizer.js] 2.63 KiB {renderer} [built]
  [./node_modules/vue/dist/vue.esm.js] 290 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.59 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.26 KiB {renderer} [built]
  [./src/renderer/App.vue] 1.13 KiB {renderer} [built]
  [./src/renderer/main.js] 382 bytes {renderer} [built]
  [./src/renderer/router/index.js] 264 bytes {renderer} [built]
  [./src/renderer/store/index.js] 342 bytes {renderer} [built]
  [axios] external "axios" 42 bytes {renderer} [built]
  [vue-electron] external "vue-electron" 42 bytes {renderer} [built]
      + 43 hidden modules
  Child html-webpack-plugin for "index.html":
           Asset      Size  Chunks  Chunk Names
      index.html  1.38 MiB       0
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.15 KiB {0} [built]
      [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

  Hash: 1d2af0f0b3c42299b467
  Version: webpack 4.28.3
  Time: 3612ms
  Built at: 2019-01-06 16:55:38
    Asset     Size  Chunks             Chunk Names
  main.js  211 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/cross-unzip/index.js] 1.49 KiB {main} [built]
  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
  [./node_modules/electron-debug/index.js] 2.46 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
  [./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
  [./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
  [./node_modules/semver/semver.js] 37.1 KiB {main} [built]
  [./src/main/index.dev.js] 364 bytes {main} [built]
  [./src/main/index.js] 801 bytes {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [fs] external "fs" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
      + 33 hidden modules

  WARNING in ./node_modules/electron-debug/index.js 81:45-58
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

  WARNING in ./node_modules/electron-debug/index.js 84:85-106
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

  Debugger listening
┗ ----------------------------

┏ Electron -------------------

   on ws://127.0.0.1:5858/14b8481a-3e79-4bbc-b8a1-e76ce223d548
  For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------
```
**なんかでた。**
![](https://qiita-image-store.s3.amazonaws.com/0/57293/496dddc2-593a-ae99-ac2c-8864e67e42c6.png)

#VSCode設定
一瞬満足しかけましたが、VSCodeで良い感じにDebugできるようになるまでが準備です。
下記を参考に、Build用のtasks.jsonと、Buildと起動を行うlaunch.jsonを設定しました。
- **[Debug Electron App with VS Code](https://blog.matsu.io/debug-electron-vscode)**
- **[VSCode用のElectron+TypeScript+Vue+Webpackの開発・デバッグ環境のたたき台を作った](https://qiita.com/rog-works/items/b521be5fe449dc4fca6a)**

Shift+Ctrl+Bで```tasks.json```のBuildとCleanを作ることができました。実行してみるとdistやbuildフォルダ内になんかできるので、これで良さそうです。

```json:tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [{
            "label": "build",
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        },
        {
            "label": "clean",
            "type": "npm",
            "script": "build:clean",
            "problemMatcher": []
        }
    ]
}
```

RenderとMainのそれぞれのプロセスに対してデバッガを動かすみたいですね。どう違うかはそのうちわかるでしょう。

```json:launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "Electron Main Process",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "cwd": "${workspaceRoot}",
            "program": "${workspaceFolder}/dist/electron/main.js",
            "protocol": "inspector",
            "preLaunchTask": "build"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Electron Renderer Process",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "runtimeArgs": [
                "${workspaceFolder}/dist/electron/main.js",
                "--remote-debugging-port=9222"
            ],
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceFolder}/*"
            }
        }
    ]
}
```

これでとりあえず始められるようにはなりましたが、正直なところelectron-vueの情報量が多くて、何から始めるのかわかりません。
Electronのみで始めた方がよかったかもしれないと後悔しつつあります。
次回：**[年末年始Webアプリ開発自習の記録7][Next]**

[Plan]:https://qiita.com/dmorita/items/7a85ee9c2de506c27502
[Prev]:https://qiita.com/dmorita/items/fe4b09e5040d43a40fb9
[Next]:https://qiita.com/dmorita/items/66e179d38c0cf2c24abd