1. 準備

1.1. はじめに

コンピュータ実習Iでは,これまでいくつかの授業・演習で学んできたコンピュータプログラミングの技術を復習しながらさらに発展させ,ある程度以上の規模のプログラムを開発できるための方法論を学びます.

ある程度以上の規模,といっても実際にこの実習で扱うのは数百行程度ですので,あまり怖がらないでください.それでも多くの人にとってはこれまで書いたことのない規模のプログラムになるのではないかと思います.

一定以上の規模のプログラムを開発する場合,そのすべてを自分一人でゼロから作成することは現代では稀です.先人が開発してくれたソフトウェア資産を活用することが重要です.ソフトウェア資産というのは,商用の,あるいは無料のライブラリ群かもしれませんし,研究室や勤務先の先輩達が蓄積してきた秘伝のプログラム群かもしれません.いずれにせよ,それらの資産の仕様や使い方を調査・理解しながら自分の作品を作り上げていくスキルが必要です.

この実習では,プログラミング言語 Python と 2 次元グラフィックスライブラリ pygame を用いて,インタラクティブに動かすことのできる簡単なグラフィックスアプリケーションを開発しながら,既存のソフトウェア部品を活用するための知識と技術を身に着けます.

さらに,ソフトウェア部品として使いやすいものとはどのようなものか,新たにプログラムを書くときに,どのようなことに注意すればグチャグチャなスパゲッティコードになるのを避けることができるかについて,基本的な概念を学びます.


これらと同時に,プログラムを書く際の標準的な手順を身に着けることを目指します.「プログラミングが苦手だ」「情報系の科目が嫌いだ」という人の話をよく聞くのですが,そのような人がプログラミングをしている様子を見ると,コンピュータやプログラミング言語の理解の問題というよりは,単にプログラミングの手順に問題があるのではないかと思うことがあります.

例えば,教科書のサンプルコードを20行,30行と続けて一気に入力して,実行してみてうまく動かず,どこがおかしいかわからない…と悩む人がよくいます.そして彼ら/彼女らは,誤りが見つけられないのは自分に才能がないからだと落ち込みます.そんなことはないのです.コードを30行も書いたら,1個や2個間違いが入り込むのは当然です.そして30行のコードの中から,わずか1箇所のスペルミスや入力漏れを見つけ出すのは誰にとっても難しいことです.

だからプロは絶対に30行のコードを一気に入力しません.1行か,どんなに長くても2, 3行書いたら文法チェックを走らせます.こまめにミスをつぶしながら入力し,動かせそうな状態になったら動作を確認します.動いたら,いつでもその時点のコードに戻れるように履歴を記録します.

面倒くさいと思ったでしょうか.しかし適切なツールを使えば,これらは自然に,余計な手間を最小限にしながら実施できます.そのようなツールの使い方について,具体的には統合開発環境,ソースコード管理,デバッガ,単体テストといった概念についても学びます.

この実習で用いる pygame は,名前からわかる通りゲーム開発にも用いられるライブラリです.実習内でゲームを作るわけではありませんが,自分で書いたプログラムがマウスやキー入力に反応してリアルタイム動作するのは楽しいものです.プログラミングを楽しいと思ってくれる人が一人でも増えることを願っています.

機械知能・航空工学科 コンピュータ実習I 担当教員
(教材開発責任者 鏡 慎吾)
この実習は Python を学ぶためのものですか?
いいえ,言語としては Python を使用しますが,より広くプログラミング全般の知識・技術を学ぶことを目的としています.

ですので,このテキストも Python の機能すべてをカバーしません.また,いわゆる「Python らしい書き方」にはあまりこだわらず,他の言語でプログラミングする際にも転用できるような基本的な考え方や概念を伝えることを重視します.

ライブラリとは何ですか?
プログラムの部品となる関数やデータ構造などをまとめておき,他のプログラムから使用できるようにしたものを一般にライブラリ (library) と呼びます.

プログラミング言語の種類によって具体的な仕組みや呼び名は異なる場合があります.Python の場合は,モジュールやパッケージという単位で管理されます.

コードとは,プログラムと同じ意味ですか?
おおよそ同じですが,プログラムより少し狭い意味だと思ってください.

コード (code) のそもそもの意味は「符号」で,コンピュータの動作を,数字や文字の並びとして表現したものを指します.なので,例えば,フローチャートその他の図表を描いたりしながら仕様検討をする工程は「プログラミング」の一部ではあるかもしれませんが,「コーディング」には通常含めません.あくまで,実際に文字・数字・記号の列として表す作業のことをコーディングと呼び,その成果物をコードと呼びます.

1.2. インストール

この実習用に設定済みのソフトウェアを配布します.以下のページから zip ファイルをダウンロードしてください (担当教員から別途指示がある場合はそちらに従ってください). Windows (64ビット版) 専用です.他の環境の人はすぐ下の Q&A を見てください.

Windows (64ビット版) 以外で実習を進めたいです.どうすればいいですか?
最低限 Python 3 と pygame 2 および Git を何とかしてインストールしてください.

さらに VSCode をインストールしてこれらを使えるように設定すれば,ほぼ同様のことができると思います.Python のパッケージや VSCode の拡張機能などは,付録 B を参照しながら適宜インストールしてください.腕に覚えがある人は,自己責任で VSCode 以外の統合環境やエディタ等を使用しても構いません.

zip ファイルの中からは assets フォルダだけがあればよいです.自分で作成する projects フォルダと同じ場所に置いてください.

この zip ファイルには以下のソフトウェア群が含まれています.

  • WinPython + pygame (+ その他いくつかのパッケージ)
  • VSCodium (オープンソース版 Visual Studio Code)
  • MinGit (最小構成 Git)
  • これらの設定ファイルおよび実行用バッチファイル

以降の説明では zip ファイルの内容を C:/cs1 に展開したと仮定します (このテキストではフォルダの区切りは常に / と表します).以下のようなフォルダ構成になるはずです.

blockdiag C:/ cs1/ vscode_cs1.bat command_prompt_cs1.bat assets/ home/ projects/ MinGit/ VSCodium-win32-x64/ WPy64/

他の場所 (例えば C 以外のドライブなど) に置くことも可能ですが,フォルダパス名 (ドライブ名から当該フォルダに至るまでのフォルダ名を順に / でつないだ文字列) ができるだけ短く,かつ日本語文字や空白文字を含まないようにすることを勧めます.

C:/D:/ など各ドライブの直下が一番おすすめです.おすすめしないのは.デスクトップ,ダウンロード,ドキュメント, Program Files の下などです.

zip ファイルの展開を始めたら「残り30分」などと出て驚いています. 30分待たないとダメですか?
Windows 標準の zip 展開機能ではなく,専用のソフトウェアをインストールして使うともっと速くなる場合があります.

zip ファイルを右クリックして「すべて展開」を選ぶと,Windows に標準搭載されている zip 展開機能によるファイル展開が始まります.しかし,多数のファイルを展開する場合は極端に動作が遅いことがあります.

次の Q&A で指摘するようにトラブルも多いため,zip 等の圧縮ファイルの展開には専用のソフトウェアを使うことを勧めます.定番としては 7-Zip や Lhaplus などが挙げられます.インストールにかかる時間を考慮しても,結果的には早く済むのではないかと思います.

zip ファイルの展開で「パス名が長すぎます」というエラーが出ます.
Windows 標準の zip 展開機能で生じる場合があることを確認しています.他のソフトウェアを使うか,C:/ などドライブ直下に近いところに直接展開するようにしてみてください.

歴史的事情により,Windows のアプリケーションには長すぎるフォルダパス名を扱えないものがあります.よくぶつかるのは 255 文字の制限です.

この zip ファイルにはパス名がやたらと長いファイルが含まれています.数えてみたら一番長いもので 218 文字ありました.正気かよ.

cs1/VSCodium-win32-x64/data/extensions/.145a3e8e-1962-4582-8e7a-e698fd1889d0/pythonFiles/lib/jedilsp/jedi/third_party/django-stubs/django-stubs/contrib/contenttypes/management/commands/remove_stale_contenttypes.pyi

だからこれを 37 文字を超えるパス名を持つフォルダに展開すると,使用するアプリケーションによっては問題が生じます.

そして,Windows 標準の zip 展開機能はこの制限に見事引っかかります.正気かよ.

この実習に限らず,この制限が問題になることは多いので,やはり zip 等の圧縮ファイルの展開には専用のソフトウェアを使うことを勧めます.

私のパソコンには既に Python が (Git が,VSCode が) インストールされていますが,それらと共存できますか?
はい,それらと相互に影響せずに動作するように準備されています.
VSCodium なんて聞いたことないのですが,正規の Visual Studio Code (VSCode) では駄目ですか?
自分でインストール・設定できる人はどちらを使っても構いません.

インストール作業や設定作業でハマって時間を取られるのを防ぐために設定済みの環境を配布していますが,VSCode のライセンスはそのような独自配布を許していません.

VSCodium は VSCode と同じソースコードからビルドされ公開されているパッケージであり,再配布が禁止されていないので,設定済み環境の配布に利用しています.

用意された配布環境ではなくて,自分で使い慣れた環境を使いたいのですが.
Windows 以外の人向けの Q&A でも書いた通り,最低限 Python 3, pygame 2, Git は使えるようにしてください.あとはお好みですが,テキストどおりにいかないところは自分で適宜読み替える必要があります.
配布環境に,さらに他のライブラリを追加したいのですが.
自分で適宜インストールして構いませんがいくつか注意があります.

まず,インストールのためのコマンド (例えば pip install など) は,次の節で説明するこの環境専用のコマンドプロンプトにて実行するようにしてください.

また,自分でインストールしたライブラリが,演習で使用するライブラリと干渉する可能性がないとは言い切れない点に注意してください.あらかじめ C:/cs1 フォルダごとバックアップを取っておくことを勧めます.

1.3. Python の実行

Windows のエクスプローラーなどから C:/cs1/command_prompt_cs1.bat をダブルクリックして実行してください.この実習用に設定済みのコマンドプロンプトが開きます.

Python と pygame が正しくインストールできているかを確認するため,以下のコマンドを実行してください.ただし音が出ますので,周囲の迷惑にならない場所で実行するか,あらかじめ PC のスピーカをオフにしてください.

注意: 音が出ます
C:\cs1\projects>python -m pygame.examples.aliens

ゲームらしきものが動けば Python と pygame は正しくインストールされています.なお,左右カーソルキーと Space キーで遊べます.

はい,遊ぶのはそれくらいにして次に行きますよ.

なおこのコマンドプロンプトは後で使いますので,そのまま開いておくと便利です.

コマンドプロンプトの使い方がわかりません.この C:cs1projects>python -m pygame.examples.aliens を全部入力するんですか?
python -m pygame.examples.aliens の部分だけ入力してください.
  • C:\cs1\project> の部分はプロンプトと呼ばれます.最初から表示されています.「今どこのフォルダにいるか」が表示されています.
  • python は Python プログラムを実行するコマンド名です.コマンド名の後にスペースを空けて,そのコマンドの動作内容を指定する文字列を書く場合があり,-m pygame.examples.aliens の部分がそれです.
  • Enter キーで実行します.

では自分でプログラムを書いてみましょう.新しいプログラミング言語の環境を構築したら,まず「hello, world」と表示するプログラムを書きなさいと日本国憲法にも書いてあるので (書いてません),それに従います.

Windows のエクスプローラーなどで C:/cs1/projectshello というフォルダを作り,その中に空のテキストファイルを新規作成してください.作られたファイルが「新しいテキスト ドキュメント.txt」という名前になっていますか? もしも最後の「.txt」の部分がない「新しいテキスト ドキュメント」だったら次の Q&A を読んでください.

.txt」がついてない「新しいテキスト ドキュメント」でした…
エクスプローラーの設定を変更してファイル名拡張子を表示するようにしてください.

ファイル名の最後の「.txt」のような部分を Windows では拡張子と呼び,ファイルの種類を表します.Windows の初期設定ではこの部分が表示されません.

エクスプローラーの上部のツールバーから「表示」のリボンを展開し,表示/非表示のところのファイル名拡張子というチェックボックスにチェックを入れてください.ファイル名の最後に「.txt」が現れるはずです.

批判を恐れず断言しますが,Windows の初期設定である「ファイル拡張子を表示しない」設定は,利便性の面からもセキュリティの面からも,明確に害悪です.常に表示しておく癖をつけるようにしてください.

テキストファイルを無事作成できたら,そのファイルの名前 (.txt の部分も含む) を hello.py に変更してください.

このファイルをメモ帳などで開き,以下の 1 行を書きます. IME はオフにして,半角英数字で入力してください. (先頭の「1」は説明用の行番号です.入力しないでください)

hello.py
1print("hello, world")

1行のみからなるプログラムです.print 関数に引数として文字列を渡すことで,それを表示するプログラムになっています.

hello.py をメモ帳で開くにはどうしたらよいですか?
一番簡単なのは,メモ帳を別途開いて,そこにドラッグ・ドロップすることですかね.
関数とか引数とか,そういう専門用語がさっぱりわかりません.
Python の文法については次章以降でも概観していきますが,重要な事項だけ簡単に説明しておきます.ここで重要なのは,関数と文字列の概念です.
  • 関数 (function) というのは,プログラムの中で使える「命令」くらいの意味にとらえておけばよいです (数学でいう「関数」とはちょっと意味が違います).
  • print は Python にあらかじめ用意された関数です.
  • 関数は,後ろに () をつけることで呼び出す (call) ことができます.「命令を実行する」くらいの理解で OK です.
  • 関数を実行するとき,後ろの () の中に引数 (ひきすう, argument) を指定する場合があります.指定された引数によって関数が実行する内容が決まります.
  • print 関数が呼び出されると,引数の内容が表示されます.
  • "hello, world" のように引用符で囲まれたものは文字列を表します.引用符は「その内側が文字列であること」を示すための記号であって,文字列自体の一部ではありません.
  • 結局この 1 文は,hello, world という文字列を表示せよという意味になります.

先ほど開いたコマンドプロンプト上で,たった今作ったフォルダに以下のコマンドで移動して,hello.py を実行してください.

C:\cs1\projects>cd hello
C:\cs1\projects\hello>python hello.py
hello, world

このように,コマンドを実行した次の行に hello, world と表示されたら成功です.コマンドプロンプトはまた後で使うので,まだそのまま開いておいてください.

1.4. Visual Studio Code (VSCode)

原理上は,メモ帳のような適当なテキストエディタと python コマンドさえあれば Python プログラムの開発は可能です.しかし,プログラム開発に特化した環境を使う方がずっと効率がよいです.

Visual Studio Code (以下 VSCode) は基本的には高機能エディタですが,いろいろと機能追加の設定をすることで,ソースコードエディタ,デバッガ,ソースコード管理などの機能を備えた統合開発環境としても使えます.配布した環境では基本的な設定を済ませています.

C:/cs1/vscode_cs1.bat をダブルクリックするなどして実行してください.VSCode が開きます.

注意

以降 VSCode を起動するときは,常にこの C:/cs1/vscode_cs1.bat を実行してください.スタートメニューから別の VSCode を起動したり,タスクバーにピン留めしてそこから実行したりすると,テキストの通りに動作しない場合があります.

各領域を以下の名前で呼びますので覚えておいてください.

  • メニューバー
  • アクティビティバー
  • サイドバー
  • エディタ領域
  • パネル領域
  • ステータスバー
_images/vscode_window_annot.png
メニューとかを日本語で表示して欲しいのですが.
日本語化することは可能ですが,このテキストは英語での表示を前提として説明します.

配布環境には,日本語化パッケージ (Japanese Language Pack for Visual Studio Code) はインストール済みです.以下の操作によって言語を切り替えることができます.

  • VSCode のメニューバーから View ‣ Command Palette を開きます
  • ウィンドウ上部でコマンドを受け付けるモードになるので, Configure Display Language と入力します (途中まで入力すれば選択肢として現れるので選んで Enter を押せばよいです).
  • 言語として ja を選び,VSCode を再起動すると日本語化されます.(英語に戻すときはここで en を選びます)
画面の色が暗くてなんだか嫌です.
メニューから File ‣ Preferences ‣ Color Theme でカラーテーマを選べます.
色以外にも,用意された設定の細かいところで気に食わないところがいろいろあるので変更したいのですが.
配布環境の独自設定のほとんどは settings.json というファイルに記述されています.

settings.json ファイルを開くには,メニューバーから View ‣ Command Palette を開き,Preferences: Open User Settings (JSON) を選んでください (選択肢が多いので「settings」などと入力して絞り込むとよいでしょう. Preferences: Open Default Settings (JSON) などと間違わないように注意してください).

好みによって設定を変えてもよいのですが,テキストの通りに動作しなくなる場合もあります.変更の意味と影響範囲をよく理解してから変更するようにしてください.

さっきの C:/cs1/projects/hello フォルダを開きましょう.メニューバーから File ‣ Open Folder を実行し,先ほど projects の中に作った hello フォルダを選択します.

注意

本実習では Open File (ファイルを開く) や Open Workspace (ワークスペースを開く) は使用しません.必ず Open Folder (フォルダを開く) を使ってください.

注意

開くフォルダも指示通りに選択してください.例えば,今は C:/cs1/projects/hello を開くように指示されているので,間違えて C:/cs1/projects を開いてはいけません.

「Do you trust the authors of the files in this folder?」というダイアログウィンドウが出ると思いますが,自分で作ったフォルダに間違いないので, Yes を選んでください. (今後,C:/cs1/projects フォルダ以下には自分で作ったものしか置かないので,チェックボックス「Trust the authors of all files in the parent folder 'projects'」をチェックしても構いません)

アクティビティバーから Explorer サイドバーを開く (あるいは View ‣ Explorer でもOK) と, hello.py があるはずなのでダブルクリックしてください.エディタ領域にさっき入力した Python のプログラムが表示されたはずです.

この時点で,VSCode のウィンドウのタイトルバー部分を見てください.配布環境を使ってこれまでの指示通りに操作したなら,以下のように hello.py - hello - VSCodium (Computer Seminar I) と表示されているはずです.なっていない人は以下の事項をチェックしてください.

_images/titlebar_hello_py.png
  • 左側が hello.py になっていない場合は,エディタ領域でプログラムを表示できていないはずです.
  • 中央が hello 以外になっている (例えば projects になっている) 場合は, File ‣ Open Folder で開くフォルダを間違えています.
  • 中央が存在しないない (hello.py - VSCodium になっている) 場合は, File ‣ Open Folder が行われていません (例えば File ‣ Open File と間違えていませんか?).
  • 右側が VSCodium ではなく Visual Studio Code になっている場合は,配布した設定済み環境のものではなく過去にインストールした別の VSCode が起動されています.vscode_cs1.bat を用いて起動し直してください.

プログラム hello.py が表示された状態で, Run ‣ Run Without Debugging を実行してください.実行結果が画面下のパネル領域のうち Terminal に表示されます.(表示される文字列のうち,青い文字は VSCode が実行に使用したコマンドです.何やら長いですが気にしなくてよいです.その次の行に hello, world と出れば OK です)

1.5. Git (コマンドからの操作)

これから,新しいプログラムを作ったり,その内容を少しずつ更新して行ったりしますが,いろいろと作業をしているうちに,以下のような事態に陥ることがよくあります.

  • 「昨日まで動いていたのに,試行錯誤していたら動かなくなりました.昨日の状態に戻したつもりなのですが動きません」
  • 「動いていたときのファイルを hello.py.backup.ver1, hello.py.backup.ver2 という名前にして残していたのですが,どれがどれだかわからなくなりました」
  • 「いつのものだかわかるようにファイル名に日付を入れていたはずなのですが,ファイル名の日付が間違っていてやはりわからなくなりました」

プログラム開発に限らずよくある話です.

_images/without_scm.png

ちょっとした地獄ですね.

こういうことを未然に防ぐため,開発中にプログラムの履歴を記録して管理するためのツールをソースコード管理システム (source code management system, SCM) またはバージョン管理システム (version control system) などと呼びます.最近は Git と呼ばれるソフトウェアが特に広く使われています.

Git は個人での開発だけではなく,他の人との共同作業やプログラムのインターネット公開などにも便利な機能が用意されています.Git で管理されたソフトウェアを共有する GitHub などのウェブサイトを目にしたこともあるのではないかと思います.

ソースコードとは何ですか? コードやプログラムとは違うのですか?
Python や C などのプログラミング言語で書かれたコードのことだと思ってください.

Python や C で書かれたコードは,コンピュータが直接実行できる機械語のコードに変換されて実行されます.その際の「変換元 (source)」のコードがソースコード (source code) です.略してしまってソースと呼ぶことも多いです.一方,変換先のコードはオブジェクトコード (目的コード) と呼ばれます.

このテキスト内では,コードといえばほぼ間違いなく Python で書かれたプログラムのことを指しますので,コードとソースコードは同義です.しかし一般にはソースコードと同義とは限らず,オブジェクトコードのことを指すかも知れないので注意が必要です.

この実習ではもっぱら VSCode 上から Git を使いますが,統合開発環境の背後で何が起きているかを理解しておくことも重要です.Git をコマンドとして実行する様子をちょっとだけ見ておくことにします.

またさっきのコマンドプロンプトに戻ります.C:/cs1/projects/hello にいるはずです (いないようなら cd コマンドで移動してください).以下を実行してください.

C:\cs1\projects\hello>git init

黄色い文字で hint が表示されますが,気にしなくてよいです.このコマンドで Git リポジトリが初期設定されます.リポジトリ (repository) とは貯蔵庫の意味で,過去のバージョンのファイルを記録しておくところだと思ってください.(実体としては,C:/cs1/projects/hello/.git というフォルダが作られてその中に保存されています)

このリポジトリに,さっき作った hello.py を保存します.そのためにはまずステージング (stage, staging) という操作をします.

C:\cs1\projects\hello>git add hello.py

この時点ではまだリポジトリへの保存は完了していません.リポジトリに保存する対象として選択した状態です.このことをステージに上げる,ステージングするといいます.複数のファイルをステージに上げることもできます.

ステージに上げたファイルを実際にリポジトリに保存することをコミット (commit) するといいます.以下のコマンドで実施します.

C:\cs1\projects\hello>git commit -m "Initial commit of hello.py."

ここで,-m の後に "..." で囲んで入力した文字列をコミットメッセージと呼びます.後から過去のバージョンを探すときの第一の手がかりになるものです.

確かに保存されたか,ログを見てみましょう.

C:\cs1\projects\hello>git log

次のような出力が得られます:

commit b177c4c152435425b32608476cd5e52ee6b29a03
Author: Computer Seminar I <anonymous@example.org>
Date:   Fri Jan 99 01:01:99 2099 +0900

Initial commit of hello.py.

謎の英数字の列や日付の文字列はダミーです (こんな日時は無い).実際にはコミットした日時が表示されるはずです.Author が Computer Seminar I になっていますが,それは配布した環境でそのように初期設定されているからです.とりあえず気にしないでください.

git が error: cannot spawn less: No such file or directory というようなメッセージを出します.
これは無視して大丈夫です.

このままだと,コマンドプロンプトの画面内に収まらないくらい出力が長くなる場合にちょっと困るのですが,この実習ではそうなる前に VSCode に移行します.

次に今のプログラムに修正を加えて,変更を記録してみます. VSCode の画面に戻ってください. hello.py を開いた状態になっていると思います.先ほどの print の行の次に 2 行追加して以下のようにしてください.

hello.py (ver 2.0)
1print("hello, world")
2x = 100
3print(x)

プログラムの意味は何となくわかると思います.変数 x に整数 100 を代入して,その内容を表示しようとしています.入力したら File ‣ Save で保存してください. Run ‣ Run Without Debugging で実行して, hello, world100 が表示されれば OK です.

プログラムの開発中には,直前にリポジトリに保存した内容との差分を確認したくなることがよくあります.以下のコマンドで確認できます.

C:\cs1\projects\hello>git diff

次のような内容が表示されると思います:

diff --git a/hello.py b/hello.py
index 9f69d32..8aba1ea 100644
--- a/hello.py
+++ b/hello.py
@@ -1 +1,3 @@
 print("hello, world")
+x = 100
+print(x)

先頭が + の行が新たに追加されたものです.この独特な表示を読めるようになる必要はありません. VSCode 上でもっと見やすく表示する方法をすぐ後で学びます.ともかく,どうやら差分情報が含まれているらしいとわかれば十分です.

微妙に違う表示結果になりました.何か間違っていたんでしょうか.

diff --git a/hello.py b/hello.py
index 9f69d32..8aba1ea 100644
--- a/hello.py
+++ b/hello.py
@@ -1 +1,3 @@
-print("hello, world")
\ No newline at end of file
+print("hello, world")
+x = 100
+print(x)
これはこれで間違いではありません.改行文字の有無による違いです.

最初の print("hello, world") の行だけのとき,行の最後に改行文字がなかったのだと思います.改行文字は目に見えませんが,それがあるかないかは diff によって検出されます.その結果,改行文字のない print("hello, world") の行が削除され,改行文字のある print("hello, world") の行が追加されたとみなされました.先頭が - の行は削除された行を表します.

ファイルの最後の行の末尾に改行文字がなくても,プログラムとしては間違いではありません.しかし多くの人は改行があることを好むようです.配布環境の VSCode は,ファイル最終行に改行がないと青いアンダーラインを表示して「Final newline missing」というメッセージ (改善の提案) を出します.

この新しい内容をリポジトリに保存します.まずステージに上げて,それからコミットするのでした.以降,面倒なので,この一連の作業を Git でコミットする,あるいは単にコミットすると呼ぶことがあります.

C:\cs1\projects\hello>git add hello.py
C:\cs1\projects\hello>git commit -m "Add variable x and print it."

ログを確認すると確かに記録されているはずです.

C:\cs1\projects\hello>git log

1.6. VSCode 上でのコード入力と Git 操作

Git というのがどんなものか少しわかったところで,今後実習の中で使う VSCode 上での操作を見ていきます.

1.6.1. Git Graph

VSCode 上での Git の操作は,アクティビティーバーから Source Control サイドバーを開くことで行えます.ステージング,コミットもここから行えますが,その前に先ほど保存した 2 回分のコミットを見てみましょう.

Source Control サイドバー上部のアイコンが並んだところに View Git Graph (git log) というものがあります.これをクリックすると Git Graph が開きます.もしくは VSCode 画面の一番下のステータスバーにある Git Graph という文字列をクリックしてもよいです.

_images/vscode_git_graph_annot.png

表示されている 2 つのコミットのうち最新のもの (上の方)をクリックしてください.左側にさっきの git log コマンドの出力と同様のものが表示され,右側に保存されたファイル名 hello.py が表示されると思います.ファイル名をクリックすると差分が表示されます.

画面右にその時点のコミット,画面左にその直前のコミットの内容が表示されます.差分情報も色付けされて一目瞭然だと思います (説明の必要はないでしょう).

ついでに,Git Graph の画面の右上の歯車マークをクリックしてみてください.このリポジトリやユーザの情報が表示されます.真ん中あたりで,User Name が Computer Seminar I に,User Email が anonymous@example.org (どこにも届かないアドレス) に設定されているのがわかると思います.このままでもよいですが,気持ち悪ければ Edit をクリックして変更してください.

(個人で開発するだけなら変更してもしなくても構いません.逆に,開発履歴をネットワーク共有する予定があるなら,公開しても問題ない氏名・メールアドレスにしておくよう注意してください)

この設定内容はどこに保存されているのですか?
c:/cs1/home/.gitconfig です.

1.6.2. ソースコード編集

VSCode 上で新しい変更をコミットしてみたいと思います.エディタ領域で hello.py に 2 行挿入してください:

hello.py (ver 3.0)
1print("hello, world")
2x = 100
3if x < 0:
4    print("x is negative")
5print(x)

Python では,行の先頭の空白 (字下げ, インデント, indent) が文法上の意味を持ちます.ソースコード編集用のエディタは,編集中のプログラミング言語の文法を認識して適切なインデントを入れようとします.この例の場合,x = 100 の最後にカーソルを置いて Enter で改行すると,次の行の先頭に移るはずです.そこで if x < 0: まで入力して改行すると,次の行で 1 レベル (4文字) のインデントが自動で入ります.そのまま print("x is negative") を入力します.

今回はこれで完了ですが, 1 レベル分のインデントを解除する (左にずらす) には Backspace キーを, 1 レベル分のインデントを加える (右にずらす) には Tab キーを使うことを覚えておいてください. Space キーで 1 つずつ空白を入力してインデントするようなことはほぼ必要ありません.この機会にちょっと試してみるとよいでしょう.

こんにちは,絶対にメモ帳でプログラミングするマンと申します.Space キーでインデントしていいですか?
メモ帳ならそうするしかないですね.

メモ帳で Tab キーで入力したインデントは,一見して普通の空白 8 文字分に見えますが,実際には Tab 文字という特殊な文字です.これが画面上でどのように表示されるかは,表示する人の環境に依存します.Python のようにインデント量が意味を持つ言語の場合は混乱が生じるため Tab 文字は使わない方が安全です.というかメモ帳やめときなよ.

既に気づいたかも知れませんが,入力中に自動で補助が入る場合があります.例えば開きカッコ ( を入力すると,自動で ) が入力された上でその直前にカーソルが移ります.関数名などの補完候補が現れる場合もあります.候補が 1 つの場合は Tab で確定します.複数ある場合はカーソルキーで選んで Enter で確定できます.補完を使うとスペルミスを防げるので,積極的に活用するとよいです.

入力している途中で,こまめにセーブするのは良い習慣です.File ‣ Save でセーブできますが,面倒だと思うのでキーボードショートカット Ctrl + s を覚えておくとよいでしょう.

セーブすると,基本的な文法チェックが自動で走ります.間違いがあると赤色のアンダーラインが出てきます.マウスポインタをホバーさせると説明が出るので,よく確認して修正してください.修正後セーブすると再度チェックが走り,正しくなっていればアンダーラインが消えると思います.簡単な誤りはだいたいこの時点で取り除けます.

緑色や青色のアンダーラインが出たり,薄い黄色で文字が囲まれる場合があります.これらは何ですか?
緑色は警告,青色は改善の提案,黄色囲みは全角英数字や全角スペースです.

緑色や青色は必ずしも誤りではありませんが,何らかの誤りの兆候だったり,推奨されない書き方だったりします.マウスポインタをホバーさせてメッセージをチェックし,直せるようなら直す方がよいです.

全角英数字や全角スペースは,文字列やコメント以外のところに入り込むと原因のわかりにくいエラーになるため,黄色囲みで目立つようにしています.

入力できたら実行してみてください.プログラムの意味はおそらく想像した通りです.if 文の時点で x < 0 ではないので x is negative の表示はスキップされ,結果として出力は前のものと変わらないはずです.

1.6.3. ステージ & コミット

Git Graph を開くと一番上に Uncommitted Changes という行が出ているはずです.過去のコミットをチェックしたときと同様に,現在のファイルと直前のバージョンとの差分を見ることができます.

アクティビティバーから Source Control サイドバーを表示してください. Changes のところに hello.py が現れていると思います.コミットされていない変更が検出されたということです.

_images/vscode_changes.png

ファイル名の右側の \(+\) アイコン (Stage Changes) をクリックすると,Staged Changes のところに hello.py が移ります.これでステージに上げたことになります (\(-\) アイコンで元に戻せます).

_images/vscode_staged_annot.png

サイドバー上部の Message 領域にコミットメッセージを入力して,チェックマークアイコン (Commit) をクリックしてコミットします.コミットメッセージは日本語でも大丈夫です.例えば「Add an if statement.」でも「if文を追加」でも結構です.

Git Graph で今のコミットのログを確認してください.

コミットメッセージを書くのが面倒です.
わかる.でも簡単でよいので何か書いてください.後から履歴をたどるときの主要な手がかりになります.
どうも履歴がずっと残ると思うと心理的な抵抗があります.格好悪いミスの記録は残したくないです.
大丈夫.いざとなったら履歴は改竄できます.心置きなく記録に残してください.

Git には,複数のコミットを 1 つにまとめたり,コミットメッセージを書き換えたりする機能が多数あります.使い方に慣れてからそういう方法を学べばよいのです.

記録したものは後から直せるし,消すことすらできます.しかし記録されていないものはどうにもなりません.今はとにかく,こまめに記録に残す癖をつけましょう.

Git を使っておけばファイルのバックアップは不要ですか?
バックアップは別途必要です.

記録された履歴は .git フォルダの中に置かれているだけなので,バックアップの代わりにはなりません.このフォルダも含めてバックアップを取っておくようにしてください.

1.6.4. 演習

例題1-1

hello.py のうち,x = 100 の部分を x = -10 に変更してください.実行結果を予想して,その通りになることを確認してください.問題なければ変更点をステージに上げてコミットしてください.コミットメッセージは適切なものを自分で考えてください.

1.6.5. 過去のバージョンを取り出す

過去のバージョンをいつでも取り出せるのがソースコード管理をしていることの強みです.Git にはそのための強力な機能が多数ありますが,実は結構わかりにくいです.この実習では,とにかく履歴を残すことに慣れてもらうことに重点を置きますので,覚える Git の操作は最小限に留めます.

とにかく原始的に行きましょう.まず現在のバージョンをコミットしておいてください.仮に動かない状態だとしても,コミットメッセージを見たときに「これは動かないバージョンだ」とわかるようにしてコミットしておいてください.そうしたら,

  1. Git Graph で所望のバージョンの内容を開き,全部選択(Ctrl + a) してコピーします.差分情報の色付けなどはコピーされませんので気にしないでください.
  2. それを現在のファイルに上書きします.
  3. 動作をチェックして,そのバージョンに戻ることに決めたなら「△△のバージョンに戻した」というメッセージつきでコミットしてください.やっぱり戻るのをやめるなら 1. に戻って元のバージョンをコピー直します.

そんなダサいのは嫌だ,どうしても Git の機能で戻りたいという人は次の Q&A を見てください.

そんなダサいのは嫌だ,どうしても Git の機能で戻りたい.
以下の手順に沿ってください.

これから説明する手順は, Git の使い方としては標準的なものではありません.一人で開発しているときにだけ通用する方法です.複数人で共同作業する場合は,改めて正しい方法を調べてください.

手順がちょっとややこしいのですが,原則は以下の 2 つだけです: (1) 他のバージョンに移るときには Reset Hard する.(2) 移る前に現在位置に Create Branch で名前をつけておく.

具体的な手順は以下の通りです:

  • まず現在の内容をコミットしておくのは同様です.
  • Git Graph で,その最新のコミットを選び,右クリックから Create Branch を選びます.Name に適当な文字列を指定してください.例えば backup1 とします.Check out オプションはチェックしないでください.
  • 次に,移動したい先のコミットを選んで,右クリックから Reset Current Branch to This Commit を実行します (すぐ上にある Rebase Current Branch ... ではないので注意してください).
  • Soft, Mixed, Hard の選択肢から Hard を選びます.(Discard all changes とか怖いことが書かれていますが,さっきコミットしたので大丈夫です).するとファイルがそのバージョンの状態に戻っているはずです.
    • そのバージョンで作業することを決めたなら,そのまま開発を継続してください.新しい変更をコミットすると,Git Graph 上で履歴が枝分かれするのがわかると思います.古いものも残っていますので,必要に応じて参照してください.
    • やはり元のコミットに戻りたいと思ったら,Git Graph が枝分かれする前なら (つまり,Reset 後に何もコミットしていないなら),単に元のコミットへ Reset Hard してください.枝分かれした後なら,最初の手順と同じです.つまり現在の最新のコミットに Create Branch で名前をつけて,元のコミットへ Reset Hard してください.

個人で開発しているという前提では,たぶんこれが一番混乱が生じにくい方法です.Git では開発履歴を木のように枝分かれさせていくことができるのですが,この方法では,現在位置が常に master と呼ばれるデフォルトの枝 (branch) の先頭になるようにしています.

忘れてはいけないのは,移動前に Create Branch で名前をつけておくことです.名前をつけておかないと,やっぱり移動するのやめた,と思ったときに復帰が難しくなります.

上の回答の手順で Reset Hard して過去のコミットに戻ったのですが,元のコミットに Create Branch で名前をつけるのを忘れていました.もう元のコミットには戻れませんか?
見えなくなったコミットを表示する Git Graph のオプションがあるので試してみてください.

Git Graph の画面の右上の歯車マークをクリックして Repository Settings を開き,General の中の Include commits only mentioned by reflogs をチェックしてください.

2 つ前の回答の手順は「標準的なものではない」とのことですが,普通はどうするのですか? 上の回答の手順だと普通は何がまずいのですか?
通常はもっと積極的かつ戦略的に枝分かれ (ブランチ) を使います.

上の回答を読んで頂くとわかるとおり,Git では開発履歴の枝分かれが発生します.各枝の先頭にブランチ名という名前をつけて参照することができます.

リポジトリを初期化したときに作られる最初のブランチ (まあ枝というよりは幹ですね) には master という名前がついています.複数人で共同作業しているとき,各人がそれぞれの作業結果を master にどんどんコミットしていくと収拾がつかなくなります.そのため,各人の作業は master から枝分かれさせたそれぞれの作業用ブランチにコミットしていくようにします.そのままだとそれぞれの作業結果が独立したままなので,共同作業者どうしで相談した上で,適当なタイミングで作業用ブランチの内容を master に統合 (マージ) します.さらにいろいろな用途別のブランチを用意して使い分けることも多いです.

個人で小規模な開発をする場合なら,このテキストでやっているように master で直に開発作業を進めてしまってもよいのですが,その場合も,過去のバージョンからやり直したくなったら,そのバージョンからの枝分かれを作って作業し,ひと段落したら master にマージするのが普通だと思います.

ところが,このマージというやつが初学者にはなかなか難しいものなので,このテキストでは扱いません.また,自分が今どのブランチで作業しているのかを常に意識しなくてはならないのも初学者には負担が大きく,混乱の元になります.

上の回答で使用した Reset Hard とは,(現在 master で作業しているとして) ブランチ名 master が指す場所を指定のバージョンに強制移動させて,そのバージョンを作業対象とするコマンドです.バージョン間の移動には常にこれを使うことで,普段の作業中だろうとトラブルがあって過去のバージョンに戻っている最中だろうと,いま自分が作業している場所が常に master ブランチの先頭だということになります.

複数人で共同作業しているときや,開発履歴を GitHub などの公開サーバで共有しているときにこれをやってしまうと,他の人からは master ブランチの内容が突然変わったように見えて混乱してしまいます.Git に慣れてきたら,ぜひもっと本格的な使い方を学ぶようにしてください.

1.6.6. 演習

例題1-2

現在の状態で一度コミットしてから,一番最初の hello, world を表示するバージョンに戻して動作を確認してください (コミットしてもしなくてもよいです).その後,また最新の状態に戻ってください.

1.7. デバッガの利用

プログラムの誤り・不具合をバグ (bug) と呼び,バグを取り除くことをデバッグ (debug) といいます.VSCode にはデバッガ (debugger) と呼ばれる機能が内蔵されていて,デバッグ作業を助けてくれます.

(debugger という名前に反して,自動でデバッグしてくれるわけではありません.あくまであなた自身がデバッグするのを助けてくれるだけです)

さっきの演習を真面目にやった人なら,hello.py は以下の状態になっていると思います.やってなくて2行目が x = 100 のままでも別に大丈夫です:

hello.py (ver 4.0?)
1print("hello, world")
2x = -10
3if x < 0:
4    print("x is negative")
5print(x)

エディタ領域の左端の行番号のさらに左側をマウス左ボタンでクリックしてください.赤い円が表示されます.もう一度クリックすると消えます.赤い丸をつけることを,その行にブレイクポイント (breakpoint) を設定するといいます.

例として2行目と5行目にブレイクポイントを設定して,Run ‣ Start Debugging を実行してください.Select a debug configuration と問われるので,選択肢から Python File を選んでください.

_images/vscode_debug.png

2行目で実行が一時停止すると思います.正確には,2行目を実行する直前で止まった状態です.これがブレイクポイントの役割です.画面上部にいくつかアイコンがあるので,再生ボタンのような青いアイコン (Continue) をクリックしてください.次のブレイクポイントまで進みます.次のブレイクポイントがなければ実行は終了します.

同じ状態でもう一度 Start Debugging してください.2行目で止まった後,今度はさっきの Continue の隣の Step Over アイコンをクリックしてください. 1 行だけ実行が進みます.この時点で変数 x には -10 (演習をすっ飛ばしたひとは 100) が代入されているはずです.エディタ上の x の上でマウスポインタをホバーすると,その値が表示されます.

あるいはアクティビティバーから Run サイドバーを開くと (自動で開いているかも知れません),Variables 欄で変数の状態を一覧することができます.

他のアイコンは Step Into (関数の中に入る),Step Out (関数から外に出る) ですが,今の例では使うことはありません.(print 関数の内部は Python で書かれていないので Step Into できないのです)

このように,デバッガを活用するとプログラムの内部状態を確認しながら1行1 行実行の様子を追いかけることができます.

1.8. 対話的実行

Python は,プログラムをファイルに書いて一気に実行するだけではなく, 1 行ずつ入力して,実行結果を確認しながら計算を進めることができます.むしろ,Jupyter Notebook や Google Colaboratory などでそのような使い方をする方に馴染みが深い人も多いかも知れません.配布した環境でももちろん可能です.

コマンドプロンプトで,または VSCode のパネル領域の Terminal で,python コマンドを単独で (プログラムファイルの指定なしで) 実行してください.

C:\cs1\projects\hello>python

>>> というプロンプトが現れると思いますので,そこに Python のコードを 1 行ずつ入力して Enter を叩いてみてください.

>>> x = 1
>>> y = 2
>>> x + y
3
>>> quit()

>>> の後が自分で入力する内容,>>> のない行が自動で表示される内容です.x + y の計算結果がその場で表示されています.終了するには quit() と入力します.

インデントのあるコードを入力することもできますが,ちょっと面倒かもしれません.ある程度以上長いコードになるなら,ファイルを作る方がよいと思います.

次章以降の説明ではこのような対話的実行 (interactive execution) の様子を示す場合があります.先頭に >>> と書かれたコード例が出てきたら,対話的実行の例だと理解してください.

なお,実際に試すときは python コマンドより ipython コマンドを使う方が使い勝手がよいと思います.Tab による補完が効いたり,過去の行の結果を Out[3] などとして参照することができます.

In [1]: x = 1

In [2]: y = 2

In [3]: x + y
Out[3]: 3

In [4]: Out[3] - 5
Out[4]: -2

In [5]: quit()

Jypyter Notebook などに慣れていて,それに近い使い勝手の方がよいという人は,View ‣ Command Palette を選び Jupyter: create interactive window を実行してください (Command Palette で jupyter interactive などと入力して絞り込むとよいでしょう).実行すると,エディタ領域の右半分が Jypyter Notebook のような環境になります.

関数の定義などはファイルに書いて,それを呼び出すコードを対話的に実行したいのですがどうすればよいですか?
右クリックして Run Current File in Python Terminal とするとよいです.

あるいは Jupyter での実行が好みであれば,Run Current File in Interactive Window を使ってください.

ある日突然 VSCode が起動しなくなりました.インストールしてしばらくは普通に動いていたのですが,今は C:/cs1/vscode_cs1.bat をダブルクリックしても何も起きません.
ウィルス対策ソフトウェアによって隔離された恐れがあります.

VSCodium.exe というファイルに McAfee Livesafe が反応して隔離してしまった事例を確認しています.隔離されたファイルを元に戻す (あるいは配布用 zip ファイルからこのファイルだけ取り出す) とともにウィルス対策ソフトウェアの設定変更をして隔離対象から除外しておいてください.

VSCode の右下に「The Python path in your debug configuration is invalid.」というメッセージが表示されるようになりました.実際, Python プログラムが実行できません.
やはりウィルス対策ソフトウェアによって隔離された恐れがあります.

これは python.exe が削除されたときに表示されます.一つ上の回答と同様に対応してください.

ipython を実行したらウィルス対策ソフトウェアにブロックされました.
これも発生例が報告されています. ipython というコマンドがブロックされたということは ipython.exe というファイルにウィルス対策ソフトウェアが反応したということです.同様に対応してください.