micro:bitで簡単プログラミング学習(PC版)

micro:bit本体

micro:bitの開発環境を紹介します。(Windows 10版)

開発環境はインストールする必要はなく、お使いのパソコンでインターネットが見れるブラウザ環境(Google ChromeやMicrosoft Edge等)があれば大丈夫です。

「micro:bit」本体を持っていなくても画面上の「シミュレーター」で動作確認ができます。音もパソコンのスピーカーから鳴ります。
本体を買おうか迷ってる方はお試しでやってみましょう♪

スマホ版のmicro:bitの使い方は、以下のリンクで詳しく紹介しています。

micro:bitとスマホで簡単プログラミング学習
micro:bit でスマホを使った開発環境の紹介です。micro:bit 本体を持ってなくても画面上のシミュレータで動作確認できます。パソコンはないけどプログラミングをやってみたい方や、本体を買おうか迷ってる方はお試しでやってみましょう♪

スポンサーリンク

1.開発画面の起動とプログラムの作成

まずはこちら →「https://makecode.microbit.org/ 」にアクセスしましょう。
下画像のようなページが開きますので「新しいプロジェクト」をクリックしてください。

micro:bitでプログラミング学習

下画像のようにウインドウが開くので適当にプロジェクト名(ここでは「test」)を入力して「作成」をクリックしましょう。

micro:bitでプログラミング学習

スポンサーリンク

2.開発画面の紹介

下画像のようなページが開きます。これが「micro:bit」の開発環境です。

・作ったプログラムは画像左の「シミュレーター」で動作確認できます。
・画像の真ん中にプログラムコマンドの一覧があります。
・画像の右側でプログラムコマンドをブロックのように組み合わせてプログラミングします。

基本的な動作は本体がなくても「シミュレーター」だけで確認できます。
micro:bitでプログラミング学習画面の説明

スポンサーリンク

3.プログラムの作成

早速プログラミングしていきましょう♪

下画像のようにプログラムコマンド一覧の「基本」をクリックすると「基本」のコマンドリストが出てきます。
その中で「アイコンを表示」をリストの右側にドラッグ&ドロップ(マウスでクリックしたまま移動させて離す)しましょう。

micro:bitでプログラミング学習

プログラミング画面上に「アイコンを表示」が置かれました。
しかし、色が青じゃなくなってます。この状態ではプログラムは実行されません。
もう一度ドラッグ&ドロップして「最初だけ」のスキマに持っていきましょう。

micro:bitでプログラミング学習

すると「最初だけ」のスキマが広くなります。
広くなったらマウスのボタンを離してください。

micro:bitでプログラミング学習

コマンド「最初だけ」と「アイコンを表示」がブロックのようにピッタリはまって青くなります!
これでプログラムを実行できる状態になりました♪

今回のプログラムは本体の電源を入れると「LEDでハート型を表示」するものです。
画像左の「シミュレーター」でプログラムが実行されてハートマークが表示されるようになったのを確認できると思います。

4.プログラムの書き込みと動作確認

次に、作成したプログラムを本体に書き込むために、まず自分のパソコンにダウンロードします。
左下の「ダウンロード」をクリックしましょう。

micro:bitでプログラミング学習

ダウンロードがはじまって、下画像のようになればダウンロード成功です!
「完了」をクリックしましょう。

micro:bitでプログラミング学習

使っている「ブラウザ」によって、ダウンロードファイルの表示位置は変わりますが、気にせず「micro:bit」とパソコンをつなぎましょう。
すでにつないでる方はそのまま次へ。

micro:bitでプログラミング学習

「エクスプローラー」が開いて下画像のように「MICROBIT」フォルダが出来上がっていると思います。自動で立ち上がらない方は「エクスプローラー」アイコンをクリックして開きましょう。

micro:bitでプログラミング学習
「MICROBIT」フォルダの場所がわからなくても特に問題はないので見つからない方は気にせず次に進みましょう♪

「エクスプローラー」の「ダウンロード」フォルダをクリックしてください。

micro:bitでプログラミング学習

「ダウンロード」フォルダの中に「microbit-test.hex」があると思います。

micro:bitでプログラミング学習
プロジェクト名を「test」以外にした方は「test」の部分は自分で決めた名前になっています。

下画像のように「microbit-test.hex」を右クリックして「送る」→「MICROBIT」をクリックしてください。

micro:bitでプログラミング学習
ここで「MICROBIT」が表示されていない方は接続がうまくいっていません。
一度配線を抜いて差しなおしてみましょう。

「micro:bit」へのプログラムの書込みがはじまるので終わるまで待ちましょう。

micro:bitでプログラミング学習

書込みが終わって「micro:bit」本体にハートマークが表示されたら書込み成功です。

micro:bit本体LED点灯

5.まとめ

プログラミングの流れは以下のようになります。

 ①開発画面を起動してプロジェクトファイルを作成する。
 ②プログラムのコマンドをブロックのように組み合わせる。
 ③完成したプログラムをダウンロード。
 ④「ダウンロード」フォルダにできたファイルを右クリックして
  「送る」→「MICROBIT」をクリックで書込み
 ⑤動作確認

プログラムするためのコマンドは他にもたくさんあります。
詳しい使い方はまた別記事で紹介したいと思いますが、コマンドの内容は日本語で書かれているので、動きを想像しながらコマンドのブロックを組み合わせていろいろ試して遊んでみましょう♪

「micro:bit」を使ったビジュアルプログラミング方法について紹介しましたが、ビジュアルプログラミングをやっていく中で、そこから実際のプログラミングにどう移行したらよいのか迷われる方も多いのではと思います。

当ブログではビジュアルプログラミングから実際のプログラミング言語(C言語、Python、JavaScript)への移行方法についても以下のリンクで紹介してますので確認してみてください。

ビジュアルプログラミングから実際のプログラミング言語への移行方法は → こちら
micro:bitとスマホで簡単プログラミング学習
micro:bit でスマホを使った開発環境の紹介です。micro:bit 本体を持ってなくても画面上のシミュレータで動作確認できます。パソコンはないけどプログラミングをやってみたい方や、本体を買おうか迷ってる方はお試しでやってみましょう♪

コメント

タイトルとURLをコピーしました