Pepperで学ぶプログラミング~Pepperとじゃんけん~

# 概要  
小学生向けのプログラミング教育の一環として、Pepperを用いたじゃんけんアプリの作成を行なってみようと思います。小学生向けのプログラミング教育を行いたい教育者向けの記事となっています。

# 環境
今回は小学生が対象となるためRobo Blocksというウェブ上で動作し、ブロックを動かして実行するだけのお手軽かつ直感的に扱うことができるツールを用いてアプリの作成を行なっていきます。

※1.実機がなくてもRobo Blocks上で実行することができます。
※2.Robo Blocksのログインには「ルーム名」と「ルームパスワード」が必要です。

# 目的
今回はじゃんけんアプリの作成を通して次のことを学んでもらいます。  

- 乱数について
- 変数について
- 条件分岐について(if文について)  

上の三つの概念を理解してもらった上で、じゃんけんアプリを作成するという流れになります。
それでは始めていきましょう

# 乱数について 
 ```math
\rm \textbf{乱数って何？}\rightarrow\textbf{ランダムに数字が選ばれること}
```
- _乱数を用いてランダムに数字を話してもらう_  

<準備>
下図のブロックを、
<img width="665" alt="0929event_乱数1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/6ec741d1-6173-2bc4-9761-e4ac4c6686bc.png">
次のように並べます。
<img width="444" alt="0929event_乱数２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/9f881e56-7b0c-7ab4-6283-459710bac7ce.png">
<結果>
Pepperの写っている画面の左上に緑色の旗のマークがあるのでクリックすると、Pepperが1~10までの数字をランダムに話してくれます。

```math
                  　  ランダムな数を作成　\rightarrow　\rm Pepperがランダムな数を喋る
```

# 変数について
```math
\rm \textbf{変数って何？}\rightarrow\textbf{何かが入る箱のこと}
```
- _変数および乱数を用いてランダムに数字を話してもらう_

<準備>
変数のタブより変数の作成を行います。新しい変数の名前を「変数」とすると変数というブロックが生成されます。下図のブロックを、<img width="645" alt="0929event_変数１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/fa24a966-7757-df3b-a10b-adb1344d5684.png">
次のように並べます。
<img width="370" alt="0929event_変数２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/e4fdb93f-70fb-6306-6b38-e532da8bc4dd.png">
<結果>
実行結果は先の乱数と変わりませんが、変数を用いていることに注目したいです。

```math
              ランダムな数を作成　\rightarrow　「変数」に代入　\rightarrow　\rm Pepperが「変数」を喋る
```

# 条件分岐について(if文について)
```math
\rm \textbf{if文って何？}\rightarrow\textbf{場合分けをするためのもの}
```
- _生成した乱数に対して喋る内容を変えてもらう_

<準備>
下図のブロックを、
<img width="700" alt="0929event_if文1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/bb460437-3952-00fc-6344-bf2f1a2a0487.png">
次のように並べます
<img width="368" alt="0929event_if文2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/81f28283-d7f5-b50b-02d7-c8dfa563f366.png">
<結果>
[乱数＝３]のときPepperが「右」と言い、[それ以外]のとき「左」と言ってくれます。

```math
ランダムな数を生成　\rightarrow　「乱数」に代入　\rightarrow
\left\{
    \begin{array}{c}
      「乱数」=３のとき&\rightarrow& \rm Pepperが「右」と言う  \\
      それ以外のとき&\rightarrow& \rm Pepperが「左」と言う 
    \end{array}
  \right.
```

# じゃんけんアプリの作成
以上で学んだことを踏まえてじゃんけんアプリを作成していきます。
以降グー、チョキ、パーはそれぞれ

```math
\left\{
    \begin{array}{c}
      グー&\rightarrow& 1  \\
      チョキ&\rightarrow& 2  \\
      パー&\rightarrow& 3  \\
    \end{array}
  \right.
```
とします。プログラムの流れとしては、<img width="846" alt="0929event_じゃんけん1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/bd220a36-730a-5b15-105f-612004c3a9b0.png">
となるように作ります。下図のブロックを、
<img width="672" alt="0929event_じゃんけん４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/7a3cbdd3-d1be-fc83-2a4d-9991f35a46d3.png">
次のように並べます
<img width="490" alt="0929event_じゃんけん３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/549a52f3-fdd3-e14d-025c-c556f4b5b5a6.png">
これで自分がグーを出した場合の条件分岐ができました。同様にしてチョキとパーの場合を作ると次のようになります。
<img width="533" alt="0929event_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/4dc9be1c-5d13-b6e4-6b44-289d8b7074b6.png">

<結果>
「グー」を出したいときは「頭」、「チョキ」を出したいときは「右手」、「パー」を出したいときは「左手」をさわればPepperとじゃんけんできるようになりました。実機では次のようになりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiita投稿用動画１<br>基礎編 <a href="https://t.co/PmjYSYnU5S">pic.twitter.com/PmjYSYnU5S</a></p>&mdash; Pepper アトリエ秋葉原 Staff (@PepperAtelier) <a href="https://twitter.com/PepperAtelier/status/1188369651736051712?ref_src=twsrc%5Etfw">October 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

また画像表示させるブロックなどを用いるとよりわかりやすくなります。理解の早い小学生に応用編としてやってもらうのもいいかもしれないです。
![advanced.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505247/2f4e45ad-3a3b-f1c7-ba0d-70f19f5e8acb.png)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiita投稿用動画２<br>応用編 <a href="https://t.co/K6f1WocCWE">pic.twitter.com/K6f1WocCWE</a></p>&mdash; Pepper アトリエ秋葉原 Staff (@PepperAtelier) <a href="https://twitter.com/PepperAtelier/status/1188367913264091136?ref_src=twsrc%5Etfw">October 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>