第 19 回九工大わくわく科学教室一番はじめのプログラミング九州工業大学齊藤剛史 2019 年 3 月 16 日人間とコンピュータの違い 2 人間コンピュータ計算遅いすばやく計算記憶ちょっとしたことでも忘れるぼう大な量でも忘れない判断時に悩む正確にすばやく判断動ある自

(1)

一番はじめのプログラミング

九州工業大学齊藤剛史 2019 年 3 月 16 日

人間とコンピュータの違い ²

人間コンピュータ

計算⼒遅いすばやく計算

記憶⼒ちょっとしたことでも忘れるぼう大な量でも忘れない

判断⼒時に悩む正確にすばやく判断

⾏動⼒ある自分からは何もしない

柔軟性ある言われた通りにしか動かない

常識あるない。プログラム次第

(2)

人間とコンピュータの違い

人間コンピュータ

計算⼒遅いすばやく計算

記憶⼒ちょっとしたことでも忘れるぼう大な量でも忘れない

判断⼒時に悩む正確にすばやく判断

⾏動⼒ある自分からは何もしない

柔軟性ある言われた通りにしか動かない

常識あるない。プログラム次第

それぞれの得意なことを生かそう

人間が⾏動（処理）を決めてコンピュータに指示を与える

プログラミング︖

 プログラミング（ programming ）とは、プログラムを作成することにより、人間の意図した処理を⾏

うようにコンピュータに指示を与える⾏為である。

 Wikipedia

より引用

4 1 + 2 + 3 + ‥ + 1000 = ︖

#include <stdio.h>

void main(void){

int sum = 0;

for(int i=1; i<=1000; i++) sum += i;

printf(“sum = %d¥n”, sum);

}

1

から

1000

まで足し算するプログラム

(3)

プログラミング︖

 プログラミング（ programming ）とは、プログラムを作成することにより、人間の意図した処理を⾏

うようにコンピュータに指示を与える⾏為である。

 Wikipedia

より引用

コンピュータにさせたい仕事を順番に書くこと。

コンピュータは人間でないため、人間の言葉は理解でき

コンピュータが理解できる言葉（プログラム）で指示を

ない。

書く必要がある。

プログラムはどこにある︖

 ハードウェア（ Hardware ）

ゲーム機

ビデオデッキ

自動⾞

 ソフトウェア（ Software ）

カセット

 SD

カード

 CD / DVD / Blu-ray

 プログラム（ Program ）

人間が普段使用する言語に近い言葉で書かれたコン

ピュータへの命令⽂たるプログラム。

6

(4)

最近の代表的なプログラミング言語

 Python



きれいなコードが簡単に書ける言語

 C

言語



組み込み・

OS

関係で使われている言語

 Java



オブジェクト指向の代表的な言語

 JavaScript

 Web

系で最も使われている言語

 PHP



サーバーサイドの

Web

アプリケーションに適した言語

 Swift

 iOS

・

OSX

のアプリ開発に使われる新しい言語

 Ruby



日本で生まれたプログラミング言語

様々なプログラミング言語



画面に「

Hello, world!

」と

表示するプログラム #include <stdio.h>

int main(void) {

printf("Hello, world!");

return 0;

}

#include <iostream>

int main() {

std::cout << "Hello, world!" << std::endl;

}

C

C++

public class Hello {

public static void main(String[] args) { System.out.println("Hello, world!");

} }

Java

10 PRINT "Hello, world!"

20 END

BASIC

WRITE(6,10)

10 FORMAT('Hello, World!') STOP

END

FORTRAN

printf ('Hello, world!¥n')

MATLAB

program Hello(output);

begin

writeln('Hello, world!') end.

Pascal

8

(5)

Scratch では︖

#include <stdio.h>

int main(void) {

printf("Hello, world!");

return 0;

}

#include <iostream>

int main() {

std::cout << "Hello, world!" << std::endl;

}

C

C++

public class Hello {

public static void main(String[] args) { System.out.println("Hello, world!");

} }

Java

10 PRINT "Hello, world!"

20 END

BASIC

WRITE(6,10)

10 FORMAT('Hello, World!') STOP

END

FORTRAN

printf ('Hello, world!¥n')

MATLAB

program Hello(output);

begin

writeln('Hello, world!') end.

Pascal

Scratch とは︖

 Scratch （スクラッチ）

米国マサチューセッツ工科大学（ MIT

）メディアラボが開発した無償で利用できるプログラミング環境



設計者︓

Mitchel Resnick

（ミッチェルレズニック）

 MIT

メディアラボのライフロング・キンダーガーテン・

グループ（

The Lifelong Kindergarten group

）によって開発と保守が⾏われてる。

10

(6)

Scratch とは︖

 Scratch （スクラッチ）

米国マサチューセッツ工科大学（ MIT

）メディアラボが開発された、無償で利用できるプログラミング環境



設計者︓

Mitchel Resnick

（ミッチェルレズニック）

あらかじめ用意されたブロックを組み合わせることで簡

単にプログラムの作成が可能

小学生から大人まで、誰でもすぐにプログラミングを始

めることが可能

Hat block

Stack block Boolean block

C Block Reporter block

Cap block

Scratch とは︖

 Scratch

 Windows

、

Mac

など、様々なコンピュータで利用できる。

ウェブアプリケーションのため、特別なソフトウェアを

必要としない。

作成したプログラムの結果（動作）をすぐに画面で確認

できるため、間違ったプログラムを作っても簡単に修正

作成したプログラムを

できる。

Scratch

のサイトで世界中の人々に公開したり、他人が作成したプログラムを⾒たりすることができる。

12

(7)

必要な動作環境

 デスクトップ

 Chrome (63+)

 Edge (15+)

 Firefox (57+)

 Safari (11+)

 タブレット

 Mobile Chrome (62+)

 Mobile Safari (11+)

 オフライン環境

 Scratch

デスクトップをインストールすることで、イン

ターネット接続無しで利用可能

Scratch で何ができる︖

 他のプログラミング言語と同様に、様々なプログラムを作ることができる。

シューティングゲーム

アドベンチャーゲーム

 RPG

ゲーム

動く紙芝居のようなアニメーション

お⾦の計算

体調管理ソフト

物理シミュレーション

学校などで使うプレゼンテーション資料

ロボットや電子楽器などのような電子機器を制御するプ

ログラム

14

(8)

Scratch 公式ウェブサイトにアクセス（ 1/2 ）

(1) Google などの検索画面で

「 scratch 」と⼊⼒する。

Scratch 公式ウェブサイトにアクセス（ 2/2 ） ¹⁶

「 Scratch – Imagine, Program, Share 」

をクリックする。

(9)

Scratch 公式ウェブサイト

「作る」をクリックする。

プログラムを作る（ 2/9 ） ¹⁸

(10)

プログラムを作る（ 3/9 ）

(1) 「イベント」をクリックする。

(2) をドラッグして

プログラムを作る（ 4/9 ）

におく。

(3) スクリプトエリアにおく。

20

(11)

プログラムを作る（ 5/9 ）

(4) 「⾒た目」をクリックする。

をドラッグして、

(5) をドラッグして、

の下につなげる。

プログラムを作る（ 6/9 ）

(6) 「」をクリックする。

22

(12)

プログラムを作る（ 7/9 ）

「こんにちは︕」が表示された。

プログラムを作る（ 8/9 ）

(7) 「●」をクリックする。

」が消える。

「 Hello! 」が消える。

プログラムが終了した。

24

(13)

プログラムを作る（ 9/9 ）

(1) 「こんにちは︕」でなく別の言葉を試そう。

(2) 「」をクリックする。

コンピュータに保存する（ 1/2 ）

(1) 「ファイル」－「コンピュータに保存する」をクリックする。

26

(14)

コンピュータに保存する（ 2/2 ）

ト」がダウンロードされる。

(3) sb3 ファイル「 Scratch のプロジェクト .sb3 」がダウンロードされる。

コンピュータから読み込む（ 1/2 ）

み込む」をクリックする。

(1) 「ファイル」－「コンピュータから読み込む」をクリックする。

28

(15)

コンピュータから読み込む（ 2/2 ）

 Sb3 ファイルが保存されているフォルダに移動する。

 開きたい sb3 ファイルを選択する。

開きたいファイルを選択する。

(2) 開きたいファイルを選択する。

する。

(3) 開くをクリックする。

Scratch の画面構成

ステージスクリプトエリアステージ

スクリプトエリア

ブロックパレットブロックパレット

スプライトリストスプライトリスト

30

(16)

スプライト

 「スプライト」

＝「着せ替え自由のキャラクター画像」

ステージ

 「ステージ」

＝「スプライトが動き回る舞台」

スプライトを動かす。

スプライトの⾒かけを変化する。

32

(17)

ステージと座標

 ステージの大きさは横幅 480 画素、縦幅 360 画素

240 240 240

240 180 180

180 180

X

座標

Y

座標

480

画素

360

画素

0, 0

240, 0

240, 180

240, 180 0, 180

240, 180 240, 180

240, 0

0, 180

「画素」＝「歩」

スクリプト

 「スクリプト」

＝「俳優『スプライト』のための台本」

34

(18)

ブロック

 「ブロック」＝「命令」

ブロック

 9 グループに分かれている。

グループ名説明ブロック数

動きスプライトを右や左に動かしたり、回転させたりするブロックのグループ

18

⾒た目スプライトにセリフを言わせたり、表示したり隠したりするブロックのグ

ループ

20

音音の種類を変えたり、音の大きさを変えたりするブロックのグループ

9

イベント何かのできごとをきっかけにプログラムを動かすブロックのグループ

8

制御どのブロックを実⾏するかを思い通りにするためのブロックのグループ

11

調べるスプライトやキーボードの状態などを調べるブロックのグループ

18

演算計算をするためのブロックのグループ

18

変数独自に作成できる変数ブロックのグループ

5

ブロック作った独自に作ったブロックのグループ－

合計

107

36

(19)

二つのスプライトを使ったプログラム

ステージのモード

 ステージは下記 4 通りの⾒せ⽅がある。

小さいステージ



スクリプトエリアが広く使えるため、プログラム開発に適して

プレゼンテーションモード

いる。



ステージを画面いっぱいに表示して⾒せたい時に便利である。

ターボモード



スクリプトを通常よりも⾼速で処理する。



画面の更新速度が早くなるため、アニメーションなどグラフィカルなプロジェクトには不向きである。



数式処理が多いプロジェクトには適している。



オンラインのターボモードとオフラインエディタのターボモードは速度が異なる。

38

(20)

標準レイアウト

標準のスクリプトエリア

少し大きいステージ

小さいステージ

小さいステージ広いスクリプトエリア

40

(21)

プレゼンテーションモード

サンプルプログラム

じゃんけん

だるまさんがころんだ

めざせキングオブりんご拾い︕

インベーダーウォーズ

クリックゲーム

スロット

ハードル

ピアノ フルーツキャッチ

ペイント

リンゴへ GO

図形描画

工事ちゅう︕

時計 格闘猫ギャラクシー

神経衰弱

計算問題自動生成

迷路 魔王の逃走劇

魚の冒険

(22)

九工大生が作成したプログラム

 科目名︓プログラム設計

九州工業大学情報工学部システム創成情報工学科

 2

年生

 2015

年度〜

2018

年度

 2018

年度については現在集計中

普段は Java

を用いるが、レポート課題として

Scratch

の作品を提出

学生間の投票で上位 5

作品を紹介

Scratch の Web サイトで検索

「システム創成情報工学科」で検索

44

(23)

Scratch の Web サイトで検索

プログラミングの手順

問題発生問題解決のアイデア仕様決定

設計コーディング

デバッグドキュメント作成



問題の分析



問題解決に必要な仕様の洗い出し



仕様を実現するための

データ構造、アルゴリズムの設計



設計に従ってプログラムの作成



プログラムの誤りの洗い出し



プログラムの修正



プログラム開発の記録



利用者のための使用説明書作成

(24)

何をする︖

 どんなプログラムを作るか考えをまとめよう。

1.

紙やホワイトボードにアイデアを列挙する。



どんな種類（ゲーム、アニメーション）︖



スプライト（キャラクタ）は︖



背景は︖



マウス操作は︖



キー操作は︖

2.

アイデアを整理する。



処理の流れ、変数

3.

プログラムを作る

4.

テストする（動作を確認する）

→

直す

→

テストする

→

直す

→

・・・



ある程度できたら、他の人にも体験してもらおう。

作成した作品について

 皆さんが作成した作品（プログラム）を自宅で実

⾏できるようにします。

 3

月

20

日（水）

18

時までに公開します。

http://www.slab.ces.kyutech.ac.jp/~saitoh/scratch20190315/

インターネットの利用環境が必要です。

 HP より作成したプログラム

（ sb3 ファイル）をダウンロードして下さい。

 問題があればメールでお問い合わせ下さい。

 [email protected]

(25)

プログラミングの手順

 どんなプログラムを作るか考えをまとめる。

1.

紙やホワイトボードにアイデアを列挙する。



どんな種類（ゲーム、アニメーション）︖



スプライト（キャラクタ）は︖、背景は︖ 、マウス操作は︖ 、キー操作は︖

2.

アイデアを整理する。



処理の流れ、変数

3.

プログラムを作る

4.

テストする（動作を確認する）

→

直す

→

テストする

→

直す

→

・・・



ある程度できたら、他の人にも体験してもらう。

目的を決める

（要件定義）機能検討

（設計）プログラム

作成テスト・修正

Scratch からステップアップ

 Scratch でプログラミングを体験しよう。

 Scratch

で、作る楽しさ、考える楽しさを知ろう。

 もっと⾼度なプログラミングを学ぼう。

異なるプログラミング言語（ Java

、

C/C++

など）

プログラミング技術（アルゴリズムやデータ構造）

学習サイト

 CODE https://code.org/



アルゴロジック

https://home.jeita.or.jp/is/highschool/algo/

 paiza http://paiza.jp

50

(26)

プログラミング言語の種類

プログラミング言語

機械語アセンブラ言語⾼水準言語インタプリタ言語コンパイラ言語

BASIC

Python Ruby C Java

PHP

Perl C++

JavaScript

参考情報

 アルゴロジック

プログラミングの基本となるアルゴリズムをゲーム感覚

で習得するための課題解決型ソフトウェア

 http://home.jeita.or.jp/is/highschool/algo/index.html

52

(27)

参考情報

 Code.org

 2013

年

1

月にハディとアリ・パルトヴィ兄弟が設⽴

 https://code.org/

Scratch からステップアップ

 Scratch でプログラミングを体験しよう。

 Scratch

で、作る楽しさ、考える楽しさを知ろう。

 もっと⾼度なプログラミングを学ぼう。

異なるプログラミング言語（ Java

、

C/C++

など）

プログラミング技術（アルゴリズムやデータ構造）

情報系の大学（九工大）に入学しよう。

(28)

最後に

 自宅でもプログラミングに取り組んで下さい。

 Scratch

はプログラミング言語の一つです。

より⾼度なプログラミングを学びたい人は相談して下さ

い。



九工大入学を目指そう︕



算数（数学）、理科、語学（国語、英語）なども勉強しよう︕

一番はじめのプログラミング

九州工業大学 齊藤 剛史 2019 年 3 月 16 日

人間とコンピュータの違い 2

人間とコンピュータの違い

プログラミング︖

 プログラミング（ programming ）とは、プログラム を作成することにより、人間の意図した処理を⾏

うようにコンピュータに指示を与える⾏為である。

 Wikipedia

4

1 + 2 + 3 + ‥ + 1000 = ︖

1

1000

プログラミング︖

 プログラミング（ programming ）とは、プログラム を作成することにより、人間の意図した処理を⾏

うようにコンピュータに指示を与える⾏為である。

 Wikipedia

コンピュータにさせたい仕事を順番に書くこと。

コンピュータは人間でないため、人間の言葉は理解でき

コンピュータが理解できる言葉（プログラム）で指示を

プログラムはどこにある︖

 ハードウェア（ Hardware ）

ゲーム機

ビデオデッキ

自動⾞

 ソフトウェア（ Software ）

カセット

 SD

 CD / DVD / Blu-ray

 プログラム（ Program ）

人間が普段使用する言語に近い言葉で書かれたコン

6

最近の 代表的なプログラミング言語

 Python



 C



OS

 Java



 JavaScript

 Web

 PHP



Web

 Swift

 iOS

OSX

 Ruby



様々なプログラミング言語



Hello, world!

C

C++

Java

BASIC

FORTRAN

MATLAB

Pascal

8

Scratch では︖

C

C++

Java

BASIC

FORTRAN

MATLAB

Pascal

Scratch とは︖

 Scratch （スクラッチ）

米国マサチューセッツ工科大学（ MIT



Mitchel Resnick

 MIT

The Lifelong Kindergarten group

10

Scratch とは︖

 Scratch （スクラッチ）

米国マサチューセッツ工科大学（ MIT



九州工業大学齊藤剛史 2019 年 3 月 16 日

人間とコンピュータの違い ²

 プログラミング（ programming ）とは、プログラムを作成することにより、人間の意図した処理を⾏

 プログラミング（ programming ）とは、プログラムを作成することにより、人間の意図した処理を⾏

最近の代表的なプログラミング言語

 他のプログラミング言語と同様に、様々なプログラムを作ることができる。

Scratch 公式ウェブサイトにアクセス（ 2/2 ） ¹⁶

プログラムを作る（ 2/9 ） ¹⁸

(6) 「」をクリックする。