こんにちは、クマベです。
この記事では、Visual Studio Code(VSCode)の環境構築をおこない、M5Stackの開発準備について説明します。
「Visual Stduio Code」は、便利な高機能エディタです。
主にプログラムの作成や編集、管理に利用されます。
様々なプログラム言語に対応しているので、たくさんの用途で活用できます。
本格的にプログラムを始めようとしている方なんかにオススメです。
エディタは様々ありますが、そのなかでもトップクラスに使いやすいと思います。
筆者も現役で使っています。
![](https://kumabelog.com/wp-content/uploads/2022/08/vscode.webp)
Visual Studio Codeの導入
![](https://code.visualstudio.com/opengraphimg/opengraph-home.png)
![install-vscode](https://kumabelog.com/wp-content/uploads/2022/08/install-vscode.webp)
※ここでは「Windows10 64bit」環境での方法を紹介します
![click-to-vscode](https://kumabelog.com/wp-content/uploads/2022/08/click-to-vscode.webp)
![vscode-agree](https://kumabelog.com/wp-content/uploads/2022/08/vscode-agree.webp)
![vscode-add-task](https://kumabelog.com/wp-content/uploads/2022/08/vscode-add-task.webp)
![vscode-install-end](https://kumabelog.com/wp-content/uploads/2022/08/vscode-install-end.webp)
はじめは下記のような表示がされますので、「信頼します」を選択しましょう。
![vscode-trust](https://kumabelog.com/wp-content/uploads/2022/08/vscode-trust.webp)
Visual Studio Codeの初期設定
左のメニューバーから「拡張機能」を選択します。
![vscode-external](https://kumabelog.com/wp-content/uploads/2022/08/vscode-external.webp)
検索窓から「japanese」と入力して、手順通りにインストールします。
![vscode-japanese](https://kumabelog.com/wp-content/uploads/2022/08/vscode-japanese.webp)
右下の「Restart」を選択すると、ソフトが再起動し、日本語設定になります。
![vscode-japanese-restart](https://kumabelog.com/wp-content/uploads/2022/08/vscode-japanese-restart.webp)
上記の日本語設定と同様に、C言語もインストールします。
![vscode-c](https://kumabelog.com/wp-content/uploads/2022/08/vscode-c.webp)
PlatformIO IDEの導入
検索窓から「platform」と入力して、手順通りにインストールします。
![vscode-platformIO](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO.webp)
右下の「Reload Now」を選択すると、ソフトが再起動し、インストールされます。
![vscode-platformIO-install](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-install.webp)
手順通りに進めて、「+ New Project」を選択します。
![vscode-platformIO-open](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-open.webp)
Name:ファイル名(HelloWorld)
Board:書き込むM5Stackシリーズ(本記事ではM5Stack FIREに設定)
Framework:フレームワーク(Arduino)
![vscode-platformIO-new-project](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-new-project.webp)
boardの部分は、上記で設定した名前になります。
![vscode-platformIO-set](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-set.webp)
1度ホームに戻り、「Libraries」を選択します。
![vscode-platformIO-add-project](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-add-project.webp)
検索窓から「M5Stack」と入力して、ライブラリを検索します。
![vscode-platformIO-m5stack-library](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-library.webp)
作成したプロジェクトを選択することで、ライブラリを使うことができます。
![vscode-platformIO-m5stack-add](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-add.webp)
正しく設定されていれば、下記のようにM5Stackのライブラリが表示されます。
![vscode-platformIO-m5stack-add-check](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-add-check.webp)
M5Stackへの書き込み
「main.cpp」のファイルに、下記のようなサンプルプログラムを入力します。
![vscode-platformIO-m5stack-helloworld](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-helloworld.webp)
M5Stackシリーズ付属のケーブルを使用して接続します。
![m5stack-setting](https://kumabelog.com/wp-content/uploads/2022/08/m5stack-setting.webp)
成功すると「SUCCESS」と表示されます。
プログラムに間違いなどがあると、進まない可能性があります。
![vscode-platformIO-build](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-build.webp)
成功すると「SUCCESS」と表示されます。
パソコンとM5Stackがうまく接続されていないと、進まない可能性があります。
![vscode-platformIO-m5stack-upload](https://kumabelog.com/wp-content/uploads/2022/08/vscode-platformIO-m5stack-upload.webp)
正しくプログラムを書き込めると、下記のように「Hello World」と表示されます。
![m5stack-helloworld](https://kumabelog.com/wp-content/uploads/2022/08/m5stack-helloworld.webp)
おわりに
以上で終了となります。お疲れさまでした!
本記事では「Visual Studio Code」で「M5Stack」シリーズにソフトを書き込む方法を紹介しました。
この手順を踏めば、あとは自由にプログラムを作成し、M5Stackで試せることができます!
次回は拡張モジュールを使った電子工作などをご紹介していきます。