入力の部品
見せるだけのページを、相手が入れた値で結果が変わるページにする。入力・処理・出力が 1 画面に載る
10〜50分教師用メモ
準備（授業前） 動かし方を 3 通りから先に一つ選ぶ（①各自の端末に入れる ②クラウドの実行環境 ③教師の 1 台で投影し、設計だけ各自が書く）。前回と同じにしておく。教室コードは第1回と同じものを板書する。前回のふりかえりで書いた「〇〇を入れると△△が返る」を各自が開けるようにしておく。「教師」を押す。
投影 06 の仕分けは、答え合わせの前に迷ったものを 2 つ挙げさせる。09 のコードは投影しながら、入力・処理・出力の 3 か所を指で示す。
時間配分
- 50分版 01〜15 全部。02・03 前回と目標 5分 ／ 04〜07 部品を仕分ける 14分 ／ 08〜10 式を動かす 14分 ／ 11 自分の入力を決める 10分 ／ 12〜15 まとめ 7分
- 20分版 01・03・05・06・07・09・11・13・14。仕分け 7分 ／ コードを読む 5分 ／ 自分の入力を決める 5分 ／ まとめ 3分
- 10分版 01・05・06・11。4 つの部品を見せ、仕分けを 5 分、自分の入力を 1 つ決めて 3 分で終える
この回の評価（評価規準と B・A の基準は 単元設計のページ。詳しいコードは 情報学探究マニュアル 第9節）
- 知識・技能 4 つの入力の部品を、場面に合わせて選べる（体験01）
- 思考・判断・表現 入れた値が処理を通って出力に変わる道すじを説明でき、自分のアプリの入力を 1 つ決めている（体験02・03）
- 態度 値を変えて動かし、返るものの変わり方を確かめている（体験02・ふりかえり）
指導要領 高等学校 情報Ⅰ (3)「コンピュータとプログラミング」ア(イ)・イ(イ)、情報Ⅱ (4)「情報システムとプログラミング」ア(ウ)・イ(ウ)。設計指針（第2版）はこの単元で Ｆ２Ｌ４（抽象階層をもつプログラムを設計/構築できる）・Ｆ４Ｌ３（テストケースに基づき不備を確認し修正できる）・Ｊ３Ｌ１（システム開発が単なるプログラム作成と違う点）・Ｂ５Ｌ４（統一された UX をグループで設計/制作）に対応する。この回はＢ５Ｌ４の入口で、相手にとって分かる入力を選ばせる。
前にやった回 情報Ⅱ (4) 第11回「入口と出口は約束、中身は自由」。あのとき決めた入口と出口が、ここでは画面の部品になる。情報Ⅰ (3) 第11回「目的・手順・プログラムの順で作った」の input も、同じ役割をしていた。
環境が整わない場合の進め方 この回は実機がなくても進められる。06 の仕分けと 11 の設計は端末の中だけで完結する。10 の式だけは、この枚の実行欄（素の Python）で動く。Streamlit そのものはブラウザでは動かないので、画面は 09 の図で見せる。
書いた順に、上から積まれた
前回作ったものは、誰が開いても同じ画面で、決まった文字が出るだけだった。今日は、開いた人が値を入れられるようにする
相手に入れてもらうとき、どの部品を置けばよいのか
教師用メモ
3 分 前回のふりかえりで書いた「〇〇を入れると△△が返る」を開かせる。その「〇〇」が、今日置く部品にあたる。
まだ書いていない生徒には、この場で 1 つ決めさせる。「時刻を入れると待ち時間が返る」で十分。
授業の終わりにできるようになること
場面から選ぶ
式を動かす
1 つだけ決める
どの部品が合うか
入れてもらうものの形で、置く部品が決まる
4 つ覚えれば、たいていのものは入れてもらえる
hour = st.slider("何時に行くか", 11, 14, 12)
name = st.text_input("あなたの名前")
menu = st.selectbox("何を買うか", ["うどん", "パン", "おにぎり"])
rain = st.checkbox("雨が降っている")st.slider | 決まった範囲の中の数。最小・最大・はじめの値を書く。11〜14 のつまみが出る |
st.text_input | 自由な文字。何が来るか決められないとき。空のまま来ることもある |
st.selectbox | 決まった選択肢から 1 つ。並べた中から選ばせる。書きまちがいが起きない |
st.checkbox | はい か いいえ の 1 つ。押されていれば True、そうでなければ False |
※ = の左の名前に、入れられた値が入る。ここから先は、ふつうの Python の変数として使える
教師用メモ
4 分 読むだけの枚。1 行ずつ「相手の画面に何が出るか」を言葉にさせる。つまみ、文字を書く枠、めくる一覧、四角い印。
押さえ selectbox と text_input の違いが、そのまま情報デザインの判断になる。選択肢が決まっているのに文字で入れさせると、表記ゆれで処理が止まる。
この場面には、どの部品が合うか
相手に入れてもらう場面が 8 つ。それぞれに合う部品の印を付ける。まず上で付ける印を選び、次にその印を付けるものを押す。全部に印を付けたら「答え合わせ」
教師用メモ
進め方（8分） 一人で 4 分、迷ったものを挙げさせて 4 分。
迷うところ 「47 都道府県」。数が多いので文字で入れさせたくなるが、「大分県」「おおいた」「大分」と書かれると処理が止まる。決まっているものは選ばせる。「班の人数」も、1〜40 と範囲が決まっているのでスライダが合う。
答えが 1 つに決まらない場合 「部活に入っているか」は選ぶ欄でもできる。ただし はい／いいえ の 2 つだけなら、チェックのほうが相手の手数が少ない。相手の手数で選ぶ、という判断の基準を言葉にする。目標 01。
選ばせられるものは、書かせない
| 範囲の中の数 | スライダ。最小と最大を決めておけば、ありえない数が入ってこない |
| 決まった選択肢 | 選ぶ欄。表記のゆれが起きない。数が多くても、選ばせたほうが止まらない |
| はい か いいえ | チェック。相手の手数がいちばん少ない |
| どうしても決められない | 文字を入れる欄。ただし空のまま来ることを、あとで必ず手当てする |
部品を選ぶのは、入ってくる値の幅を先に狭めておくための判断であって、見た目の話ではない
教師用メモ
2 分。「入ってくる値の幅を狭める」は、第13回（情報Ⅱ (4)）の「想定外の入力でも止まらないか」の前ふり。第6回でもう一度戻ってくる。
入れた値で、結果が変わる
入力・処理・出力が、1 つの画面に載る
7 行で、入れた値が結果に変わる
import streamlit as st
st.title("昼の待ち時間を予想する")
hour = st.slider("何時に行くか", 11, 14, 12)
rain = st.checkbox("雨が降っている")
wait = 3 + (hour == 12) * 8 + rain * 4
st.metric("予想される待ち時間", f"{wait} 分")※ (hour == 12) は、当たっていれば 1、違えば 0 として計算される。rain も同じ
教師用メモ
5 分 3 か所を指で示す。真ん中の wait の行だけが、ふつうの Python の計算。上と下が Streamlit、真ん中は今までどおりという見え方をさせる。
つまみを動かすと プログラムが上から全部やり直され、新しい値で wait が計算し直される。この「毎回やり直される」性質が、第5回の st.session_state の理由になる。今は言うだけでよい。
数の根拠 3・8・4 は例。自分の題材では、自分で数えた記録から決めさせる。st.caption で出どころを書く習慣を、ここでもう一度置く。
真ん中の式だけを取り出して、動かす
※ ここで動くのは素の Python だけ。import streamlit は書いても動かない。Streamlit は、自分の端末かクラウドの実行環境で streamlit run して確かめる
教師用メモ
進め方（9分） そのまま実行して 4 つの数を見る 3 分。数を自分のものに変えて 6 分。
見るところ 12 時にすると 8 分増える。雨だと 4 分増える。どの入力が、結果をいちばん動かしているかを言わせる。情報Ⅰ (3) 第9回のモデルと同じ見方。
止まっている生徒へ def の下の字下げ、丸括弧の閉じ忘れ、全角の記号を見る。第11回（情報Ⅰ (3)）と同じ定番の原因になる。
環境が無い場合 この枚はブラウザだけで動くので、そのまま全員できる。Streamlit の画面は 09 の図で見せる。目標 02。
自分のアプリの入力を、1 つだけ決める
前回書いた「〇〇を入れると△△が返る」を開く。その〇〇を、4 つの部品のどれで入れてもらうかまで決める。増やさない。まず 1 つ。前回のものが手元に無い人（端末が違う人・前回いなかった人）は、ここで新しく一組決めればよい
全員の「入れてもらうもの → 返すもの」が右に並ぶ。入力が 3 つも 4 つもある人を見つけて、1 つに絞らせる
教師用メモ
進め方（10分） 書く 5 分、隣と交換して「その入力で、その出力が出せるか」を確かめる 3 分、読み上げ 2 分。
よくある直し 入力が多すぎる → いちばん結果を動かすもの 1 つに絞る ／ 返すものが「グラフ」だけ → 何のグラフかまで書く ／ 部品が決まっていない → 入れてもらう値の形（数・文字・選択肢・はいいいえ）から決める。
ここに書いたものは第6回の提出まで使う。小さくてよいと繰り返す。目標 03。
1 画面に、入口と出口がそろった
| 入力 | 部品を置くと、= の左の名前に相手の値が入る。ここから先はふつうの変数 |
| 処理 | 真ん中の 1 行か 2 行。これまで書いてきた Python と何も変わらない |
| 出力 | st.write や st.metric で返す。st.metric は数を 1 つ大きく見せる |
| やり直される | 相手が値を変えるたび、上から全部やり直される。だから結果がいつも新しい |
次回は、表を読み込む。自分で数えた記録を CSV で受け取って、中身を見せる
※ CSV（シーエスブイ）＝ 表を、1 行 1 件・項目をコンマで区切って並べただけの、いちばん単純な表のファイル
教師用メモ
2 分。「上から全部やり直される」を板書に残す。第5回でここへ戻る。
相手が入れた値で、返るものが変わる
今日の目標、自分はどこまで
3 つの目標それぞれに、できた／だいたい／まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る
教師用メモ
1 分。03 が「まだ」の生徒は、次回の表の読み込みで題材が決まらず止まる。次回の冒頭で 3 分使って個別に決めさせる。
いま止まっているところ
一文でよい。決まった人は「次に足したい入力」を書く
教師用メモ
3 分。同じ詰まり方が多ければ、次回の冒頭で 5 分使って全体に説明する。教室コードを忘れずに板書。