2025年1月7日

016-1.EV3で楽しむMakeCode入門-第5回「JavaScriptでプログラムを書いてみる」

マイクロソフトが無償で提供している「Microsoft MakeCode(メイクコード)」というプログラムの開発環境を使ってレゴ マインドストームEV3のプログラミングを行う方法を紹介します。MakeCodeはインターネットに接続されたWebブラウザで動作します。画面上のブロックを組み合わせるだけで、直観的にプログラムを作成することができます。
MakeCodeの公式サイトはこちらです。(文/松原拓也)

◆ JavaScriptとは

MakeCodeには2種類のプログラムの作り方があります。
1つはブロックを組み合わせて作る方法。
もう1つはJavaScript(ジャバ・スクリプト)で作る方法です。
JavaScriptはWebブラウザ等で動かすことができるという特徴を持つプログラム言語です。JavaScriptはパソコン以外にもゲーム機やスマートフォンでも実行することができますので、Webページの分野では広く普及しています。MakeCodeはブロックでプログラムを作ることができますので、JavaScriptを選ぶ必要もないのですが、今回はあえて使ってみましょう。

JavaScriptはテキストエディタを使って文字でプログラムを作ります。Windowsの「メモ帳」を使っても作成することができます。

プログラムの例がこちらです。できるだけシンプルな内容にしました。このプログラムでは「1+1」という計算を行って、画面に表示させています。計算の答えは変数「answer」に格納しています。
JavaScriptはHTMLという書式の一部として書きます。赤ワクで囲んだ部分がJavaScriptで、残りはHTMLです。作成したプログラムは拡張子が「html」のファイルとして保存します。これをHTMLファイルといいます。

出来上がったHTMLファイルをWebブラウザで開くとプログラムが実行されます。
1+1の答えとして「2」が表示されました。

◆ ブロック→JavaScriptへの変換

MakeCodeはブロックのプログラムをJavaScriptに変換することができます。そこで、1+1の計算をMakeCodeのブロックを使ってプログラミングしてみました。

ここで「JavaScript」ボタンを押します。
少し待つと、ブロックのプログラムがJavaScriptに切り替わりました。先ほど作ったプログラムと見比べると、かなり違っています。
1行目の「let~」は変数を作成する命令です。
2行目は「1+1」を計算する命令。
3行目は結果を表示する命令です。この「brick.~」という命令はMakeCode特有の命令です。
4~6行目は無限ループを行う命令です。これがないと、実行してすぐにプログラムが終了してしまいます。

このプログラムがWebブラウザで動くか確認してみましょう。 生成されたプログラムを一部コピーして、 先ほど作ったHTMLファイルにペーストしてみました。

Webブラウザで開くとプログラムが動きました。結果は先ほどと全く同じです。
行の最後に「;(セミコロン)」がないので、ちゃんと動くか心配でしたが、問題なかったようです。

◆ JavaScript→ブロックへの変換

今度は逆のパターンで、JavaScriptのプログラムをブロックに変換します。
「Math.」というライブラリを使ったプログラムの例です。少し難しいほうがいいかと思ったので、Math.cos関数やMath.sin関数を使ったプログラムを作ってみました。
長さ50、角度の30度のX座標とY座標を計算しています。「Math.PI」は円周率の3.141592…という値が入っています。「角度×円周率÷180」という計算をすることにより、角度からラジアンを求めています。

Webブラウザで開くとこうなります。
答えはX座標が約43、Y座標が約24です。

MakeCodeにプログラムをコピー&ペーストします。 全部コピーするのではなく、4行だけコピーします。 let命令で変数xと変数yを作成しているところと、Math.~関数を呼び出しているところです。

「ブロック」ボタンを押します。
少し待つとブロック型のプログラムに切り替わりました。自動的にブロックの組み合わせを考えてくれます。すごい技術です。
「Math.PI」は該当するブロックがなかったため、灰色のブロックになりました。

シミュレータによる実行結果です。X座標とY座標が表示されました。
「Math.PI」のブロックが灰色だったので、動作しないのではと心配していたのですが、正しく動作しています。JavaScriptのプログラムが見せかけじゃなくて、本当に動いているような気がします。

今回作成したプログラム(MakeCode)

以上でMakeCodeを使ったEV3のプログラム入門を終わります。MakeCodeは他のロボットやマイコンボードでも動作しますので、興味があったら試してみましょう。

当ブログの内容は、弊社製品の活用に関する参考情報として提供しております。
記載されている情報は、正確性や動作を保証するものではありません。皆さまの創意工夫やアイデアの一助となれば幸いです。