プログラミング単元の授業のポイント進め方とクラウド型実習環境の活用

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright © Asial Corporation. All Rights Reserved. 1. プログラミング単元の授業のポイント 2. 教科書のページに対応する授業案 ① 『最新情報I』第６章 Python版＋ノートより・ 2節プログラミングの実践（p.168〜170） ② 『高校情報I』より・ 33 関数（p.140〜141） 3. クラウド型実習環境Monaca Educationの活用付録: URLのご案内

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Copyright © Asial Corporation. All Rights Reserved. 授業での導入・説明のポイント：例変数 n 例: 「変数」『最新情報I』: 「変数とは，メモリ上のデータ(値)を格納する領域のことをいい，その領域に付けた名前を変数名という」『高校情報I』: 「変数は値や文字列を保管する箱のようなもの」 answr a b + = 7 4 ①先に右辺を計算 ②代入 a = 7 b = 4 answr = a + b print(answr) a = 7 print( a ) // 変数aを表示 b = 4 print( b ) // 変数bを表示 answr = a + b print(answr) a = 8 b = 14 answr = a + b print(answr) プログラム⾔語に計算させてみよう

Slide 8

Slide 8 text

Copyright © Asial Corporation. All Rights Reserved. 授業での導入・説明のポイント n 教科書の説明・概念や用語の定義 → プログラム例 → 動作の確認 → 問題 n 授業では、教科書の順序と逆にする 1. まず、身近で個別的・具体的な課題を短く紹介する 2. 課題を解決するプログラム例を簡単に見て、動作を示す 3. 「この動作は、どのように実現されているか？」文法等、プログラムの簡単な説明をする 4. 動作・プログラムを確認したあとで、最後に概念や用語を説明し、一般的な問題に応用可能になることを目指すプログラミング実習環境を⽤意して

Slide 9

Slide 9 text

Copyright © Asial Corporation. All Rights Reserved. 授業での説明のポイント • 教科書の豊富な記述 • 文章による説明 • プログラム例 • 補足要素（側注など） • 図（概念図、フローチャートなど） • 表 • 教科書の記述を補完する • 概念図を追加で提示する • プログラム例を増やす • 部分的に変更する • 動作させる • 特定の部分を強調する例を作る a = 7 b = 4 answr = a + b print(answr) a = 7 print( a ) // 変数aを表示 b = 4 print( b ) // 変数bを表示 answr = a + b print(answr) 最新情報I Python教材より answr a b + = 7 4 ①先に右辺を計算 ②代入

Slide 10

Slide 10 text

Copyright © Asial Corporation. All Rights Reserved. 留意点 n 説明・実習時の留意点: 事前準備が重要・どんな概念図がよいか、あらかじめ調べ、考える・プログラム例をその場で書いて、実行してみせる・「プログラムをこうしたら、どうなる？」という発問により、ライブ感が生まれる・練習が必要。実は「その場」ではない・要注意：エラーなど、トラブルが起きたときに備える必要がある・「プログラム例を増やす」取り組みを、練習問題として生徒に提示する場合も、どんな例を作らせるとよいか検討が必要

Slide 11

Slide 11 text

Copyright © Asial Corporation. All Rights Reserved. まとめ：プログラミング単元の授業のポイント準備 • 授業の準備 • ツール等の準備 • 記録と評価（３観点）の計画授業 • 導⼊ • 説明 • 例題 • 実習/確認問題評価 • 記録の収集 • 評価の実施プログラムで解決したい具体的な「課題」の提示プログラム例の動作の確認プログラム例の解説概念・用語の説明練習問題プログラミング実習環境を⽤意して

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright © Asial Corporation. All Rights Reserved. 教科書のページに対応する授業案【以下の説明について】・教科書のプログラミング単元のうち、一部のページの授業案を示します・全ページではありません・本日の配布資料の内容の全ては説明しません・説明しなかった部分については、後ほど配布資料を確認してください・クラウド型環境Monaca Educationを用いて、実習を行います・ Monaca Educationや、アシアルの提供するサポートページについては後述します

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 1. 変数を使用したプログラム・導入時の課題の例: 「コンピュータを電卓代わりにしてみよう」・概念: 値、変数、代入、加算、表示する関数、型・補足の概念図① ① 変数の計算 ② ＝による代入・補足 • 右辺に計算があれば、先に計算した後、結果を左辺の変数に代入する・想定される質問 • 「左右が等しいことを示すには？」 → == • 「＝の左辺で計算し、右辺に代入することは？」 → できない answr a b + = 7 4 ①先に右辺を計算 ②代入

Slide 18

Slide 18 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 1. 変数を使用したプログラム・プログラムの変更例① ・変数が値を入れられる箱のようなものであることを確認する・表示する関数print()に慣れる・プログラムの変更例② ・変数に2回値を代入する・後に代入した値が残る・プログラムは、書いてある順に、上から実行される（順次実行） a = 7 b = 4 answr = a + b print(answr) a = 7 print( a ) // 変数aを表示 b = 4 print( b ) // 変数bを表示 answr = a + b print(answr) 最新情報I Python教材より a = 7 print( a ) // 変数aを表示 a = 10 print( a )

Slide 19

Slide 19 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n その他のプログラムの変更例のアイデア・他の算術演算子や、整数でない値を使ってみる・ー、＊、/、％・小数・話題を広げて、他の単元・ページの内容（「コンピュータの仕組み」など）につなげることができる・掛け算（＊）で、とても大きな値を作り、print()で表示する・小数を含む値の引き算をし、誤差が生じることを見る・エラーの種類を学ぶ・０で割り算（/）すると、（文法的には正しいが）実行時エラーが起きる

Slide 20

Slide 20 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 2.選択構造を使用したプログラム・導入例:午前中なら「おはよう」とあいさつし、午前中でなければ「こんにちは」と挨拶するアプリ/Webサイト・概念: 制御文、選択構造、余りを求める計算（％演算子）、比較演算、==演算子・条件によって、動作の流れを変えるプログラムを作成できる・「aならばAを実行し、aでなければ Bを実行する」という例を確認する最初に「条件によって振る舞いを変える」という概念を確認することが重要

Slide 21

Slide 21 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 「プログラム」と「条件によって振る舞いを変える」・学校行事や、イベント、コンサートなどの「プログラム」は、一連の流れは普通は変わらない・「順次」制御構造の説明に「行事のプログラムと同じように」というたとえを使って説明すると、そのたとえに引っ張られて、「条件によって振る舞いを変える」の理解が難しくなる可能性がある n 「AならばB」「AでなければC」のような例を検討してみる・例: 次のようなマイルールがある人がいる・「朝食がパンならば、昼ごはんはカレーにする」・「朝食がご飯ならば、昼ごはんはラーメンにする」この人の明日の朝食がパンならば、昼ごはんは何にすることになる？

Slide 22

Slide 22 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 2.選択構造を使用したプログラム・プログラムの変更例① ・割り算の結果で、制御の流れが変わることを確認する・プログラムの変更例② ・比較演算子: != ・比較結果が逆になる a = 123 b = 4 rmndr = a % b if rmndr == 0: print('約数である') else: print('約数ではない') a = 123 b = 3 rmndr = a % b if rmndr == 0: print('約数である') else: print('約数ではない') remainder:余り a = 123 b = 4 rmndr = a % b if rmndr != 0: print('約数である') else: print('約数ではない')

Slide 23

Slide 23 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 2.選択構造を使用したプログラム a = 123 b = 3 rmndr = a % b if rmndr == 0: print('約数である') else: print('約数ではない') print('おまけ') a = 123 b = 3 rmndr = a % b if rmndr == 0: print('約数である') else: print('約数ではない') print('おまけ') 字下げあり字下げなし字下げ（インデント）の意味を確認する • 字下げがあるとき、else:ブロック（コードのまとまり）に含まれる • 字下げがないとき、else:ブロックとは違うブロックとして扱われるインデントは、Pythonの特徴であり、要注意のポイント

Slide 24

Slide 24 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 補足の小話・「演算子」の「子」とは？・算術演算子: +, -, *, /, % ・比較演算子: ==, !=, >, >=, <, <= ・コンピュータ科学は、英語圏で発展してきた・用語も英語で作られた・「演算子」の元の語は、operator （演算する者）・動詞に、-erや-orをつけると、「〜する者」という意味になる・翻訳するとき、-erや-orに「子」を当てた・では、演算の対象になる値は何という？・英語では operand。日本語には「演算数」と訳されている

Slide 25

Slide 25 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 3.反復構造を使用したプログラム・導入例: ・「１から１０まで全部足す」プログラムを書くとしたら？・「１から１００まで」なら？・概念: 反復構造、 for文、while文、 range()、条件式・一連の処理を、複数回繰り返す・ for文では、range()で範囲を作り、その範囲の要素を取り出して、処理に使う・ while文では、数を数える変数を作り、その変数の値を更新しながら、条件式で終了するときを判定する教科書はいきなり「例題」を考えさせているが、「７の段」は例として説明に使い、問題としては別に「『８X１から８X９』を作る」という方法が考えられる

Slide 26

Slide 26 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 3.反復構造を使用したプログラム・ range(1,10)… range:範囲・ for i in range(1,10):では、作成した範囲から１つずつ、取り出しては変数iに代入する・プログラムの変更例① ・繰り返しの回数を変える ※右の例では、×20は含まれない range(1,10) 1, 2, 3, 4, 5, 6, 7, 8, 9 ※10は含まない for i in range(1,10): print(7*i) for i in range(1,20): print(7*i)

Slide 27

Slide 27 text

Copyright © Asial Corporation. All Rights Reserved. 2節プログラミングの実践（p.168〜170） n 3.反復構造を使用したプログラム・プログラムの変更例② ・プログラムの変更例③ for i in range(1,10): print(7*i) print(8*i) for i in range(1,10): print(7*i) print(8*i) インデントの意味を確認する i = 1 while i<=9: print(7*i) i=i+2 増分の意味を確認するインデントは、Pythonの特徴であり、要注意のポイント

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 導入:組み込み関数・このページ以前に出てきた関数の例を確認する・ print() ・ input() ・ random.randint() ・ range() ・発問: 組み込み関数の例から、関数の特徴を挙げる・回答例: ・名前の後に( )が付く・名前は全て小文字で、動作・機能を表す英単語が使われている・ ( )の中に、値を入れられる。カンマで区切れば、複数の値を渡せる・ ⇨ この後、作成するときのヒントになる

Slide 31

Slide 31 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141）プログラム例 def area(x, y): z = x * y / 2 return z a = float(input('底辺 ')) b = float(input('高さ ')) c = area(a, b) print('面積=', c) • 関数を定義する • 仮引数を２つ定義する • returnで値を戻す • 組み込み関数を入れ子で呼び出す • 入力を受け取る • 入力された値を（文字列から）浮動小数点数に変換する • 先に定義した関数を呼び出す • 変数a,bの値を関数areaに渡す • 関数area内のreturnで戻された値を変数cに代入する定義組み込み関数の呼び出し（入れ子）ユーザー定義関数の呼び出し・戻り値の受け取り

Slide 32

Slide 32 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 概念図:関数を定義する・参考: 関数は“函数”という書き方もされた・仮引数は、関数に値を入れるための「名前付きの入り口」を作る・「入り口」なので、定義した時点では値は入っていない・戻り値には名前はない関数area( ) 戻り値仮引数 x x 仮引数や、その他の変数を使った計算・・・・・・ return 値（変数）

Slide 33

Slide 33 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141）関数の定義 n キーワード └ def └ define:定義する n 使用する記号 └ ( ), : n 文法上の注意点 └ インデント n 定義と呼び出しの順序 └ 関数定義が先、呼び出しは後に書く • 用語 • 引数 • 仮引数 • 呼び出されたときに渡される値を受け取る変数 • 実引数 • 呼び出すときに渡す実際の値 • 戻り値（返り値）

Slide 34

Slide 34 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 指導時の留意点・新たに登場する概念が多い・これまで、プログラムのソースコードの「上から下」への実行が基本であったが、「関数の定義を先に書いておき、後のコードで呼び出す」という制御の流れが出てくるので、混乱しやすい・時間をとること、予習や復習に取り組む仕掛けを用意すること、提出課題を設定することを推奨

Slide 35

Slide 35 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 概念図:定義した関数を呼び出す a = float(input('底辺 ')) b = float(input('高さ ')) c = area(a, b) print('面積=', c) 関数の名前を指定し、引数の実際の値（実引数）を渡して、呼び出す関数 area( ) 仮引数戻り値戻り値は呼び出し元に返される。代入式の右辺で関数を呼び出していたら、左辺に戻り値が代入されるプログラム変更例:関数の呼び出し前・関数の中・関数の呼び出し後に print()を入れて、動作順を確認する

Slide 36

Slide 36 text

Copyright © Asial Corporation. All Rights Reserved. n プログラム変更例・関数の呼び出し前・関数の中・関数の呼び出し後に print()を入れて、動作順を確認する def area(x, y): print("関数areaの中") z = x * y / 2 return z print("関数定義の後") a = float(input('底辺 ')) b = float(input('高さ ')) print("関数呼び出しの前") c = area(a, b) print("関数呼び出しの後") print('面積=', c)

Slide 37

Slide 37 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 用語・概念の補足(1) ・代入演算子＝は、右辺を先に評価（実行）して、その結果を左辺に代入する・関数がスコープを作る・スコープ・「変数が見える・使える範囲」・グローバルスコープは１つだけ・関数が２つある場合、それぞれにローカルスコープができる・関数Aのローカルスコープ: 関数Aの中から見える・使える範囲の変数群・関数Aのローカルスコープ: 関数Bの中から見える・使える範囲の変数群

Slide 38

Slide 38 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 用語・概念の補足(2) ・なぜ、関数の定義を先にしないといけないのか？・プログラム実行環境は、プログラムに書いてある命令を実行していく・「関数の呼び出し」を見つけると、関数テーブルと呼ばれる関数の名前と関数の実体を関連つけて記憶しているデータにアクセスする・ ※組み込み関数は、あらかじめ関数テーブルに入っている・関数テーブルに無い関数を呼び出そうとすると、エラーになる実行環境プログラム print()? area()? 関数テーブル

Slide 39

Slide 39 text

Copyright © Asial Corporation. All Rights Reserved. グローバルスコープとローカルスコープ def area(x, y): z = x * y / 2 return z a = float(input('底辺 ')) b = float(input('高さ ')) c = area(a, b) print('面積=', c) グローバルスコープ a b c ローカルスコープ x y z

Slide 40

Slide 40 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 追加の課題のアイデア(1) ・２つの引数を用いる関数・長方形の面積を求める関数 rectangle(x,y) ・１つの引数の計算・正方形の面積を求める関数 square(x) def rectangle(x,y): return x*y def square(x): return rectangle(x,x) print( square(10) )

Slide 41

Slide 41 text

Copyright © Asial Corporation. All Rights Reserved. 33 関数（p.140〜141） n 追加の課題のアイデア(2) ・ BMI（Body Mass Index）を計算する関数・ BMI＝体重kg / （身長𝑚）! ・身長cmと体重kgを入力とする・身長cmを身長mに変換してから割り算する・基礎代謝量を計算する関数・ハリス・ベネディクトの計算式・男性： 66.47＋（13.75×体重）＋（5.00×身長）－（6.78×年齢）・女性： 655.1＋（9.56×体重）＋（1.85×身長）－（4.68×年齢）・性別、身長cm、体重を入力とする・性別の値を使って、関数の中で条件分岐の構造を作る

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Copyright © Asial Corporation. All Rights Reserved. クラウド型実習環境 Monaca Education利用時のポイント n クラウド型実習環境 Monaca Educationの準備・アカウントの準備・（オプション）Monaca Educationに慣れる機会 n 例題・実習・サポートページ・作成済みプロジェクトのインポート n 評価のための記録の収集方法知識・技能小テスト思考・判断・表現課題提出機能態度振り返り

Slide 45

Slide 45 text

Copyright © Asial Corporation. All Rights Reserved. 最新のブラウザ(Microsoft Edge/Google Chrome)で以下のURLにアクセス (教育版)Monaca Education公式サイト https://edu.monaca.io Monaca Educationの準備(1) ログイン画面メールアドレス登録やGoogle、Microsoft連携で利用される場合は先に登録を、管理アカウント発行を受けている場合はそちらを利用下さい Monaca Educationの導入の詳細:上記Webページ上部の指導者向け > 導入手引き

Slide 46

Slide 46 text

Copyright © Asial Corporation. All Rights Reserved. Monaca Educationの準備(2) n Monaca Educationに慣れる機会を作る・教科書の内容に入る前に、テンプレート「ブロック崩し」 1. プロジェクトを開く 2. IDEの各部分の基本操作を確認する • 編集 • 保存 • プレビューブロック崩しのカスタマイズ:あんこエデュケーションのサンプルアプリ集

Slide 47

Slide 47 text

Copyright © Asial Corporation. All Rights Reserved. 例題・実習 ■ 教材として作成済みのプロジェクトをインポート・指導者向け >高等学校教科書・教材サポートページ・ https://edu.monaca.io/hstext 48 ②実教出版高校情報I または最新情報I(Python学習用教材)の「サポートページ」をクリック ①必要な教科書のサポートページのパスワードをリクエストする

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Copyright © Asial Corporation. All Rights Reserved. 例題・実習 ■ インポートしたプロジェクトはすぐに実行できる ■ 変更して、試すには 1. 画面中央のエディターで変更する 2. 保存ボタンをクリックして保存する 3. プレビューに結果が表示される。繰り返すには、更新ボタンをクリックする python.py ファイルエディター保存ボタンプレビュー更新ボタン

Slide 51

Slide 51 text

Copyright © Asial Corporation. All Rights Reserved. 例題・実習 ■ Tips: Monaca Educationのエディタの機能の活用 • 元に戻す • やり直し • 切り取り • コピー • 貼り付け • コードフォーマット ※インデントを整える • コメントの切り替え ※選んだ⾏をコメントにする/戻す。「この⾏を無くしたら」の実験ができる • 検索 • 置換インポートしたプログラムを、手早く編集して、例を増やすとき、エディタの操作に慣れていると、素早くできる

Slide 52

Slide 52 text

Copyright © Asial Corporation. All Rights Reserved. 評価のための記録の収集方法 ■ 知識・技能・小テストで知識を確認する ■ 思考・判断・表現・作成したプログラムを提出させる。タグ機能で名前・クラスなどを記載・課題提出(Web公開)機能（学習者向け > 機能一覧）・ https://edu.monaca.io/function/publish ・例: • 教科書の確認問題や問題を課題とする • 自由にカスタマイズをさせる。プログラムとは別に「・どういう狙いで・何を・どのようにカスタマイズしたか」を書かせ、提出させる・課題提出（共同編集）機能（学習者向け > 機能一覧）・ https://edu.monaca.io/function/share ■ 態度・毎時、振り返りを記入させる • 集中して取り組んだか • 気付いたことは何か • ⼯夫したところはどこか等

Slide 53

Slide 53 text

Copyright © Asial Corporation. All Rights Reserved. クラウド型実習環境 Monaca Education利用時のポイント n クラウド型実習環境 Monaca Educationの準備・アカウントの準備・（オプション）Monaca Educationに慣れる機会 n 例題・実習・サポートページ・作成済みプロジェクトのインポート n 評価のための記録の収集方法・知識・技能: 小テスト・思考・判断・表現: 課題提出機能・態度: 振り返り

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Copyright © Asial Corporation. All Rights Reserved. ■ Monaca Education https://edu.monaca.io 58 • 指導者向け > 高等学校教科書・教材サポートページ • 実教出版『最新情報I』『高校情報I Python』サポートページ • 学習者向け > はじめてのMonaca Education そのほか、動画による説明など多数のコンテンツがあります。

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Copyright © Asial Corporation. All Rights Reserved. ■ 教科書ごとのサポートページ・パスワードで保護されている・チュートリアル、デモ動画へのリンク・プロジェクトをインポートするボタン（プロジェクトのURLが埋め込まれている）・ Monaca Educationにログインしているブラウザでクリックすると、インポートできる・「サンプル一覧」の下に「スプレッドシート版」もある・必要な URL をコピーして、 Google Classroom等で生徒に配信する