VSCodeのSSH接続機能で、RaspberryPi内のNode.jsコードをデバッグ

#はじめに
本記事は、[Pythonでのデバッグ実行](https://qiita.com/c60evaporator/items/26ab9cfb9cd36facc8fd)と同内容を、Node.jsで実行した記事です。

**Node.jsでもブレークポイント付きの快適デバッグが実現できました！**

#必要なもの
・RaspberryPi (本例ではRaspberryPi3 ModelB)
※あらかじめNode.jsをインストールしてください（最新のRaspbian10ではプリインストール）
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降（上記PCにインストール、本例では1.44.2使用）

#手順
下記記事を参考にさせて頂きました
https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391

※手順④まではPythonのときと同内容です
##①SSH接続の設定と、configファイルの保存
[本記事「公開鍵認証の場合」](https://qiita.com/c60evaporator/items/2384416f1122ae124f50#%E5%85%AC%E9%96%8B%E9%8D%B5%E8%AA%8D%E8%A8%BC%E3%81%AE%E5%A0%B4%E5%90%88%E6%89%8B%E9%A0%86)を参考に、SSH公開鍵認証の確立とconfigファイルの保存を実施してください。

なお、configファイルはPC内の下記フォルダに保存してください
C:\Users\\[ユーザー名]\\.ssh

##②VSCodeのインストール
**PC側**にVSCodeをインストールしてください

参考記事
https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1

##③Remote Developmentのインストール
VSCodeを起動し、下記の手順でRemote Developmentをインストールしてください
![remotedevelopment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f60c57e5-bd5b-8110-5e07-8bb8c290d245.png)
※Remote - SSHなど必要な関連ツールも、Remote Developmentをインストールすると同時にインストールされます。

##④RaspberryPiに接続
下図の手順で、接続するSSHサーバ = RaspberryPiを選んでください（下図の場合「raspi」）
![sshtargets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3ad3e06a-441f-15d3-d768-bad3b0340978.png)

新たにウインドウが開き、プラットフォーム選択を求められるので、Linuxを選ぶ
![selectplatform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/ef148c34-de02-3384-1546-2c1f9a3b8736.png)

公開鍵認証のパスワードを求められるので、入力してEnterを押す
![sshkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/bd70c7ed-7861-4826-95a1-1d4c85a59d91.png)

初回接続は時間が掛かるので、しばらく待つ。
成功すると、下図の赤枠をクリックしてRaspberryPi内のファイルにアクセスできる
![home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/70ce76e5-4e79-fde7-e792-628173a0eea3.png)

##⑤RaspberryPi内にコードを作成
ここから先はコンソールでも良いですが、GUIで操作する前提で記載を進めます。

**・空ファイルの作成**
「File」→「New File」で空のファイルを作成します
![makenewfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/ca9957c0-39d9-90b7-0576-c6ed56c194ca.png)

**・コード内容の記載**
例えば、以下のようなコードを記載します（配列の合計を求めて表示）

```javascript:test.js
var a = [1, 3, 5, 7, 9];
var b = a.reduce(function(x, y){return x + y;});
console.log(b);
```

**・コードの保存**
「File」→「SaveAs」→保存パスを指定→「OK」
![jssave.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/bf3a9282-b0d7-613d-b5dd-538a1da46845.png)
![jssave2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3487929e-41dc-d1fe-a262-86877306efe5.png)

**・コンソールから実行してみる**
「Terminal」→「New Terminal」でコンソールを開き
![openterminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/5de27ff9-a05b-9b6d-16ee-5de2f335b240.png)
コードのあるフォルダに移動し、

```
node test.js
```
でコードを実行
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f008c011-6352-b692-c419-d32b986d17f1.png)

正常に結果がコンソール出力されていることが分かります。


##⑥作成したコードをデバッグ実行
Pythonのときと同様、VSCodeのGUIでコードのデバッグまで出来てしまいます。
ブレークポイントで停止もできるので、開発効率が上がること間違いなしです！

**・ESLintのインストール**
ESLintとは、Javascriptのコード分析ツールです。
なくてもデバッグ自体はできるようですが、エラーチェックによる効率向上のため、インストールします。

既にPCローカルでインストールしている場合も、「install in SSH:[ホスト名]」をクリックしてRaspberry Pi内にもESLintをインストールします。
![eslint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f603ea0d-4eab-bcfa-7811-464a8278e59e.png)

インストールが終わると「Reload Required」と出てくるので、クリックして再起動

**・作業用フォルダ（通常はコードのあるフォルダ）を開く**
![openfolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/57847971-0abe-67ae-d79e-8e35dd64ab47.png)

**・デバッグの実行**
デバッグしたいコードを開いたのち、下記の操作を実行
![debugstart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3a31f5cf-c9e8-421c-ad52-899ea72f082c.png)

コンソールが開き、デバッグが実行されます
![debugconsole.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f3068f29-14d9-9a2c-ce1b-c62bdfa12e64.png)

**・ブレークポイントの動作確認**
下図のようにブレークポイントで処理を止め、変数内容の確認も可能です。
![breakpoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/751359f9-ba08-00f9-cdc3-634818788547.png)


以上で、VSCodeでRaspberryPi内のNode.jsコードを遠隔デバッグすることができました。
**GUIでサクサク開発できる環境が整い、個人的には満足の結果です！**