M5stackをModdableを使ってjavascriptで動かしてみる

[Link-1]:https://qiita.com/zasshyu6/items/35a1048a9781bdcfebb7
[Link-2]:https://qiita.com/meganetaaan/items/1069830ca6389968eda7
[Link-3]:https://github.com/Moddable-OpenSource/moddable
[Link-4]:https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

#はじめに
昨今、とてもはやっているそうな`javascript`を学んでみたかったのです。
何かできないかなぁと調べていたら`M5stack`が`Moddable` + `JavaScript`で動くという記事があったため、試してみようということで始めました。

調べて出てきた記事が以下です。
著者の`JavaScript`視点からの説明は勉強になりました。ありがとうございます！
>[JavaScript x IoTの大本命「ModdableSDK」をM5Stackで動かしてみた][Link-2]

本記事では、`windows`で構成を作ってみたいと思います。

#やりたいこと
- `windows`での`Moddable`の構成
- `JavaScript`でのプログラミング
- `Moddable`で定周期制御やタイマ割込みの周期調べ

##開発環境
- windows 10 Home 64bit 
- Moddable
    - 使用言語はJavaScript


##`M5stack`について
`M5stack`は`ESP32`を使用しているLCDディスプレイ付きのマイコンキットです。
`ESP32`は`Free RTOS`を基に`Arudiono`(`C`,`C++`)を使ってプログラミング可能です。
開発環境では、`PlatformIO`などがあります。

`m5stack`については以下の記事に中身を調べたことを記載しています。
>[m5stackで遊ぼう][Link-1]

##`Moddable`について
`Moddable`は`JavaScript`でマイコンプログラミングするための`SDK`だそうです。
公式は以下になります。英語なので中学生以下の英語力しかない自分では読むのが大変です。
Google翻訳を駆使して自分なりの解釈で構成を進めていきます。
>[Moddable-OpenSource/moddable][Link-3]

対応マイコンは以下だそうです。

- `ESP8266`(`Xtensa`)
- `ESP32`(`Xtensa`)
- `Gecko`(`Arm`)
- `QCA4020`(`Arm`)

`Gecko`と`QCA4020`は初めて知りました。
`wifi`付きマイコンは今すごい増えてるんですね。

#ゲッティングスタート
ここから本題です。
頑張って英語を翻訳にぶち込みながら進めていきます。

##あなたの環境でセットアップしよう！
今回の自分の環境は`windows`です。セットアップのドキュメントが別にあるのでそれを進めろと言われてます。
`ESP`シリーズ、`Gecko`シリーズ、`QCA4020`はそれぞれでドキュメントはあるようです。
今回は`ESP`シリーズしか使わないので素直に進めていきます。

手順としては先にPC側の設定、次にマイコンとの接続設定となっているようです。マイコンは`ESP32`のセットアップを進めます。
基本的には[公式ドキュメント][Link-4]に記載があるフォルダ構成を作ってコマンドを入力していけば問題ないです。
以下の手順は自分がざっくり行った手順を記載しています。詳細は[公式ドキュメント][Link-4]を読んでください

###PC側の設定の手順
PC側は`Git`のインストールしているとコマンドですべてできます。

1. `Microsoft Visual Studio 2019 Community Edition`の`Desktop development for C++`インストールする
2. `Git`で`Moddable`のダウンロード
3. `xsbug`と`mcconfig`を使い為の環境変数設定の設定
3. `xsbug`の起動と`mcconfig`でサンプルのハローワールドのコンパイルと起動

PC側の設定では、`x86 Native Tools Command Prompt for VS 2019`を使ってビルドのみではなく環境変数設定と`PATH`の設定もできます。
なので、手順1.のインストールが終わったらすべてを`x86 Native Tools Command Prompt for VS 2019`でコマンドを打ち込んで問題なかったです。

常識かもしれませんが・・・環境変数の`PATH`設定の時に`PATH`を追加する形で書いてください。
自分はこの辺りが疎すぎて`PATH`を上書きですべて消してしまって再インストールすることになりました・・・

###`ESP32`の接続設定の手順

1. USB-UART変換ドライバのインストール(これはUSBさすと自動でインストールされます)
2. tool chain (`all-in-one Windows toolchain and MSYS2`) のダウンロード
3. 'MinGW32`を起動して`ESP-IDF`のダウンロード(`git clone`でダウンロード)
4. シェルファイルの作成、中身はコマンドのみを記載(ここだけコマンドラインを使わずにやりました)
5. `m5stack`とPCをUSBでつないでCOM PORT番号を確認
6. 環境変数の設定を行ってコンパイルとダウンロードを実施(最後のコマンドは`mcconfig -d -m -p esp32/m5stack`にする必要があります)

ここも手順の2.3以外はすべて`x86 Native Tools Command Prompt for VS 2019`で文章通りのコマンドを打つだけでした。
一か所引っかかったところは6.の環境変数の設定で、`\`ではなく、`/`で階層を表せってところでした。
ちゃんと英語で注意書きに書かれていたので見逃していました・・・

###やってみた感想
基本的には[公式ドキュメント][Link-4]のコマンドを次々打っていく感じでした。
途中、シェルファイルの作成があったり、`MinGW32`の操作がありましたが、基本的にはフォルダ構成の作成と環境変数の設定だけだったので特に考えないで実行する分には簡単でした。

ですが、今回のハローワールドのサンプルだと特にシリアル通信で返答するわけでもなく一瞬でターミナルが終了するので書き込めてるのかどうか確認しにくかったです。
今回は自分が前もって入れていたテストのファームが入っていたので書き換わっていると確認取れましたが、実際何が起きてるか全くわからなかったです。唯一変わったのは`m5stack`から音が出ることですが、それで正しいのかわからないです。

この手順をやってみて気づいたのですが、`xsbug`は基本的に`windows`のみの場合のみデバッグ機能なのか、自分の設定が悪くて使えてないだけなのかわからなかったです。
後は、`x86 Native Tools Command Prompt for VS 2019`だけで完結しているのでうまくいけば`VSCode`でも動かせそうかもしれないですが、自分の技量だとわからないですね・・・。

#最後に
今回は環境セットアップのみでしたが、これだけで1日かかりました。
やっぱり環境を作るのが一番時間がかかります・・・
開発環境の設定が自分にとって一番大変な作業なのでどなたかできたら教えてほしいです。

次回は`javascript`で`m5stack`を動かしてみようと思います。