プログラムをやってみよう！

この記事は、[プロ生ちゃん Advent Calendar 2017](https://adventar.org/calendars/2546#list-2017-12-05)の14日目の記事です。

はじめまして、14日目担当のTakagi[@susumu_taka](https://twitter.com/susumu_taka)です。

# 昨日の出来事

先日（13日）の夜、何気にtwitter見てましたらね、こんな書き込み見つけましてね・・・

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">明日あいてる！　プロ生ちゃん Advent Calendar 2017 - Adventar <a href="https://t.co/KpirEX3xCU">https://t.co/KpirEX3xCU</a></p>&mdash; プロ生ちゃん（暮井 慧）＠萌えキャラコンテスト投票よろしくね (@pronama) <a href="https://twitter.com/pronama/status/940907206626590721?ref_src=twsrc%5Etfw">2017年12月13日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

あらら、こりゃ大変！
と言う事でTakagiが書いてみようと思いまして参加させて頂きました。

# プログラムを学ぶ
プロ生ちゃんを「プログラミングは楽しいよ！」を何時も発信してくれてるなぁと思いながら見ています。
プロ生ちゃんを見て、プログラミングに興味を持ってらったらとても嬉しいですね！

ただ、プロ生ちゃんを見て「プログラムやってみたいなぁ・・・」と思うけど、何から始めれば良いのか分からない方もきっと多いと思います。

実際、プログラム自体はそんなに難しい事ではないので、気軽に始めてみるのが良いです！。

今回はプログラムを学ぶポイントをご紹介します。

# 入門はＣ言語？
**「プログラムを学ぶならC言語でしょ！」**と聞いた方もおられると思いますが、「何年前の話ですか？」と言いたくなりますｗ
確かに基礎的内容を学ぶには最適なのですが、C言語にこだわる必要は全くありません。

プログラム言語は数多くあり、書き方も用途も異なりますが、根本はほぼ変わりません。
基本を押さえれる事が出来るならば、学ぶ言語は何でも良いと思います。

また、「プログラムは難しい」と言われますが、これは思い込みです。
ポイントを学んでおけば、さほど難しい事ではありません。


# プログラム学習　３つのポイント
プログラムを学ぶにあたり、３つの覚えておくべきポイントがあります。

1.「変数」を学ぶ
2.「分岐」を学ぶ
3.「繰り返し」を学ぶ

基本的にはこの３つがポイントです。
所詮プログラムなんて「繰り返し」と「分岐」の集まりにすぎません。
この２つを抑え、「変数」を絡める事が出来れば大抵の事はまかり通ります。

逆を言えば、「分岐」と「繰り返し」を知らないとプログラムがほぼ組めないと言ってもよいと思います。


プログラムを学ぶコツは**「３つのポイントを如何に学ぶか」**になります。

今回はこの３つのポイントのひとつ、**「変数」**を[scratch](https://scratch.mit.edu/)を使って学びます。

全部書けよって・・・？
いや、書くの結構大変なんですよ・・・

今回の内容が好評なら続き書きますｗ



# scratchはいいぞ！
**scratch！？　 あんなの子供向けのやつでしょ！？**

と言う方もおられるかもしれませんが、中々バカには出来ません。
少なくとも、「○○言語　入門」みたいな技術本を買って「Hello World」を学ぶより、よっぽど有意義だと私は思います。

作ったプログラムはすぐに動くし、ブロックを積む感覚でプログラム組めるし

**なにより、お金かかりませんからね！！！**

# scratchの画面説明
![画面１.png](https://qiita-image-store.s3.amazonaws.com/0/100025/fa637043-27f4-f04f-69b2-01039bb0d23a.png)

scratchでプログラムを作る画面を見てみましょう、大まかに４つの構成で成り立っています。

プログラム作成画面：プログラムを組み立てる（scratchでは入力と書かない方が良いでしょう）画面
部品：プログラムを組む時に使用する部品です、右のプログラム作成画面に配置して使います
実行画面：プログラムを動かすと、作ったプログラムがここで動きます
素材：プログラムで動かすイラストなどを管理するエリアです

実際に使いながら、プログラム学習のポイントを押さえていきましょう

# その前に・・・準備

scratchでは、公式キャラクターの「猫ちゃん」が素材として準備されています。
猫ちゃんではモチベーションが上がらないので、プロ生ちゃんに降臨して頂きましょうｗ

[マスコットアプリ文化祭2017](https://mascot-apps-contest.azurewebsites.net/)の[プロ生ちゃん素材](http://pronama.azurewebsites.net/pronama/download/)を拝借します。

ダウンロードした素材から、好きなプロ生ちゃんを追加しましょう
追加の方法は、素材エリアの「新しいスプライト」の右に「ファイルから新しいスプライトをアップロード」を選択し追加します。

![画面3.png](https://qiita-image-store.s3.amazonaws.com/0/100025/c2a5fffb-568e-804e-2579-ca964148d85f.png)

**プロ生ちゃん**が実行画面に降臨しました！
![画面４.png](https://qiita-image-store.s3.amazonaws.com/0/100025/1c38037e-d7ae-0400-0152-844b15e76103.png)

ただし、猫ちゃんと被ってますね・・・邪魔なので、猫ちゃんにはお帰り頂きましょうｗ

猫のスプライトで右クリックし、「削除」もしくは「隠す」を選びます
「削除」は素材が無くなり、「隠す」は実行画面に表示されなくなります。
※問答無用で削除した私。。。。
![画面５.png](https://qiita-image-store.s3.amazonaws.com/0/100025/2d989f07-4da0-c1f1-7ffa-30fe43c23137.png)

**これで準備完了！**

# ポイント１　変数を学ぶ
せっかくなので、プロ生ちゃんに一言頂きましょう。
「喋る」という部品も存在するので、簡単に喋らすことが出来ますが、今回は変数を使用します。

一般的な技術本では、**「変数は箱の様な入れ物」**として登場します。
プログラムでは難しい計算も瞬時にこなしてくれますが、答えを覚えてくれません。
答えは変数などに入れて記憶（保管が正しいかな？）させる必要があります。

文字や計算の答え入れたり、画像入れてみたり、データベースのデータ入れてみたりと、何でも入ります。
C言語などでは、入れる内容によって「変数の作り方（技術本では「型宣言」という内容で登場します）」があるのですが、最近はあまり気にしません。
※気にはした方が良いんですケドね。。。。


なので、一般的な技術本では、**「箱の様な入れ物」**として紹介されているんですね。

scratchで実際に変数を作ってみます

部品の[スクリプト]を選択し、[データ]->[変数を作る]を押すと変数を作る画面が表示されます。
scratchでは日本語でも変数を作る事ができますが、一般的なプログラムでは日本語では作らないので、変数は半角英数字で作成してみます。
![画面6.png](https://qiita-image-store.s3.amazonaws.com/0/100025/bd74b778-98d6-79b2-1da9-3c0e7d213b59.png)

「すべてのスプライト用」「このスプライトのみ」とありますが、技術本では**「ローカル変数」や「グローバル変数」**という形で登場します。一旦、「すべてのスプライト用」で作成します。


変数が作られると作成した変数が表示されます。
![画面7.png](https://qiita-image-store.s3.amazonaws.com/0/100025/2c41f389-3a72-39a9-aed2-debd8e49ff6b.png)

変数が出来たので、プロ生ちゃんに喋らせたい言葉を変数に入れてみましょう。
入れ方は簡単で、先ほど作った変数の[変数名を０にする]という所の0を好きな言葉に変えるだけ

実際のプログラムでは、プログラムの中で変数に内容を設定したりします。

![画面8.png](https://qiita-image-store.s3.amazonaws.com/0/100025/df27858f-bccc-4d3f-e2af-a3a265f29fc1.png)

では、実際に喋って頂きましょう。

[スクリプト]->[見た目]を選択し、[Hello!と2秒言う]という部品をプログラム画面にドラックします。
![画面9.png](https://qiita-image-store.s3.amazonaws.com/0/100025/eb524aa5-25ff-b997-16e2-65d8e7211f2a.png)

次に、[スクリプト]->[データ]を選択し、変数の名前を【Hello!と2秒言う】のHello!の上までドラックします
こうなれば成功
![画面12.png](https://qiita-image-store.s3.amazonaws.com/0/100025/51d48dc6-6de2-73a0-f724-6b9ff6bfc670.png)

こうなったりしたら失敗です、変数を正しい位置にセットしましょう
![画面10.png](https://qiita-image-store.s3.amazonaws.com/0/100025/bfc1a9cf-06e7-6f4a-4681-fdbe8573cc1e.png)　![画面11.png](https://qiita-image-store.s3.amazonaws.com/0/100025/aa9420c5-dcc4-e7ef-9dea-0252a5d43d96.png)

基本的にはこれで完成

プログラムの動かし方は、作成したプログラムをクリックすれば動きます
![画面13.png](https://qiita-image-store.s3.amazonaws.com/0/100025/cabb6cf8-9301-396e-1b89-3be7f2f2fbec.png)

# ちょっとだけ応用
より、プログラムチックに組み替えてみましょう
![画面14.png](https://qiita-image-store.s3.amazonaws.com/0/100025/80b38d2e-ce15-0f24-aeb9-eb861937aa95.png)

１ブロック目：「変数を隠す」は実行画面の左上にある変数を見えない様にしています。
２ブロック目：pronamaという変数に "あのね・・・" という文字を入れています
３ブロック目：変数の内容を表示させています
４ブロック目：pronamaという変数に "ＣＤ買ってね！！" という文字を入れています
５ブロック目：変数の内容を表示させています

1ブロック目の「変数を隠す」は、変数名の左隣にあるチェックボックスを外す事で非表示にする事も可能です
![画面15.png](https://qiita-image-store.s3.amazonaws.com/0/100025/cfa65ccd-703f-5b6a-bc5a-8d00edd295e4.png)


２ブロック目で　"あのね・・・"　と入れた後４ブロック目で　"ＣＤ買ってね！！"　となっています。
これは、一つの変数を使いまわしした事になります（変数の中身を上書きしたと思って頂ければOKです）




# 最後に
今回作成した物は、[こちらで公開しています](https://scratch.mit.edu/projects/193219334/#player)

今回は変数の基本的な説明でした。
変数は掘り下げると奥が深く、とても便利に使えます。

また、今回使用した[scratch](https://scratch.mit.edu/)では、他にも「動きを加えたり」、「音をならしたり」様々な事が簡単に行えます。
いつくかの基本的な説明も省いていますが、また次の機会にでもご紹介しますね

scratchを利用して[マスコットアプリ文化祭2017](https://mascot-apps-contest.azurewebsites.net/)に参加してみるのもありではないでしょうか！！

そして、この続き（連載）はあるのでしょうか・・・ｗ