Arduinoで開発環境構築(Arduino IED、Visual Studio Code) + Arduino言語入門

# 本記事について
Arduinoをこれから始める人向けにプログラミング環境を快適にできる開発環境構築の手引きになるようなものを記述します。
それプラス、簡単にArduino言語についての説明をします。

# 本記事における筆者の開発環境
Windows10 バージョン2004 (OSビルド 19041.630)
Arduino IDE version 1.8.13
Visual Studio Code 1.52.0 (以下vscode)
Arduino for Visual Studio Code 0.3.4
Arduino Uno R3

# インストール
vscodeとArduino IDEをインストールします。
vscodeはたくさん記事があるので、Arduino IDEのインストール方法を記述します。

# Arduino IDEのインストール
いきなりですが、Arduino IDEは<font color="red">Microsoftストアからダウンロード、インストールしてはいけません。</font>
筆者の環境では以下のようなエラーが発生してコンパイルできませんでした。

```
[Starting] Upload sketch - blink.ino
[Warning] Output path is not specified. Unable to reuse previously compiled files. Upload could be slow. See README.
[Error] Exit with code=EPERM
```

<参考>
https://github.com/microsoft/vscode-arduino/issues/842
※2020/12/20現在の話なのでいずれ解消されることを期待します。。。

そのため、公式からダウンロード、インストールします。
https://www.arduino.cc/en/software
このページにもWindows appつまりMicrosoftストアへのリンクもあるので注意しましょう。

exeファイルをダウンロードしてポチポチするだけなのでインストールにつまるところはないと思います。

# IDE起動
いくつかのドライバーをインストールするとき、Windowsセキュリティの警告がはいるかもしれませんが
信頼して「インストール」を押下しましょう。
無事インストールが成功して起動して以下のようになればOKです。

![スクリーンショット 2020-12-13 004327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/873e4310-ac92-a9f9-d610-e74a1810b963.png)

# 実機接続確認

Arduino UnoをUSB接続します。
接続したら以下を確認しましょう。

### ボード
「ツール」-「ボード」-「Arduino Uno」
![スクリーンショット 2020-12-14 003210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/c8f944c8-51a0-eeae-02d1-55610bc69955.png)
今回はArduino Unoなので上記画像のようになります。自分のもっているボードを選択しましょう。DUEなどインストール初期では存在しないボードなどもあるので、その場合はボードマネージャ...からインストールをしましょう。

### シリアルポート
「ツール」-「シリアルポート」
![スクリーンショット 2020-12-14 212942.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/e0ca6f68-c092-08b2-d5a2-1b9b9188018b.png)
ここに上記のような画像で接続したArduinoが表示されていれば認識されているはずです。
今回はCOM3を選択します。

### コンパイル

![スクリーンショット 2020-12-14 214017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/6986f7fc-2e8c-7fb6-2566-b562220bdbc5.png)
上記のボタンを押します。

![スクリーンショット 2020-12-14 214044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/69148a61-96eb-95da-dfdb-7ab2435a50c6.png)
上記のようになれば成功です。
実機に転送する前に、ビルドができるかチェックする目的に使います。

### 転送

![スクリーンショット 2020-12-14 214116.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/0b264eed-3a6c-20af-c992-3d71d84a4053.png)
上記のボタンを押します。

![スクリーンショット 2020-12-14 214139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/21ab081f-34b2-6b6b-db78-c4915d27c8b8.png)
上記のようになれば成功です。
何も実行されないプログラムが転送されました。

# Arduino言語
やっと言語の記述をします。
Arduino言語はざっくりいうとほぼC言語の同じような仕様になっています。
なのでC言語を調べれば大体のことは解決すると思いますが、それだとあっさりすぎるので
Arduino言語を始めるに当たって特有のことで知っておいたほうがいいことを少しだけ記述します。

### setupとloop

IDEを起動したとき最初から書いてあるテンプレートの記述です。
setup関数は、Arduinoに電源をいれたときなどに一度だけ実行される関数です。
主に初期化(ピンのセットアップなど)する処理を記述します。
loop関数は、setupが呼ばれた後、延々ループして呼ばれる関数です。
ここでピン状態の監視などをして、なにか具体的な処理(LEDを光らせるなど)を記述します。

``` c
void setup() {
  // put your setup code here, to run once:
}

void loop() {
  // put your main code here, to run repeatedly:

}
```

### シリアル通信で出力

上記のソースコードに
Serial.begin(9600);
Serial.println("setup");
の2行を追加しました。
シリアル通信で出力を行っています。
具体的にシリアル通信がなにかというよりも、ここで知ってもらいたいのは
ログのようなもの出力してデバックする用途で使えます。

```c
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("setup");
}

void loop() {
  // put your main code here, to run repeatedly:

}
```

「ツール」-「シリアルモニタ」
![スクリーンショット 2020-12-15 223901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/8cda5fc0-28b2-1db8-5b8f-8c8bdeaf08ad.png)

赤丸のところが今回は初期値の「9600bps」になっていることを確認します。
そうすると"setup"と上記のソースコードのprintlnの内容が出力されます。
![スクリーンショット 2020-12-15 222806.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/4407e532-ddbc-8df0-88a9-066a449b8c4b.png)

### デジタル入出力

Arduinoに限らず大体似たようなボードの目的には
・ピンの電圧を読む
・ピンから電圧を出力する
ということが基本的にな目的となります。

#### PinModeの設定 

読む(Read)、出力する(Write)するためには、まずピンをReadもしくはWriteどちらとして機能するか設定する必要があります。
以下が例です。

```c
void setup() {
  // 13番ピンを読み込みに設定
  pinMode(13, INPUT);
  // 14番ピンを出力に設定
  pinMode(14, OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:

}
```

#### digitalReadでピンの読み込み

PinModeでINPUTにしたピンを読み込みます。
HIGH(1)またはLOW(0)が戻るのでそれでなにかを処理します。

```c
void setup() {
  // 13番ピンを読み込みに設定
  pinMode(13, INPUT);
}

void loop() {
  // ピンを読む
  int hl = digitalRead(13);
}
```

#### digitalWriteでピンの出力

PinModeでOUTPUTにしたピンに出力を行います。
電圧を出力してLEDを光らせたりするなどの用途に使用できます。

```c
void setup() {
  // 出力に設定
  pinMode(14, OUTPUT);

}

void loop() {
  // HIGEを出力する
  digitalWrite(14, HIGH);
}
```

### 参考

詳細は以下の「Arduino 日本語リファレンス」を参照ください。
http://www.musashinodenpa.com/arduino/ref/

# VsCodeとArduino IDEの連携

上記まで一通り環境が整ったので、そのままArduino IDEで開発をすするめることが可能ですが
Arduino IDEが最小限の機能しかなかったりするので
やはりVsCodeを連携させると、色々な機能が使えて便利になります。

## Arduino for Visual Studio Codeのインストール

VsCodeの拡張インストールで検索してインストールします。
![スクリーンショット 2020-12-16 223111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/45452765-a5dc-a123-3b7f-da0cba73cbd2.png)

## プロジェクトを開く
Arduino IDEで作成したフォルダを開きます。
.inoファイルが入ったフォルダがArduinoプロジェクトになります。
![スクリーンショット 2020-12-16 223632.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/cff94ae7-ddcd-dee5-62e4-230a5bddc26c.png)

なにやら赤い破線でエラーっぽくなっていますが一旦無視します。

## Command PathとPathの設定

以下の画像のように選択して、拡張機能の設定をします。
![スクリーンショット 2020-12-16 224014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/1f0bc633-73f4-65fc-feb3-d52ea277e2b3.png)

Command Pathへ「arduino_debug.exe」をいれます。
![スクリーンショット 2020-12-16 224703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/bfb2492b-01c8-2df6-4ca5-cff0bbdd9a71.png)

Pathに「C:\Program Files (x86)\Arduino」をいれます。
ここは本ページの環境手順であればこのようなパスになりますが、環境によって変わるので適宜置き換えてください。
![スクリーンショット 2020-12-16 224829.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/27c7565d-4ecd-dc5c-58e0-b5771da20e4a.png)
ここまで設定したらvscodeを再起動させます。設定が反映させるためです。

## ボードの設定

Arduino IDEでも行ったボードの設定を行います。
vscodeの右下から「Select Board Type」を選択します。
![スクリーンショット 2020-12-19 201609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/0007848f-c4ab-d9a4-e04f-ebef2caebb71.png)
ここで接続中のボードを選択します。
![スクリーンショット 2020-12-19 201633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/b71f7e9b-946e-7fce-7eb4-0ced477c1fe2.png)
ここの設定で上記にあったソースコードの赤い破線は消えるかと思います。


## シリアルポートの設定

Arduino IDEでも行ったシリアルポートの設定を行います。
![スクリーンショット 2020-12-19 201939.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/d6dd8bf7-e25c-caa4-1855-1d21a8781dfb.png)
Arduino IDEと同様にCOM3を選択します。
![スクリーンショット 2020-12-19 202119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/68764025-4785-4daa-dff9-fa768af1f03c.png)

## コンパイル

右上のボタンを押します。
![スクリーンショット 2020-12-19 202505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/9ecd497d-8c90-db18-9907-ece7f209ece2.png)
なにやらArduino IDEよりたくさんログがでますが、以下のようになれば成功です。
![スクリーンショット 2020-12-19 202549.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/9d15cf40-068f-d83f-6f69-19d94fd2eded.png)

## 転送

右上のボタンを押します。
![スクリーンショット 2020-12-19 202831.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/22055317-d540-3fb1-614e-35f0406ac17b.png)
以下のようになれば成功です。
![スクリーンショット 2020-12-19 202931.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/2b9246e3-c8e8-cf58-8507-8992d011b186.png)

## 日本語文字出力の文字化け対応

今回の指定バージョンでは出力ログが文字化けしていたので修正します。
筆者の環境では以下のファイルを修正します。
「C:\Users\username\\.vscode\extensions\vsciot-vscode.vscode-arduino-0.3.4\out\src\common\util.js」
215行目ぐらいのif文をコメントアウトします。

```js
/*
        if (os.platform() === "win32") {
            try {
                const chcp = childProcess.execSync("chcp.com");
                codepage = chcp.toString().split(":").pop().trim();
            }
            catch (error) {
                outputChannel_1.arduinoChannel.warning(`Defaulting to code page 850 because chcp.com failed.\
                \rEnsure your path includes %SystemRoot%\\system32\r${error.message}`);
                codepage = "850";
            }
        }
*/
```

治りました。
![スクリーンショット 2020-12-19 203613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17192/69b91f71-8287-309a-5034-35b28cc3e13f.png)


# 終わりに

Arduino IDEでもよいですが
やはりvscodeのライブラリを使えるのはかなりの恩恵な気がします。
簡単ではありましたが、Arduino + vscodeでよりよい開発Lifeを！！