はじめようプログラミング「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ

(1)

はじめようプログラミング

「アルゴロジック」「

1時間で学ぶソフトウエアの仕組み」を経て、

JavaScriptへ

東京都立三鷹中等教育学校

情報科

(2)

プログラミングをはじめる訳



「世界最先端

IT国家創造宣言・官民デー

タ活用推進基本計画」



平成２９年５月３０日改訂



http://www.kantei.go.jp/jp/singi/it2/k

ettei/pdf/20170530/honbun.pdf



「プログラミング」で

PDFを検索するだけでも



さらに、気になる言葉が「データサイエンス」

能城茂雄 http://noshiro.shigeo.jp/

(3)

社会

or 科学 -> 情報I へ



プログラミング教育は難しい？



特別なソフトウェアが必要・・・



教材がない・・・



専門家じゃないし、詳しくない・・・



だれでも、できる３時間＋αプログラミング

(4)

はじめてのプログラミング（実践報告）

1. アルゴロジック

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

2. 1時間で学ぶソフトウェアの

仕組み

http://dolittle.eplang.jp/index.php?1h

3. JavaScript

(5)

(6)

本時の目的



次回学習するプログラミングの前に

経験して欲しい「

アルゴリズム

」を

体験・理解する

(7)

アルゴリズムとは



コンピュータを使ってある特定の目的

を達成するための処理手順



別の表現



「アルゴリズム」というのは、コンピュー

ターで計算を行うときの「計算方法」



物事を考えるときの「やり方」

(8)

キュウリを輪切りにする手順



効率よくキュウリを切るために、処理手

順を見直すと、

(9)

キュウリを輪切りにする手順２



効率よくキュウリを切るために、処理手

(10)

本日の手順



遊び方

を見る



操作方法を動画で見る（オプション）



チャレンジ問題にチャレンジ！



◎ は完ぺき（無駄なし）

５点



○ はできたけど無駄がある

２点



最後に印刷して、集計結果を見せる（検印有

)

「

アルゴロジック

」で

検索すると自宅でも

出来ます

(11)

授業でのポイント（能城の感想）



アルゴロジックは、２時間やると飽きる



ページは、検索して開かせるのではなく、

ショートカット、ブックマークなどを利用



検索すると、答えがでてしまいます。



チェックは、手間がかかるが検印



点数の計算は、生徒に行わせる

(12)

２時間目

1時間で学ぶソフ

トウェアの仕組み

(13)

ドリトル



教育用プログラミング言語「ドリトル」



http://dolittle.eplang.jp/



オンライン版

BitArrow



オフライン（

Java版）



１時間で学ぶソフトウェアの仕組み



http://dolittle.eplang.jp/index.php?1h



http://noshiro.shigeo.jp/2017aomori/

(14)

３時間目～

JavaScript編

教科書 P.114～

(15)

JavaScriptでコーディング



メリット



ブラウザ（

Internet Explore）で動作



特別なソフトウェアがいらない



市販の解説書がたくさんある



教科書・指導書に解説がある



デメリット



デバッグが難しい



メモ帳が使いにくい

(16)

JavaScript １時間目

(17)

本時の目的

（以下のことを理解する）



コンピュータにとってのプログラムがどの

ようなものか体験する



JavaScriptという言語を使ってみる

教科書資料P.13も参照

(18)

簡単なプログラム



「

プログラム

(program)」とは



コンピュータが行う

処理手順を指示

したもの

をプログラムという



プログラムはコンピュータが動作するため

に必須



コンピュータは柔軟に判断できない



あらかじめ「こういう状況ではこうする」という

処理を人間がプログラムとして指示している

(19)

プログラム作成の手順

1. プログラムを作成するソフトウェアを起動



例メモ帳などのテキストエディタ

2. プログラムを入力し保存



エディタでプログラム言語の文法に従って命令を

記述する

3. プログラムが動作するか確認



例ブラウザで動作確認

4. 動作しない場合にプログラムを編集



例バグがないかデバッグする

(20)

世界初のバグ（

bug)



http://gigazine.net/news/201209

10-first-computer-bug/

(21)

具体的な作業



Zドライブ（個人用ドライブ）にフォルダ作成



js

というフォルダを作る

(

jsはJavaScriptの略

)

1. Terapad（エディタ）を起動

2. ファイル名を付けて保存



プログラム毎に名前を付ける

3. プログラムを入力



動作確認＆バグがあれば修正

(22)

保存の時の注意点

ｊｓとなっているか？

名前は？

moji.html

(23)

文字列を表示するプログラム



ファイル名

moji.html

<html> <body> <script> document.write(“MITAKA”); </script> </body> </html> MITAKA 実行結果

ダブルクォート

セミコロン

教科書 P.114 重要 Shift を押しながら “ ２ふ

(24)

注意すべき点



文字は半角（つまり

ASCII文字）で打つ



特に記号は注意する



命令の文字は正確に入力する



コンピュータは間違いを自ら訂正できない

(25)

文字列を３個表示するプログラム



ファイル名

moji2.html

<html> <body> <script> document.write(“MITAKA＿”); document.write(“MITAKA＿”); document.write(“MITAKA＿”); </script> </body> </html> 実行結果

(26)

本時の目的

（以下のことを理解できた？）



コンピュータにとってのプログラムがどの

ようなものか体験する

(27)

授業のポイント



手順でつまずかないように丁寧に



日本語（日本語入力）は使わない

(28)

JavaScript ２時間目

(29)

本時の目的

（以下のことを理解する）



フローチャート（流れ図）を理解する



アルゴリズムの基本構造を学ぶ



順次処理



繰り返し



(判断分岐）

(30)

フローチャート

(flowchart)



処理手順を示した図



流れ図とも呼ばれる



記号や書き方が

JISで定められている

(31)

文字列を表示するプログラムの流れ図



ファイル名

moji.html

<html> <body> <script> document.write(“MITAKA”); </script> </body> </html> はじめ “MITAKA” おわり

(32)

文字列を３個表示するプログラム



ファイル名

moji2.html

<html> <body> <script> document.write(“MITAKA＿”); document.write(“MITAKA＿”); document.write(“MITAKA＿”); </script> </body> </html> はじめ “MITAKA_” おわり “MITAKA_” “MITAKA_”

(33)

課題１結果を予想してみよう



ファイル名

ex01.html



document.write(“103-62”)との差は？

<html> <body> <script> document.write(103-62); </script> </body> </html> はじめ 103-62 おわり４１実行結果

(34)

順次処理

<html>

<body>

<script>

var a=1;

document.write(“number=”

,a

);

</script>

</body>

</html>

ファイル名

var.html

a

はじめ “number=”,a おわり var a=1 number=1 実行結果

(35)

var a=1；とは？



「

var a」で、変数宣言



「

a=1は

変数

aに１を代入する

」



「；」で、文の終わり



aと1は等しいではない ※数学と違うところ



等しいを意味する記述は

a==1

a

１

(36)

順次処理（入力を読み取る）

<html>

<body>

<script>

var namae=prompt(“What is your name?”);

document.write(“hello,”,namae);

</script>

</body>

</html>

ファイル名

hyouji.html

“What is your name?”

namae

hello,taka

(37)

ポップアップブロックを無効にする



ポップアップはブロックされました。



上記メッセージが出た場合は、

２か所クリック



prompt命令によってポップアップが出るため

１

２

(38)

繰り返し（文字を

4個表示）



ファイル名

juu.html

<html> <body> <script> var c; for(c=1;c<=4;c=c+1){ document.write(“TAKA＿”); } </script> </body> </html> はじめ “TAKA＿” おわりループ i=1;i<=10;i++ ループ c=1;c<=4;c=c+1 TAKA_TAKA_TAKA_TAKA_ 実行結果 var c

(39)

for文



for(初期化;実行条件;増分処理）{



初期化：変数

cは初期値として1が代入される



実行条件：

cが4以下の場合、｛｝の間が実

行される



増分処理：１回｛

｝の間を実行すると変数

c

for(c=1;c<=4;c=c+1){

document.write(“TAKA＿”);

}

(40)

本時の目的

（以下のことを理解できた？）



フローチャート（流れ図）を理解する



アルゴリズムの基本構造を学ぶ



順次処理



繰り返し



(判断分岐）

(41)

(42)

本時の目的

（以下のことを理解する）



アルゴリズムの基本構造を学ぶ２



順次処理



繰り返し



判断分岐

(43)

繰り返し（総和を求める）



ファイル名

sum.html

<html> <body> <script> var c,sum=0; for(c=1;c<=10;c=c+1){ sum=sum+c; } document.write(sum); </script> 実行結果 var c, sum=0

(44)

繰り返し（奇数の総和を求める）



ファイル名

sum02.html

<html> <body> <script> var d,sum=0; for(d=1;d<=5;d=d+2){ document.write(sum,”+”,d,”=“); sum=sum+d; document.write(sum,”<br>”); } </script> </body> </html> 0+1=1 1+3=4 4+5=9 実行結果はじめおわり var d,sum=0 sum=sum+d sum,”<br>” ループ d=1;d<=5;d=d+2 ループ sum,”+”,d,”=“

(45)

入力した数までの総和を求める

<html>

var e,num, sum=0;

num=parseInt(prompt(“Input num->”)); for(e=1;e<=num;e=e+1){ sum=sum+e; } document.write(“sum=”,sum); </script> </body> はじめ var e, sum=0; sum=sum+e ループ e=1;e<=num;e=e+1 ループ “Input num->” num

ファイル名

sum03.html

実行結果 ※10と入力したら

(46)

本時の目的

（以下のことを理解できた？）



アルゴリズムの基本構造を学ぶ

2 

順次処理



繰り返し



判断分岐

(47)

(48)

本時の目的

（以下のことを理解する）



アルゴリズムの基本構造を学ぶ３



順次処理



繰り返し



判断分岐

(49)

<html> <body> <script> var moji; moji=prompt("Y or N ->"); if(moji=="Y"){ document.write("Y!!"); } else { document.write("N!!"); }

判断分岐（

Yかどうか判定する）



ファイル名

ifbasic.html

実行結果 ※Yと入力したら実行結果 ※Y以外を入力したらはじめ moji “Y or N ->” moji==“Y” ”Y!!” おわり ”N!!” var moji

(50)

if文



条件式がみたされた場合に文

1が実行さ

れ、条件式が満たされない場合には文２

が実行される

if(条件式）｛

文

1;

} else {

文

2;

}

教科書 P.119

(51)

判断分岐（

Yかyであるか判定する）



ファイル名

ifbasic2.html

<html> <body> <script> var moji; moji=prompt("Y or N ->"); if(moji=="Y" || moji =="y"){

document.write("Y!!"); } else { document.write("N!!"); } Shift + ｜￥－を2個入力はじめ moji “Y or N ->” moji==“Y” || moji==“y” ”Y!!” ”N!!” おわり var moji

(52)

偶数奇数の判定をする



ファイル名

if.html

<html> <body> <script> var kazu=parseInt(prompt(“NUMBER”)); var ans=kazu%2; if(ans==0){ document.write(“even number"); } else { document.write(“odd number"); } </script> </body> </html> NUMBER 2 even number 実行結果 ※偶数を入力したら NUMBER 3 odd number 実行結果 ※偶数以外はじめ var kazu “NUMBER” ans==0 おわり var ans=kazu%2

even number _{odd number}

教科書 P.119

(53)

演算子



プログラムで使用

する演算子は数

学などとは異なる

(54)

配列を使ったプログラム



ファイル名

array.html

<html> <body> <script> d=new Array(31,28,31,30,31,30,31,31,30,31,30,31); m=parseInt(prompt(“Input 1-12>”)); document.write(d[m-1]); </script> </body> </html> Input 1-12> 11 30 実行結果 ※11と入力教科書 P.120

(55)

本時の目的

（以下のことを理解できた？）



アルゴリズムの基本構造を学ぶ

3 

順次処理



繰り返し



判断分岐



追加で、配列

(56)

サンプル問題１（次のプログラムの結果を答えよ）

<html>

<body>

<script>

document.write("document");

</script>

</body>

</html>

<html> <body> <script> var red=3; document.write(red); </script> </body> </html>

<html>

<body>

<script>

var a;

for(a=1 ; a<=4 ; a=a+1) {

document.write(“a”);

}

</script>

</body>

</html>

(57)

サンプル問題２（次のプログラム空欄を埋めよ）

<html> <body> <script> ① </script> </body> </html> はじめ “TAKa” おわり <html> <body> <script> var a; for(a=1 ④ 3; a=a+1) { document.write("a"); } </script> </body> </html> はじめ “a” おわりループ a=1;a<=3;a=a+1 ループ var a

はじめようプログラミング 「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ