ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材

Size: px

Start display at page:

Download "ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材"

みそらさくもと
4 years ago
Views:

1 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材もくじ第 1 回復習! 第 2 回マルチタートル! 第 3 回書き方の工夫第 4 回プログラムの部品化第 5 回書き方の工夫 ( 連結 ) JavaScript のオブジェクトの使い方のまとめ新しい HSL カラーの使い方 (CSS 3 で追加されました )

2 1 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻第 1 回復習! 先生 : タートルグラッフィクスで JavaScript 入門の巻の復習からはじめましょう turtle.html <!DOCTYPE html> <html><body><script> var canvas = document.createelement('canvas'); document.body.appendchild(canvas); canvas.width = canvas.height = 400; canvas.style.border = "solid 2px"; var ctx = canvas.getcontext('2d'); データ var x = y = a = 0; fd 関数 function fd(step) { ctx.beginpath(); ctx.moveto(200+x, 200-y); x += step * Math.sin(a * Math.PI / 180.0); y += step * Math.cos(a * Math.PI / 180.0); ctx.lineto(200+x, 200-y); ctx.stroke(); rt 関数 function rt(angle) { a += angle; fd(100); rt(90); fd(100); rt(90); fd(100); rt(90); fd(100); rt(90); </script></body></html> 毎回変わらない部分毎回書き換える部分この内容をファイルに書き込んでダブルクリックすると正方形が描けるのねそしてさいごのほうの 2 行 fd(100) や rt(90) を含む部分を書き換えて使うということだったわねその他の部分はいつも同じで変化しないのでファイルに書き込んでおいていつもコピーすれば良いのこれで準備がそろったので亀さんを何匹も使う ( マルチタートル ) 旅に出発! なな : レッツゴー! タートルグラフィックスの座標系先生 : ここで使うテクニックはオブジェクト指向と呼ばれるものでデータとプログラムをセットにして何組もコピーして使う方法ですねね : ひとつだけだったタートルをマルチタートル化するのにぴったりね!

3 マルチタートルでオブジェクトを理解しようの巻 2 第 2 回マルチタートル! 先生 : マルチタートルにすると <script> と </script> の間の部分を下記のように書き換えます var canvas = document.createelement('canvas'); document.body.appendchild(canvas); canvas.width = canvas.height = 400; canvas.style.border = "solid 2px"; var ctx = canvas.getcontext('2d'); クラス定義 class turtle { constructor(x, y, c) { this.x = x; this.y = y; this.c = "hsl("+c+",100%,50%)"; this.a = 0; fd 関数 fd(step) { ctx.strokestyle = this.c; ctx.beginpath(); ctx.moveto(200+this.x, 200-this.y); this.x += step * Math.sin(this.a * Math.PI / 180.0); this.y += step * Math.cos(this.a * Math.PI / 180.0); ctx.lineto(200+this.x, 200-this.y); ctx.stroke(); rt(angle) { this.a += angle; データ rt 関数毎回同じ部分このプログラムでは JavaScript の新しい機能を使っています Internet Explorer 11 では使えません Edge 14 以降 FireFox Chrome ブラウザが必要です今は理解できなくて大丈夫 var t1 = new turtle(-100, 100, 0); var t2 = new turtle( 100, 100, 240); for (var i=0; i<4; i++) { t1.fd(50); t2.fd(50); t1.rt(90); t2.rt(90); 亀さん誕生! 毎回書き換える部分 t1 の足跡 T2 の足跡ここでは 2 匹の亀さん t1 さんと t2 さんを使っています var t1 = new turtle(-100, 100, 0); は画面中央から左に 100 歩上に 100 歩動いた位置に亀さん 1 号を配置するということ最後の 0 は色を表します 0 は赤 240 は青太字以外の部分は毎回変わりませんなな : ラジャー!

4 3 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻先生 : このプログラムの for (var I = 0 ; I < 4; i++ ) { t1.fd (50) ; t2.fd (50) ; t1.rt (90) ; t2.rt (90) ; の部分を for を使わないで書くと第 3 回書き方の工夫 t1.fd(50); t1.rt(90); t1.fd(50); t1.rt(90); t1.fd(50); t1.rt(90); t1.fd(50); t1.rt(90); t2.fd(50); t2.rt(90); t2.fd(50); t2.rt(90); t2.fd(50); t2.rt(90); t2.fd(50); t2.rt(90); となるけど次のような書き方もできます with ( t1 ) { fd (50) ; rt (90) ; fd (50) ; rt (90) ; fd (50) ; rt (90) ; fd (50) ; rt (90) ; with ( t2 ) { fd (50) ; rt (90) ; fd (50) ; rt (90) ; fd (50) ; rt (90) ; fd (50) ; rt (90) ; こんなこともできます 5 匹の亀さんを使っています for (var I = 0; I < 5; i++) { var t = new turtle(i*30, i*30, i*30); for (var j=0; j<4; j++) { t.fd (20) ; t.rt (90) ; 上のプログラムだと次のステップで 5 匹の亀さんをそれ以上使えませんが var turtles = [ ]; for (i=0; i<5; i++) { turtles [ i ] = new turtle(i*30, i*30, i*30) ; for (var j = 0; j < 4; j++) { t = turtles [ j ] ; t.fd (20) ; t.rt (90) ; このようにすれば次のステップで 5 匹の亀さん turtles [ 0 ] turtles [ 1 ] turtles [ 4 ] を turtles [ 0 ].fd ( 20 ) ; のように使うことができます

5 マルチタートルでオブジェクトを理解しようの巻 4 第 4 回プログラムの部品化先生 : プログラムの部品化たとえば正方形を描くプログラムを部品化する場合 var t1 = new turtle(0, 0, 0); function square(s) { t1.fd(s); t1.rt(90); t1.fd(s); t1.rt(90); t1.fd(s); t1.rt(90); t1.fd(s); t1.rt(90); square(100); 上記のようにすると亀さん t1 だけ専用の部品になってしまうけど class betterturtle extends turtle { square(s) { this.fd(s); this.rt(90); this.fd(s); this.rt(90); this.fd(s); this.rt(90); this.fd(s); this.rt(90); var t1 = new betterturtle(0, 0, 0); t1.square(100); このようにすると新しく作るすべての亀さんで使える部品になります

6 5 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻第 5 回書き方の工夫 ( 連結 ) 先生 : さらに変化しない部分毎回使う同じ部分の関数定義のさいごに return this; を入れると最下段のような連結が可能になります class turtle { constructor(x, y, c) { this.x = x; this.y = y; this.c = "hsl("+c+",100%,50%)"; this.a = 0; fd(step) { ctx.strokestyle = this.c; ctx.beginpath(); ctx.moveto(200+this.x, 200-this.y); this.x += step * Math.sin(this.a * Math.PI / 180.0); this.y += step * Math.cos(this.a * Math.PI / 180.0); ctx.lineto(200+this.x, 200-this.y); ctx.stroke(); return this; rt(angle) { this.a += angle; return this; var t1 = new turtle(0, 0, 0); t1.fd(100).rt(90).fd(100).rt(90).fd(100).rt(90).fd(100).rt(90); 先生 : JavaScript のプログラムで. が出てきたらオブジェクトの機能を使っていると考えてまず間違いありません var inp = document.getelementbyid( in ); とか var x = inp.value; とか inp.value = 100; とかこれは Web (HTML) のページデータをオブジェクトの形にして JavaScript から操作できるようにする DOM という仕組みを使っています DOM = Document Object Model Math.random(); や Math.sqrt(); は数学処理機能を集めた Math クラスの関数ですなな : 3.14 の. は? 先生 : それはオブジェクトとは関係ありません var t1 = new turtle(0, 0, 0); t1.fd(100).rt(90).fd(100).rt(90).fd(100).rt(90).fd(100).rt(90) ; このように書いても OK!

7 マルチタートルでオブジェクトを理解しようの巻 6 (1) オブジェクトのもっとも基本的な使い方 JavaScript のオブジェクトの使い方のまとめ var d = { a:1, b:2, c:3 ; alert(d.b); // 2 アラートで 2 と表示されますよという意味のコメント a = 1; b = 2; c = 3; というのをひとつにまとめたようなものこれがオブジェクト (2) オブジェクト内のそれぞれのデータは数字でも文字列でも良い関数定義でさえ良い文字列を数字に変換 var d = { a:1, b:2, c:function() { return Number(this.a)+Number(this.b); alert(d.c() ) ; // 3 この例では c が a と b を足した結果を返すという関数 var d = { a:1, b:2, c:function(){return Number(this.a)+Number(this.b); d.a = 3; d.b = 5; alert(d.c()); // 8 this.b はこのオブジェクト内の b という意味データを書き換えることもできる

7 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 (3) オブジェクトのひな型を作ってコピーするひな型のことをクラスといいます作ったコピーのことをインスタンスといいますクラスからコピー ( インスタンス ) を作る命令が new class Human { constructor(name) { this.

8 7 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 (3) オブジェクトのひな型を作ってコピーするひな型のことをクラスといいます作ったコピーのことをインスタンスといいますクラスからコピー ( インスタンス ) を作る命令が new class Human { constructor(name) { this.name = name; hello() { alert('my name is ' + this.name); constructor は初期設定用関数 Human クラスの定義 var d = new Human("JS"); d.hello(); // My name is JS クラスからコピー ( インスタンス ) を作る命令が new この例で作られるインスタンス d の内容は { name: JS, hello: function { alert('my name is ' + this.name); ですクラスはたい焼きの型のイメージインスタンスはたい焼きのイメージです constructor はつぶあんこしあんうぐいすあんなどを使ってたい焼きを焼くというしくみでそれを呼び出すのが new というイメージです constructor(name) { this.name = name; は中身を指定したたい焼き型を用意する部分 var d = new Human("JS"); はつぶあんが中身のたい焼き d を焼く部分という感じです

9 マルチタートルでオブジェクトを理解しようの巻 8 (4) ひな型を拡張する class Animal { constructor(name) { this.name = name; run() { alert(this.name + ' が走っています '); class Dog extends Animal { bowow() { alert(this.name + ' がワンワンと鳴いています '); var d = new Dog("Pochi"); d.bowow(); // Pochi がワンワンと鳴いています d.run(); // Pochi が走っています extends はクラスをコピーしてそれに機能を追加する命令です Animal クラスに bowow() 関数を追加した Dog クラスを作っています Dog クラスのインスタンスは Animal クラスの run() も Dog クラスの bowow() 関数も実行できます上の例では extends を使って Animal クラスをコピーしてそれに機能を追加した Dog クラスを作っていますこのようなコピーしてそれに機能を追加したクラスのことを継承クラスといいますコピーする元のクラスのことを継承元クラスといいます継承クラス定義で継承元クラスと同じ関数名を使うと上書きされますが継承クラスの定義中で super. 関数名 () を使って継承元クラスの関数を参照できます継承元のコンストラクタは super() を使って参照できます継承クラス定義の中で継承元クラスのコンストラクタに機能を追加する場合に使います class Animal { constructor(name) { this.name = name; run() { alert(this.name + ' が走っています '); class Dog extends Animal { constructor(name, age) { super(name); this.age = age; bowow() { alert(this.name + ' がワンワンと鳴いています '); var d = new Dog( Shiro, 10); alert(d.age) ; // 10 d.run(); // Shiro が走っています d.bowow() ; // Shiro がワンワンと鳴いています

10 9 ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻新しい HSL カラーの使い方 (CSS 3 で追加されました ) 色相 (Hue) 彩度 (Saturation) 輝度 (Lightness/Luminance) の 3 成分色相 : 色味を 0~360 度の範囲の角度で表す 0 度は赤でその反対側に位置する 180 度は赤の反対色にあたる青緑反対色を見つけるのも容易彩度 : 純色から彩度が落ちる灰色になっていくという考え方 0% ~ 100% 灰色 ~ 鮮やかに輝度 : 輝度 0% を黒 100% を白としその中間 (50%) を純色とする hsl(120, 50%, 50%) hsla(120, 50% 50%,.3) 透明度つき

タートルグラフィックスを使って JavaScript の基礎をマスターしよう第 0.4 版 2017 年 3 月 22 日 by

タートルグラフィックスを使って JavaScript の基礎をマスターしよう第 0.4 版 2017 年 3 月 22 日 by nara.yasuhiro@gmail.com 第 1 回コンピュータで絵を描こう 1. タートルグラフィックスとは自分が亀 ( タートル ) になったつもりで前へ進むこと右回転することを電子計算機に指令するすると歩いた跡 ( 軌跡 ) が絵になる例えばは一辺が

ななちゃんの IT 教室 マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します 第 0.7 版 2017 年 5 月 7 日 フリー素材

ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材