高校の情報学探究｜ Streamlit で Web アプリを作る｜第5回

状態の保持と画面の構成

押すたびにプログラムは上から全部やり直されるので、覚えさせないと数えられない

10〜50分

教師用メモ

準備（授業前） 動かし方を 3 通りから先に一つ選ぶ（①各自の端末に入れる ②クラウドの実行環境 ③教師の 1 台で投影し、設計だけ各自が書く）。前回と同じにしておく。③でも、この回は 05 のプログラムを教師の 1 台で一度だけ動かして見せると効果が大きい。予想が外れる場面だから。教室コードは第1回と同じものを板書する。「教師」を押す。

投影 06 の予想の分布を出してから、05 のプログラムを動かす（または 07 の説明を見せる）。予想より先に動かさない。09 の 2 つのコードは、違う 2 行を指で示す。

時間配分

50分版 01〜14 全部。02・03 前回と目標 5分／ 04〜07 やり直される 16分／ 08〜11 おぼえる・分ける 20分／ 12〜14 まとめ 9分
20分版 01・03・05・06・07・09・10・12・13。予想と確かめ 8分／覚えさせる 2 行 5分／自分のアプリで決める 4分／まとめ 3分
10分版 01・05・06・07・09。予想 3分／答えと理由 3分／覚えさせる 2 行を見せて 4分

この回の評価（評価規準と B・A の基準は単元設計のページ。詳しいコードは情報学探究マニュアル第9節）

知識・技能 st.session_state を使って値を残すコードを読み、どの 2 行が効いているか言える（体験01・体験02）
思考・判断・表現 なぜ覚えさせる必要があるかを、やり直される仕組みから説明できる（体験01）
態度自分のアプリで、覚えておきたいものと横に寄せる設定を決めようとしている（体験02・ふりかえり）

指導要領 高等学校情報Ⅰ (3)「コンピュータとプログラミング」ア(イ)・イ(イ)、情報Ⅱ (4)「情報システムとプログラミング」ア(ウ)・イ(ウ)。設計指針（第2版）はこの単元でＦ２Ｌ４（抽象階層をもつプログラムを設計/構築できる）・Ｆ４Ｌ３（テストケースに基づき不備を確認し修正できる）・Ｊ３Ｌ１（システム開発が単なるプログラム作成と違う点）・Ｂ５Ｌ４（統一された UX をグループで設計/制作）に対応する。この回がＦ２Ｌ４の場面。指針は「手続き/関数による抽象化に着目させ、自分が開発するプログラムに取り入れさせ、その効果を確認させる」としている。設定を横に寄せ、画面を分けることで、中身が読みやすくなる効果をその場で確かめさせる。

前にやった回 情報Ⅱ (4) 第11回「入口と出口は約束、中身は自由」。名前を付けてまとめると、あとから差し替えられた。情報Ⅰ (3) 第12回「プログラムの評価と改善」も、ここで一度戻る。

環境が整わない場合の進め方 この回は実機がなくても進められる。06 の予想と 10 の設計は端末の中だけで完結する。Streamlit はブラウザだけでは動かないので、05 の結果は 07 の説明で示す。第1〜5回はここまで設計として進められる。第6回だけは実機が要るので、動かし方の③を選んでいる場合は、次回までに 1 台だけ用意しておく。

前回のまとめ

問いが先、図は後、コードはその 1 行

入れてもらう→表を読む→図にする→今日｜おぼえる・分ける

ここまで、入れてもらった値はその場で使って、その場で捨ててきた。1 回ぶんの計算なら、それで足りる

では、数を数えるアプリは作れるか

教師用メモ

3 分。「押した回数を数える」「順に足していく」ような、前の値が要るものが作れるかを問う。ほとんどの生徒は作れると思っている。そこを崩すのが今日の山場。

今日の目標

授業の終わりにできるようになること

なぜ覚えさせる必要があるかを、やり直される仕組みから言える

st.session_state の2 行で、値を残せる

設定を横に寄せ、長くなった画面を分けられる

01 ｜ 16分

やり直される

予想して確かめる

02 ｜ 20分

おぼえる・分ける

2 行足すだけ

次回｜第6回

公開する

人の端末から開ける

SECTION 01

押すたびに、やり直される

思っているのと、動き方が違う

画面のボタンを何度も押しているのに数字が変わらず、けげんな顔で画面をのぞき込んでいる高校生

読むだけ

押した回数を数える、6 行のアプリ

import streamlit as st

kaisu = 0
if st.button("押す"):
    kaisu = kaisu + 1
st.write("押した回数:", kaisu)

※ st.button は、押されたそのときだけ True になる部品

日本語にすると、こう書いてある

kaisu を 0 にする
ボタンが押されていたら、kaisu を 1 増やす
kaisu を画面に出す

情報Ⅰ (3) で書いてきた Python として、おかしなところはない

教師用メモ

4 分 3 行の日本語まで、全員で声に出して読む。ここでは「正しく動く」と思わせたまま、次の枚の予想へ進む。

「1 ずつ増える」と思って読んでいることを確かめてから進める。

体験 01

「押す」を 3 回押すと、画面の数はいくつになるか

前の枚の 6 行を動かし、ボタンを 3 回押したとき、画面に出る数はどれか。当たっていなくてよい。予想を置いておくと、違ったときに気づける

選んだ人数が右に出る。「3 になる」が多いはず。分布を見せてから確かめる

クラスの予想

教師用メモ

進め方（5分） 選ぶ 2 分、分布を見る 1 分、確かめる 2 分。先に動かさない。

答えは「1 のまま」 押すたびにプログラムが上から全部やり直されるので、kaisu = 0 からやり直される。0 に 1 を足して 1。何回押しても 1。

実機がある教室 各自で動かして確かめる。外れた人に手を挙げさせる。ここが今日いちばん残る場面。

実機が無い教室 教師の 1 台で押して投影する。それも難しければ、次の枚の説明で示す。目標 01。

まとめ 01

1 のまま変わらない

相手が何か操作する→app.py を 1 行目から全部やり直す→kaisu = 0 に戻る

なぜ 1 のままか	押すたびに `kaisu = 0` からやり直される。0 に 1 を足して 1。何回押しても 1
なぜ全部やり直すのか	そうすれば画面がいつも新しい値になる。スライダを動かすと結果がすぐ変わるのは、この仕組みのおかげ
困ること	前の値が残らない。数える、順に足す、履歴を残す、が書けない
どうするか	やり直されても消えない置き場所に入れる。それが `st.session_state`

教師用メモ

4 分 「全部やり直す」のは都合のよい性質で、欠陥ではないと押さえる。第2回でスライダを動かすと結果がすぐ変わったのは、これのおかげ。

言い方 「机の上に書いたものは、次の人が来るたびに消される。消されたくないものは、引き出しに入れる」。引き出しが st.session_state。

SECTION 02

おぼえる、分ける

消えない置き場所と、画面の片づけ

2 行足す、横へ寄せる、分ける

消えない置き場所と、画面の片づけ方

おぼえる｜ st.session_state

import streamlit as st

if "kaisu" not in st.session_state:
    st.session_state.kaisu = 0
if st.button("押す"):
    st.session_state.kaisu = st.session_state.kaisu + 1
st.write("押した回数:", st.session_state.kaisu)

※ 増えたのは上の 2 行だけ。「まだ無ければ 0 を入れる」。2 回目からは入れ直さないので、値が残る

分ける｜ st.sidebar と st.tabs

import streamlit as st

st.sidebar.title("設定")
nin = st.sidebar.slider("人数", 1, 40, 20)

t1, t2 = st.tabs(["結果", "使い方"])
with t1:
    st.write("人数:", nin)
with t2:
    st.write("左の設定を動かすと、結果が変わります")

SIDEBAR

設定
人数 1 ——●—— 40

結果使い方

人数: 20

教師用メモ

7 分 左のコードは、前の枚の 6 行と並べて投影する。違うのは 3 か所。「まだ無ければ 0」「引き出しの中を増やす」「引き出しの中を出す」。

なぜ「まだ無ければ」が要るか やり直されるたびに 0 を入れ直したら、結局 1 のままになる。1 回目だけ入れる、という条件がこの仕組みの核になる。

sidebar と tabs st. の代わりに st.sidebar. と書くだけで左に寄る。st.tabs は名前を並べて、with でその中に入れる。ここが設計指針Ｆ２Ｌ４の効果を確かめる場面。設定を左にまとめると、真ん中は結果だけになって読みやすくなる。「読みやすくなったか」を生徒自身に言わせる。

覚えさせすぎない 何でも session_state に入れると、直すときに追えなくなる。前の値が要るものだけ。

体験 02

自分のアプリで、覚えるものと横に寄せるものを決める

自分のアプリで、前の値が要るものはあるか。無ければ「なし」でよい。無理に作らない。横に寄せる設定は、結果より先に決めるものを選ぶ

覚えておきたいもの｜なぜ要るかも

横（左）に寄せる設定

全員の「覚えるもの → 横に寄せるもの」が右に並ぶ。「なし」も立派な判断だと読み上げる。何でも覚えさせている人には理由を聞く

みんなの覚えるもの → 横に寄せるもの

教師用メモ

進め方（13分） 書く 5 分 → 隣と交換して「それは本当に前の値が要るか」を確かめる 4 分 → 読み上げ 4 分。実機がある教室は、書けた人から 2 行を足して動かす。

「なし」でよい 入れた値からその場で計算して返すだけのアプリなら、覚えるものは無い。無いと判断できたことを評価する。

覚えるものの例 押した回数、試した記録の一覧、前に選んだ列、入力の履歴。

横に寄せるものの例 期間の指定、しきい値、表示する件数。結果は真ん中に残す。

効果を確かめる 左に寄せる前と後で、真ん中の画面がどう変わったかを一言で言わせる。設計指針Ｆ２Ｌ４。目標 03。

まとめ 02

残すものだけ引き出しに入れる

おぼえる	`if "名前" not in st.session_state:` で 1 回目だけ入れる。あとは `st.session_state.名前` で読み書きする
入れるもの	前の値が要るものだけ。数える、順に足す、履歴を残す。それ以外は入れない
横に寄せる	`st.` を `st.sidebar.` にするだけ。設定が左、結果が真ん中に分かれる
分ける	`st.tabs` で名前を並べ、`with` の中に入れる。長くなった画面が短く見える

次回は、公開して、使ってもらう。自分の端末の中だけで動かしているうちは、自分しか使えない

教師用メモ

2 分。次回は実機が要ることを伝える。動かし方の③を選んでいる場合は、教師の 1 台で 1 つ公開して見せる形になる、と先に言っておく。

今日のまとめ

やり直されるから、覚えさせる

仕組み 相手が操作するたび、プログラムは 1 行目から全部やり直される

おぼえる st.session_state に入れる。「まだ無ければ」の 2 行が核

分ける 設定は左へ、長い画面はタブへ。真ん中に結果だけが残る

自己評価

今日の目標、自分はどこまで

3 つの目標それぞれに、できた／だいたい／まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る

今日の目標、自分はどこまで｜ 1 つずつ選ぶ

01なぜ覚えさせる必要があるかを、仕組みから言えた

02st.session_state の 2 行で、値を残せた

03設定を横に寄せ、画面を分けることを決められた

できただいたいまだ

教師用メモ

1 分。01 が「まだ」の生徒が多ければ、次回の冒頭で 07 の図をもう一度出す。この考え方は公開したあとの動きにも効く。

ふりかえり

予想と違っていたところ

一文でよい。当たっていた人は「次に覚えさせたいもの」を書く

みんなの予想と違っていたところ

教師用メモ

3 分。次回は実機が要ることと、公開するものを 1 つ決めてくることを伝える。教室コードを忘れずに板書。