
新しく用意したWidows11の環境で、Nodeのアプリを実行しようと`yarn install`を実行したら以下のようなエラーが出た。

`Error: Could not find any Visual Studio installation to use at VisualStudioFinder.fail`

これの前にPythonがないよってエラーが出たので、そちらはPythonをインストーラーからインストールしたことで解決している。
このエラーはメモし忘れた。

Pythonをインストールしたら、以下のエラーが出た。

```bash
warning " > vue-jest@3.0.7" has unmet peer dependency "vue@^2.x".
warning " > vue-jest@3.0.7" has unmet peer dependency "vue-template-compiler@^2.x".       
[4/4] Building fresh packages...
[1/6] ⠠ node-sass
[-/6] ⠠ waiting...
[-/6] ⠠ waiting...
[4/6] ⠠ deasync
error C:\git\suzu6\myblog\node_modules\deasync: Command failed.
Exit code: 1
Command: node ./build.js
Arguments:
Directory: C:\git\suzu6\myblog\node_modules\deasync
Output:
C:\git\suzu6\myblog\node_modules\deasync>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp info it worked if it ends with ok
gyp info using node-gyp@8.2.0
gyp info using node@16.13.0 | win32 | x64
gyp info find Python using Python version 3.10.0 found at "C:\Users\81905\AppData\Local\Programs\Python\Python310\python.exe"
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack     at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! System Windows_NT 10.0.22000
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\git\suzu6\myblog\node_modules\deasync
gyp ERR! node -v v16.13.0
```

## node-gypのエラーとWindowsでのセットアップ方法

https://github.com/nodejs/node-gyp#on-windows

エラー内の上のリンクに詳細とMac, Unix, Windowsでの解決方法がある。

…ただ、残念ながら上記のリンクでは解決しなかった。

https://github.com/Microsoft/nodejs-guidelines/blob/master/windows-environment.md#compiling-native-addon-modules

こっちのVisual Studio 2017のビルドツールとPython2.7を利用する方法で進めてやっとできた。3時間くらいかかって中々つらい。

以下はうまくいった方の手順を説明する。

### node-gypとは
node-gypについてgoogle翻訳すると、
> node-gypはNode.jsのネイティブアドオンモジュールをコンパイルするためにNode.jsで記述されたクロスプラットフォームのコマンドラインツールです。
> 
> 特徴
> - 同じビルドコマンドは、サポートされているプラ​​ットフォームのいずれでも機能します
> - Node.jsのさまざまなバージョンのターゲティングをサポートします

とのことです。

```bash
npm install -g node-gyp
```
node-gypのインストールはこれで、私が利用したパッケージのどこかで利用していたのだと思う。

## エラーの解決とWindowsでのセットアップ方法 

Mac, Unixも解決方法があるが、Windowsについてだけ書く。


1. Python2.7をインストールしてnpm configに設定する
2. Visual Studio 2017の"Desktop development with C++"をインストールする
3. コマンドプロンプトで `npm config set msvs_version 2017`を実行する。

### 1. Python2.7をインストールしてnpm configに設定する

https://www.python.org/downloads/release/python-2715/

からPython2.7をインストールする。
インストーラーは「Windows x86-64 MSI installer」を利用した。

`npm config set python python2.7`でnpmでPyhton2.7を利用することを設定します。

```bash
>npm config set python python2.7

>npm config get python python2.7 
python=python2.7
python2.7=undefined
```

最新の`3.10`をインストールした場合はエラーが解決しなかった。謎。

### Visual Studioビルドツールをインストールする

Visual Studioの**Desktop development with C++**をインストールします。

最新の`2022`をインストールしたがエラーを解決できなかった。
**Build Tools for Visual Studio 2017**をインストールしました。

https://visualstudio.microsoft.com/ja/vs/older-downloads/#visual-studio-2017-and-other-products

![picture 1](/images/posts/334-yarn-error-node-gyp/1636876617146.png)  

何故かサインインすると別のページに連れていかれる。
戻ってもう一度ダウンロードボタンから次のページへ行ける。

![picture 2](/images/posts/334-yarn-error-node-gyp/1636876789776.png)  

vs_BuildTools.exe をダウンロードして実行する。

![picture 3](/images/posts/334-yarn-error-node-gyp/1636876899526.png)  

**Visual C++ Bild Tools**をチェックしてインストールする。

### 3. コマンドプロンプトで `npm config set msvs_version 2017`を実行する。

**Build Tools for Visual Studio 2017**をインストールしたのでバージョンは`2017`とする。



```bash
>npm config set msvs_version 2017

>npm config get msvs_version
2017
```

OK

PCを再起動する。

## yarn installを実行する

ビルド通ったぜ！

yarn installしたらnode-gnp ERRとError Could not find any Visual Studio installation to use at VisualStudioFinder.failが出た【Windows11】


 PowerShellでglobalでインストールしたyarnを実行する方法です。

Windows 11 (Windows 10も同様)のPowerShellで`npm install -g yarn`を実行すると
`このシステムではスクリプトの実行が無効になっているため、ファイルC:\Users\81905\AppData\Roaming\npm\yarn.ps1 を読み込むことができません。`とでる。

## 環境

- Windows 11
- Node v16.13.0
- npm 8.1.0
- インストールできた yarn : 1.22.17

## yarnのインストール方法

https://yarnpkg.com/getting-started/install

公式の手順通り進める。

posershellでnpmのglobalにインストールする。
```bash
> npm install -g yarn
```

yarnを実行すると次のエラーが出る。

```bash
PS C:\Users\81905> yarn -v
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\81905\AppData\Roaming\npm\yarn.ps1 を
読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170)
を参照してください。
発生場所 行:1 文字:1
+ yarn -v
+ ~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

![picture 3](/images/posts/333-setup-windows11-develop-environment/1636728518606.png)  

### 解決方法

こちらの記事を参考にスクリプトの実行ポリシーを変更する。

参考: https://labor.ewigleere.net/2020/06/04/yarn-powershell/

ポリシーを確認する。
```bash
PS C:\Users\81905> Get-ExecutionPolicy
Restricted
```
制限されてました。


スクリプトを実行できる`RemoteSigned`のポリシーに変更します。
```
# 管理者権限でPowerShellを実行する
PS C:\Users\81905> Set-ExecutionPolicy RemoteSigned
PS C:\Users\81905> Get-ExecutionPolicy
RemoteSigned
```

ポリシーを変えてから実行する。
```
PS C:\Users\81905> yarn -v
1.22.17
# OK!!
```

PowerShell の実行ポリシー についてはこちらを見てください。

[PowerShell - 実行ポリシーについて - Microsoft Docs](https://docs.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2)

> ## RemoteSigned
> - Windows server コンピューターの既定の実行ポリシー。
> - スクリプトを実行できます。
> - では、電子メールやインスタントメッセージングプログラムを含む、インターネットからダウンロードされるスクリプトと構成ファイルに対する信頼された発行元からのデジタル署名が必要です。
> - では、ローカルコンピューター上に記述され、インターネットからダウンロードされないスクリプトに対してデジタル署名は必要ありません。
> - コマンドレットなどを使用して、スクリプトのブロックが解除された場合に、インターネットからダウンロードされ、署名されていないスクリプトを実行し Unblock-File ます。
> - インターネット以外のソースからの署名されていないスクリプトや、悪意のあると考えられる署名済みスクリプトを実行するリスク。


> ## Restricted
> - Windows クライアントコンピューターの既定の実行ポリシー。
> - 個々のコマンドを許可しますが、スクリプトは許可しません。
> - 書式設定ファイル、構成ファイル () .ps1xml 、モジュールスクリプトファイル ()、PowerShell プロファイル () など、すべてのスクリプトファイルの実行を禁止 .psm1 .ps1 します。 

PowerShellでglobalでインストールしたyarnを実行する方法と、スクリプトの実行が無効になっているってエラーの解決方法



とうとうWindows 11を手に入れたのでWEBシステムの開発環境をセットアップしていく。
開発に必要なアプリのリンクを貼ってます。

個人的に必要な項目を列挙していくので偏ってます。

随時更新する。

## Contents

## Windows 11全般の設定

### 不要なスタートアップアプリをオフにする

![picture 8](/images/posts/333-setup-windows11-develop-environment/1636879946413.png)

要らないものをオフにしておく。

### スクリーンショットをSnipping Toolに変更する

prtscrボタンで画面領域を切り取ることができるようにしていきます。

Snipping Toolを起動して設定を変更する。
![picture 4](/images/posts/333-setup-windows11-develop-environment/1636879489270.png)

![picture 5](/images/posts/333-setup-windows11-develop-environment/1636879563663.png)

![picture 6](/images/posts/333-setup-windows11-develop-environment/1636879583120.png)

プリントスクリーンのショートカットを設定で変更する。

![picture 7](/images/posts/333-setup-windows11-develop-environment/1636879708129.png)

**プリントスクリーンボタンを使用して画面切り取りを開く**をチェックする。

prtscrボタンで画面領域を切り取ることができるようになる。

### ファイルの拡張子を表示する

エクスプローラーのファイル拡張子を表示するようにする。
![picture 4](/images/posts/333-setup-windows11-develop-environment/1636727024853.png)

### 隠しファイルを表示する

エクスプローラーの隠しファイルを表示するようにする。
![picture 5](/images/posts/333-setup-windows11-develop-environment/1636727086953.png)

### エクスプローラーの右クリックをもとのメニューに戻す

エクスプローラーでファイルを右クリックして開くメニューが変わっている。
変わるのはいいけど、「VSCodeで開く」のように拡張したコマンドの利用に手間が増えてしまった。

例）フォルダをVSCodeで開くためには・・・

一旦メニューを開いてから「その他のオプション」を選択するとWindows10のメニューが出るのでそこから選ぶ。

![picture 11](/images/posts/333-setup-windows11-develop-environment/1636895823543.png)

これをWindows10の仕様に戻すにはレジストリをいじる必要がある。

1. コマンドプロンプトを管理者権限で開く
2. 次のコマンドをコピペして実行する

```
reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve
```

[Windows11で右クリックのメニューをWindows10の仕様に戻す方法](https://www.suzu6.net/posts/336-windows11-right-click-menue)

## アプリのインストール

## Git

<https://git-scm.com/>

設定はすべてデフォルトにしてあるが問題ない。

## GitHub Desktop

<https://desktop.github.com/>

### Visual Studio Code

<https://azure.microsoft.com/ja-jp/products/visual-studio-code/>

気に入っている拡張機能
-

この他の好きな拡張機能はまた別の機会に紹介する。

### Python

<https://www.python.org/downloads/>

Add Python 3.10 to PATHにチェックしてInstall Now

Disable path lenght limit

![picture 1](/images/posts/333-setup-windows11-develop-environment/1636729543058.png)

### Node.js

<https://nodejs.org/en/download/>

デフォルトでインストールする。

### yarn

<https://yarnpkg.com/getting-started/install>

posershellでnpmのglobalにインストールする。

```bash
> npm install -g yarn
```

```bash
PS C:\Users\81905> yarn -v
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\81905\AppData\Roaming\npm\yarn.ps1 を
読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170)
を参照してください。
発生場所 行:1 文字:1
+ yarn -v
+ ~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

![picture 3](/images/posts/333-setup-windows11-develop-environment/1636728518606.png)

参考: <https://labor.ewigleere.net/2020/06/04/yarn-powershell/>

```bash
PS C:\Users\81905> Get-ExecutionPolicy
Restricted

# 管理者で実行する
PS C:\Users\81905> Set-ExecutionPolicy RemoteSigned
PS C:\Users\81905> Get-ExecutionPolicy
RemoteSigned

PS C:\Users\81905> yarn -v
1.22.17
# OK!!
```

#### node-gyp

もしnpmかyarnで次のようなエラーが出たら参考にしてほしい。

[yarn installしたらnode-gnp ERRとError Could not find any Visual Studio installation to use at VisualStudioFinder.failが出た【Windows11】](https://suzu6.net/posts/334-yarn-error-node-gyp)

## Dockerをインストールする

WindowsでのDocker環境の構築方法は次の記事にまとめました。

[WSL2とDocker Desktop on WindowsでDocker環境を構築する](https://www.suzu6.net/posts/337-windows11-docker-desktop-wsl2)

## その他

### エクスプローラーでSVGのサムネイルを表示する

前にWindows10向けに[エクスプローラーでSVGのサムネイルを表示する方法【Windows10】 - suzu6.net](https://www.suzu6.net/posts/248-svg-explorer-extension/)を書いた。
これがWindows 11でも問題なく動作します。

![picture 1](/images/posts/333-setup-windows11-develop-environment/1636727902915.png)

<https://github.com/tibold/svg-explorer-extension/releases>

svg_see_x64.exeをダウンロードしてインストールする。

![picture 2](/images/posts/333-setup-windows11-develop-environment/1636727993971.png)

Windows11でも問題なくSVGのサムネイルを表示できた。


Windows11でWEBシステムの開発環境に必要なセットアップを列挙していく


Electron で製作するアプリのウィンドウを最大化/最小化を制限する方法がいくつかあるのでまとめておく。

２つの最大化/最小化を制限する方法がある。

1. BrowserWindow のオプションで無効化する方法
2. BrowserWindow の最大化/最小化のイベントを検知して処理する方法
3. ショートカットキーを検知して処理する方法

最大化/最小化を無効にするだけであれば 1 が簡潔で良い。
最大化/最小化とともに何か実行したり、最小化する処理を閉じる処理に変更するなど特殊な状況では 2 を利用する。

## 1. BrowserWindow のオプションで無効化する方法

BrowserWindow のオプションの**maximizable**と**minimizable**を`false`として無効化する。

https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions

```js
let mainWindow = new BrowserWindow({
  // 最大化を無効
  maximizable: false,
  // 最小化を無効
  minimizable: false,
})
```

メニューバーの最大化と最小化のアイコンが disable になる。
ただし、Linux では未実装であるため機能しない。

ショートカットキーの`ctrl`+`M`（最小化）や`F11`（最大化）は無効にならなかった。

## 2. BrowserWindow の最大化/最小化のイベントを検知して処理する方法

BrowserWindow では各種操作のイベントに応じた処理ができるようになっている。

https://www.electronjs.org/docs/latest/api/browser-window#event-minimize

onclick イベントのように、`mainWindow.on('someEvent', function(event){})`と書ける。

例えば、最小化する際に何かしら処理をすることは以下のように書ける。

```js
// 最小化するときに処理を行う。
mainWindow.on('minimize', function (event) {
  someFunction()
})
```

`event.preventDefault();`はそのイベントの処理を停止する関数。
キャンセルできるイベントが狭く `minimize` と `maximize` はキャンセルできない。（`close`はキャンセルできる）

最小化/最大化の他、細かくイベントが用意されているのでネイティブアプリらしくウィンドウの挙動を操作できるようになっている。

## 3. ショートカットキーを検知して処理する方法

Electron のアプリでショートカットキーを検知できる。

ショートカットキーの`ctrl`+`M`（最小化）と`F11`（最大化）を無効にするには以下のように書く。

```js
import { app, globalShortcut } from 'electron'

app.on('browser-window-focus', function () {
  // 最小化のショートカットキー
  globalShortcut.register('CommandOrControl+M', () => {
    console.log('CommandOrControl+M is pressed: Shortcut Disabled')
  })
  // 最大化のショートカットキー
  globalShortcut.register('F11', () => {
    console.log('F11 is pressed: Shortcut Disabled')
  })
})
```

どうもショートカットキーのイベントを上書きするようで、最小化/最大化が無効になっていた。


Electronの最大化と最小化のイベントを制限する方法


デスクトップアプリを作るならPCの電源周りの動作にも気を配る必要があります。
裏で動いていた非同期なタスクがスリープから起動後に再度実行できるようイベントをハンドリングしていきます。

Electornでは`powerMonitor`というAPIが用意されています。

## powerMonitor

`powerMonitor`は電源の状態の変化をモニターします。

[powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)

### イベント: resume
システムが再開したときのイベントです。

### 利用例

メインプロセスでのみ利用できます。
`app`の`redy`の中で利用します。

▼ TypeScriptでの例。
```ts:main.ts
import { app, powerMonitor } from "electron";
import log from "electron-log";

app.on("ready", async () => {
  log.info("App ready");


  /**
   * システム（PC）が再開したとき
   */
  powerMonitor.on('resume', function () {
    log.info('System resumption');
    // 何らかの処理
  })
});
```

## その他のイベント

公式が充実しているため短い紹介だけします。

- システムの再開と停止: `resume`, `suspend`
- 電源の状態: `on-ac`, `on-battery`
- スクリーンをロックとアンロック: `lock-screen`, `unlock-screen`
- システムが再起動またはシャットダウンするとき: `shutdown`

## 状態を把握するメソッド

- `powerMonitor.getSystemIdleState(idleThreshold)`  
  現在のシステムの状態 `active` 、 `idle` 、 `locked` 、 `unknown`を返す。
- `powerMonitor.getSystemIdleTime()`  
  アイドル状態の秒数を返す
- `powerMonitor.isOnBatteryPower()`  
  システムがバッテリー電源状態かどうか

電源周りはタブレットPCを使った設備点検などのアプリで利用できそうです。

## 参考

- [powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)
- [powerMonitor · Electron docs gitbook - imfly](https://imfly.gitbooks.io/electron-docs-gitbook/content/jp/api/power-monitor.html)

【Electron】PCのスリープと起動イベントを検知する


Node.js (electron)で作成していたアプリでHTTPリクエスト中の処理をキャンセルして再度リクエストなどする必要があったため、Axiosでリクエスト中の処理をキャンセルする実装をしました。

リクエストを出した側からキャンセルすることができます。

## Axios

**Axios**はnode.jsとブラウザのための[promiseベース](https://javascript.info/promise-basics)のHTTPクライアント。

- [Axios - GitHub](https://github.com/axios/axios)
- ドキュメント [axios-http.com](https://axios-http.com/)

キャンセル処理についてはドキュメントの[Cancellation](https://axios-http.com/docs/cancellation)に書いてあります。

## コードサンプルと解説
ドキュメントのコードサンプルです。
```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // キャンセルのトークン
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
```

`CancelToken.source`を利用してキャンセルトークンを作成してリクエストのオプションに設定します。
そして`source.cancel()`でリクエストをキャンセルできる。

`CancelToken.source()`が返す`source`は独立しているので、▼のようにリクエスト別にキャンセルできます。
```js
// キャンセルトークンが独立している
const source1 = CancelToken.source();
const source2 = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source1.token
})
axios.get('/user/12345', {
  cancelToken: source2.token
})
```

## 動かして確認してみる

確認しやすいようにドキュメントのコードサンプルを拡張しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。


```js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const source2 = CancelToken.source();

const start = Date.now();
console.log("start: ", start)

// ①レスポンスがそんなかからないリクエスト
axios.get('http://localhost:3000/', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// ②レスポンスに３秒かかるリクエスト
axios.get('http://localhost:3000/delay', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})


// ③レスポンスに３秒かかるリクエスト（キャンセルしない）
axios.get('http://localhost:3000/delay', {
  cancelToken: source2.token
})
.then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// 1秒後にキャンセルリクエスト
setTimeout(() => {
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
}, 1000);
```
３つのリクエストを用意してキャンセルしています。
-  ①レスポンスがそんなかからないリクエスト
-  ②キャンセルするレスポンスに３秒かかるリクエスト
-  ③キャンセルしないレスポンスに３秒かかるリクエスト

これを実行すると▼のログが出ます。数字はミリ秒です。

```bash
> node .\cancellation.js
start:  1630385223319
71 Hello World!
1021 Request canceled:  Operation canceled by the user.
3081 3 seconds delay
```

- ①はキャンセル前にリクエストが終了しているため正常終了。
- ②は３秒かかる処理の途中でキャンセルが実行されたことがわかる。
- ③はキャンセルしたトークンと別のキャンセルトークンが設定されていたため、キャンセルされず正常終了しました。

### サーバ側のコード
リクエストキャンセルの確認のためのサーバを[Express](https://expressjs.com/ja/)で再現しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// リクエスト返答まで時間がかかるエンドポイント
app.get('/delay', (req, res) => {
  setTimeout(()=>{
    res.send('3 seconds delay');
  }, 3000);
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```

コードサンプルは[Github](https://github.com/suzu6/trial-code/tree/master/JS/delay_server)に登録しています。

axiosでリクエスト中の処理をキャンセルする


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

色々と調べてなんとなく全体を把握できたので、まとめて紹介します。

## 動作確認環境

electron-builderがそれなりに新しければ特に問題はないと思います。

確認しているのはElectron + Vuejsのちょっと特殊な環境です。

- Windows 10 Home
- [vue-cli-plugin-electron-builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/): ~2.0.0-rc.5
  - electronでVueが使えるプラグイン
  - electron-builder: ^21.2.0 -> 22.2.0　に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。
electron-builderの最新も`v22.11.7`ですのでそこまで古いわけではなさそう。

## electron-builderの設定

インストーラの設定は基本的に`package.json`の`build`オプションにelectron-builderの設定を書いていきます。
（vue-cli-plugin-electron-builderの場合はvue.config.jsの`builderOptions`に書く）

▼ 配布用のWindowsアプリを作る場合は大体こんな感じになっていると思います。
コメントを書きたいのでjsoncで書いていますがJSONに読み替えてください。
```json
"build": {
  "appId": "jp.example.myapp",
  "productName": "アプリの名前（日本語OK）",
  "mac": {/* Macの設定 */},
  "dmg": {/* Macの設定 */},
  // Windowsの設定
  "win": {
    "icon": "path/to/icon256.png",
    "target": {
      // Windowsインストーラー
      "target": "nsis",
      "arch": ["x64"]
    },
    // Windowsアプリのコード証明
    "certificateFile": "./path/to/コード証明書.pfx",
    "publisherName": "SUZU6",
    "certificatePassword": "xxxxxxxxx",
    // インストーラのアップ先
    "publish": {
      // https://www.electron.build/configuration/publish#s3options
      "provider": "s3",
      "bucket": "bucket",
      "region": "ap-northeast-1",
      "storageClass": "STANDARD",
      "path": "/installer"
    }
  },
  // インストーラの設定
  "nsis": {
    // https://www.electron.build/configuration/nsis
    // インストーラの名前
    "artifactName": "${productName}_setup_${version}.${ext}",
    // 設定スクリプトのパス
    "include": "build/installer.nsh",
    "oneClick": false,
    "allowToChangeInstallationDirectory": false,
    "createDesktopShortcut": false,
  },
}
```

NSISを使うため`build.win.target.target: nsis`としてください。
そして、`build.nsis`に設定を書いていきます。

## electron-builderのnsisの設定

- https://www.electron.build/configuration/nsis.html
こちらはelectron-builderでのNSISの設定のドキュメントです。

利用したり調べて分かった項目を紹介します。


|key|type|default|discription|
|--|--|--|--|
|`artifactName`|string|`${productName} Setup ${version}.${ext}`|インストーラのファイル名<br>変数については[File Macros](https://www.electron.build/file-patterns#file-macros)を参照|
|`include`|string|`build/installer.nsh`|NSISスクリプトのパス<br>`build/installer.nsh`といったファイルを用意してインストーラを拡張できる。|
|`script`|string|`build/installer.nsi`|NSISスクリプトのパス<br>拡張子が`.nsi`|
|`allowToChange`<br>`Installation`<br>`Directory`<br>長いので分割|boolean|false|ユーザーがインストールディレクトリを変更できるようにするかどうか。|
|`installerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`uninstallerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`installerIcon`|string||
|`oneClick`|boolean|true|ワンクリックインストーラを利用するか。インストーラを拡張しない場合は利用した方が分かりやすいと思う。|
|`createStartMenuShortcut`|boolean|true|スタートメニューのショートカットを作成するかどうか|
|`createDesktopShortcut`|boolean|true|デスクトップにショートカットを作るか|
|`shortcutName`|string|アプリ名|すべてのショートカットの名前|

## ファイル名などで利用できるマクロ

ファイル名などの文字列には[File Macros](https://www.electron.build/file-patterns#file-macros)が使えます。

|key|discription|
|--|--|
|`${arch}`|`ia32`, `x64`|
|`${os}`|ターゲットプラットフォームに応じて`mac`、`linux`または`win`|
|`${platform}`|`darwin`、`linux`または`win32`といった`process.platform`のプロパティ|
|`${name}`|`package.json`の`name`|
|`${productName}`|製品名|
|`${version}`|バージョン|
|`${channel}`|バージョンからプレリリースコンポーネントが検出されました（例 `beta`）|
|`${env.ENV_NAME}`|任意の環境変数|

他に[AppInf](https://www.electron.build/api/electron-builder#AppInfo)oの任意のプロパティが利用できます（例 `buildVersion`、`buildNumber`）。

## NSISスクリプト

インストーラをもっと拡張したい場合はNSISスクリプトで細かく設定できる。

[Custom NSIS script - www.electron.build](https://www.electron.build/configuration/nsis.html#custom-nsis-script)

electronのnsisプロパティの`script`と`include`でスクリプトのファイルパスを渡して読み込むことができます。


インストーラにスタートアップのチェックボタンをつけて、スタートアップに登録させることができたのでそのスクリプトを次の記事で紹介しています。

私は正直いまいち書き方を理解していない。
下のリンクを読んでスタートアップ


### NSISで使える変数

ちょっとしたTips。

NSISスクリプトで適当な変数を書いてビルドするとその変数は定義されていないとエラーが出る。
その際に、定義されている変数が一覧で出てくるので確認しておくと自由度が上がると思う。

ただし、NSISはShift-jisでエラーが出るため日本語は文字化けする。

下記のように出てくる。
```bash
# ビルドに失敗した
ExecError: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\Bin\makensis.exe exited 
with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:
Command line defined: "APP_ID=jp.example.myapp"
Command line defined: "APP_GUID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "UNINSTALL_APP_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "PRODUCT_NAME=�J��@�|@�|�b�v��A�b�v"  # 文字化け
Command line defined: "PRODUCT_FILENAME=�J�C�@�|�b��N�b�v"    # 文字化け
Command line defined: "APP_FILENAME=myapp"
Command line defined: "APP_DESCRIPTION=My electron app"
Command line defined: "VERSION=1.0.0"
Command line defined: "PROJECT_DIR=C:\git\myapp"
Command line defined: "BUILD_RESOURCES_DIR=C:\git\myapp\build"
Command line defined: "APP_PACKAGE_NAME=myapp"
Command line defined: "MUI_ICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "MUI_UNICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "APP_64=C:\git\myapp\dist_electron\myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_NAME=myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_HASH=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Command line defined: "COMPANY_NAME=SUZU6"
Command line defined: "APP_PRODUCT_FILENAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "MULTIUSER_INSTALLMODE_ALLOW_ELEVATION"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "UNINSTALL_DISPLAY_NAME=�J�C�N���@�|�b�v�A�b�v 1.0.0"
Command line defined: "MUI_WELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"     
Command line defined: "MUI_UNWELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"   
Command line defined: "ESTIMATED_SIZE=18823"
Command line defined: "COMPRESS=auto"
Command line defined: "UNINSTALLER_OUT_FILE=C:\git\myapp\dist_electron\__uninstaller-nsis-myapp.exe"    
Processing config: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh    
Processing script file: "<stdin>" (ACP)
warning 6000: unknown variable/constant "APP_NAME.lnk" detected, ignoring (C:\git\myapp\build\installer.nsh:10)

```

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでWindowsアプリのインストーラの設定まとめ


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

インストーラにスタートアップのチェックボタンを付けて、チェックがあればアプリをスタートアップに登録するスクリプトを作りました。

前の記事の[electron-builderとnsisでWindowsアプリのインストーラの設定まとめ - suzu6.net]()にNSISについてまとめました。

## electron-builderの設定
```bash
# Modern UIをインクルードする
!include MUI2.nsh

!ifndef BUILD_UNINSTALLER
  # ②チェックボタンがチェックされた時の関数
  Function AddToStartup
    # ③スタートアップにショートカットを作成
    CreateShortCut "$SMSTARTUP\${PRODUCT_NAME}.lnk" "$INSTDIR\${PRODUCT_NAME}.exe" ""
  FunctionEnd

  # ①インストーラの最終ページにチェックボタンをつける
  !define MUI_FINISHPAGE_SHOWREADME
  !define MUI_FINISHPAGE_SHOWREADME_TEXT "スタートアップに登録する"
  !define MUI_FINISHPAGE_SHOWREADME_FUNCTION AddToStartup
!endif
!macro customUnInstall
  # ④アンインストール時にスタートアップのショートカットを削除する
  Delete "$SMSTARTUP\${PRODUCT_NAME}.lnk"
!macroend
```

処理の説明です。
1. インストーラの最終ページにチェックボタンをつける
   `MUI_FINISHPAGE`がインストーラの最後のfinishがあるページのことです。ここにチェックボタンを付けます。
2. チェックボタンがチェックされた時の関数
   `MUI_FINISHPAGE_SHOWREADME_FUNCTION`で呼び出した関数を定義しています。
3. スタートアップにショートカットを作成
   `CreateShortCut`でショートカットを作成します。`$SMSTARTUP`がスタートアップのフォルダパス、`$INSTDIR`がインストール先のフォルダパスです。
4. アンインストール時にスタートアップのショートカットを削除する


`package.json`の`build.productName`に設定したアプリ名をとることができます。
`build.productName`は`build.name`とは違って日本語でアプリ名を定義できます。

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでインストーラにスタートアップのチェックボタンを付ける


Node.jsからChrome.exeを起動して任意のページを開く方法がわかったので紹介します。

## 動作確認環境

- Windows 10 Home
- Node.js: v14.17.5

MacもChromeのexeのパスを指定して起動できるはずです。

## Chrome.exeを起動して任意のページを開くコード

Windowsで実行できるサンプルコードです。
Chromeのexeのパスは自身の環境に合わせてください。

```js:open_chrome.js
// Chromeのパス
const chromePath = '"C:/Program Files/Google/Chrome/Application/chrome.exe"';
// 開くページのURL
const argument = "https://www.suzu6.net";

const spawn = require("child_process").spawn;
// Windowsの場合はコマンドプロンプトで実行する
const chrome = spawn(chromePath, [argument], { shell: true });

// 実行時の出力
chrome.stdout.on("data", data => {
  console.log(`stdout: ${data}`);
});

// 実行時のエラー出力
chrome.stderr.on("data", data => {
  console.error(`stderr: ${data}`);
});

// プロセスが終了する時の処理
chrome.on("close", code => {
  console.log(`child process exited with code ${code}`);
});

```

スクリプトを実行するとChromeが開きこのサイトが表示されます。
```bash
# Windows
> node .\open_chrome.js
child process exited with code 0
```

`process.platform`でOSを判定してパスを切り替える処理を加えると良い感じになる。
```js
const is_windows = process.platform==='win32'
const is_mac = process.platform==='darwin'
const is_linux = process.platform==='linux'
```

## Windowsでの注意点

Windowsではパスの記述に癖があります。
- 区切り文字は`/`で良いです。
  - バッククォートの場合は`\`ではなく`\\`にする。 
- フォルダ名のスペースに気を付ける。
  - × `'C:/Program Files/Google/Chrome/Application/chrome.exe'` :　C:/Programとそれ以降で分かれる
  - × `'C:/"Program Files"/Google/Chrome/Application/chrome.exe'` : スペースがうまく処理できずに不要なタブが開いてしまう ![picture 1](/images/posts/312-node-run-chrome-exe/20210825T175539.png)  
  - 〇 `'"C:/Program Files/Google/Chrome/Application/chrome.exe"'`


以上

Node.jsでChrome.exeを起動してページを開く方法


WindowsのNodejsをアップデートしました。

手順は [nodejs.org](https://nodejs.org/ja/)　から変更したいバージョンのインストーラーをダウンロードしてインストールするだけです。

または、Windwosパッケージマネジメントの[chocolatey](https://community.chocolatey.org/)を使う方法もあります。
`choco install node`や`choco upgrade node`だけで管理が出来ます。
Chocolateyの導入方法はこちら。

[WindowsのパッケージマネジメントツールのChocolateyをインストールする](https://www.suzu6.net/posts/297-chocolatey-windows)

## Contents

## Windwosではnが使えない

はじめ、Nodeのバージョン管理ツールの`n`でアップデートしようとしたらエラーがでた。

```bash:PowerShell
> npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@7.2.1: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\suzu6\AppData\Roaming\npm-cache\_logs\2021-04-23T15_22_56_344Z-debug.log
```

リポジトリに注意書きがありました。
> (Note: n is not supported natively on Windows.)
> 訳 (nはWindowsではネイティブにサポートされていません。)
> [tj/n: Node version management - GitHub](https://github.com/tj/n)

正直、これが言いたいがためにこの記事を書きました。
使えると思ってたのでショックです。
[node.js自体を更新する(Windows環境)](https://sysrigar.com/2019/11/04/node-js%E8%87%AA%E4%BD%93%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%99%E3%82%8Bwindows%E7%92%B0%E5%A2%83/)の記事でも同じようにnでアップデートしようとしてた方がいました。

[Mac](https://www.suzu6.net/posts/81-npm-install-ubuntu/)や[Linux](https://www.suzu6.net/posts/45/)ではnを利用してバージョン管理するのをお勧めします。

## WindowsでNodejsをアップデートする

はじめに書いたように、手順は [nodejs.org](https://nodejs.org/ja/)　から変更したいバージョンのインストーラーをダウンロードしてインストールするだけです。

今回は `v14.15.0` から `v14.16.1` へ更新しました。
(新しいLTS版のv16.0.0が出ていましたが、16.1.0まで見送ります。)

↓ 更新前のNode.jsのバージョン
![app-node](/images/posts/290/295/app-node.png)

```bash:PowerShell
> npm -v
6.14.8
> node -v
v14.15.0
```

また、グローバルにインストールしていたパッケージもそのまま利用できます(パッケージによってはNodeのバージョン違いによる不具合があるかもしれません)。
以下のコマンドで確認できます。

インストール済のnpmのグローバルのパッケージを確認する。

```bash
npm ls -g
```

### インストーラーをダウンロードする

[https://nodejs.org/ja/](https://nodejs.org/ja/)　から変更したいバージョンのインストーラーをダウンロードします。

![node](/images/posts/290/295/8.png)

Windows (x64)の`v14.16.1`をダウンロードしました。
ダウンロードしたインストーラーを起動します。

### Node.jsをインストールする

インストールと同じようにインストーラーを進めるだけで新しいバージョンへアップデート出来ます。
![node](/images/posts/290/295/9.png)

![node](/images/posts/290/295/10.png)

![node](/images/posts/290/295/11.png)

↓ パスなどの設定は特別変えてない限りそのままで大丈夫です。
![node](/images/posts/290/295/12.png)

↓ Windwosパッケージマネジメントの[chocolatey](https://community.chocolatey.org/)を勧めています。チェックはどちらもよい。
![node](/images/posts/290/295/13.png)

↓インストール開始。
![node](/images/posts/290/295/14.png)

![node](/images/posts/290/295/15.png)

![node](/images/posts/290/295/16.png)

以上でアップデートが完了です。

```bash
# アップデート前
> npm -v
6.14.8
> node -v
v14.15.0

↓

# アップデート後
> node -v
v14.16.1
> npm -v
6.14.12
```


WindowsのNodejsをアップデートする


Nuxt.jsで静的サイトを作成する処理を実行したら、計算途中でメモリが不足してエラーとなり止まってしまった。
ヒープ領域を確保して処理を通します。

参考： https://qiita.com/nakamto/items/8ed18f9f0d980fd70be1

## 環境

- CentOS Linux 7
- node v14.15.3
- yarn 1.22.10

## エラー

```bash
$ yarn generate

(省略)


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [/usr/local/bin/node]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0xb7860e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0xb78987 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0xd33215  [/usr/local/bin/node]
 6: 0xd33d9f  [/usr/local/bin/node]
 7: 0xd41e2b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0xd459ec v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0xd0b2f2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0xd05174 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawWithImmortalMap(int, v8::internal::AllocationType, v8::internal::Map, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0xd074c1 v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
12: 0x1097b49 v8::internal::Runtime_StringBuilderConcat(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1400039  [/usr/local/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 解決方法

処理を実行する前に`NODE_OPTIONS`の`max-old-space-size`を設定します。

```bash
$ export NODE_OPTIONS="--max-old-space-size=2048"
```

数値の単位はメガバイトです。
2048MBは2GBです。

V8ヒープの使用量がヒープ制限に近づいたとき、V8ヒープスナップショットをディスクに書き込み領域を確保します。

NODE_OPTIONSについて: 
https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes


【Node.js】yarn generateでヒープ領域が不足してエラーになったのでヒープ領域の設定を変更して処理を実行した


Windows版のNode.jsと同梱のnpmをインストールしていきます。

## 環境

- Windows 10 Home x64
  - バージョン 1909
- Node.js 12.18.3
- npm 6.14.6

## Node.jsをインストールする

1.まずは[こちら](https://nodejs.org/ja/download/)でLTS版をダウンロードします。

![download](/images/posts/240/249/node-download.png)

Chromeだと32bitか64bitかを勝手に判断してあったものをダウンロードしてくれます。

2.インストーラーを開いて進めます  
3."Next"をクリック

![download](/images/posts/240/249/2020-08-16-4.png)

4.ライセンスに同意する。

![download](/images/posts/240/249/2020-08-16-5.png)

5.インストールするパスを選択する。

![download](/images/posts/240/249/2020-08-16-6.png)

6.設定を選びます。

![download](/images/posts/240/249/2020-08-16-8.png)

デフォルトで問題なく、環境変数にNode.jsとnpmを追加などしてくれます。

7.Node.jsのインストールにはPythonとVisual Studio Build Toolsといったモジュールが必要です。
パッケージマネージャのChocolateryをインストールする場合はチェックします。  

![download](/images/posts/240/249/2020-08-16-9.png)

8."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-10.png)

9."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-11.png)

10.コマンドプロンプトでインストールスクリプトが立ち上がります。

![download](/images/posts/240/249/2020-08-16-12.png)

11.PowerShellが立ち上がり必要なモジュールがインストール/アップデートがされました。

![download](/images/posts/240/249/2020-08-16-13.png)

コマンドプロンプトかPowerShellを開いてインストールできたことを確認します。

```
C:\Users\ysuzu>node -v
v12.18.3

C:\Users\ysuzu>npm -v
6.14.6
```

Windows10 HomeにNode.jsとnpmをインストールする


Node.jsの`Express`で立てたサーバでjsonのリクエストを受け取る方法についてです。

環境構築と簡単な動作確認については[公式](https://expressjs.com/)か
[【Nodejs】さくっとjsonを返すローカルサーバを立てる](https://www.suzu6.net/posts/182-express-json-responce/)
をご参照ください。

## 環境

**モジュール**

- Express 4.17
- body-parcer 1.19

**開発環境**

- Node.js 10.15
- npm 6.4
- yarn 1.15
- Windows 10 Home (Mac, Linux可)

### [body-parcer](https://github.com/expressjs/body-parser)

Express単体でリクエストボディを取得しようとすると`undefined`となります。

```js
app.post("/user", (req, res, next) => {
    // bodyを表示
    condole.log(req.body) // undefined
});
```

そのため、ボディを変換するミドルウェアの[body-parcer](https://github.com/expressjs/body-parser)を使って変換が必要です。
インストールと利用方法は以下です。

```sh
# インストール
$ npm install body-parser
# or
$ yarn add body-parser
```

```js
const express = require('express')
var bodyParser = require('body-parser');
const app = express()

// リクエストボディをjsonに変換する
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
```

これで`req.body`でリクエストボディのJSONを取り扱えます。

## コード例

例としてユーザを作成するエンドポイントを考えます。
ユーザ情報のjsonをPOSTで受け取ります。


```js
const express = require('express')
var bodyParser = require('body-parser');
const app = express()
const port = 3000

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post("/user", (req, res, next) => {
    // アクセスログ
    console.log(req.method, req.url, req.ip)

    // headerを表示
    console.log(req.headers)

    // bodyを表示
    console.log(req.body)

    // 登録処理など...

    res.send('OK')
});

// ポート3000でサーバ起動
app.listen(port, () => console.log(`click http://localhost:${port}/ !`))
```

これに`{ name: 'Alice', age: 20 }`をリクエストすると以下のコンソールログです。JSONのキーも`req.body.name`、`req.body.age`と簡単に得られます。

```sh
>node file_list.js
click http://localhost:3000/ !
POST /user ::ffff:127.0.0.1
{ host: 'localhost:3000',
  'content-type': 'application/json',
  'content-length': '37' }
{ name: 'Alice', age: 20 }
```
## 参考

- [Express 4でPOSTされたJSONを扱う - Qiita](https://qiita.com/mas0061/items/f6cb22db1a7ec121fd81)

参考と言いつつコアな部分はこの記事と同じになってます。すみません。

【Nodejs】Expressでjsonのリクエストを受け取る


リクエストを投げる方は色々と簡単にできるツールが色々とあるが、受ける方はあまりない。
とりあえずnpmの`express`を使ってサクッとjsonを返すローカルサーバを立てる。

説明は少なめです。

## 実行環境

- Express 4.16
- Node.js 10.15
- npm 6.4
- Windows 10 Home (Mac, Linux可)

### Node.js/npmのインストール

npmとNode.jsインストール済みの方は飛ばしてください。

（2019年07月現在）Node.jsのバージョンは10.xが推奨されています。
OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

- Windows : [こちら](https://nodejs.org/ja/)のインストーラ（推奨版）を使う。
- Linux
  - Ubuntu : [Ubuntuはaptを使う方法](https://www.suzu6.net/posts/81-npm-install-ubuntu)。
  - CentOS : [リンク](https://qiita.com/daskepon/items/16a77868d38f8e585840)先のコマンドを`8.x`から`10.x`に変更してインストールできます。
- Mac : [Homebrewを使う方法](https://www.suzu6.net/posts/45/)

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。

```sh
> node -v
v10.15.1

> npm -v
6.4.1
```

インストールして上記のコマンドが打てることを確認してください。

## ローカルサーバの準備

### プロジェクトの作成とexpressのインストール

任意のディレクトリに行ってnpmのプロジェクトを作成します。

```sh
> cd path/to/dir
# npmのプロジェクトを作成
> npm init
```

`npm init`で色々と聞かれるが`Enter`を連打。
これでプロジェクトができる。

```sh
# expressをインストール
> npm i express
```

これでインストール終わり。

### GETでJSONを返す最小構成

続いて、`index.json`を作る。下のをコピーして張り付ける。

```js
const express = require('express')
const app = express()
const port = 3000

// http://localhost:3000/ でresponce.jsonの中身を返す。
app.get("/", (req, res, next) => {
    // アクセスログ
    console.log(req.method, req.url) 
    // jsonを返す
    res.json(require('./responce.json'))
});

// ポート3000でサーバ起動
app.listen(port, () => console.log(`click http://localhost:${port}/ !`))
```

続いて、jsonファイルをプロジェクトのディレクトリ置く。
名前は`responce.json`としておく。

```json
{
    "msg":"Hello World!"
}
```

現在のディレクトリはこんな感じ。

```sh
.
├── index.js          # サーバの実行ファイル
├── node_modules      # expressに必要なモジュール
├── package-lock.json # バージョン固定用のファイル
├── package.json      # プロジェクトファイル
└── responce.json     # 返すjson
```

これで準備OK。

## サーバ起動

あとはサーバを起動するだけです。

```sh
# サーバ起動
> node index.js
click http://localhost:3000 !
```

[http://localhost:3000/](http://localhost:3000/)をブラウザで開けばjsonの内容が返ってきます。

**ただし、jsonの内容を書き換えた場合はサーバの再起動が必要です。**`Ctrl`+`C` -> `node index.js`

![get](/images/posts/180/182/get.png)

### 他のURLには？

`app.[メソッド]`を追加して他のパスやHTTPメソッドにも対応できます。

```js
// GET /user 
app.get("/user", (req, res, next) => {
    console.log(req.method, req.url)
    res.json(require('./user_get.json'))
});

// POST /user
app.post("/user", (req, res, next) => {
    console.log(req.method, req.url)
    res.json(require('./user_post.json'))
});
```

## おまけ

- [Advanced REST Client](https://install.advancedrestclient.com/install)

直感的に使いやすいHTTPリクエストを投げるツールです。

- [REST Client - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

VSCodeの拡張機能です。

【Nodejs】さくっとjsonを返すローカルサーバを立てる


Node.jsでも簡単にWEBアプリを作れますが、
WEBフレームワークのExpressを使うとより柔軟で簡潔なコードを書くことができます。

APIのテストのために使ってみてその使い勝手の良さに感動しました。
JavaScriptで書けるため、JSONが扱いやすいのも良いですね。

Node.jsの利用者も同時に広めたいのでインストール方法から概要と簡単な例を紹介します。
以下の内容は基本的に[公式](http://expressjs.com/ja/)を初心者向けに補足をする形です。

## 実行環境

- Express 4.16
- Node.js 10.15
- npm 6.4
- Windows 10 Home

開発はWindowsで行いますが、Nodeとnpmが入っていればMacやLinuxでも問題ありません。

## Node.js/npmのインストール

（2019年05月現在）Node.jsのバージョンは10.xが推奨されています。
OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

- Windows : [こちら](https://nodejs.org/ja/)のインストーラ（推奨版）を使う。
- Linux
  - Ubuntu : [Ubuntuはaptを使う方法](https://www.suzu6.net/posts/81-npm-install-ubuntu)。
  - CentOS : [リンク](https://qiita.com/daskepon/items/16a77868d38f8e585840)先のコマンドを`8.x`から`10.x`に変更してインストールできます。
- Mac : [Homebrewを使う方法](https://www.suzu6.net/posts/45/)

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。

```sh
> node -v
v10.15.1

> npm -v
6.4.1
```

インストールして上記のコマンドが打てることを確認してください。

## Express

- [https://expressjs.com/](https://expressjs.com/)
- [日本語](http://expressjs.com/ja/)

![home](/images/posts/150/153/express-home.png)

> Fast, unopinionated, minimalist web framework for Node.js  
> Node.jsのための高速で、革新的な、最小限のWebフレームワーク

フロント側のJavaScriptに触れている方は、サーバ側もJavaScriptで書けるため覚えることが少なく直ぐに開発ができます。
そしてなりより、npmの豊富なライブラリも扱えるのでNode.jsとExpressを覚えておいて損はないと思います。

### インストール

下記のコマンドでExpressをインストールできます。

```sh
> npm install express
```

公式のインストールでは`--save`が付いていますが試す分には必要ありません。

`--save`はpackage.jsonでプロジェクトのモジュール（Expressなど）を管理する際に利用します。
ただ、npm v5からデフォルトで`--save`と同等のことをしてくれるため不要です。

- [npm install時に「--save」オプションはいらない](https://qiita.com/glhfdev/items/c5beda8572aa8c1e6be6)

### Hello World

アプリのディレクトリ（your_app）の配下にサーバのコードを書きます。

**your_app/app.js**

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

僅か数行ですが、これだけで`Hello World!`を返すWEBアプリが出来ました！
コードについては後で解説します。

### サーバ実行

まずは、サーバを実行してみましょう。

```sh
# app.jsのパスへ移動
> cd path/to/your_app

# サーバ実行
> node app.js
Example app listening on port 3000!
```

これで[http://localhost:3000](http://localhost:3000)をブラウザで開くと`Hello World!`の文字が表示できます。

![hw](/images/posts/150/153/hello-world.png)

コードを編集した場合は、Kill（Ctrl + C）してから再度実行します。

## セミコロンの省略について

Node.jsはJavaScriptで書きますが、`;`セミコロンを自動で挿入してくれるため省略できます。
この仕様について議論が色々とありますが、個人的には付けたいです。
よって以下のコードでもセミコロンを付けておきます。

詳しくは [JavaScriptの行末セミコロンは省略すべきか](https://blog.tai2.net/automatic_semilocon_insertion.html)を読んで下さい。

## コードについての解説

コードは5行ですが、分解して説明します。

### インスタンス

```js
const express = require('express')
```

npmでインストールしたモジュール（Expressなど）は`require()`を使ってロードします。

```js
const app = express()
```

続いて`express`のインスタンスを生成します。
以降、`app`にリクエストの処理などを追加します。

### ルーティング

```js
app.METHOD(PATH, HANDLER)
```

URLに処理を紐づけるルーティングをします。

```js
app.get('/', (req, res) => res.send('Hello World!'))
```

上記では`http://localhost:3000/`にGETでアクセスされたら、`Hello World!`を返す処理になります。


`get()`を`post()`や`put()`、`delete()`に変えてメソッド毎に返すこともできます。
`use()`はすべてのメソッドに対して処理を行います。

パラメータの`req`がリクエスト、 `res`がレスポンスです。
`res.send()`で文字列やHTMLのページなど返すことができます。


```js
// /helloに来たPOSTメソッドに対してhelloを返す 
app.post('/hello', (req, res) => res.send('hello'))

// PUT
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});


// コールバック関数を渡す
var collback = function (req, res) {
  res.send('Got Any request method at /book');
}

// useはすべてのメソッドに対して処理を行います。
app.use('/book', collback);

// /add?a=10&b=5 に対して15を返す
app.get('/add', (req, res) => {
    // req.queryでクエリパラメータ取得
    let a = parseInt(req.query.a)
    let b = parseInt(req.query.b)
    // 文字列にして返す
    res.send((a + b).toString())
})
```

第二引数は関数を渡します。
アロー関数ではなく、`function (req, res) {}`の形式でも大丈夫です。


以下にたくさんのサンプルがあります。

- パラメータの渡し方
- URLの正規表現
なども書いてあります。

- [基本的なルーティング](http://expressjs.com/ja/starter/basic-routing.html)
- [ルーティングガイド](http://expressjs.com/ja/guide/routing.html)


### サーバを立ち上げ

```js
app.listen(PORT, HANDLER)
```

```js
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

ポート3000でサーバを立ち上げています。
数値は空いているポートなら80でも8080でも立ち上げることができるため、複数台立ち上げる時はずらして下さい。

ExpressとNode入門｜Node.jsのWEBフレームワークExpressでHello World


yarnはパッケージの依存関係の処理がnpmよりも良いと知ったので、導入してみる。

2021-04-25: インストーラーのダウンロードリンクを変更

`Chocolatey`というパッケージマネジメントツールを使うと
`choco install yarn`だけでインストール出来ます。
Chocolateyの導入方法はこちら。

[WindowsのパッケージマネジメントツールのChocolateyをインストールする](https://www.suzu6.net/posts/297-chocolatey-windows)


## 環境

- Windows10 Home
- Nodejs v10.15.1
- npm v6.4.1

既にNode.jsとnpmはインストール済みです。



- [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)

Node.jsとnpmはこちらを参考にインストールしました。

## yarnのインストール

yarnをWindowsにインストールする手順。

[インストール | Yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)

`Alternatives`の`Click to expand / collapse`を開いて、`Download installer`からとWindowsのインストーラー(.msi)をダウンロードできます。

公式からインストーラーをダウンロードします。
**安定版**を選択して「インストーラをダウンロードする」をクリックしてダウンロードします。

インストーラは変更箇所もなく、Nextやacceptedを選択してインストールできました。

コマンドプロンプトを開いてバージョンを確認します。

```cmd
yarn -v
1.15.2
```

無事確認できました！

インストーラ以外にも、ChocolateyやScoopからでもインストールできます。

## yarnが認識されないとき

```cmd
'yarn' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

コマンドを打って上のエラーが出た場合、コマンドプロンプトを再起動してください。
PCの再起動でもできなくないです。

それでもダメな場合は、Pathが通っていないことが原因です。
再インストールするか、環境変数のPathを通します。

![yarn-path](/images/posts/ONE/125-yarn.png)

`C:\Program Files (x86)\Yarn\bin`

yarnのbinのフォルダのパスを追加してください。

※画像のモザイク処理が汚くて申し訳ない。

Windowsにyarnをインストールする


普段このブログを書くのにNuxtjsというnpmのパッケージを使って書いています。
自宅のPCをLinux MintにしたのでnpmとNode.jsの環境構築をしていきます。

また、`n`というパッケージでNode.jsを管理します。

Macの時はこちらのように環境を構築しました。

- [MacにNode/npmをインストールする手順](https://www.suzu6.net/posts/45/)

## 環境

OSは**Ubuntu**の派生の**Linux Mint**を利用しています。

### Linux Mint
```sh
$ cat /etc/lsb-release
DISTRIB_ID=LinuxMint
DISTRIB_RELEASE=18.3
DISTRIB_CODENAME=sylvia
DISTRIB_DESCRIPTION="Linux Mint 18.3 Sylvia"
```

### Ubuntu
2020/01/29 Ubuntuに乗り換えたので追記

```sh
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.3 LTS"
```

以下の手順もUbuntuでも~~大丈夫だと思われます~~ OKでした。
`Ubuntu 18.04.3 LTS`では1年経っているためバージョンの差異は多少ありますが、手順は同じです。

## npm, Node.jsのインストール

`apt`でインストールしてみます。

```sh
# apt の更新
$ sudo apt upgrade

# npm, Nodejsのインストール
$ sudo apt install npm nodejs
$ npm -v
3.5.2
$ nodejs -v
v4.2.6
```

ふ、ふるい。。。  
Ubuntu 18.04.3 LTSではnpmが同じバージョンでnodejsはv8.10.0でした。

## Nodejsのアップグレード

[こちら](https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28)の方法でアップグレードしていく。
Nodejsのバージョン管理は**n**というパッケージを使っていきます。

> n – Interactively Manage Your Node.js Versions  
> [n](https://www.npmjs.com/package/n)

```sh
$ sudo npm cache clean
$ sudo npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── n@2.1.12

$ sudo n stable
   installed : v11.8.0
$ node -v
v11.8.0
```

安定版の最新になりました。

```sh
# Ubuntu 18.04.3 LTS 2020/01/29
$ node -v
v12.14.1

# v8.10.0 -> v12.14.1
```

## nでできること

Node.jsのとあるバージョンのインストールはとてもシンプルです。

```sh
# v0.8.14をインストール
$ sudo n 0.8.14

# インストールしたバージョンの表示
$ n
 ο node/0.8.14
    node/11.8.0

# nodeも変わっている
$ node -v
v0.8.14
```

コマンド`n`の時に上下キーで適用したいバージョンを選ぶことも出来ます。
`nodebrew`もいいけど`n`も便利！！

### コマンド

`n -h`で確認出来ます。
その中からいくつかピックアップして表にしたもの。

|    コマンド     | 説明                                             |
| :-------------: | :----------------------------------------------- |
|    n latest     | 最新版をインストール                             |
| n -a x86 latest | 32bit版の最新版をインストール                    |
|    n stable     | 安定版をインストール                             |
|   n [version]   | バージョンを指定してインストール                 |
| n rm [version]  | 指定バージョンを削除                             |
|      n ls       | 全てのバージョンを表示、インストール済は白色文字 |

## npmをアップデートする

```sh
$ sudo npm update -g npm
$ npm -v
3.5.2
```

変わらない。。。

と思ったら、ターミナルの再起動で新しいバージョンに切り替わりました。

```shnpm
$ npm -v
6.7.0
$ node -v
v11.8.0
```

参考にした手順をなぞっただけでインストール出来ました。
ありがたや。

## 参考

- [とりあえず Ubuntu で新しい Node.js, npm をインストール - Qiita](https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28)

LinuxMint・UbuntuにnpmとNode.jsをインストールする方法

このブログをNetlify + Nuxtへ移行する時、`Google AdSense`も移しました。  
Adsenseの広告ユニットのコードを貼り付けていくと、似たコードが至る所にあり嫌なのでいい方法はないかと調べました。

Nuxtのためのモジュールが見つかったのでその使い方を解説していきます。

## @nuxtjs/google-adsense

[nuxt-community](https://github.com/nuxt-community)からGoogle AdSenseのためのモジュール[google-adsense-module](https://github.com/nuxt-community/google-adsense-module)が提供されているので、それを使います。

ライセンス形態は[MIT License](https://github.com/nuxt-community/google-adsense-module/blob/master/LICENSE)なので大丈夫ですね。

使い方は簡単です。
インストール後に`nuxt.config.js`へ記述して、挿入したいところに`<adsbygoogle/>`を追加するだけです。

以下、[GitHub](https://github.com/nuxt-community/google-adsense-module)を参考に解説していく。
尚、ドメインの取得やGoogle AdSenseへの登録と審査はすでに終えているものとします。

###  install

```sh
npm install --save @nuxtjs/google-adsense
```

`--save`でpackage.jsonに記録している。
このブログはNetlifyを使ってホスティングしているため必須。

## モジュールをnuxt.config.jsに記述する

nuxt.config.js

```js
{
  modules: [
    // Simple usage
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-###########'
    }]
 ]
}
```

`id`にAdSenseのidを記述する。

idはAdSenseのアカウント情報にある`サイト運営者 ID`です。
`####`はpub-から続く数字が入ります。先頭の`ca-`は必ずつけてください。

自動広告はデフォルトでオフになったいるため、使う場合は`pageLevelAds: true`を追加します。

## 広告を挿入する

広告の場所を指定するには、テンプレートの中に`<adsbygoogle/>`を追加します。

また、v-bindを使っていくつかのパラメータを渡せます。

```html
<template>
  
  <adsbygoogle />
  
  <adsbygoogle v-bind:ad-slot="'1234567890'" />
</template>
```

広告ユニットを指定する場合は、`ad-slot`に広告ユニットのIDを渡します。
この時、IDは数値ではなく文字列として渡してあげる必要があります。そのため、'シングルクォーテーション'などで囲ってください。

```html
<template>
  
  <adsbygoogle :ad-slot="'1234567890'" />
  
  <adsbygoogle :ad-slot="1234567890" />
  


  
  <adsbygoogle data-ad-slot="1234567890" />
</template>
```

はじめ`:ad-slot`でエラーが出るため`data-ad-slot="1234567890"`としていましたが、広告が表示されていました。
確証はありませんので、OKの方法を利用してください。

いくつかのpropの抜粋と雑解説。正確には[公式](https://github.com/nuxt-community/google-adsense-module)をみてください。

prop | type | description
:--: | :--: | :--:
ad-slot | String | 広告ユニットのID。文字列として渡す必要がある。
ad-format | String | レスポンシブ広告。デフォルトは'auto'。
ad-style | Object | `<ins>`のスタイルを指定する。デフォルトは{ display: 'block' }
ad-layout | String | レイアウトの設定。'in-article'など。

## おわりに

NuxtでAdSenseを利用する（おそらく）最適解が見つかってスッキリしました。

また、このブログのNetlify + Nuxtの構成もまとめていきたいです。

### 参考

- [google-adsense-module](https://github.com/nuxt-community/google-adsense-module)



#### 書籍

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0567/9784800710567.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >Google AdSense 成功の法則 57</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">染谷昌利 ソーテック社 2014年07月    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4800710561/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Google%20AdSense%20%90%AC%8C%F7%82%CC%96%40%91%A5%2057&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

Nuxtで作ったサイトにnpmでGoogle AdSenseを追加する


Macに**Node**をインストールする手順です。
**homebrew**を使ってインストールと**nodebrew**でnpmのバージョン管理をします。

Linuxでも同様にbrewコマンドを使う手順も載せています。

## できた環境

環境とインストールしたバージョン。

- Mac OS : High Sierra 10.13
- homebrew : 1.9.2
- nodebrew : 1.0.1
- node : v11.6.0
- npm : 6.6.0

2019年1月現在の最新に更新しました。

## homebrew

[homebrew　公式](https://brew.sh/index_ja)

`homebrew`はMacのパッケージマネージャです。  
インストールされていない方は、公式か下記のコマンドからインストールできます。

```sh
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

パスワードを尋ねられた場合は、ご自身のMacのパスワードを入力してください。

確認のコマンド。

```sh
$ brew --version
Homebrew 1.9.2
Homebrew/homebrew-core (git revision beff7; last commit 2019-01-18)
Homebrew/homebrew-cask (git revision 2d5950; last commit 2019-01-18)
```

アップデートする場合のコマンド。

```sh
$ brew update
```

### Linuxbrew

Linuxの方は[Linuxbrew](http://linuxbrew.sh/)を利用します。

以下インストール手順。可能であれば`sudo`での実行が推奨されています。

```sh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
```

続いて、**PATH**と**プロファイル**にbrewコマンドを追加します。
Debian/Ubuntuは`~/.profile`、CentOS/Fedora/RedHatは`~/.bash_profile`に追加します。

```sh
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
```

確認のためhelloをインストールしてみる。

```sh
$ brew install hello
Updating Homebrew...
==> Downloading https://homebrew.bintray.com/bottles/hello-2.10.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring hello-2.10.high_sierra.bottle.tar.gz
🍺  /usr/local/Cellar/hello/2.10: 11 files, 125.2KB
```

## nodebrewをインストール 

Nodeのバージョン管理をするため[nodebrew](https://github.com/hokaccha/nodebrew)をインストールします。

```sh
$ brew install nodebrew
```

バージョンを確認します。
```sh
$ nodebrew -v
nodebrew 1.0.1
```

## Node.jsをインストール

そのままではインストール時にエラーになるため、まずディレクトリ`~/.nodebrew/src`を作ります（※エラーの詳細は記事の最後に載せました)。    
その後、最新のバージョンをインストールします。
```sh
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list
v10.9.0
v11.6.0

current: v10.9.0
```

2019年1月でのnodeの最新バージョン：v11.6.0

インストール済みである場合、`current: v10.9.0`と旧バージョンが適応されていることがわかる。（2018年8月に導入したもの）
新規インストールでは、`current: none`となる。

先ほどインストールしたバージョンを使えるようにします。

```sh
$ nodebrew use v11.6.0
use v11.6.0
```

## node, npmコマンドを設定する。

bashにパスを通して、node, npmコマンドを使えるようにします。
Debian/Ubuntuの場合は`~/.profile`に置き換えてください。

```sh
$ ls $HOME/.nodebrew/current/bin
node            nodebrew        npm             npx
$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
$ vi ~/.bash_profile
```

**~/.bash_profile**に以下を追記。

```sh
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

shell を再起動します。

```sh
$ exec $SHELL -l
```

npmとnodoを確認する。

```sh
$ npm -v
6.6.0
$ node -v
v11.6.0
```

無事インストールされました。

## nodebrewでnodeのバージョンを管理する。

`node`のバージョンを切り替えてみます。

```sh
# 現在インストール済みと利用しているバージョンの確認
$ nodebrew list
v10.9.0
v11.6.0

current: v11.6.0
```

**v8.9.4**をインストールして切り替えてみる。

```sh
# v8.9.4をインストールする
$ nodebrew install v8.9.4

# バージョンの切り替え
$ nodebrew use v8.9.4
use v8.9.4

$ node -v
v8.9.4
$ npm -v
5.6.0
```

簡単に切り替えることができました。
また、インストール済みの中で最新に戻す場合は、latestで指定できます。

```sh
$ nodebrew use latest
use v11.6.0
```

使わないバージョンは削除できます。

```sh
$ nodebrew uninstall v8.9.4
v8.9.4 uninstalled

# ソースファイルも削除する。
$ nodebrew clean v8.9.4
Cleaned v8.9.4

# OK
$ nodebrew list
v10.9.0
v11.6.0

current: v11.6.0
```

### nodebrewのその他のコマンド

`nodebrew help`もしくは、`man nodebrew`で確認して見てください。

```sh
$ nodebrew help
Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>
```

## nodebrew installでのエラー

※ `2018-08`に確認。

**原因**：`~/.nodebrew/src`のディレクトリがないため。  
**対処**：インストール前にディレクトリを作成。`mkdir -p ~/.nodebrew/src`

[参考](https://qiita.com/non0311/items/664cf74d9ff4bad9cf46)からメジャーバージョンが２つ上がっていますが、同じくインストール時にエラーになりました。

```sh
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v10.9.0/node-v10.9.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: {your home path}/.nodebrew/src/v10.9.0/node-v10.9.0-darwin-x64.tar
Warning: .gz: No such file or directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 1057)
download failed: https://nodejs.org/dist/v10.9.0/node-v10.9.0-darwin-x64.tar.gz
```

## おわりに

初めてNode.jsに触る方にはこちらの本をお勧めします。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/5220/9784798055220.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" >Node.js 超入門 第2版</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">掌田津耶乃 秀和システム 2018年08月25日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4798055220/suzu60c-22/" target="_blank" rel="nofollow" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Node.js%20%92%B4%93%FC%96%E5%20%91%E62%94%C5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" rel="nofollow" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

以上、快適なNodeライフを！

## 参考

- [Macでnode.jsをインストール、npmコマンドも使用可にする【2017.8月最新版】 - Qiita](https://qiita.com/non0311/items/664cf74d9ff4bad9cf46)
- [Linuxbrew のススメ - Qiita](https://qiita.com/thermes/items/926b478ff6e3758ecfea)