今回のテーマ
みなさん、こんにちは!
デジタルステーション習志野スタッフの小島です。
今日はプロクラの授業で実際にあった質問ついて、ここでも回答を示したいと思います。
状況の説明 ![](https://digitalstation-chiba.com/struct/wp-content/uploads/star4.png)
問題提起
クリックした時にランダムな画像が表示されるようにしたい。
解決案
リストを使って表示させる画像をまとめて管理しよう。
初期プログラム
今回のプログラム
ボタンを押したら5種類の画像の中からランダムに1つを表示する。
重要なポイント以外
今回の主役ではない部分のプログラムは以下です。
以下のプログラム中のポイントと書かれた部分を埋めていきます。
![](https://digitalstation-chiba.com/struct/wp-content/uploads/793e0f5878f55eec1ea9c5888cb416c1.jpeg)
解決方法
ポイント1
画像の読み込みをする個所です。
常時なら画像は変数に代入しますが、今回は複数の画像を扱うのでリストを使います。
リストを使わない場合は1つずつ宣言しないといけません。
![](https://digitalstation-chiba.com/struct/wp-content/uploads/2223fb65d46f57bc5152d303390b75ee.jpeg)
(リストを使った場合)
![](https://digitalstation-chiba.com/struct/wp-content/uploads/ece686b247d2dc76d56344fd4267c026.jpeg)
(リストを使わない場合)
ポイント2
randint関数を使って表示する画像を決定する個所です。
リストの場合はリストに含まれる要素の数から適切な数が最大値となります。
リストを使わない場合は画像の種類に合わせて数を書き換える必要があります。
![](https://digitalstation-chiba.com/struct/wp-content/uploads/259ba2d1d79661b0cc2f4abe6855d3a3.jpeg)
(リストを使った場合)
![](https://digitalstation-chiba.com/struct/wp-content/uploads/8497e3d940c09b68c51958cf65ce34c7.jpeg)
(リストを使わない場合)
ポイント3
画像を表示する個所です。
リストを使った場合は要素数を指定するので簡潔に書くことができます。
リストを使わない場合は条件分岐で画像ごとにコードを書く必要があります。
![](https://digitalstation-chiba.com/struct/wp-content/uploads/d492c3edf4acc126f157b126fc9e931b.jpeg)
(リストを使った場合)
![](https://digitalstation-chiba.com/struct/wp-content/uploads/026853f9115cd33cae30a211e39bf25d.jpeg)
(リストを使わない場合)
まとめ
ランダムな画像を表示する方法を紹介しました。
今回はリストを使う方法と使わない方法の2種類を紹介しました。
自分の目的に合わせて適切な方法を選びましょう。
最後に今回のプログラムのコードの実行画面を以下に示します。
![](https://digitalstation-chiba.com/struct/wp-content/uploads/c8e97efcbfc7ac3eb894c987512ad9ff.gif)
考えてみよう!
どちらの方法がいいのだろう?
今回のブログではリストを使うかどうかで2つの手法を紹介しました。
自分がどちらの手法がいいか理由も含めて考えてみよう。
デジタルステーション習志野
〒274-0063 船橋市習志野台4-1-7 習志野駅前郵便局2F
- 駅から徒歩一分
- 入り口はこちら
- 駐輪場