あなたの知らないプログラミングの世界 〜プログラミングがこんなに面白いって知っていましたか？〜：ゲームを通してプログラミングの基礎を学ぼう（前編）-Racketで学ぶプログラミング-
6
0
0
全文
(2) 連載. あなたの知らないプログラミングの世界 ～プログラミングがこんなに面白いって知っていましたか？～. 図 -6 DrRacket のアイコン 図 -5 インストール中の画面（Windows） 図 -3 Racket の Web ページ. 図 -4 ダウンロードのページ. • 2 本の道路に両方とも車を走らせる • ビットくんが上下にも動けるようにする • ビット君が車にぶつかったらゲームオーバーに， 家に帰れたらゲームクリアにする. 図 -7 Racket の画面. って，アプリケーションに「ドラッグ・アンド・ドロップ」. を行っていく必要があります．1 つ 1 つ，形にして（実. します．インストールの途中で「これを選択しておかなく. 装して）いきましょう．今回の前編では，上の 2 つを実. てはならない」というものはありません．右下の「Next」. 装していきます．. ボタンをクリックしつづけると， 「おまかせ」でインストー ル準備が行われます．最後に「Install」ボタンが出現し. Racket の準備. たらクリックすると，インストールが始まります．インスト ール終了までに必要な時間は，長くても 5 分程度です．. ▶▶ インストールと起動. インストールが終了したら，それぞれの環境に応じ. それでは， 「早くプログラミングを始めたい！」という. て， 「DrRacket」という名称のアイコンをクリックし，. 気持ちをなだめながら，Racket をインストールしましょう．. Racket を起動します．インストールした場所に 「Racket. Web ブラウザで Racket の Web ページ https://racket-. （バージョン名）」というフォルダがあります．このフォル. lang.org/ にアクセスし，右上の「ダウンロード」をクリ. ダを開くと，図 -6 のアイコン「DrRacket」が現れます．. ックします（図 -3 の赤い矢印の部分） ．すると，ダウン. 起動して，図 -7 のような画面が表示されたら，インスト. ロードのページに移行します（図 -4） ．インストールする. ールは無事終了していることになります．もしも，素っ. ものの種類（Distribution）は「Racket」と「Minimal. 気ない真っ黒の画面が表示されたら， 「DrRacket」で. Racket」の 2 つの選択肢のうち「Racket」を，環境. はなく「Racket」が起動されています．落ち着いて終. （Platform）としてご自分のパソコン環境を選び，すぐ. 了させ，改めて「DrRacket」を起動してください．. 下に黒地に白文字で表示されるダウンロードボタンをクリ の場合は，ダウンロードされたファイルを開き，指示に. ▶▶ 未完成のプログラムのダウンロード・環 境設定・実行と終了を行ってみよう. 従ってインストールしていきます（図 -5） ．Mac OS X で. それでは早速，未完成の「ビットくん帰宅ゲーム」. は，ダウンロードしたディスクイメージを開き，表示に従. のプログラムをダウンロードし，Racket 言語でプロ. ックしてください．ダウンロードが終わったら，Windows. 850. 情報処理 Vol.57 No.9 Sep. 2016.
(3) ゲームを通してプログラミングの基礎を学ぼう（前編 ). 右下の「OK」をクリックしま す．次に，DrRacket 画 面 の上のメニューバーから「言 語（Language）」 →「 ティ ーチパックの 追 加 ...（Add Teachpack...）」 で， 必 要 な素材を追加するウィンドウ を開きます．左・中央・右と. 3 つの列があり，素材のリス トが表 示されています．真. 図 -8 サンプルプログラムを開いた状態. ん中から「universe.rkt」を ダブルクリックして追加しま す． もう 1 つ 追 加 するもの があるので， もう一度「 言 語（Language）」 →「 ティ 図 -9 言語選択のウィンドウ. ーチパックの 追 加…（Add Teachpack...）」で同じウィ. 図 -10 サンプルプログラムの実行後の画面. ンドウを開き，真ん中の列か. グラミングして完成させるための準備を行います．ま. ら「2htdp/image.rkt」をダブルクリックして追加します．. ず，Web ページ（https://researchmap.jp/mutrf6bh8 -. これで準備は完了です．. 2014482/#_ 2014482） から， 使 用するサンプルプロ. では，プログラムの実 行と終了を行ってみましょ. グラムをダウンロードしてください．ダウンロードが終. う．実行するには右上，右から 2 番目の「実行」をク. 了したら，DrRacket の「 ファイル ( File)」 →「 開く. リックします．少し待つと，別のウィンドウが開かれま. ... (Open...)」で，ダウンロードしたファイルを開きま. す（図 -10）．ウィンドウの中では，自動車が走ってい. す．上半分に図 -8 のような表示が現れたら，成功. て，プログラムが実行されていることが分かります．実. です．このようにプログラム表示の中に画像が出現. 行したプログラムを終了させるときは，開いたウィンドウ. するプログラミング言語やプログラミング環境は，実. の上部のバーにある終了ボタン （Mac OS X の場合はウ. はとても珍しい存在なのです．これは，初めての人も. ィンドウ左上の赤い「×」ボタン）を押します．プログ. 画像の表示などで苦労せずに，面白いところをプロ. ラムの実行と終了ができるようになれば，プログラミン. グラミングできるようにという Racket の工夫の 1 つ. グで遊んだり試行錯誤して，自由自在に楽しめます．. です．すぐに実行させてみたいところですが，その前 に，必要な作業がいくつかあります．まず，プログラ. ▶▶ プログラミングに踏み込んでみよう. ミング言語の種類を選択します．設定は，DrRacket. それでは， 「DrRacket」でプログラミングを行う部分. の画面の左下，現在設定されている言語が表示され. に，何が表示されているのか見てみましょう．図 -11 の. ている部分（ダウンロードした直後は「No language. ように，上と下，2 つのエリアに分かれており，それぞ. chosen」となっている）の右側の「▼」をクリック. れに何かが表示されています．これらは，何なのでしょ. し， 選 択メニューから「 言 語 の 選 択 (Choose Lan-. うか？ 上のエリアは， 「定義部分」と呼ばれます．プ. guage...)」をクリックすることで行います．すると言. ログラムの内容は，すべてこちらの「定義部分」に書. 語を選択するためのウィンドウが現れるので，真ん. いていきます．下のエリアは， 「対話環境」と呼ばれま. 中あたり， 「学習用の言語 (Teaching Langugages)」. す．本稿では， 「エラーがあったら表示されるところ」と. の 中 の「Beginning Student」 を 選 択 し（ 図 -9），. 覚えておきましょう．試しに，上のエリアのプログラム. 情報処理 Vol.57 No.9 Sep. 2016. 851.
(4) 連載. あなたの知らないプログラミングの世界 ～プログラミングがこんなに面白いって知っていましたか？～. ▶▶ プログラムを少し変更してみよう では，いよいよ，プログラミングです．もう一度こ のプログラムを実行し， 「←」 「→」キーを押してみてく ださい．ビットくんが立った姿のまま，左右に動きます （図 -12）．これでは不自然です．それに，走ってくる 車のスピードが遅すぎて，まったくスリルがありません． まず， 「歩いているときは，歩いている画像に」とい う変更を行ってみましょう．ビットくんが歩いている画像 は，すでにプログラムの中にあります．上から 2 つ目の 図 -11 Racket のエディタ画面. 関数 (define bitwalk［歩くビットくんの画像］) は， 「この画像に bitwalk という名前をつけますよ」という. のどこかに， 不要な閉じカッコ「)」を追加してみましょう．. 宣言です．プログラムのこの後の部分に bitwalk とい. そして実行してみると，下のエリアに「read:unexpected. う単語が出てきたら，Racket は「この画像のことだね」. ‘)’ 」というメッセージが赤く表示され，実行は中止さ. と考えて， 「表示する」などの処理を行ってくれます．で. れます．このように，下のエリアはエラーが起きたとき. は，ビットくんが歩いているときの画像は，どこで決め. だけ注目しましょう．. られているのでしょうか？ ファイルの真ん中あたりの. 書いたプログラムを保存するには，ウィンドウの左. 部分 (define (redraw world) …) というところ. 上あたりのフロッピーの絵のアイコンをクリックするか，. に，redraw という関数があります．さまざまな場面で. 「DrRacket」の上のバーの左側， 「ファイル」→「定義. 表示される画像は，この redraw 関数の中で決められ. の保存」をクリックします．これで，DrRacket のエデ. ています．redraw 関数の最後から数えて 3 行目に，歩. ィタの基本的な使い方は， マスターできたことになります．. いているときのビットくんの画像を決める部分があり， (bit-image bit world). ▶▶ プログラム中の定数・関数の定義. と書かれています．このうち 2 つ目の bit，つまり立ち. では，プログラムを上から下まで，ざっと眺めて. 姿のビットくんの画像を，歩くビットくんの画像 bit-. みましょう．全体は，たくさんのブロックに分かれ. walk に変更して. ています．ブロックのそれぞれは定数もしくは関数. (bit-image bitwalk world). の定義です．定数は，. とすれば，歩いているときのビットくんは歩く姿になる. (define 定数名. はずです．この変更を行い，プログラムを保存してか. ……. ら実行して「←」 「→」キーでビットくんを動かしてみる. ). と，左右に動かされているときには，歩いている画像. という形です．ビット君の画像の定義などがこれにあた. になります（図 -13）．. ります．関数は. ここで，もう 1 つ，. (define ( 関数名 引数……). 簡単な変更を加え. ……. てみましょう．今の. ). 状態では，車のスピ. という形です．define のすぐあとの「(」の直後が，. ードが遅すぎて，ゲ. 関数の名前，それに続くものがその関数が受け取るも. ームとして，どうも. の （引数） になります．関数は受け取る引数の値によって，. 楽しくなさそうです．. 返す値が変わります．定数・関数の具体的な例はこの. スピードを変えるに. あと見ていきましょう．. は，どうすればよ いのでしょうか？ . 852. 情報処理 Vol.57 No.9 Sep. 2016. 図 -12 正面の画像のまま横に歩くビ ットくん. 図 -13 横向きの画像で歩くビットくん.
(5) ゲームを通してプログラミングの基礎を学ぼう（前編 ). プログラムの真ん中より少し末尾寄りに，move-on-tick. 経つと目をつぶった画像になります． 「歩いてからどれ. という関数があります．これは，時間による動きを決め. だけ時間が経過したか」で，表示する絵を変えている. る関数です．move-on-tick 関数の末尾から 2 行目に. わけです．2 つ目の bitplace は，ビットくんの位置. (world-carlist (carmove world -1 0)). です．3 つ目の carlist は，複数の車の座標のリスト. とあります．この -1 を -5 にし，保存して実行してみる. です．4 つ目の carimg は車の画像のデータです．こ. と，車はさきほどの 5 倍速になります．-20 にしてみると，. れらゲームの世界を定義する構造体 world の中身を，. クリアできなさそうな速さになります．車が遅すぎて簡. キーボードの入力・時間の経過に従って書き換えること. 単にクリアできるのも，速すぎてクリアが難しすぎるの. で，ゲーム全体が成り立っています．. も，ゲームとしては面白くありません．-5 くらいにしてお. では，最初に作られる「world」は，どのようなも. きましょう．. のでしょうか？ プログラムの末尾に big-bang と. ここでは，プログラムにちょっとした変更を加えてみ. いう関数を呼び出している部分があり，ここで最初の. ました．実行してみると，表示されるものや動きが大き く変わります．このように，プログラムを少しずつ変更 して行くことで，自分が思い描いている，自分の創り たいゲームに近づけていくことができます．. 「world」が作られています． (big-bang (make-world 100 START-POSN (list (make-posn 500 150) (make-posn 300 150). ゲームの 「世界観」 を 1 つのか たまりに〜 「構造体」 を使おう. . ゲームの魅力を語る言葉の 1 つに「世界観」があり. 前が入る）とすると，構造体を作ることができます．さ. ます．この「ビットくん帰宅ゲーム」の世界観は，きわ. きほどの world 構造体の宣言と照らしあわせてみるた. めて単純なものです．パラレルワールドが存在するわけ. めに，抜き出してみましょう．. ではありません．ゲーム全体の世界の情報が，1 つに. (make-world. まとめられています．プログラミングでは，複数のデー. 100 START-POSN (list( 略 )) cargray). タを 1 つの「かたまり」として扱う「構造体」が，し. world 構造体の宣言は，. ばしば使われます． 「ビットくん帰宅ゲーム」の世界の. (define-struct world. 情報は，ただ 1 つの構造体でできています．プログラ. (walksec bitplace carlist carimg)). ムの中央あたりに，. となっていましたね．1 つ目の 100 は，world 構造体の. (define-struct world. walksec に対応しています．つまり最初の状態では，. (walksec bitplace carlist carimg)) ☆2. という部分があります. ) cargray). ( 以下略 )) Racket では，make- ◯◯（◯◯ には構造体の名. ビットくんが歩き始めてからの時間は 100（1 秒間に 28 が. ． 「struct」は構造体という意. 対応していますので，100 はおよそ 4 秒です）ということ. 味です．この宣言で新しい world という構造体を定義. です．2 つ目の START-POSN は world 構造体の bit-. しています．その world 構造体は，ゲームに必要な情. place に対応しています．これが，ビットくんの最初の. 報を (walksec bitplace carlistcarimg) とひ. (make位置です．プログラムの最初の方を見てみると，. とかたまりにして持たせているのです．必要な情報の. posn 550 520) とあり (x, y)=(550, 520) となる位置で. 1 つ目である walksec は， 「ビットくんが歩いてから，. あることが分かります．ちなみに Racket の座標系は左上. どれだけ時間が経過しているか」 です．ビットくんを「←」. が (0, 0) で，x 座標は右に行くほど大きくなり，y 座標は. 「→」で動かすと歩いている画像になり，しばらく動か さずになると立っている画像に，そのままさらに時間が. 下に行くほど大きくなります．world 構造体の carlist にあたる 3 つ目の (list( 略 )) は，略さず書くと， (list (make-posn 500 150). ☆ 2. 実際のサンプルプログラムでは 1 行になっています．. (make-posn 300 150)). 情報処理 Vol.57 No.9 Sep. 2016. 853.
(6) 連載. あなたの知らないプログラミングの世界 ～プログラミングがこんなに面白いって知っていましたか？～. です．同じような複数の何かを 1 つにまとめるとき，. と，world- ◯ ◯. (list ....) というものを使 います． 上のリストに. world（◯ ◯には. は 2 つの車の座標が入っているため，最初に 2 台の. 構造体の要素の名. 車のある世界が作られるわけです．2 台の車はそれぞ. 前が入ります）の. れ ，(make-posn 500 150) と (make-posn300. 形 が 4 つ 出てき. 150) の 座 標， つまり (500, 150) と (300, 150) の 位. ます．この書き方. 置 に置 か れます．4 つ目の cargray は，world 構. で，world 構 造. 造 体 の carimg に対 応しています． これ は， 車の. 体 から 指 定した. 画像です．このように，構造体を 1 つ定義し，最初. 名前の 要 素を取. の世界の状 態（ 初期 値 ） を与え， 状 態を書き換え. り出すことができます．たとえばビットくんの位置に. ていくことによって，ゲームが作り上げられています．. は，bitplace という名前がついています．(world-. では，最初の世界を書き換えてみましょう．道路が. bitplace world) で，world 構造体の中から，ビッ. 2 本あり，うち 1 本には車が 2 台走っています．車が走. トくんの位置を取り出すことができます．. っていない方の道路にも，車を 2 台走らせてみます．こ. このように構造体を使えば，複数のデータをひとか. のためには，今見たばかりの (big-bang……) 部分の. たまりで扱うことができます．本稿で使用した Racket. 内部を書き換えます．車の情報にあたる 3 つ目の list. の universe ティーチパックではゲームの世界の構造体. の中に， もう1 本の道路を走る車を定義すればよいのです．. を定義し，書き換えていくことで，ゲーム全体が成り立. (big-bang (make-world 100 START-POSN. っています．. 図 -14 車の数が増えたゲーム画面. (list (make-posn 500 150) (make-posn 300 150). 後編について. (make-posn 100 350) (make-posn 400 350). すんなりうまくできましたでしょうか．うまくいかなか. ) cargray). ったとしてもそれに対処した経験は後で役立つもので. ( 以下略 )). す．失敗することを恐れずに，気軽にプログラミングを. と，2 台分の車の最初の座標を追加し，プログラム. 楽しんでいきましょう．本稿では，Racket プログラミン. を保存して実行してみると，車の数が 4 台になります. グの始め方を解説し，プログラムのちょっとした変更で. （図 -14） ．. 実行結果が変わることを体験して，ゲームの世界を作. このように，最初の状態（初期値）を変えると，ゲ. っている構造体というものを学んでいきました．次号の. ームの内容は変わります．また，ゲーム開始後の変化. 後編では. を違うものにすることによって，ゲームの内容を変える. • ビットくんが上下にも動けるようにする. こともできます．先ほど行った車の速度の変更は後者 にあたります．. • ビット君が車にぶつかったらゲームオーバーに， 家に帰れたらゲームクリアにする. それでは，構造体から 1 つ 1 つの要素を取り出すに. の変更を通して，複雑な条件分岐と，新しい関数の書. は，どうすればよいのでしょうか？ プログラムの中央. き方を学んでいきます．また次号でお会いしましょう．. より末尾寄りに， 「move-on-tick」という関数がありま. （2016 年 5 月 9 日受付）. す．この関数の中は (define (move-on-tick world) (make-world (+ (world-walksec world) 1) (world-bitplace world) (以下略))). 854. 情報処理 Vol.57 No.9 Sep. 2016. 対馬かなえ（正会員）■ [email protected] 国立情報学研究所 助教．関数型言語，型システム等に興味を持つ． 現在，プログラミングを楽にすることを目的に，デバッグ手法につ いて研究している．.
(7)
関連したドキュメント
子どもたちは、全５回のプログラムで学習したこと を思い出しながら、 「昔の人は霧ヶ峰に何をしにきてい
海なし県なので海の仕事についてよく知らなかったけど、この体験を通して海で楽しむ人のかげで、海を
しかしながら、世の中には相当情報がはんらんしておりまして、中には怪しいような情 報もあります。先ほど芳住先生からお話があったのは
「1 つでも、2 つでも、世界を変えるような 事柄について考えましょう。素晴らしいアイデ
人間は科学技術を発達させ、より大きな力を獲得してきました。しかし、現代の科学技術によっても、自然の世界は人間にとって未知なことが
学側からより、たくさんの情報 提供してほしいなあと感じて います。講議 まま に関して、うるさ すぎる学生、講議 まま
大村 その場合に、なぜ成り立たなくなったのか ということ、つまりあの図式でいうと基本的には S１ という 場
自分ではおかしいと思って も、「自分の体は汚れてい るのではないか」「ひどい ことを周りの人にしたので
