第01回 ガイダンス

学修環境について

Ubuntu上でProcessing IDEを使用してください。 情報科学科で指示している仮想マシン環境を前提に講義を進めます。 試験も原則として同環境で受講してもらいます。 情報科学科以外の学生で、仮想マシン環境について説明を受けていない人は申し出て下さい。

学修にあたって

プログラミングの簡単さ

プログラミングでは、覚えることがそこまで多くありません。 わずかな構文や関数の意味が理解できれば、それを組み合わせることでできることは無数に広がります。 関数の機能を全て暗記している必要はありませんが、初めて見る物をどうやって調べたら良いかは身に付けるべきでしょう。 プログラミングに関しては、教科書やWeb上のドキュメント、個人の技術ブログなど様々な媒体の中から適切な情報を取捨選択する必要があります。 それらを通じて、覚えるべきことと考えるべきことの区別をできるようになりましょう。

また、Processingの基礎的な構文（逐次実行、条件分岐、繰り返し）は多くのプログラミング言語で共通なので、一度身につけたら他の言語も楽に修得できるようになります。 情報科学科では、Processing以外にもC言語やJava、Ruby等様々なプログラミング言語を学習します。

プログラミングの難しさ

プログラミングの本質的な難しさは、少数の命令を組み合わせて望む処理を実現しなければならないところです。 そのためには、プログラミング特有の問題解決能力や発想力を鍛えなければなりません。 そのため、プログラミングの修得には長い時間がかかります。 自由自在にプログラムを書けるようになったと感じるまでには、（個人差はありますが）1000時間程度の学習が必要でしょう。 文部科学省の大学設置基準に基づいて、全ての授業が2単位を修得するためには70時間程度の学習が必要なように設計されています。 （残念ながら多くの学生はそこまでの学習時間をとっていませんが…。） 3年生になるまでに1000時間の学習をしようと思うと、授業時間だけでは到底足りないので、復習などの自習時間を各自で計画的にとりましょう。 本科目では、最低限毎週3時間程度の授業時間外学習を行なって下さい。

このクラスの方針

このクラスでは、まず基礎的な構文をしっかり身につけることを第一の目標とします。 そのため、アニメーションを用いたプログラムは第11回まで扱いません。 課題等もほぼ全てstatic mode（後述）で行います。

次に、書かれているプログラムを正確に読めるようになることを目標にしましょう。 コンピュータはプログラムを常に同じように解釈します。 そこに曖昧性はありません。 プログラミングを上達するためのコツは、コンピュータが解釈するのと同じようにプログラムを解釈できるようになることです。 そのトレーニングとしてふりがなプログラミングを導入します。 ふりがなプログラミングでは、プログラムのソースコードにふりがなを振ることでプログラムを日本語で読み下すことができます。 本講義内で使用するふりがなは全て ふりがな表 に掲載されています。

もう一つ、プログラミングを上達するためのコツはPCの操作にも慣れることです。 スポーツのために筋力トレーニングを行うのと似たような感じかもしれません。 例えば、タイピングが遅いと長時間プログラミングすることや長いプログラムを書くことが億劫になってしまいます。 PC操作がプログラミング学習の足枷にならない程度にはPC操作に慣れる必要があります。 そのため、Processing IDEの使い方の紹介やタイピング練習も行います。

タイピング練習

本講義は、ふりがなプログラミングを行う都合もあってタイピング量が多いです。 そのため、タイピングがスムーズに行えるようにタイピングゲーム「寿司打」を利用して練習をしてもらいます。 授業外レポートで毎回寿司打のスコアを報告してもらいます。

毎週の課題分をこなすだけではなかなかタイピングも上達しません。 課題以外でも練習に取り組みましょう。 また、キーボード配列を覚えることも上達のコツです。

授業内課題01-1

タイピングゲーム「寿司打」をプレイしてスコア（xxx円分得 or 損した）を報告せよ。

難易度は「普通」、コースは「5000円コース」とする。

また、今学期終了までに到達したいスコアを記載せよ。

プログラムとは

プログラムとは

プログラムとは、コンピュータを意図通りに動かすための命令です。 PCやスマートフォンで使用するアプリはもちろん、学食の券売機や銀行のATMなどもプログラムによって制御されています。

プログラムを作成することをプログラミングと呼びます。 より具体的には、プログラミング言語を用いてコードを書くことを指します。 用途や好みに応じて多くのプログラミング言語が作られてきました。 有名なプログラミング言語としては例えば以下のようなものがあります。

• Java：Androidアプリ開発等に用いられ、企業での開発にもよく使われる。
• JavaScript：Webブラウザ上で動作する言語で、動的なWebページを作成する際に用いられる。
• Python：数値計算や機械学習を簡単に実現できる言語で、最近は人工知能のプログラミングによく用いられている。

本講義では、Javaを簡略化した言語であるProcessingを使用します。

Processingについて

Processingはメディアアートなどにも利用されているプログラミング言語で、視覚的にリッチなソフトウェアを容易に開発可能な言語です。 学習がしやすいように単純化されたプログラミング言語ですが、プロのソフトウェアエンジニアや研究者なども利用している本格的な言語で、世界中で利用されています。

Processingプログラムの実行

最初のプログラムとして、以下のようなボールが4辺の壁でバウンドしながら移動し続けるプログラムを実行してみましょう。

以下の手順でProcessing IDEを起動しましょう。

1. アプリケーション一覧ボタンを押す

2. Processingを選択する

Processing IDEが起動したら以下のプログラムを入力してください。 コピーアンドペーストでOKです。

int ballW = 50;
int ballH = 50;

int ballX = 400;
int ballY = 300;

int stepX = 2;
int stepY = 2;

color bgColor   = color(0, 0, 0);
color ballColor = color(10, 100, 200);

void setup() {
  size(800, 600);
  noStroke();
}

void draw() {
  background(bgColor);
  fill(ballColor);
  ellipse(ballX, ballY, ballW, ballH);

  if (ballX > width  - ballW / 2) {
    stepX *= -1;
  }
  if (ballX < ballW / 2) {
    stepX *= -1;
  }
  if (ballY > height - ballH / 2) {
    stepY *= -1;
  }
  if (ballY < ballH / 2) {
    stepY *= -1;
  }

  ballX += stepX;
  ballY += stepY;
}

入力が終わったらプログラムを保存しましょう。 本講義用のディレクトリを作成し、回ごとに作成したプログラムを保存しておきましょう。 作成したプログラムは授業内試験中に閲覧可能です。

プログラムを入力し、保存した後は以下のような画面になっていると思います。

Processing IDE左上の実行ボタンを押すことで、プログラムが実行されます。

ふりがなプログラミング

ふりがなプログラミングでは、プログラム中のトークン（構文の最小単位）に日本語のふりがなを振ります。 例えば以下の1行のProcessingプログラムを考えます。

println("hello");

このプログラムには2つのトークンが含まれています。 1つ目の「println([表示内容])」 は、「[表示内容] を表示しろ」と読みます。 もう1つの 「"hello"」 は、「文字列「hello」」 と読みます。

各トークンのふりがなをつなげて、プログラム全体を日本語の文章に書き換えたものを読み下し文と呼びます。 ふりがな中で斜体の [] で囲った部分は、実際にその部分に書かれている中身と置き換えます。 上記のプログラムの読み下し文は以下のようになります。

文字列「hello」を表示しろ。

ふりがな表を使ってプログラムの読み下しを行うことで、常に同じ読み下し文が得られます。 コンピュータがプログラムを読む方法と、皆さんがプログラムを読む方法が一致していないと、正解の読み下し文にはなりません。 読み下しは注意深く行いましょう。

式が長いと読み下し文も長くなることがあります。 プログラムの曖昧さをなくすために、ふりがなは冗長に書かれています。 例えば、式 3 * 5 + 6 / 2 の読み下し文は以下のようになります。

整数3に整数5を掛けた結果に整数6を整数2で割った結果を足した結果

このような長い式では、読みやすくするために読み下し文に () をつけてもらって構いません。

(整数3に整数5を掛けた結果)に(整数6を整数2で割った結果)を足した結果

授業内課題01-2

実行したプログラムの以下の部分について、ふりがな表を使って読み下し文を完成させましょう。

background(bgColor);
fill(ballColor);
ellipse(ballX, ballY, ballW, ballH);

if (ballX > width  - ballW / 2) {
  stepX *= -1;
}
if (ballX < ballW / 2) {
  stepX *= -1;
}
if (ballY > height - ballH / 2) {
  stepY *= -1;
}
if (ballY < ballH / 2) {
  stepY *= -1;
}

ballX += stepX;
ballY += stepY;

ふりがな表

読み下し文（途中）

背景色を変数bgColorの値に設定しろ。
fill(ballColor);
中心の座標を(変数ballXの値, 変数ballYの値)とした幅 [w], 高さ [h] の楕円を描画しろ。

もし((変数ballXの値)が((画面の幅)から((変数ballWの値)を(整数2)で割った結果)を引いた結果)より大きいの真偽)が真なら以下を実行しろ。
{
  変数stepXの値に整数-1を掛けた結果を変数stepXに代入しろ。
}

もし((変数ballXの値)が((変数ballWの値)を(整数2)で割った結果)より小さいの真偽)が真なら以下を実行しろ。
{
  変数stepXの値に整数-1を掛けた結果を変数stepXに代入しろ。
}

もし [条件式] が真なら以下を実行しろ。
{
　[処理]
}

もし [条件式] が真なら以下を実行しろ。
{
　[処理]
}

変数ballXの値に変数stepXの値を足した結果を変数ballXに代入しろ。
ballY += stepY;

まとめ

• 本講義の進め方とプログラミングの概要について説明しました。
• Processingプログラムの動かし方やふりがなプログラミングについて説明しました。

授業外レポート

今週の授業外レポートはありません。 プログラム実行環境がまだ整っていない人は設定を済ませておいてください。

授業内課題の解答例

授業内課題01-2

背景色を変数bgColorの値に設定しろ。
塗りつぶし色を変数ballColorの値に設定しろ。
中心の座標を(変数ballXの値, 変数ballYの値)とした幅変数ballWの値, 高さ変数ballHの値の楕円を描画しろ。

もし((変数ballXの値)が((画面の幅)から((変数ballWの値)を(整数2)で割った結果)を引いた結果)より大きいの真偽)が真なら以下を実行しろ。
{
  変数stepXの値に整数-1を掛けた結果を変数stepXに代入しろ。
}

もし((変数ballXの値)が((変数ballWの値)を(整数2)で割った結果)より小さいの真偽)が真なら以下を実行しろ。
{
  変数stepXの値に整数-1を掛けた結果を変数stepXに代入しろ。
}

もし((変数ballYの値)が((画面の幅)から((変数ballHの値)を(整数2)で割った結果)を引いた結果)より大きいの真偽)が真なら以下を実行しろ。
{
  変数stepYの値に整数-1を掛けた結果を変数stepYに代入しろ。
}

もし((変数ballYの値)が((変数ballHの値)を(整数2)で割った結果)より小さいの真偽)が真なら以下を実行しろ。
{
  変数stepYの値に整数-1を掛けた結果を変数stepYに代入しろ。
}

変数ballXの値に変数stepXの値を足した結果を変数ballXに代入しろ。
変数ballYの値に変数stepYの値を足した結果を変数ballYに代入しろ。