マイコンESP32にArduinoIDEでプログラムを書き込んで実行するまでの手順

## はじめに
初めてQiitaに記事を投稿します。
最近、電子工作をしたいなと思い、**ESP32**という小型マイコンを買ってプログラムの実行を試したりしています。
この記事では、ESP32にプログラムを書き込んで動かすまでの手順を、環境構築から順を追ってわかりやすく解説します。
これからESP32を使って電子工作を始めたい方は、ぜひ最後まで読んでみてください。

## 目次
- [1. ESP32ってなに？](#1-esp32ってなに)
  - [1-1. 何ができる？](#1-1-何ができる)
  - [1-2. どんな物に活用できる？](#1-2-どんな物に活用できる)
- [2. 開発環境](#2-開発環境)
  - [2-1. 購入した機材](#2-1-購入した機材)
  - [2-2. PC環境](#2-2-pc環境)
- [3. Arduino IDE インストール手順](#3-arduino-ide-インストール手順)
  - [3-1. Arduino IDEのダウンロードページをブラウザで開く](#3-1-arduino-ideのダウンロードページをブラウザで開く)
  - [3-2. DownLoad Option選択](#3-2-download-option選択)
  - [3-3. 寄付確認・メールマガジン登録画面](#3-3-寄付確認メールマガジン登録画面)
  - [3-4. ライセンス契約書の同意](#3-4-ライセンス契約書の同意)
  - [3-5. インストールオプションの選択](#3-5-インストールオプションの選択)
  - [3-6. インストール先フォルダの選択](#3-6-インストール先フォルダの選択)
  - [3-7. インストール完了](#3-7-インストール完了)
- [4. Arduino IDEのセットアップ](#4-arduino-ideのセットアップ)
  - [4-1. Arduino IDEを開く](#4-1-arduino-ideを開く)
  - [4-2. 日本語化する](#4-2-日本語化する)
  - [4-3. ボードマネージャにESP32を追加する](#4-3-ボードマネージャにesp32を追加する)
  - [4-4. PCにESP32を接続する](#4-4-pcにesp32を接続する)
  - [4-5. ESP32のボードを選択する](#4-5-esp32のボードを選択する)
  - [4-6. シリアルポートのCOMの番号を確認する](#4-6-シリアルポートのcomの番号を確認する)
  - [4-7. シリアルポートを選択する](#4-7-シリアルポートを選択する)
- [5. 簡単なプログラムを書く](#5-簡単なプログラムを書く)
  - [5-1. 初期コードの意味](#5-1-初期コードの意味)
  - [5-2. 「Hello World！」を出力する処理を書いてみる](#5-2-hello-worldを出力する処理を書いてみる)
  - [5-3. コード解説](#5-3-コード解説)
- [6. 実行する](#6-実行する)
  - [6-1. シリアルモニターを表示する](#6-1-シリアルモニターを表示する)
  - [6-2. 書き込みボタンを押下する](#6-2-書き込みボタンを押下する)
  - [6-3. 実行結果](#6-3-実行結果)
- [7. おわりに](#7-おわりに)

## 1. ESP32ってなに？
ESP32とは、上海に拠点を置くEspressif Systems社が開発した、Wi-FiとBluetoothを内蔵した32ビットマイクロコントローラーのチップセットのことです。
下記画像が、私が購入したESP32になります。スマホで撮影しているので画像が荒くて分かりにくいかもしれませんが、結構小さいです（私の親指くらいの長さ）。
<br>
![ESP32](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/7f8c0bb1-23fd-49e0-b508-7b4b0a05080c.jpeg)


### 1-1. 何ができる？
Wi-Fi通信やBluetooth通信ができます。小型で省電力であるため、組み込みに強いです。私の場合は、スマホとbluetooth通信して物を遠隔操作してみたいと思い、購入しました。

### 1-2. どんな物に活用できる？
- IoT機器
- スマート家電
- リモコン
- 自動化装置　
<br>
・・・などなど、低コストなのに多機能な夢いっぱいの製品です。

## 2. 開発環境
実際に開発した際に使用した機材やPC環境をご紹介します。

### 2-1. 購入した機材
- ESP32-DevKitC-32E ESP32-WROOM-32E開発ボード 4MB
[購入サイトリンク(秋月電子通商)](https://akizukidenshi.com/catalog/g/g115673/)
- Lumen microUSBケーブル
[購入サイトリンク(Amazon)](https://www.amazon.co.jp/dp/B002VLZW86?ref=ppx_yo2ov_dt_b_fed_asin_title)

### 2-2. PC環境
- PC
 ASUS Vivobook Pro 14 OLED
- OS
 Windows 11 Home
- RAM
16GB
- エディタ
Arduino IDE 2.3.6
- 言語
Arduino

## 3. Arduino IDE インストール手順
ESP32にプログラムを書き込むためにArduino IDEというマイコンボード用開発環境をPCにインストールします。下記の手順でインストールしましょう。

### 3-1. Arduino IDEのダウンロードページをブラウザで開く
下記公式サイトを開く。
[Arduino IDE(公式サイト)](https://www.arduino.cc/en/software/)

### 3-2. DownLoad Option選択
DownLoad Optionから、使用しているPCのOSを選択してください。
私の場合はWindowsOSなので、下記画像の赤矢印の「Windows win10 and newer, 64bits」を押下しました。　
<br>
![オプション選択画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/63d0432a-d273-4cb8-8bb0-6bafa2132255.png)


### 3-3. 寄付確認・メールマガジン登録画面
寄付やメールマガジンを登録する確認する画面に遷移しますが、寄付やメールマガジン登録をする必要がない場合は、「**JUST DOWNLOAD**」を押下しましょう。

- 寄付確認画面
![寄付確認画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/98ee9a23-a637-4528-b710-363983c5f314.png)
- メールマガジン登録画面
![メールアドレス登録画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/c99e51c1-6dee-4281-985a-3fe96b8e932c.png)


### 3-4. ライセンス契約書の同意
ライセンス契約書を読み、「同意する」ボタンを押下しましょう。

![ライセンス契約書](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/103cd07c-ace5-4112-b30f-4b2aa714544d.png)

### 3-5. インストールオプションの選択
ソフトウェアの使用するユーザ範囲の選択ができますが、好きな方を選択していただいて大丈夫です。私の場合は、「**現在のユーザーのみにインストールする**」を選択しました。選択ができたら「**次へ**」ボタンを押下しましょう。

![インストールオプションの選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/8322e86d-c15b-4e6c-aedc-b323365aa068.png)


### 3-6. インストール先フォルダの選択
インストール先のフォルダを選択できますが、特にこだわりがなければ、デフォルト値のままで問題ないです。「**インストール**」ボタンを押下しましょう。

![インストール先フォルダの選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/748dc40e-71d0-4cd1-b2f6-cc6d3276acbd.png)

### 3-7. インストール完了
「Arduino IDE セットアップウィザードは完了しました。」というメッセージが表示されたらインストール完了です。そのままArduino IDEのエディタを開きたい場合は、「**Arduino IDEを実行**」チェックボックスにチェックをつけたまま、「**完了**」ボタンを押下しましょう。

![完了画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/be86468e-b910-4be4-acea-a920e6b112fb.png)

## 4. Arduino IDEのセットアップ
ESP32にArduino IDEでプログラムを書き込むために、まず最初に行わなければならない設定を行う手順をご紹介します。

### 4-1. Arduino IDEを開く
まず、インストールしたArduino IDEを開くと下記画像のような画面になるかと思います。
ソースコードが記載されていますが、一旦コードは飛ばして、まずは設定から行いましょう。

![Arduino IDE](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/45310f04-9ef6-497f-9b6c-bf7d6d911fe0.png)

### 4-2. 日本語化する
日本語の方が読みやすいという方は、画面上部のメニューバーの「**File**」＞「**Preferences**」を選択しましょう。

![Preferences](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/809b3ce3-b50d-4823-a329-ebe05c154ab2.png)

Preferencesダイアログが表示されたら、Languageのドロップダウンリストから「**日本語**」を選択し、「**OK**」ボタンを押下しましょう。

![Preferencesダイアログ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/25f979c4-2ac7-456d-96bc-d232d29a2f80.png)

上部のメニューバーが日本語で表示されればOKです。

![メニューバー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/2820091a-0f01-429a-92a4-30b3bf5594e1.png)

### 4-3. ボードマネージャにESP32を追加する
上部のメニューバーの「**ファイル**」＞「**基本設定**」を選択しましょう。
基本設定ダイアログが開かれたら、「**追加のボードマネージャのURL**」に下記のURLを入力し、「**OK**」ボタンを押下しましょう。
```
/* 追加のボードマネージャのURL */
https://espressif.github.io/arduino-esp32/package_esp32_index.json
```
![基本設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/790637db-7a07-49d6-85e8-7a785bf16831.png)

### 4-4. PCにESP32を接続する
ESP32のボードをインストールするために、まずはUSBケーブルでPCにESP32を接続しましょう。
※PCにESP32を接続する際に使用するUSBケーブルですが、充電用のUSBケーブルを使用すると接続できないことがありますので、データ接続用のUSBを使用しましょう。
（参考：[2-1. 購入した機材](#2-1-購入した機材)）

### 4-5. ESP32のボードを選択する
メニューバーの「**ツール**」＞「**ボード**」から「**ESP32 Dev Module**」を選択する。

![ボード選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/bf907f3c-a3a8-4ef8-a19c-aee2762cf63a.png)

### 4-6. シリアルポートのCOMの番号を確認する
「**デバイスマネージャ**」を開き、「ポート」からESP32のポートの「**COM**」の番号を確認しましょう。私のUSBですと「Silicon Labs CP3210x USB to UART Bridge」という名前のポートが該当しまして、「COM7」となっております。
※どれがESP32に対応したポートか分からない場合は、ESP32につないでいるUSBを抜き差しすれば分かると思います。

![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/83aaaab2-97c1-4cc2-be33-f007622bcdf6.png)

### 4-7. シリアルポートを選択する。
メニューバーの「**ツール**」＞「**ポート**」から、手順4-6で確認したポートのCOMを選択しましょう。私の場合はCOM7を選択します。

![シリアルポート選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/8d933ec9-03db-4125-8ee4-1e64117c5050.png)

<br>
これにて、Arduino IDEのセットアップは完了です。
ここからESP32に書き込むプログラムを書いていきます。

## 5. 簡単なプログラムを書く
Arduinoのシリアルモニターに「Hello World！」を出力する処理を書こうと思います。

### 5-1. 初期コードの意味
ソースコードを書く前に、まずテンプレートコードとして記載されている「void setup(){}」と「void loop(){}」について記載しておこうかと思います。
プログラミング経験者であればどちらも何かの関数っぽいなということは察しが付くかと思いますが、これらの関数の意味をまずは知りましょう。

<table>
  <caption>setup()とloop()の意味</caption>
  <thead>
    <tr>
      <th>関数</th> <th>意味</th>
    </tr>
  </thead>
  <tr>
    <td> void setup()  </td> <td>最初に一度だけ実行される処理</td>
  </tr>
  <tr>
    <td> void loop() </td> <td>setupの後、繰り返し無限ループで実行される処理</td>
  </tr>
</table>

<br>
setup()とloop()の意味合いは上記の表の通りで、setup()はマイコンに電源が入ったときやリセットされたときに1回だけ動作し、loop()はマイコンが動いている間、永遠にこの中を繰り返し実行し続けます。
そして、これがArduino言語におけるソースコードの基本構造となります。

### 5-2. 「Hello World！」を出力する処理を書いてみる
それでは、ソースコードを書いていきたいと思います。
今回書こうとしている処理は「Hello World！」という文字列をESP32からPCに送信し、Arduino IDEのシリアルモニターに表示させるという処理になります。
表示させるのは一度だけにしますので、処理開始時に一度だけ実行するsetup関数内に、下記の様にコードを書きましょう。

```
void setup() {
    Serial.begin(115200);     // シリアル通信を115200bpsで開始
    delay(2000);      // ESP32は起動後すぐは不安定なことがあるため、２秒間待機
    Serial.println("Hello World！");     // 一度だけ出力
}
void loop() {
    //何も処理しない
}
```

### 5-3. コード解説
手順5-2で書いたソースコードについて、１行ずつ解説していきたいと思います。
まず、下記の「Serial.begin(115200); 」というコードは、ESP32とPC間でのシリアル通信を開始するコードとなります。Arduinoにあらかじめ定義されている**Serial**オブジェクトから、シリアル通信を開始する**begin**メソッドを呼び出している形です。
なお、引数の「115200」という数字は、通信速度(ボーレート)を表示します。「1秒間に115,200ビット」通信するという意味で、ESP32でよく使われる早くて安定する通信速度となっております。

```
Serial.begin(115200);      // シリアル通信を115200bpsで開始
```

次の行のコードは、delay関数で2秒間次の処理に行かず、待機するようにしています。コメントにも記載していますが、ESP32は実行直後だと不安定なことがあるため、２秒間待機することで確実に次の処理が実行されるようにしています。

```
delay(2000);　　　//ESP32は起動後すぐは不安定なことがあるため、２秒間待機
```

次の行のコードは、「Hello World！」の文字列を出力する処理です。
Serialオブジェクトの中に、シリアルモニターに文字列を出力する関数として、println関数があり、それを使用している形になります。
ほかの言語でもprintln関数は出てきたりするので、プログラミング経験者の方はコードを見るとピンとくると思います。

```
Serial.println("Hello World！"); // 一度だけ出力
```

## 6. 実行する
ソースコードが書けましたら、ソースコードをコンパイルして、ESP32にプログラムを書き込みます。

### 6-1. シリアルモニターを表示する
まずは実行結果を確認用に、メニューバーの「ツール」＞「シリアルモニタ」を押下し、シリアルモニターを表示します。

![シリアルモニタ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/434f9ab8-7dc7-4af5-ac06-18109353bc18.png)

<br>
シリアルモニターの右側に表示されているボーレートは「115200」に設定しておきます。

![シリアルモニターのボーレート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/dad66b11-5309-4daa-9b30-69eab1bb174c.png)



### 6-2. 書き込みボタンを押下する
画面左上の書き込みボタンを押下すると、プログラムのコンパイルと設定しているマイコンへのプログラムの書き込みを自動で行ってくれます。
![書き込み](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/816b72a3-a5d4-4731-926e-64d227fa9748.png)

※書き込みの際、ESP32のBootボタンを指で押しておかないと、ESP32が「書き込みモード」になれず、エラーになることがあります。エラーになった場合は、書き込みが終わるまでBootボタンを長押しする対処法を試してみてください。
なお、bootボタンは下記画像の赤枠部分です。

![bootボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/43a8fc0c-b3c2-4ef7-8c62-64ddfb476813.jpeg)

### 6-3. 実行結果
手順6-2で書き込み完了後、シリアルモニターを確認すると下記の様に「Hello World！」が表示されていることを確認できます。

![実行結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4119266/0441e86e-ee44-4b62-ac0c-42df30b5c364.png)


## 7. おわりに
いかがでしたでしょうか。
プログラム内容は簡単ですが、意外と設定等でやることが多くて大変ですよね。
今回の記事が役に立ったら、LGTMしていただけると嬉しいです。
また、質問やアドバイスなどあればぜひコメントで教えてください。
ちなみに、次回はスマホアプリとESP32で連携するやり方の記事を書こうかなと頭の片隅でなんとなく考えています。