【中学生のための個人開発】状態遷移の考え方を取り入れたmicro:bitプログラミング（中学校における計測・制御のプログラミング教材の開発）

# はじめに

中学校学習指導要領では、技術・家庭のＤ 情報の技術(3)において、従来の **「プログラムによる計測・制御」** から **「計測・制御のプログラミングによる問題の解決」** へと変化しており、次のア、イが求められています。

> ア 計測・制御システムの仕組みを理解し，安全・適切なプログラムの制作，動作の確認及びデバッグ等ができること。
>イ 問題を見いだして課題を設定し，入出力されるデータの流れを元に計測・制御システムを構想して情報処理の手順を具体化するとともに，制作の過程や結果の評価，改善及び修正について考えること。

また、「イ 問題を見いだして課題を設定し・・・」に対して、**統一モデリング言語**等を用いることも解説しています。

> なお，課題の解決策を構想する際には，自分の考えを整理し，よりよい発想を生み出せるよう，**アクティビティ図**のような**統一モデリング言語**や製作図等を適切に用いることについて指導する。

:::note info
**中学校学習指導要領（平成 29 年告示）解説**
[技術・家庭編（平成 29年7 月）
https://www.mext.go.jp/kaigisiryo/content/000236074.pdf](https://www.mext.go.jp/kaigisiryo/content/000236074.pdf)
:::

この学習指導要領に基づき、 **「計測・制御のプログラミングによる問題の解決」** に関する **プログラミング教材** も開発されていますが、 **「アクティビティ図のような統一モデリング言語」** を適切に用いることについて指導するような教材は少なく、**「フローチャート図」** との比較であったり、単なる代用に留まっているようです。
それどころか、プログラミング教材の開発環境に合わせるために、 **アクティビティ図** から **フローチャート図** への変換を行わなけらばならない事例もあります。

<table>
<tr>
<th>アクティビティ図とフローチャート図の比較</th>
<th>プログラムの構成要素（アクテビティ図）</th></tr>

<tr>
<td>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/deae5f99-124e-8da4-453a-3909e0bfb26f.png)

</td>
<td>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/134b4a32-1753-96a3-dff3-c95fbcecb0fa.png)

</td>
</tr>

<tr>
<td>

**引用:** 事例2-2 D 情報の技術　研修（D2）, p.39, 表２
https://www.mext.go.jp/content/20210419-mxt_jogai01-000006333_006.pdf
</td>
<td>

**引用:** 事例3-2 D 情報の技術　研修（D3）, p.88, 図３
https://www.mext.go.jp/content/20210419-mxt_jogai01-000006333_010.pdf
</td>
</tr>

</table>

このようなフローチャート図やアクティビティ図だけを用いたようなプログラミング教材に対して、井戸坂らは、 **「手続きの考え方に基づくプログラムの特徴と問題点」** を検討しており、「プログラム初心者は必要以上に複雑な入れ子構造を作る傾向があり、 **プログラム初心者である中学生の場合、複数の入れ子構造ができ、構造を理解できなくなる心配がある。** 」と指摘しています。

**引用：** 日本産業技術教育学会誌、第53巻第3号、2011、井戸坂 幸男・青木 浩幸・李 元揆・久野 靖・兼宗 進、状態遷移概念を利用した制御プログラミングの学習効果、p.p.179-187
https://kanemune.eplang.jp/_media/kanemunelab/data/jste5303idosaka_rtyos.pdf

このような問題点を踏まえ、井戸坂らは、 **状態遷移の考え方** を取り入れたプログラミング教材を検討し、 **「より複雑な動きを行わせる課題を扱えるようになることを確認した。」** ことを報告しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/c4ec4aae-d509-c20d-abfa-af7059a25cdc.png)

**従来の 「プログラムによる計測・制御」 から 「計測・制御のプログラミングによる問題の解決」 へと変化している**今、そのプログラムはさらに複雑化すると考えられ、**状態遷移の考え方**を取り入れることの必要性がより高まっていると考えられます。

そこで、 **micro:bit**に **状態遷移の考え方** を取り入れることのできる **Mstate拡張機能** を用いて、 **「micro:bitでつくるスタートシグナル付ストップウォッチ」** を計測・制御のプログラミング教材として開発しました。
また、 **状態遷移の考え方** は、 **統一モデリング言語** に含まれる **ステート図（状態遷移図）** で表現することが可能であり、 **自分の考えを整理し，よりよい発想を生み出せるよう、ステート図を適切に用いることについて指導する** ことも可能です。

# 【教材】micro:bitでつくるスタートシグナル付ストップウォッチ

https://makecode.microbit.org/_CfkdwPURE4sv

**ねらい**
計測・制御のプログラミングによる問題の解決ができるようにするとともに、状態遷移という考え方を取り入れ、統一モデリング言語に含まれるステート図を使って、自分の考えを整理し、よりよい発想を生み出せるようにする。

**概要**
micro:bitとMstate拡張機能を使用してストップウォッチを作成し、スタートシグナル付ストップウォッチへと機能を追加する。

**ブロック（完成版）**

![rect11903.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/557955d7-2b19-81f8-0445-58e6cb85bb7d.png)

**プログラミング教材へのリンク**

https://qiita.com/jp-96/items/090825806eeb3f3ff329


<details><summary>抜粋資料（ステート図）</summary>

## ステート図とは

**ステート図**

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 準備 : entry/                          \n\ndo/\n\nexit/\n
準備 --> 計時 : スタート
state 停止 : entry/                          \n\ndo/\n\nexit/\n
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/                          \n\ndo/\n\nexit/\n
計時 -r-> 停止 : ストップ
}
@enduml
```

**記号の意味**

|項目|記号|説明|備考|
|----|----|----|----|
|ステート|角丸の四角形|状態を表しており、ある特定の処理を行います。|外側の四角形は、１つのステートマシンを表しています（Mstate特有の決め事）。|
|トランジション|矢印|ある状態からある状態への状態遷移を表しています。|矢印が複数の状態を指している場合、何れか1つへの状態遷移が可能です。|
|トリガー|矢印の記述|トリガーが発生すると、その状態遷移が行われます。|【記述の省略】状態の処理が完了すると、その状態遷移が行われます。|
|開始状態|黒丸|ステートマシンが開始されると、開始状態からデフォルト・ステートへと状態遷移します。|終了状態は、二重丸で表します。|

**ステート内の記述例（ステート図）**

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 準備 : entry/                          \n - 経過時間をリセットする\ndo/\n\nexit/\n
準備 --> 計時 : スタート
state 停止 : entry/                          \n - 計時を停止する\n - 経過時間を求める\ndo/\n\nexit/\n
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/                          \n - 計時を開始する(再開する)\ndo/\n\nexit/\n
計時 -r-> 停止 : ストップ
}
@enduml
```

**ステート内の記述**

|項目|記号|説明|備考|
|----|----|----|----|
|entryアクション|(entry/)|その状態に入った時に、その処理を行います。|ステートマシンの開始や状態遷移のたびに実行されます。|
|doアクテビティ|(do/)|その状態にある場合に、繰り返し処理を行います。|Mstateでは繰り返し間隔（ミリ秒）を指定します。|
|exitアクション|(exit/)|その状態から出る時に、その処理を行います。|ステートマシンの終了や状態遷移のたびに実行されます。|

## 「時間を計る機能」

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 準備 : entry/                          \n - 準備処理\ndo/\n\nexit/\n
準備 --> 計時 : スタート
state 停止 : entry/                          \n - 停止処理\ndo/\n\nexit/\n
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/                          \n - 開始処理\ndo/\n\nexit/\n
計時 -r-> 停止 : ストップ
}
@enduml
```
## 「時間等を表示する機能」

<table>
<tr><th>時間を計測する機能</th><th>時間等を表示する機能</th></tr>
<tr><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 停止 : entry/\n - 停止処理\n - __M1へ"停止中"を送信__
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/\n - 開始処理\n - __M1へ"計時中"を送信__
計時 -r-> 停止 : ストップ
state 準備 : entry/\n - 準備処理\n - __M1へ"準備中"を送信__
準備 --> 計時 : スタート
}
@enduml
```

</td><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M1__ {
[*] --> 初期表示
state 初期表示 : □アイコン
初期表示 --> 点滅表示 : 計時中
state 結果表示 : 繰り返し表示
結果表示 -l-> 点滅表示 : 計時中
結果表示 -u-> 初期表示 : 準備中
state 点滅表示 : ♥点滅
点滅表示 -r-> 結果表示 : 停止中
}
@enduml
```

</td></tr>
</table>

## 動作確認と問題点

<table>
<tr><th>時間を計測する機能</th><th>時間等を表示する機能</th><th>結果表示機能</th></tr>
<tr><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 停止 : entry/\n - 停止処理\n - __M1へ"停止中"を送信__
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/\n - 開始処理\n - __M1へ"計時中"を送信__
計時 -r-> 停止 : ストップ
state 準備 : entry/\n - 準備処理\n - __M1へ"準備中"を送信__
準備 --> 計時 : スタート
}
@enduml
```

</td><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M1__ {
[*] --> 初期表示
state 結果表示 : entry/\n - 表示時間秒の計算\n - __M2の開始__\nexit/\n - __M2へ"終了"を送信__\n - アニメーションの停止
結果表示 -l-> 点滅表示 : 計時中
結果表示 -u-> 初期表示 : 準備中
state 初期表示 : □アイコン
初期表示 --> 点滅表示 : 計時中
state 点滅表示 : ♥点滅
点滅表示 -r-> 結果表示 : 停止中
}
@enduml
```

</td><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M2__ {
[*] --> 結果表示
state 結果表示 : 繰り返し表示
結果表示 --> [*] : 終了
}
@enduml
```

</td></tr>
</table>

## 「スタートシグナル機能」の追加

<table>
<tr><th>時間を計測する機能</th><th>時間等を表示する機能</th><th>結果表示機能</th></tr>
<tr><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M0__ {
[*] --> 準備
state 停止 : entry/\n - 停止処理\n - __M1へ"停止中"を送信__
停止 -u-> 準備 : リセット
停止 -l-> 計時 : スタート
state 計時 : entry/\n - 開始処理\n - __M1へ"計時中"を送信__
計時 -r-> 停止 : ストップ
state 秒読み : entry/\n - カウントダウン=5\ndo[1s]/\n - カウントダウンの減算\n - __M1へ"秒読み更新"を送信__
秒読み --> 計時 : [カウントダウン=0]
state 準備 : entry/\n - 準備処理\n - __M1へ"準備中"を送信__
準備 --> 秒読み : スタート
}
@enduml
```

</td><td>

```plantuml

@startuml
' http://www.plantuml.com/plantuml/
state __M1__ {
[*] --> 初期表示
state 結果表示 : entry/\n - 表示時間秒の計算\n - __M2の開始__\nexit/\n - __M2へ"終了"を送信__\n - アニメーションの停止
結果表示 -l-> 点滅表示 : 計時中
結果表示 -u-> 初期表示 : 準備中
state 初期表示 : □アイコン
初期表示 --> 秒読み表示 : 秒読み更新
state 点滅表示 : ♥点滅
点滅表示 -r-> 結果表示 : 停止中
state 秒読み表示 : entry/\n - カウントダウン表示
秒読み表示 -u-> 秒読み表示 : 秒読み更新
秒読み表示 --> 点滅表示 : 計時中
}
@enduml

```

</td><td>

```plantuml
@startuml
' http://www.plantuml.com/plantuml/
state __M2__ {
[*] --> 結果表示
state 結果表示 : 繰り返し表示
結果表示 --> [*] : 終了
}
@enduml
```

</td></tr>
</table>

</details>

# おわりに

本記事では、**状態遷移の考え方** を取り入れた **プログラミング教材** を開発しました。この教材によって、 **より複雑な動きを行わせる課題を扱えるようになる** ことが期待できるかと思います。

- **状態遷移の考え方** を取り入れた **プログラミング教材** を開発しました
- **Mstate拡張機能**を使用してmicro:bitでプログラミングを行えます
- 自動生成した **ステート図** で構造を確認できます
- **シミュレーター** や **デバッグ モード** を活用して **デバッグ** を行えるようになります
- micro:bitにプログラムを転送し、**実機での動作確認**を行うことができるようになります