Pythonクリエイター講座　第1回
☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆
55:00 55分 ちょうど
読み込み中
コンソール
プレビュー
# ここから先に進む前に「わかった！」「できた！」を押そう ▼
0 / 8 セクション完了 0%
Introduction
はじめに
ステラ

ぼくは、Pythonクリエイター講座のナビゲーターロボ〈STar LEarning site Assistant Robot〉だよ。長いから「ステラ」って呼んでね。よろしく！

いっしょに学ぶ2人を紹介！
育人と亜美のあいさつ
育人
目田めた 育人いくといくと
これまでScratchを学んできた小学5年生の男の子。スポーツがとくいで、ゲームも大好き！げんきいっぱいだけど、お調子者で気になったことはすぐ口に出してしまう。
亜美
広伝こうでん 亜美あみあみ
育人と同い年で、同じくScratchを学んできた女の子。ときどきボケる育人にすかさずツッコミを入れる、おてんばでげんきなムードメーカー。でも、意外と天然なところも…
Pythonってなに？
いきなりクイズ！
ステラ
ステラ
Python（パイソン）って、なんの仲間だと思う？
Pythonのとくいなこと

Pythonは世界中の いろんな場所 で活やくしてるよ。下のボタンをおして、それぞれの分野でどんなことができるのか見てみよう！

分野をえらんでね

上のボタンをおすと、くわしい説明が出てくるよ。

この講座のこと
育人と亜美がゲームを作るようす

この講座では、ゲーム作り用に用意した Python（パイソン） をつかうよ。第1回〜第4回で、落ちてくるアイテムをキャッチするゲームを、自分の手でつくっていくんだ。

文字でコードを書いて図形を出すようす

スクラッチみたいにブロックを組むんじゃなくて、文字でコードを書くのがポイント。まずは画面に図形を出したり、色や場所を変えたりして「コードを書くって楽しい！」を体験しよう。

Pythonはふだんパソコンに入れて動かすんだけど、この講座では、みんながすぐ試せるようにブラウザの中で動くPythonを特別に用意したよ。むずかしい準備はいらないし、ここですぐ書いて動かせるんだ。

この講座で身につく5つの力
セクションをクリアするたびに力がのびて、レーダーが大きくなるよ！
全12回をクリアすると、5つすべてが100%になるんだ。
わかったかな？
Get Started
学び方を知ろう
画面の見かた
ステラ
ステラ
まず画面の見かたから！　左＝コードを書くエディタ、真ん中＝ゲームのプレビュー、右＝この説明テキストだよ。この3つを行ったり来たりしながら進めていくんだ。
それと、エディタの下にある黒い場所がコンソール。ここも大事だから、あとで説明するね。
エディタ・プレビュー・テキストの3つの画面
コードを書いたら、エディタの上の 実行 ボタンを押すと、真ん中のプレビューで動くよ。とちゅうで止めたいときは 停止を押してね。
このテキストは、マウスホイールを回転させるか、右はしのスクロールバーを上下に動かして読み進めるよ。エディタでコードを書いたりするときは、左を見てね。
育人
育人
なるほど！　読むのは右のテキストで、コードを書くのは左のエディタなんだね。
もうひとつ、下の「コンソール」

エディタの下にある黒い場所をコンソールっていうよ。ここはコンピュータからのメッセージが出る場所なんだ。

エディタの下にあるコンソール
コンソール（console）には、もともと「制御盤せいぎょばん」という意味があるんだ。ロケットや電車の運転席にある、ボタンやメーターがずらりとならんだ台のことだよ。機械の様子を見て、動かすための場所ってことだね。
じゅんびのおしらせ　「Pythonを読み込んでいます…」「✓ Python準備OK！」など、いまの状態を教えてくれるよ。
エラーのおしらせ　コードにまちがいがあると、ここに赤い文字で理由が出るよ。うまく動かないときは、まずここを見てみよう。
じぶんで出したメッセージ　あとの回で print() というコードを習うと、すきな文字や数をここに出せるようになるよ。
コンソールの右上の クリア を押すと、たまったメッセージを消せるよ。
亜美
亜美
制御盤せいぎょばんって、ロケットの操縦席そうじゅうせきみたい！　ただの黒い画面だと思ってたけど、コンピュータとお話しする場所なんだね。
プログラムについて
育人と亜美がタブレットで命令のリストを見ているようす

プログラムは、コンピュータへの「命令のリスト」。上から順番に実行されるよ。この講座では、右のテキストにあるボタン（ 全部おきかえ など）で命令を置き換えたり・追加したりしながら進めるんだ。まずは、そのボタンの使い方になれてみよう。

① コードを置き換える― まずは完成形を見てみよう

これが4回目までにみんなで作るゲームの全部のコードだよ。すごい量だけど、少しずつ分かるようになるから大丈夫！
下の 全部おきかえを押すと、エディタの中身がまるごとこれに入れかわるよ。

4回目までに完成させるゲーム 
import pygame as pg
import sys
import random

# --- 初期設定 ---
pg.init()
screen = pg.display.set_mode((400, 400))
clock = pg.time.Clock()

# プレイヤー（四角形）
player_x = 180
player_y = 350
player_speed = 5
player_size = 40

# 落下する円
circle_x = random.randint(0, 400)
circle_y = 0
circle_speed = 3
circle_radius = 20
points = 0

# --- メインループ ---
running = True
while running:
    for event in pg.event.get():
        if event.type == pg.QUIT:
            pg.quit()
            sys.exit()

    # --- キー入力 ---
    keys = pg.key.get_pressed()
    if keys[pg.K_LEFT]:  player_x -= player_speed
    if keys[pg.K_RIGHT]: player_x += player_speed
    if keys[pg.K_UP]:    player_y -= player_speed
    if keys[pg.K_DOWN]:  player_y += player_speed

    # --- 円の落下 ---
    circle_y += circle_speed
    if circle_y > 400:
        circle_y = 0
        circle_x = random.randint(0, 400)

    # --- 当たり判定（四角形と円） ---
    rect = pg.Rect(player_x, player_y, player_size, player_size)
    if abs(circle_x - rect.centerx) < 40 and abs(circle_y - rect.centery) < 40:
        points += 1
        circle_y = 0
        circle_x = random.randint(0, 400)

    # --- 描画 ---
    screen.fill(pg.Color("white"))
    pg.draw.rect(screen, pg.Color("red"), rect)
    pg.draw.circle(screen, pg.Color("blue"), (circle_x, circle_y), circle_radius)
    pg.display.update()
    clock.tick(60)
コードはここではなんとなく見ればOK！　このコードは、エディタの 実行 ボタンじゃなくて、下の 動かして遊ぶ で動かしてね。（←→↑↓で操作／エディタ上の 停止 で止まる）。
育人
育人
うわぁ…こんなすごいの、ほんとにおれに作れるのかなあ？
ステラ
ステラ
完成のイメージはつかめたかな？　だいじょうぶ、いきなり全部は作らないよ。まずはボタンの使い方になれて、そのあとかんたんなコードから少しずつ進めていこう！
② コードを追加する― コピーして貼り付け

コードは下に足していくこともできるよ。つぎの順番でやってみよう！

1

まず、下の「やさしいコード」を右上の 全部おきかえでエディタに入れよう。

やさしいコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("black"))

# 四角形（プレイヤー）
pg.draw.rect(screen, pg.Color("red"), (175, 185, 50, 30))
2

入れたら、下の 実行を押して、まん中に赤い四角が出るか確かめよう。

赤い四角が出ていたらOK！
黒い画面に赤い四角と青い円が出たプレビュー
亜美
3

つぎに、この1行を コピーして、エディタのいちばん下（8行目のうしろ）に改行して貼り付け（Ctrl＋V）しよう。

追加する1行（青い円） 
pg.draw.circle(screen, pg.Color("blue"), (200, 100), 30)
はりつけがむずかしいときは でもOK
4

貼り付けたら、もう一度 実行！

青い円が増えていたら成功！
黒い画面に赤い四角と青い円が出たプレビュー
育人
③ お手本を見る／日本語で確認― くわしく知りたいとき用

うまくいかないときは お手本で正解のコードを見られるよ。お手本を開いたら、中の 日本語で見るを押してみて。コードの意味が日本語で読めるんだ。

お手本を見るを押したところ 日本語で見るを押したところ
④ 自分で打ってみよう― つづりは助けてもらえる

ここまでの①〜③のボタンをつかえば、コードは書けるよ。それでぜんぜんOK！

でも、 お手本を見ながら自分で打ってみたい人は、ぜひ挑戦ちょうせんしてみて！
自分の手で打つと、コードの形がぐっと身につくよ。プログラマーへの近道なんだ。

「ぜんぶ覚えないと打てないのかな…」と思うかもしれないけど、大丈夫。つづりはエディタが助けてくれるよ。

2文字うつと、候補が出てくる　たとえば pg.dr まで打つと、draw が出てくるよ。
入るのは「つづり」だけ　かっこや数字は入らないから、自分で打っているとちゅうでも じゃまにならないんだ。
じぶんでつけた名前も出る　player_x のように自分でつけた名前も候補になるよ。打ちまちがいをふせげるんだ。
2文字打ったところ 候補が出てきたところ
候補がじゃまなときは Esc をおせば消えるよ。もう一度出したいときは Ctrl＋スペース。
命令そのものを忘れたときは、エディタの上の （命令をさがす）で一覧から選べるよ。
ステラ
ステラ
打ちまちがえても大丈夫。つぎで、いつでも元にもどせる方法を教えるね！
⑤ まちがえても大丈夫― もどす・やりなおす

コードを打ちまちがえても、いつでも元にもどせるから安心してね。エディタの上にあるボタンをつかうよ。

もどす　ひとつ前の状態にもどるよ。何回も押せば、どんどん前にもどれる。キーボードの Ctrl＋Z でも同じことができるよ。
やりなおす　もどしすぎたときに、もう一度先へ進めるよ。キーボードの Ctrl＋Y でも同じ。
もどすボタンを押す前 もどすボタンを押した後
まっさらにする　コードをぜんぶ消して、まっさらな状態にするよ。押すと「本当に消す？」と聞かれるし、消したあとも もどす で元に戻せるんだ。
まっさらにするボタンを押す前 まっさらにするボタンを押した後
困ったときはステラに聞こう！
こまった育人がステラに聞いているようす

コードがうまく動かないときは、ステラの出番！　じっさいに、わざとまちがえたコードで、画面が思ったとおりにならない → ステラに質問 の流れを練習してみよう。

1

下の「ちょっとヘンなコード」を、右上の 全部おきかえでエディタに入れよう。

ちょっとヘンなコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("bule"))   # ← 色の名前、なんだかヘン？
2

入れたら、下の 実行を押してみよう。……あれ？　青くなるはずなのに、画面がまっ黒のままで何も変わらない！　どこかがまちがっているみたい。

3

うまくいかないな？と思ったら、エディタの右下にいるステラ（ロボット）を押して、AIを呼び出そう。そのあと、 バグを見つけてを押して質問してみてね。

右下のステラ（ロボット）を押す ステラが開いたようす
4

ステラがこのコードのバグを見つけて、まちがいを教えてくれるよ！

ステラの回答例
亜美
亜美
お手本もあるし、こまったらいつでもステラに聞けばいいんだね。それなら安心！
ステラはエデイターの右下にいつもいるよ。こまったら、いつでも呼び出して質問できるんだ。
エディタのそのほかの機能を見てみる 読まなくてもOK

エディタの上には、ほかにも便利なボタンがあるよ。こまったときに思い出してね。

エディタ上部のボタン全体

下のボタンをおすと、それぞれの使い方が出てくるよ。

わかったかな？
SECTION 1
ゲーム画面をぬりつぶそう
⏱ 8分
ステラ
ステラ
まずはウォーミングアップ！　ゲーム画面を1色でぬりつぶすところから始めよう。下の 全部おきかえを押して、エディタに入れてみて。
ぬりつぶしのコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("blue"))

実行 ボタンを押して、動かしてみよう！

真ん中の画面が青一色になったら成功！
プレビューが青一色になった画面
亜美
亜美
亜美
1行書いただけで、画面がぜんぶ青くなった！　コードって、ほんとに命令なんだね。
コードを見てみよう― screen.fill()
5screen.fill(pg.Color("blue"))
コードがすること
画面ぜんぶを青色でぬりつぶすよ。
screen.fill( ◯ ) って書くと、◯ の色で画面いっぱいをみたしてくれるんだ。
ことば
screen（スクリーン）＝ 画面
fill（フィル）＝ うめる・みたす
pg（ピージー）＝ ゲームづくりの道具箱
Color（カラー）＝ 色
blue（ブルー）＝ 青
これでできること
画面をすきな色でリセットできるよ！　まず画面をぬりつぶしてから、この上に図形を描いていくんだ。
コードを変えてみよう― 画面の色を変えよう

エディタの screen.fill(pg.Color("blue")) の色（blue）を、下から選んで書きかえてみよう。

red blue green yellow white
やってみよう 1
画面の色を 白色 に変えよう
ヒント：白色は英語で何と言うでしょうか？
画面が白色になった結果
やってみよう 2
画面の色を 緑色 に変えよう
ヒント：緑色は英語で何と言うでしょうか？
画面が緑色になった結果
やってみよう 3
画面の色を 赤色 に変えよう
ヒント：赤色は英語で何と言うでしょうか？
画面が赤色になった結果
色を変えたら、このボタンを押して画面を確かめよう！
できたかな？
SECTION 2
図形を描こう
⏱ 12分
四角形を描こう
ステラ
ステラ
画面をぬれたね！　こんどは、その上に四角形（プレイヤー）を描いてみよう。下のコードに置き換えてね。
四角形を描くコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("blue"))

# 四角形（プレイヤー）
pg.draw.rect(screen, pg.Color("red"), (175, 185, 50, 30))

実行を押して、青い画面に赤い四角が出るか確かめよう！

青い画面に赤い四角形が出たら成功！
青い画面に赤い四角形が出た画面
育人
育人
育人
おっ、四角が出た！　これがゲームのプレイヤーになるんだね。
コードを見てみよう― pg.draw.rect()
8pg.draw.rect(screen, pg.Color("red"), (175, 185, 50, 30))
コードがすること
画面に四角形を描くよ。
() の中には ①どこに・②色・③(X座標, Y座標, 横幅, 縦幅) の順で指定するよ。
() の中の3つ
1
screen ＝ どこに描くか
2
pg.Color("red") ＝ ぬりつぶしの色
3
(175,185,50,30) ＝ 位置(X,Y)と大きさ(横,縦)
ことば
draw（ドロー）＝ 描く・引く
rect（レクト）＝ rectangle（長方形）を短くしたもの
うごかして たしかめよう― 4つの数字と四角形

スライダーを動かすと、四角形が うごいたり 大きくなったりするよ。位置（X, Y）と大きさ（横, 縦）が、下のコードの4つの数字とどうつながっているか、見てみよう。

いまのコード pg.draw.rect(screen, pg.Color("red"), (175, 185, 50, 30))

はじめの2つ＝置く場所、あとの2つ＝四角の大きさ。この数字を、次の「コードを変えてみよう」でじっさいに書きかえてみよう。

コードを変えてみよう― プレイヤーの形にしよう

(175, 185, 50, 30) の数字を書きかえて、四角形をプレイヤーの形にしてみよう。1つ変えるたびに 実行で確かめてね。

やってみよう 1
横幅を 100 に変えて実行
よこ長の四角になるよ。
横幅を100にした結果
やってみよう 2
縦幅と横幅を 50 に変えて実行
きれいな正方形のプレイヤーになるね！
縦横を50にした結果
やってみよう 3
ゲーム画面と四角形、2つの色を変えて実行
上の screen.fill と、下の pg.draw.rect の色をそれぞれ変えてみよう。
red blue green yellow white
2つの色を変えた結果
数字を変えたら 実行。まよったら お手本を見よう！
育人
育人
おもしろそうだから、画面も四角もどっちも red にしてみた！……あれ？　四角がどこにあるかぜんぜん見えないんだけど！
亜美
亜美
そりゃそうでしょ…。背景と同じ色にしたら、そこにあっても見えないよ。ゲームの色は見やすさも考えて決めるのが大事なんだね。
ほかにも、こんな図形がかけるよ
亜美
亜美
ねえねえ、四角形以外は描けないのかな？まるとか描いてみたい！
ステラ
ステラ
もちろん描けるよ！ほかの図形は別のコードを使うんだ。たとえば「円を描く」コードはこれ！
円を描く pg.draw.circle() 
pg.draw.circle(screen, pg.Color("blue"), (200, 200), 40)
かたち
circle（サークル）は「円」って意味だよ。
() の中は どこに・何色・X座標・Y座標・大きさ の順だよ。
ちがい①
四角形と違って、大きさの数値が 1つだけ。
円は半径を入力するよ。四角形の横幅・縦幅とは違うから気を付けてね。
ちがい②
円はX座標とY座標が 円の中心になるよ。
これも四角形とは違うポイントだね。
コードを変えてみよう― 円を描いてみよう

下のコードに置き換えて 実行すると、四角形の上に円が出るよ。さいごの数字（半径）を変えて、大きさをためしてみよう！

四角形と円を描くコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("blue"))

# 四角形（プレイヤー）
pg.draw.rect(screen, pg.Color("red"), (175, 185, 50, 50))

# 円
pg.draw.circle(screen, pg.Color("yellow"), (200, 110), 40)
青い画面に赤い四角と黄色い円が出たら成功！
青い画面に赤い四角と黄色い円が出た画面
亜美

じつは、四角形や円のほかにも 線（line） や 楕円（ellipse） など、いろいろな図形が描けるんだ。rect や circle のところを書きかえるだけだよ。
いまはおぼえなくてOK！「へえ、こんなのもあるんだ」でだいじょうぶ。

ほかの図形のコード 
# 線（せん）
pg.draw.line(screen, pg.Color("white"), (0, 0), (400, 400), 5)
# 楕円（だえん）
pg.draw.ellipse(screen, pg.Color("green"), (100, 275, 200, 100))
はりつけがむずかしいときは でもOK
コピーして実行すると、白い線と緑の楕円が出るよ！
白い線（line）と緑の楕円（ellipse）を描いた結果
育人
できたかな？
SECTION 3
ゲーム画面の座標をおぼえよう！
⏱ 12分
亜美
亜美
ねえステラ、四角の場所って、どうやって決まってるの？
ステラ
ステラ
いいところに気づいたね！その場所を決めるのが座標。ゲームでキャラを画面のどこに置くかを決める、これからすごく大事なものだよ。
育人と亜美がタブレットの座標(0,0)を指さして説明

Pythonのゲーム画面は 左上が原点（げんてん）。ここが X座標が0・Y座標が0 の場所だよ。

そこから X座標を増やすと画面の右へ、Y座標を増やすと画面の下へ進んでいくんだ。

スクラッチをやったことがある人は気をつけて！ スクラッチは画面の真ん中が(0,0)だったけど、Pythonは左上が(0,0)。ここが大きな違いなんだ。

ゲーム画面（400×400）の座標
(0,0) げんてん (400,0) (0,400) (400,400) X → Y ↓

それでは、次のコードをつかって、画面の大きさを覚えよう。さっき練習で使った、画面の色と四角形を描くコードが出てくるよ。全部置き換えてね。

コードを見てみよう― 4つの四角形
4つの四角形 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("black"))
# 四角形１
pg.draw.rect(screen, pg.Color("red"), (0, 0, 100, 100))
# 四角形２
pg.draw.rect(screen, pg.Color("red"), (200, 0, 100, 100))
# 四角形３
pg.draw.rect(screen, pg.Color("red"), (0, 200, 100, 100))
# 四角形４
pg.draw.rect(screen, pg.Color("red"), (200, 200, 100, 100))
置き換えたら「実行」して、4つの四角を出してみよう！
画面の左上に4つの赤い正方形が出たら成功！
コードを増やすと、図形も増やせるんだ。
左上に4つの赤い正方形が出た画面
亜美
コードを変えてみよう― 4つを四隅（すみ）へ動かそう
やってみよう 1

4つの四角形に色をつけよう

どれがどの四角形か分かるように、色を変えるよ。四角形2を blue、四角形3を yellow、四角形4を green にしよう！

正解の画面をみる ステップ1の正解の画面
やってみよう 2

4つを画面の四すみへ動かそう

四角形１は X座標0・Y座標0 なので画面の左上にあるね。２〜４のX座標とY座標を変えて、のこりの三すみに置いてみよう！

ヒント1：ゲーム画面の大きさは 400×400
ヒント2：四角形の縦と横の幅は 100
ヒント3：画面からはみ出ると見えなくなってしまうよ
正解の画面をみる ステップ2の正解の画面
やってみよう 3

四角形を小さくして、もう一度四すみへ

今度は大きさを変えるよ。横幅・縦幅を 50 にしてみよう。すると、すみから離れてしまうね。座標も直して、またピッタリ四すみに置けるかな？

正解の画面をみる ステップ3の正解の画面
pg.draw.rect() は座標のところから、横幅・縦幅に四角を描くことが分かったね！
できたかな？
SECTION 4
変数をつかって色々表示しよう！
⏱ 14分
育人
育人
ねえステラ…毎回毎回、数を入力しなおすの、めんどくさくない…？「この数って何のための数だっけ？」ってなっちゃうよ。
ステラ
ステラ
そう思うよね！そういう時は、分かりやすい名前をつけた 変数 をつくって数を管理するんだ。ぐっとラクになるよ。
ステラ
ステラ
じつはこの赤い四角形——第4回まで進むと、キミが動かすプレイヤーキャラになるんだ。だから名前を player（プレイヤー＝自分） にしてあるんだよ。今はその場所を決める練習ってわけ。

これから、3つの変数をつくるよ。今までつくったコードを消して、新しく次のコードに置き換えてね。

コードを見てみよう― 変数（へんすう）をつかうコード
変数をつかうコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 初期設定 ---
# プレイヤー（四角形）
player_x = 0      # プレイヤーのX座標を覚える変数
player_y = 0      # プレイヤーのY座標を覚える変数
player_size = 40  # プレイヤーの幅を覚える変数

# --- 描画 ---
screen.fill(pg.Color("black"))
# 四角形１
pg.draw.rect(screen, pg.Color("red"), (player_x, player_y, player_size, player_size))
コードがすること
亜美が変数のすごさを得意げに説明、育人が驚く
player_x = 0 は「player_x という名前の変数をつくって、数字の0をいれる」という意味だよ。
数値を入力する場所には、変数も入力できるんだ！
このコードは X座標0・Y座標0・横幅と縦幅40の四角形を描くよ。
変数の作り方
〇 = △
… 〇という名前で変数を作って、その中に △ のデータ・数値を入れる、ということ。
ことば
player（プレイヤー）＝ 自分
size（サイズ）＝ 大きさ
なまえは じぶんで決める― 変数の名前は じゆう！

player_x のような名前は、Python の決まりごとではなく、キミが自由につけた名前なんだ。名前も数字も打ちかえて、右のプレビューで四角形がどう変わるか見てみよう。名前を変えると、作るところと使うところが いっしょに変わるよ。

なまえの例：
=
=
=
pg.draw.rect(screen, pg.Color("red"), (player_x, player_y, player_size, player_size))

緑の名前は じゆうに決めてOK（ただし作るところと使うところを同じ名前にそろえよう）。player_size は横と縦の2か所で使っているね——1つの名前は何回でも使えるんだ。青い言葉（pg.draw.rect や screen）は Python の決まった言葉だから、変えられないよ。

コードを変えてみよう― 変数を変えてみよう
やってみよう

変数 player_x を 100 に変えて実行

四角形の場所が、右へ動くかな？

player_x の数を変えて実行してみよう！
四角形が右へ動いたら成功！
player_x を100にして四角形が右へ動いた画面
育人
育人
育人
変数の数を変えたら、四角形の場所が動いた！…でもさ、これなら直接数を入力したほうが早くない…？
亜美
亜美
あ、でもステラがさっき「名前をつけて数を管理する」って言ってたよね。同じ数を何回もつかうときに効いてくるんじゃない？　ためしに次のコードへ置き換えてみようよ。
コードを見てみよう― 4つに変数をつかう
4つに変数をつかう 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 初期設定 ---
player_x = 100
player_y = 0
player_size = 40

# --- 描画 ---
screen.fill(pg.Color("black"))
pg.draw.rect(screen, pg.Color("red"),    (player_x, player_y, player_size, player_size))
pg.draw.rect(screen, pg.Color("blue"),   (300, 0, player_size, player_size))
pg.draw.rect(screen, pg.Color("yellow"), (0, 300, player_size, player_size))
pg.draw.rect(screen, pg.Color("green"),  (300, 300, player_size, player_size))
コードを変えてみよう― 変数のすごさを体験しよう
やってみよう

変数 player_size を 80 に変えて実行

横幅と縦幅のところには、変数 player_size が入っているよ。1か所変えるだけで、どうなるかな？

player_size を 80 に変えて実行してみよう！
4つの四角形ぜんぶの大きさが変わったら成功！
player_size を80にして4つの四角形が大きくなった画面
亜美
育人
育人
うわっ、1か所しか変えてないのに4つぜんぶ変わった！…これ、直接数を書いてたら4回も直さなきゃいけないってことか。変数って便利じゃん！
ステラ
ステラ
そう、それが変数のべんりなところ！　同じ数をいくつも使うときは、変数にしておくと直すのが1か所ですむんだ。ゲームが大きくなるほど効いてくるよ。
できたかな？
SECTION 5
コードを色々触さわってみよう！
⏱ じゆう
亜美
亜美
ここまでよくがんばったね！えらいえらい。あまった時間で、次のことにも挑戦ちょうせんしてみよ！
やってみよう 1

色を変えてみよう

画面の色と、2つの四角形の色を、すきな色に変えて実行しよう。 実行するたびに、どこが変わったか見くらべてね。

つかうコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("black"))
pg.draw.rect(screen, pg.Color("red"), (50, 50, 100, 100))
pg.draw.rect(screen, pg.Color("blue"), (250, 250, 100, 100))
お手本の画面をみる やってみよう1のお手本の画面
これは 画面を green、四角形を yellow と white に変えた例だよ。きみが選んだ色とちがっていても正解！　自分の好きな色でOK。
やってみよう 2

円を足して、ゆきだるまにしてみよう！

円（circle）がもう1つ足せるかな？　四角形の大きさ（横幅・縦幅）も変えて、きれいな形の「ゆきだるま」をつくってみよう！　自分がベストに思うゆきだるまでOKだよ。

つかうコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 描画 ---
screen.fill(pg.Color("black"))
pg.draw.rect(screen, pg.Color("red"), (50, 50, 100, 100))

pg.draw.circle(screen, pg.Color("yellow"), (280, 120), 50)
pg.draw.circle(screen, pg.Color("white"), (200, 120), 50)

# 円をここに足してみよう
#pg.draw.circle(screen, pg.Color("色"), (X座標, Y座標), 半径)
お手本の画面をみる やってみよう2のお手本の画面
これは赤い四角形の横幅を200に変えて、黄色い円の上にwhite の小さい円（半径30）を重ねた例だよ。あとから描いた図形が上に重なるのがポイント！　足す場所も大きさも自由だから、きみのとちがっていてOK。
やってみよう 3

変数を変えて、まとめて動かそう

このコードには、変数のところと数字を直接書いたところが混ざっているよ。player_x・player_y・player_size を変えて実行し、どの四角形が動いて、どれが動かないかをたしかめてみよう！

つかうコード 
import pygame as pg
screen = pg.display.set_mode((400, 400))

# --- 初期設定 ---
player_x = 50
player_y = 0
player_size = 50

# --- 描画 ---
screen.fill(pg.Color("black"))
pg.draw.rect(screen, pg.Color("red"),    (player_x, player_y, player_size, player_size))
pg.draw.rect(screen, pg.Color("blue"),   (player_x, 100, player_size, player_size))
pg.draw.rect(screen, pg.Color("yellow"), (player_x, 200, 100, player_size))
pg.draw.rect(screen, pg.Color("green"),  (50, 300, player_size, player_size))
pg.draw.rect(screen, pg.Color("purple"), (250, 300, player_size, 100))
お手本の画面をみる やってみよう3のお手本の画面
これは player_x を150、player_size を80 に変えた例だよ。
上の3つ（赤・青・黄）は player_x をつかっているのでそろって右へ動いた。下の2つ（緑・紫）は x に数字を直接書いてあるので、その場から動かないんだ。ここが変数と数字のちがいだよ！
チャレンジ問題 最後の関門！

いままで作った四角形のコードを土台にして、下の画像とおなじ画面に組み立てなおしてみよう！　つかう命令は同じ（screen.fill と pg.draw.rect）。絵をよく見て、色・大きさ・かさねる順番を考えてね。

育人
チャレンジ問題の完成イメージ
この画面をつくろう！
亜美

むずかしいけど、ここまでやったことを全部つかえばできるはず。うまくできたら「正解をみる」で答え合わせをしよう！

大事なヒント：コードは上から順番に実行されるよ。
つまり、あとに書いた図形ほど上に重なって見えるんだ。だから 大きい四角形から先に書いて、小さい四角形をあとに書けば、小さいほうが上にのっかるよ。
・四角形は 青・緑・黄 の3つ。3つとも X座標もY座標も 0（画面の左上）で、ちがうのは大きさだけ！
・大きさは 300 → 200 → 100 の順に小さく。背景は 赤だよ。
正解をみる

まずは お手本のコードを左に出して、自分のコードと見くらべてみよう。どこが同じで、どこがちがうかな？（エディタの中身は変わらないよ）

赤い背景の上に、大きい順に四角形を重ねているね。コードは上から順番に実行されるから、あとに書いた小さい四角形ほど上にのっかって見えるんだ。これが「重ねて描く」しくみだよ。
どうしても うまくいかないとき（正解を全部おきかえ）

自分の手で組み立てるのが、いちばんの勉強だよ。それでも むずかしいときだけ、下のボタンで正解を入れてね。

できた！やったね！
育人
チャレンジ問題の完成イメージ
亜美
できたかな？
SECTION 6
まとめとチェック問題
⏱ 5分
ステラ
ステラ
おつかれさま！さいごに、今日できるようになったことをふりかえって、チェック問題で確かめてみよう。まちがえても大丈夫、答えを見ればちゃんと分かるようになってるよ。
チェック問題― ぜんぶで8問

えらぶとすぐに答えと解説が出るよ。まちがえても点はへらないから、気楽にやってみよう！

第 1 問 / 8問
今日できるようになったこと― ふりかえり
ゲーム画面をぬりつぶす
つかった命令screen.fill(pg.Color("red"))
画面ぜんぶを、好きな色にできる
四角形と円を描く
つかった命令pg.draw.rect() ／ pg.draw.circle()
好きな形を、好きな色で描ける
座標で場所を決める
おぼえること(0, 0) は画面の左上
Xはよこ、Yはたての数。右と下ほど大きくなる
変数をつかう
書き方player_x = 100
1か所を変えるだけで、まとめて変えられる
重ねて描く
おぼえることあとに書いた図形ほど上
コードは上から順番に実行されるから
ステラ
ステラ
次回予告だよ！次は「ずっと繰くり返す」しくみと、足し算・引き算で四角形を動かす方法をやるよ。お楽しみに！
できたかな？
おまけ
練習問題（じかんがあれば）
ステラ
ステラ
ここからはおまけの練習だよ！　やらなくても第1回はクリアだけど、もっと図形であそびたい人はぜひどうぞ。 全部おきかえ → 実行 でためせるよ。
国旗を描いてみよう！

きれいに作れなくても大丈夫。だいたいの大きさでOK！　コードは上から順番に動いて、あとに書いた図形ほど上に重なるよ。

🗾 日本の国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("white"))
pg.draw.circle(screen, pg.Color("red"), (200, 200), 75)

🇦🇹 オーストリアの国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("red"))
pg.draw.rect(screen, pg.Color("white"), (0, 135, 400, 135))

🇫🇷 フランスの国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("white"))
pg.draw.rect(screen, pg.Color("red"), (0, 0, 130, 400))
pg.draw.rect(screen, pg.Color("blue"), (270, 0, 130, 400))

🇩🇪 ドイツの国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("black"))
pg.draw.rect(screen, pg.Color("red"), (0, 135, 400, 135))
pg.draw.rect(screen, pg.Color("yellow"), (0, 260, 400, 140))

🇱🇦 ラオスの国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("red"))
pg.draw.rect(screen, pg.Color("blue"), (0, 135, 400, 135))
pg.draw.circle(screen, pg.Color("white"), (200, 200), 50)

🇨🇭 スイスの国旗

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("red"))
pg.draw.rect(screen, pg.Color("white"), (175, 125, 50, 150))
pg.draw.rect(screen, pg.Color("white"), (125, 175, 150, 50))
ほかの絵にも挑戦！

⛄ 雪だるま

白い円を2つ重ねて雪だるまに。背景や大きさも変えてみよう。

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("blue"))
pg.draw.circle(screen, pg.Color("white"), (200, 150), 50)
pg.draw.circle(screen, pg.Color("white"), (200, 250), 75)

🚦 信号機

白い四角の上に、赤・黄・緑の円を3つならべよう。

つかうコード
import pygame as pg
screen = pg.display.set_mode((400, 400))

screen.fill(pg.Color("black"))
# 信号機の本体（四角）
pg.draw.rect(screen, pg.Color("white"), (50, 150, 300, 100))
# ライト（円3つ）
pg.draw.circle(screen, pg.Color("red"),    (100, 200), 30)
pg.draw.circle(screen, pg.Color("yellow"), (200, 200), 30)
pg.draw.circle(screen, pg.Color("green"),  (300, 200), 30)
ログ（コンソール）で遊んでみよう

こちらはちょっと先取り。print() は第2回でくわしく習うよ。ゲーム画面ではなく、下のコンソールに文字が出るよ。

⏱ カウントダウン

つかうコード
print("3")
print("2")
print("1")
print("0")

🐶 自己紹介

つかうコード
print("名前:", "ポチ")
print("年齢:", 3)
print("来年は...", 3 + 1, "歳になります！")

⚔ RPGバトル風のログ

つかうコード
player = "ゆうしゃ"     # 主人公の名前
special = "ひっさつ！"    # ひっさつわざの名前
enemy = "まおう"    # てきのなまえ

print(player, "の攻撃")
print(player, "「", special, "」")
print(enemy, "に100000000のダメージ")
print(enemy, "をたおした！")

📊 RPG風ステータス画面

つかうコード
name = "ゆうしゃ"
title = "かけだしの戦士"
max_hp = 100
max_mp = 50
Str = 12  # 筋力
Vit = 8   # 耐久力
Agi = 7   # 俊敏さ
Luk = 15  # 運の良さ

print("====================")
print("【ステータス】")
print("名前/称号:", name, "/", title)
print("HP/MP  :", max_hp, "/", max_mp)
print("Str  :", Str)
print("Vit  :", Vit)
print("Agi  :", Agi)
print("====================")
print("最強戦士に俺はなる！")
きょうの ふりかえり

きょうの がくしゅうは どうだったかな？　えらんで クリックしてね。

① ひとりで さいごまで すすめた？
② テキストを よんで、つぎに なにを するか わかった？
③ エディタに コードを かいたり かえたり できた？
④ 「じっこう」ボタンで、プログラムを うごかせた？
⑤ わからない とき、「お手本」や「AIヘルパー」は やくに たった？
⑥ じぶんで ゲームの いろや かたちを かえられて、たのしかった？
⑦ また Pythonで プログラムを つくってみたい？
本部スタッフ用：やってみての評価

この教材を実際にやってみて、評価をお願いします。Pythonクリエイター講座（エディタ・お手本・AIヘルパー等）ならではの観点を含みます。

A. 自走性（ひとりで進められるか）
B. ナビ（次にどこへ進むか）
C. エディタ操作（Python講座の核）
D. お手本機能
E. AIヘルパー
F. 可読性（ふりがな・文字・行間）
G. エンゲージメント（楽しさ・ごほうび）
H. 総合評価
ここをクリックでとじる
もくじ
トップページに戻る
⬆ スキルアップ！
🎉
第1回 クリア！
★★★★★★★★

四角形と円の描画びょうが・座標・変数をマスターしたね！
次の回は「ずっと繰くり返す」しくみで
キャラクターを動かしていくよ！

力ののび
数字＝今の合計（%）、（＋）＝この回でふえた分。全12回で100%になるよ！
TOPにもどる
×