APS おみくじ（JavaScript版）

所要時間

3時間〜

難易度

★☆☆

概要（機能・動作）

APSおみくじ（JavaScript版）

画面上の「おみくじをひく」ボタンを押すと、ランダムにおみくじの結果（”大吉”、”中吉”、”小吉”、”末吉”、”凶”）が表示されます。画像を切り替えて結果が表示されます。

学習項目

組み込み関数Math.random()を用いて、乱数を生成する
生成された乱数の値に応じて、結果を変える（大吉、中吉…）。if…else if…else文を説明する
生成する乱数の範囲を変えて、おみくじの結果を変更する
乱数の値に応じて変える処理に、メッセージ表示処理を追加する

身に付く力

知識・技能
- 条件分岐構造により、条件に応じてプログラムの動作を変える。
- 関数を利用して、機能を利用する。
思考・判断・表現
- 実現しようと考えたプログラムの動作を、条件分岐構造とその条件式として、フローチャートやプログラムを用いて表現できる。
態度
- 乱数を生成し、条件分岐するプログラムを完成できるよう、動作を確認しながら、粘り強く取り組む。

学習活動（カスタマイズ）の内容

Pythonプログラムを編集して、乱数の生成範囲を変更します。さらに、条件分岐を追加して、おみくじの結果（”大凶”など）を増やします。
条件分岐ごとに、画面に表示するメッセージを追加します。

特徴

多くの生徒が見た事がある「おみくじ」を題材にしています。ランダム性のある振る舞いをするプログラムは、生徒の興味を惹くことができます。

プログラム言語があらかじめ備えている機能（組み込み関数）を利用して、乱数を生成し、その値に応じて処理を分岐させ、ランダム性のある振る舞いを実現しています。乱数の生成には、Pythonの組み込み関数random.randint()を用いています。組み込み関数を利用して、意図した動作を行わせることを学びます。

複数の分岐を持つ条件分岐構造を、if-elif-else文で実現しています。少し複雑に見えるプログラムですが、資料に掲載しているフローチャートと突き合わせながら、分岐の追加のカスタマイズを行うことで、基本制御構造の1つである条件分岐構造を習得することができます。

HTMLのタグimgを応用する画像表示を含んでいるので、生徒は簡単にビジュアルな結果を持つアプリケーションを作成する方法を学べます。

作品制作への応用

このAPSをもとにして、生徒に単元「プログラミング」に関連する作品制作を行わせることができます。1時間程度の簡単な制作から、企画・設計に1時間、制作に2時間かけるなど、大きな作品制作にすることも可能です。

簡単な制作としては、背景画像や前景画像、結果の画像を置き換える方法があります。この場合、画像ファイルを用意して、アップロードし、プログラム内で適切にファイル名を指定して表示するようにします。

基本的なアプリケーションの構造はそのままで、ランダム性のある振る舞いを持つプログラムを作ることができます。例えば、「じゃんけんの次の手を決める」「サイコロをふる」「クラスの中から、次に指名する人（出席番号）を決める」などです。

作品制作に応用する場合、次のような活動が必要になります。

企画・設計
- どんなアプリケーションにするかアイデアを出します。
- アプリケーションの具体的な動作を考え、フローチャートなどを書いて、動作を設計します。
- 必要なコンテンツ（文章、写真など）を考え、文章を準備したり、写真やイラストなどを収集・制作します。
制作
- APSのプロジェクト「おみくじ（Python版）」をインポートして、制作します。