この文書の現在のバージョンと選択したバージョンの差分を表示します。
次のリビジョン | 前のリビジョン | ||
ch_graphics [2018/01/03 22:59] kanemune 作成 |
ch_graphics [2018/02/09 11:02] (現在) klab |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
- | [[マニュアル]]に戻る。 | ||
- | |||
# はじめてのプログラミング | # はじめてのプログラミング | ||
ドリトルのプログラムを作ってみよう。プログラムは**編集画面**に入力し、「実行!」と書かれた**実行ボタン**を押すことで実行できる((プログラムはCtrl-Gでも実行できる。編集画面と実行画面は、Ctrl-Tで切り替えられる。Ctrl-Oでファイルを開く。文字の大きさはCtrl-↑、Ctrl-↓、Ctrl-0で変更できる。MacではCtrlの代りにCommandキーを使用する。))。編集画面と実行画面は、Ctrl-Tで切り替えられる。(MacではCtrlの代りにCommandキーを使用する) | ドリトルのプログラムを作ってみよう。プログラムは**編集画面**に入力し、「実行!」と書かれた**実行ボタン**を押すことで実行できる((プログラムはCtrl-Gでも実行できる。編集画面と実行画面は、Ctrl-Tで切り替えられる。Ctrl-Oでファイルを開く。文字の大きさはCtrl-↑、Ctrl-↓、Ctrl-0で変更できる。MacではCtrlの代りにCommandキーを使用する。))。編集画面と実行画面は、Ctrl-Tで切り替えられる。(MacではCtrlの代りにCommandキーを使用する) | ||
- | &show(edit.png,nolink,画像の説明,40%); &show(run.png,nolink,画像の説明,40%); | + | |
+ | {{:pasted:20180103-140005.png?200}}{{:pasted:20180103-140019.png?200}} | ||
ライン 13: | ライン 12: | ||
タートル!作る。 | タートル!作る。 | ||
</code> | </code> | ||
- | &show(kameta.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140245.png}} | ||
実行すると、画面にタートルオブジェクトが表示される。ドリトルではオブジェクトを複製する形で新しいオブジェクトを生成する。そのために、**プロトタイプオブジェクト**と呼ばれるひな形となるためのオブジェクトが用意されている。プロトタイプオブジェクトは画面上には表示されないが、生成したすべてのオブジェクトの親の役割をする重要なオブジェクトである。 | 実行すると、画面にタートルオブジェクトが表示される。ドリトルではオブジェクトを複製する形で新しいオブジェクトを生成する。そのために、**プロトタイプオブジェクト**と呼ばれるひな形となるためのオブジェクトが用意されている。プロトタイプオブジェクトは画面上には表示されないが、生成したすべてのオブジェクトの親の役割をする重要なオブジェクトである。 | ||
ライン 27: | ライン 27: | ||
かめた=タートル!作る。 | かめた=タートル!作る。 | ||
</code> | </code> | ||
- | &show(kameta.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140245.png}} | ||
実行すると、先ほどの例と同じく画面にタートルオブジェクトが表示される。見かけは変わらないが、このタートルオブジェクトには「かめた」という名前が付いている。 | 実行すると、先ほどの例と同じく画面にタートルオブジェクトが表示される。見かけは変わらないが、このタートルオブジェクトには「かめた」という名前が付いている。 | ||
ライン 58: | ライン 59: | ||
かめた=タートル!作る。 | かめた=タートル!作る。 | ||
</code> | </code> | ||
- | &show(kameta.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140245.png}} | ||
1行追加して実行する。画面のカメが前に歩く。 | 1行追加して実行する。画面のカメが前に歩く。 | ||
ライン 65: | ライン 67: | ||
かめた!100 歩く。 | かめた!100 歩く。 | ||
</code> | </code> | ||
- | &show(fd100.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140510.png}} | ||
もう1行追加して実行する。カメは歩いた後に左を向く。 | もう1行追加して実行する。カメは歩いた後に左を向く。 | ||
ライン 73: | ライン 76: | ||
かめた!90 左回り。 | かめた!90 左回り。 | ||
</code> | </code> | ||
- | &show(fd100lt90.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140537.png}} | ||
もう1行追加して実行する。カメは歩いてから左を向いてさらに歩く。 | もう1行追加して実行する。カメは歩いてから左を向いてさらに歩く。 | ||
ライン 82: | ライン 86: | ||
かめた!100 歩く。 | かめた!100 歩く。 | ||
</code> | </code> | ||
- | &show(fd100lt90fd100.png,nolink,画像の説明); | ||
+ | {{:pasted:20180103-140603.png}} | ||
## 命令を順に実行する(2) | ## 命令を順に実行する(2) | ||
ライン 116: | ライン 120: | ||
かめた!90 左回り。 | かめた!90 左回り。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140630.png}} | ||
次のプログラムは、できるだけ続けて書いたプログラムである。全体で2行と短くなったが、横に長くなり、分かりづらくなってしまった。 | 次のプログラムは、できるだけ続けて書いたプログラムである。全体で2行と短くなったが、横に長くなり、分かりづらくなってしまった。 | ||
ライン 123: | ライン 128: | ||
かめた!100 歩く 90 左回り 100 歩く 90 左回り 100 歩く 90 左回り 100 歩く 90 左回り。 | かめた!100 歩く 90 左回り 100 歩く 90 左回り 100 歩く 90 左回り 100 歩く 90 左回り。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140630.png}} | ||
次のプログラムは、動作ごとにまとめて書いたプログラムである。このように、ひとまとまりの動作を1行にまとめて書くと分かりやすくなる。 | 次のプログラムは、動作ごとにまとめて書いたプログラムである。このように、ひとまとまりの動作を1行にまとめて書くと分かりやすくなる。 | ||
ライン 133: | ライン 139: | ||
かめた!100 歩く 90 左回り。 | かめた!100 歩く 90 左回り。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140630.png}} | ||
ライン 154: | ライン 161: | ||
「かめた!100 歩く 90 左回り」!4 繰り返す。 | 「かめた!100 歩く 90 左回り」!4 繰り返す。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140630.png}} | ||
この例では、繰り返しを使うことで、四角を描く4行のプログラムを1行にまとめることができた。このように、同じ処理が何度も書かれているときは、繰り返しを使うことで、プログラムを簡潔にまとめることができる。 | この例では、繰り返しを使うことで、四角を描く4行のプログラムを1行にまとめることができた。このように、同じ処理が何度も書かれているときは、繰り返しを使うことで、プログラムを簡潔にまとめることができる。 | ||
ライン 163: | ライン 171: | ||
「かめた!100 歩く 120 左回り」!3回 繰り返す 200 歩く。 | 「かめた!100 歩く 120 左回り」!3回 繰り返す 200 歩く。 | ||
</code> | </code> | ||
- | &show(repeat_result.png,nolink,画像の説明); | ||
+ | {{:pasted:20180103-140733.png}} | ||
## 命令の定義 | ## 命令の定義 | ||
ライン 175: | ライン 183: | ||
「かめた!100 歩く 90 左回り」!4 繰り返す。 | 「かめた!100 歩く 90 左回り」!4 繰り返す。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140805.png}} | ||
「正方形」という命令をかめたが理解できるように定義してみよう。オブジェクトに新しい命令を追加するには、追加したい命令を 「...」 で囲んだ**ブロック**で定義する((詳しくは[[ch_syntax|言語解説]]のブロックの説明を参照。))。次のプログラムでは、かめたに正方形という名前の命令を定義した。命令定義のブロックでは、オブジェクト自身(ここではかめた)を**自分**と書くと便利である。定義した命令は、普通の命令と同様に使うことができる。 | 「正方形」という命令をかめたが理解できるように定義してみよう。オブジェクトに新しい命令を追加するには、追加したい命令を 「...」 で囲んだ**ブロック**で定義する((詳しくは[[ch_syntax|言語解説]]のブロックの説明を参照。))。次のプログラムでは、かめたに正方形という名前の命令を定義した。命令定義のブロックでは、オブジェクト自身(ここではかめた)を**自分**と書くと便利である。定義した命令は、普通の命令と同様に使うことができる。 | ||
ライン 183: | ライン 192: | ||
かめた!正方形。 | かめた!正方形。 | ||
</code> | </code> | ||
- | &show(square.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140805.png}} | ||
作った命令は、プログラムの中で何度も使うことができる。次のプログラムでは、正方形を3回描いている。命令を定義して使うことで、プログラムを見たときに「ここで正方形を描いている」ということが一目瞭然であり、プログラムも短く書くことができた。 | 作った命令は、プログラムの中で何度も使うことができる。次のプログラムでは、正方形を3回描いている。命令を定義して使うことで、プログラムを見たときに「ここで正方形を描いている」ということが一目瞭然であり、プログラムも短く書くことができた。 | ||
ライン 197: | ライン 207: | ||
かめた!正方形。 | かめた!正方形。 | ||
</code> | </code> | ||
- | &show(square3.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140831.png}} | ||
追加した命令には、「100 歩く」と同じようにパラメータを渡すことができる。パラメータを受け取るためには、変数をブロックの先頭で「|...|」という記号の間に記述する。複数のパラメータを受け取るときは**空白**で区切る。次のプログラムでは、パラメータとして辺の長さを受け取り、1辺がその長さの正方形を描いている。 | 追加した命令には、「100 歩く」と同じようにパラメータを渡すことができる。パラメータを受け取るためには、変数をブロックの先頭で「|...|」という記号の間に記述する。複数のパラメータを受け取るときは**空白**で区切る。次のプログラムでは、パラメータとして辺の長さを受け取り、1辺がその長さの正方形を描いている。 | ||
ライン 210: | ライン 221: | ||
かめた!200 正方形。 | かめた!200 正方形。 | ||
</code> | </code> | ||
- | &show(square32.png,nolink,画像の説明); | + | |
+ | {{:pasted:20180103-140848.png}} | ||