基本情報のPythonサンプル問題をブラウザだけで動かしてみる

# はじめに
　基本情報技術者試験（以下FE試験）では，プログラミングの出題がCOBOLからPythonに代わりました。2020年の秋試験からPythonが出題されます（当初の予定では2020春試験からでしたが，コロナの影響で春試験が中止になりました。）
　Pythonの特徴の一つは，プログラミング初心者にも学習しやすいことです。ただ，言語としては学習しやすくても，初心者の方には自分一人で「Pythonを動かして試す環境」を準備することは難しいことでしょう。
　そこで，この記事では「FE試験受験のためにPythonを試してみたいけど，どうやって動かせばいいのか分からない」方に向けて，Python環境の準備について解説します。さらに，IPA（FE試験の実施機関）が公表している[Pythonのサンプル問題](https://www.jitec.ipa.go.jp/1_13download/fe_python_sample.pdf)を実際に動かしてみます。

# この記事の対象読者
- プログラミングが初めて。
- FE試験を受験したい。
- Pythonを学びたい。でも，どうやればPythonのプログラムを動かすか分からない。
- FE試験の午前問題の出題キーワードがなんとなく理解できている，または，調べたら理解できる。

# 準備するもの
- Googleのアカウント(gmailのアカウントがあればOK）
- Chromeなどのブラウザが使える環境（MacでもWindowsでもOK）

# Python実行環境
　プログラミング言語を動作させるには，エディタやコンパイラ・インタープリタをパソコンにインストールすることが多いです。しかも，必要なライブラリの導入や開発環境（IDE）の操作に慣れる必要があるなど，結構高いハードルを越えなければいけません。
　ところがありがたいことに，GoogleサマがWebブラウザだけでPython を実行できる環境を提供しており，無償で利用できます。もともとは機械学習の練習用（とはいえかなり本格的）の環境らしいのですが，FE試験試験のサンプル問題を動かすこともできます。この環境をColaboratoryと呼びます。この記事ではColaboratoryを利用してサンプルプログラムを動かします。

# Colaboratoryにアクセス
　では早速アクセスしてみましょう。ブラウザ(Chrome推奨）で[https://colab.research.google.com/](https://colab.research.google.com/)にアクセスします。Googleアカウントにログインしていない場合，右上のログインのアイコンからログインしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/9153579d-0e57-7ffa-63a6-dd19846db0ec.png)

　ログインすると，ノートブック一覧画面が出ます。ノートブックとは，関連するファイルをまとめるための，フォルダのようなものです。FE試験の勉強用であれば，1問で1ノートブックに対応させるとよいでしょう。サンプル問題用のノートブックを作るために「ノートブックを新規作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/5d7b1d64-b43f-c4cd-2602-274767c580a2.png)

 早速コードの入力画面が出てきます。あとでノートブックを開くときにわかりやすくするために，ノートブックの名前を変更しておきましょう。デフォルトの名前である「Untitled0.ipynb」をクリックして，「sample.ipynb」に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/0b15b36b-3ed0-7dc8-1918-0e82a04c4d9c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/dbf7aba0-dc36-41a8-9ba6-4869077e3c25.png)


 ファイル名を変更したら，コード入力の箇所（線で囲った箇所です。セルと呼びます。）にサンプルプログラムを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/c1956ce2-f5ce-742b-35be-335379d39967.png)

もちろん手入力が一番勉強になります。が，楽したい方のために，サンプルプログラムを掲載しておきます。コピペしてください。

```python:sample.py
# 著作権はIPAにあります。
import math
import matplotlib.pyplot as plt

def parse(s):
  return [(x[0],int(x[1:])) for x in s.split(';')]

class Marker:
  def __init__(self):
    self.x, self.y, self.angle = 0, 0, 0
    plt.xlim(-320, 320)
    plt.ylim(-240, 240)

  def forward(self, val):
    rad = math.radians(self.angle)
    dx = val * math.cos(rad)
    dy = val * math.sin(rad)
    x1, y1, x2, y2 = self.x, self.y, self.x + dx, self.y + dy
    plt.plot([x1, x2], [y1, y2], color='black', linewidth=2)
    self.x, self.y = x2, y2
  def turn(self, val):
    self.angle = (self.angle + val) % 360
  def show(self):
    plt.show()
def draw(s):
  insts = parse(s)
  marker = Marker()
  stack = []
  opno = 0
  while opno < len(insts):
    print(stack)
    code, val = insts[opno]
    if code == 'F':
      marker.forward( val )
    elif code == 'T':
      marker.turn( val )
    elif code == 'R':
      stack.append({'opno': opno, 'rest': val })
    elif code == 'E':
      if stack[-1]['rest'] > 1 :
        opno = stack[-1]['opno']
        stack[-1]['rest'] -= 1
      else:
        stack.pop()
    opno += 1
  marker.show()

```

　コードの入力が終わったら，実行してみましょう。左の実行アイコンをクリックしてください。初回の実行時には少し時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/91272752-94f3-8e43-b8db-ab91c24d4c31.png)

　・・・あれ，何も出てきません。それもそのはず，このサンプルプログラムには関数やクラスの定義だけしか書かれておらず，メインルーチンに相当する箇所がありません。それでは，この関数やクラスを呼び出してみましょう。
　ページの上の方にある「＋コード」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/9b0aa07a-65fe-3385-c49c-c95b747308fc.png)

　すると，サンプルプログラムを入力したセルの下に，もう一つセルが現れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/bb38283a-59d2-aca6-3ad7-1b6bfd6b76cd.png)

　このセルに，サンプル問題で「引数として与えられた命令列の各命令を解釈実行し，描画結果を表示する」と解説されたdraw関数を実行します。引数は，問題文空欄bの回答である選択肢カ（R5;F100;T72;E0）を使い，「draw('R5;F100;T72;E0')」を入力します。入力したら，左の実行アイコンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/0565531b-38a8-ea54-e51c-968f3ce61d0b.png)

　サンプルコードの入力や，入力した文字列が合っていれば，以下のように五角形が表示されるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/85d32024-e5fa-48d6-3bc2-44afa0b5ef86.png)

　作業が終わったら，ノートブックを保存しておきましょう。保存したノートブックは，次回開くことができます。画面上の方にある「ファイル」から「保存」をクリックします。保存ができたら，ブラウザを閉じても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/44268ba8-3140-6d95-82de-7928389cdfc2.png)

お疲れさまでした。