ワタタク今回の記事の目的はProcessingの「クラスを使ったコードの書き方」に必要な知識を、自分にも皆様にも理解しやすい順序でお伝えすること。
そして、まずはクラスを使って簡単なコードを書けるようになること。
【Processing】クラスを使ったコードの書き方を理解するための手順
- まず最初に【Processing】オブジェクト指向について【家を建てることに例えたら理解しやすかった】に書いてある以下の内容を理解します。なぜなら、クラスを使ってコードを書くときに、以下のすべての内容が一緒に使うことが多いからです。
- クラス
- コンストラクタ
- フィールド
- メソッド
- オブジェクト
- インスタンス
- カプセル化
- new
- 次に上の情報を何度も確認しながら、次の項目に書いているクラスを使って書いたシンプルなコードを読み解いていく
- 最後に自分でクラスを使って書いてみる
ワタタク僕が自分なりにクラスを理解できたのは「円1つ」のようなシンプルなコードをクラスを使って書いたこと。
※シンプルとはいえ、クラス、コンストラクタ、フィールド、メソッド、オブジェクト、インスタンス化、newの理解が必要だったのでけっこう時間がかかっています。
【Processing】この先の項目のクラスを使ったコードでやっていることを文章で確認する
- ボールをつくりたいな
- ふわっとした具体的なイメージのないモノ（オブジェクト）の宣言
- どんなボールなのか設計図を考えて決めよう（クラス）
- ②で決めた設計図に、ボールの初期設定をメモしておこう（コンストラクタ）
- 初期設定はボールを表示する位置、長さ
- ボールを実体化させるぞ（インスタンス化・newするとも言う）
- 実体化したボールに自分なりの情報を加えて、初期設定とは違う場所や長さで表示させるようにするぞ（フィールド）
- 実際に画面に表示させてみる（メソッド）
実際のコードでは、上記について書いている順番が違います。なぜ順番が違うかというと参考書に書いている順番を参考にしたからです。（コードは自分なりに少し変えています。）
ワタタク次の項目では、コードにコメントもつけて書いています。
時間をかけて読んで、理解していただける機会になれば嬉しいです。
【Processing】クラスを使ってコードを書いてみる【画像とコード2つ】
【1】クラスを使って1つのボールを書く
// 6行目がオブジェクトの宣言
// Ballがクラスでmyballがオブジェクト（モノ。私のボールを作りたいなというふわっとしたイメージ）
// 12行目で具体的なmyballを作っていく準備が整う
// ここではmyballという名前のBallクラスのオブジェクトを使うことを宣言しているだけ
// まだ、具体的なオブジェクトは作られていません。
Ball myball;
void setup() {
size(400, 400);
background(0); // 画面全体を黒色に塗りつぶします
noStroke();
// 16行目はインスタンス化
// インスタンス化とは、クラスという設計図を基に具体的な機能のあるオブジェクト（モノ）を作るために書く必要があること
// Ballクラスから新しいオブジェクト（インスタンス）を作成し、それをmyballという変数に代入
// これにより、myballは具体的な「Ball」オブジェクトとして動作するようになる
myball = new Ball();
// 20行目から22行目はフィールド
// フィールドはインスタンス化したオブジェクトの情報のようなもの
myball.x = 200; //（xは200ですって情報）
myball.y = 200; //（ｙは200ですって情報）
myball.diameter = 100; //（diameterは100って情報）
}
// メソッド
void draw() {
ellipse(myball.x, myball.y, myball.diameter, myball.diameter); // myballの位置と大きさで円を描きます
}
// クラス。設計図のようなもの
// ここではボールの設計図
class Ball {
int x, y; // フィールド：ボールの位置を表す変数
int diameter; // フィールド：ボールの大きさを表す変数
// ここがコンストラクタです
Ball() {
// コンストラクタではフィールドの初期値を設定します
x = 0; // xの初期値は0
y = 0; // yの初期値は0
diameter = 50; // diameterの初期値は50.0
}
}【補足】コンストラクタの役割について
以下の部分をなくして、コンストラクタの初期設定だけで、コードを実行することで表示させることも可能。
// 20行目から22行目はフィールド
// フィールドはインスタンス化したオブジェクトの情報のようなもの
myball.x = 200; //（xは200ですって情報）
myball.y = 200; //（ｙは200ですって情報）
myball.diameter = 100; //（diameterは100って情報）
// ここがコンストラクタです
Ball() {
// コンストラクタではフィールドの初期値を設定します
x = 0; // xの初期値は0
y = 0; // yの初期値は0
diameter = 50.0; // diameterの初期値は50.0
}
の初期設定で円が表示されました。
// 6行目がオブジェクトの宣言
// Ballがクラスでmyballがオブジェクト（モノ。私のボールを作りたいなというふわっとしたイメージ）
// 12行目で具体的なmyballを作っていく準備が整う
// ここではmyballという名前のBallクラスのオブジェクトを使うことを宣言しているだけ
// まだ、具体的なオブジェクトは作られていません。
Ball myball;
void setup() {
size(400, 400);
background(0); // 画面全体を黒色に塗りつぶします
noStroke();
// 16行目はインスタンス化
// インスタンス化とは、クラスという設計図を基に具体的な機能のあるオブジェクト（モノ）を作るために書く必要があること
// Ballクラスから新しいオブジェクト（インスタンス）を作成し、それをmyballという変数に代入
// これにより、myballは具体的な「Ball」オブジェクトとして動作するようになる
myball = new Ball();
}
// メソッド
void draw() {
ellipse(myball.x, myball.y, myball.diameter, myball.diameter); // myballの位置と大きさで円を描きます
}
// クラス。設計図のようなもの
// ここではボールの設計図
class Ball {
int x, y; // フィールド：ボールの位置を表す変数
int diameter; // フィールド：ボールの大きさを表す変数
// ここがコンストラクタです
Ball() {
// コンストラクタではフィールドの初期値を設定します
x = 0; // xの初期値は0
y = 0; // yの初期値は0
diameter = 50; // diameterの初期値は50.0
}
}【2】クラスを使ってボールを入れる箱を書き足す（rectで四角形を追記）
コメントは少なめにしています。
// オブジェクトの宣言
Ball myball;
Box mybox;
void setup() {
size(400, 400);
background(0);
noStroke();
// オブジェクトのインスタンス化
myball = new Ball();
myball.x = 200; //（xは200ですって情報）
myball.y = 200; //（ｙは200ですって情報）
myball.diameter = 100; //（diameterは100って情報）
mybox = new Box();
mybox.x = 250; //（xは250ですって情報）
mybox.y = 250; //（yは250ですって情報）
mybox.diameter = 100; //（diameterは100って情報）
}
// メソッド
void draw() {
ellipse(myball.x, myball.y, myball.diameter, myball.diameter); // 円を描きます
rect(mybox.x, mybox.y, mybox.diameter, mybox.diameter); // 四角形を描きます
}
// Ballクラス
class Ball {
int x, y; // フィールド：ボールの位置を表す変数
int diameter; // フィールド：ボールの大きさを表す変数
// コンストラクタ
Ball() {
x = 0;
y = 0;
diameter = 50;
}
}
// ボックスクラス
class Box {
int x, y; // フィールド：ボックスの位置を表す変数
int diameter; // フィールド：ボックスの大きさを表す変数
// コンストラクタ
Box() {
x = 0;
y = 0;
diameter = 50;
}
}【Processing】クラスを使ったコードの書き方はどのような表現で使えそうか
コードの再利用性や読みやすさが上がるため、ほぼ全ての表現で使えます。
【Processing】クラスを使って、自分なりにコードを書いてみた感想
シンプルに円と四角形を書くだけなのですが、クラスを使って書くとめっちゃ時間かかって大変でした。
だけど、時間をかけた分、ここのコードの役割はこうで、ここはこう。と思いながらコードを読めるようになりました。
あと、独学でやる場合、クラスを使ってコードを書くと決めておかないと、クラスを使ってコードを使って書くことがなくなっていきそうだなと思いました。
複雑な表現をするには、コードの再利用性や読みやすい方がいいので、クラスから逃げてはいけないなと思っています。
いやぁ～ちょっと仮眠とる。
頭使ってへとへとです。
で、回復したらProcessingの学習を先に進めるぞ！！
ワタタクそれでは今日もレッツワクワクコーディング。