
仕事で使うので React に入門する。
いつかは React と TypeScript でアプリを作れるようになって設計も考えられるようになるところまで目指すが、今回はチュートリアルだけやりつつメモをするだけの記事。

読まなくていいので[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を進めた方がいい。

## 前提

Vue + TypeScript でアプリを開発した経験はある。
React の方が TypeScript できちんと型を定義して開発できるため相性が良く開発しやすいことを期待している。

## React

https://ja.reactjs.org/

サンプルを見た感じ、コンポーネントをクラスで扱えるのがわかりやすそう。
前に Vue と比較したときは JavaScript の中に HTML がある JSX が変な感じがしたが、慣れたら問題なさそうに思う。

```jsx:jsx
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
)
```

このブログでマークダウンのパーサーとして使ってる [remark](https://github.com/remarkjs/remark#syntax) でも jsx のハイライトが対応していたのは嬉しい。

### React のチュートリアル

https://ja.reactjs.org/tutorial/tutorial.html

React でインタラクティブな三目並べゲーム (tic-tac-toe) を作るチュートリアル。

ブラウザでの実行環境も用意されているが、ローカル開発環境作ることから進めてみる。

作ったものの[リポジトリ github](https://github.com/suzu6/react-typescript-test/tree/main/my-app)

### ローカル開発環境

- node v16.13.0
- npm v8.1.0
- os Windows11
- yarn -v

```bash
npx create-react-app my-app
```

これでアプリの土台を作成して、`my-app/src/*`を削除する。
src/に index.js, index.css を追加。

```bash
> npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\git\suzu6\react-typescript-test\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

略

Success! Created my-app at C:\git\suzu6\react-typescript-test\my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!
```

インストール終わり。
yarn がインストールされていたためか、yarn のコマンドが表示された。

アプリが実行確認と src にあるファイルを削除を進めた。

index.js と index.css の追加も行い実行する。

![picture 1](/images/posts/338-react-typescript/1639287302648.png)

### Developer Tools

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

途中で紹介されていた React Developer Tools を Chrome に追加した。

Developer Tools のメニューに`components`が追加され、React コンポーネントの状態までわかるようになった。これいいね。

![picture 2](/images/posts/338-react-typescript/1639288365306.png)

同じく追加された profiler はまだ使い方がわからない。

### 制作時のメモ

タイムトラベル機能の追加が変更箇所が大きくて迷った。
履歴を残すために state を Board から Game に移す作業で onclick が動かなくなったが、props の onClick か自身のものかで考えて解決した。

### マス目を for 文で書いてみる

チュートリアルが終わったので適当に改造する。

マス目の数を増やせるように Board のレンダーを for 文で表現してみる。

```jsx
render() {
  return (
    <div>
      <div className="board-row">
        {this.renderSquare(0)}
        {this.renderSquare(1)}
        {this.renderSquare(2)}
      </div>
      <div className="board-row">
        {this.renderSquare(3)}
        {this.renderSquare(4)}
        {this.renderSquare(5)}
      </div>
      <div className="board-row">
        {this.renderSquare(6)}
        {this.renderSquare(7)}
        {this.renderSquare(8)}
      </div>
    </div>
  );
}
```

▼ こんな感じで書き換えることができた。

```jsx
render() {
  const [width, height] = [3, 3];
  const rows = [];
  for (let i = 0; i < width; i++) {
    const cells = [];
    for (let j = 0; j < height; j++) {
      cells.push(this.renderSquare(i * 3 + j));
    }
    rows.push(<div className="board-row">{cells}</div>);
  }
  return <div>{rows}</div>;
  );
}
```


Reactに入門するよ


新しく用意した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の最大化と最小化のイベントを制限する方法


TypeScriptでGenericsな配列を扱う関数を試してみた。
引数の型が`T`の例は多くあるけど`Array<T>`は無かったのでメモしておく。

## Genericsな配列を扱う関数

重複を除いたユニークなリストを返す関数を考えてみる。

```ts
/**
  * 重複を除いたユニークなリストを返す
  * @param Array<T> src
  * @return Array<T> 要素がユニークなリスト
  */
function uniqueList<T>(src: Array<T>): Array<T> {
  return src.filter(function (elem, index, self) {
    return self.indexOf(elem) === index
  })
}
```

関数名のあとにジェネリクス`<T>`を定義して、あとは引数と返り値の型で`Array<T>`と利用することができる。

実行するとstring型とnumber型もunionでも利用できた。

```ts
const chars = ['A', 'B', 'A', 'B', 'C', 'A']
const numbers = [0, 1, 2, 2, 1, 3, 1]
const unions: Array<number|string> = [1, 2, 2, 'A', 'A', 'B']

console.log(uniqueList(chars))
// ['A', 'B', 'C']
console.log(uniqueList(numbers))
// [0, 1, 2, 3]
console.log(uniqueList(unions))
// [1, 2, 'A', 'B']
```

【TypeScript】ジェネリックスな配列Array<T>を扱う関数を定義する


TypeScriptのプロジェクトにJestを追加してテストを書いていくと、`describe`や`expect`などテスト用の関数が読み込めていなかった。

![picture 1](/images/posts/326-ts-jest-not-find-describe/1633874097427.png)  

以下のコマンドで定義はインストール済だがエラーが出ている。
```bash
yarn add jest @types/jest ts-jest
```

## 解消方法

[こちらのstackoverflow](https://stackoverflow.com/questions/54139158/cannot-find-name-describe-do-you-need-to-install-type-definitions-for-a-test)で解決した。

```diff:tsconfig.json
{
  "compilerOptions": {
--    "types": ["webpack-env"],
++    "types": ["webpack-env", "jest", "node"],
  }
}
```
このようにコンパイルオプションでjestの型の読み込みこみが必要だったようだ。

## 参考
- [Jest - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/intro-1/jest)

【TypeScript】Jestでdescribeなどの関数がnot findになってるのを解消する


TypeScriptのjestで用意したテストで、自作のモジュールをインポートしようとすると`Cannot find module`となってしまう。

例として次のテストを実行してみる。

```ts:Login.test.ts
import LoginService from "@/app/Services/LoginService";
import auth from "@/Domain/Repositories/AuthRepository";

describe("LoginService", () => {
  it("LoginSuccess", () => {
    // ...
    expect(result).toBe('success');
  });
});
```

`@/`は`tsconfig.json`で定義してある。エディタ（VSCode）のIDEではパスが通っているようでエラーは出ない。


実行した結果がこちら。
テストを実行したときだけパスが通らない。

```bash
  ● Test suite failed to run

    Cannot find module '@/app/Services/LoginService' from 'tests/app/Services/Login.spec.ts'

    > 1 | import LoginService from "@/app/Services/LoginService";
        | ^
      2 | import auth from "@/Domain/Repositories/AuthRepository";
      3 |
      4 | describe("LoginService", () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (tests/app/Services/Login.spec.ts:1:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.456 s
Ran all test suites.
```

## 解決方法

テストは`jest.config.js`で`@/`の定義が必要。

`@/`など`tsconfig.json`で定義してあるとVSCodeのIDEとアプリのコンパイルには成功する。

▼ `tsconfig.json`のパスの定義
```json:tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
}
```

テストでは`tsconfig.json`とは別に`jest.config.js`で`@/`などのマッパーを定義する必要がある。


混乱しないよう`tsconfig.json`と同じパスの定義をするといい。

```js:jest.config.js
module.exports = {
  preset: "ts-jest",
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
    },
  },
  roots: ["<rootDir>/"],
  testMatch: ["**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // 追加
  },
};
```

以上でテストの実行時にパスが通った。

【TypeScript】JestでインポートしたモジュールがCannot find moduleとなるエラー


デスクトップアプリを作るなら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)に登録しています。