Skip to content

かんたんプログラミング #1:亀の子グラフィック

こんにちは。alanです。

最近、プログラムを始めたいんだけど、どこから手を付けていいのか解らない!という声を聞くので、いっちょ僕も初心に帰って、プログラミングの初歩の初歩を解説したいと思います。

プログラミング言語にはいろいろありますが、今回はお金がかからなくてしかも最近は主流となりつつある、JavaScript(ジャバスクリプト)という言語を題材として、プログラミングの面白さを手軽に理解できるように心がけたいと思います。

用意するもの

・Webブラウザ(InternetExplorerではなく、ChromeやSafariが望ましい)

今回はお金の掛からないプログラミング入門ということで、最新のWebブラウザを用意しましょう。無料です。AppleのSafari(サファリ)はWindowsからでもダウンロードすることができます。GoogleのChrome(クローム)でもかまぃません。総て無料でダウンロードできます。

Windowsに標準でついてくるInternetExplorer(インターネットエクスプローラ)は動作が特殊なため、今回は対応しないことにします。

・テキストエディタ
使い慣れたエディタがあればなんでも構いません。ただし、Microsoft Word(マイクロソフト ワード)やWindowsに標準でついてくる「メモ帳」や「ワードパッド」はダメです。WindowsならApsaly(http://www.vector.co.jp/soft/win95/writing/se423509.html)というブラウザが無料で使えるようです。
Macの場合、mi(http://www.mimikaki.net/)というテキストエディタが無料だし使いやすいと思います。

用意するものは以上ふたつだけです。

プログラミングを入門するにはいくつかの方法がありますが、今回は最も伝統的なやり方でやりましょう。

手順はこうです。

  1. お手本となるプログラムを入力する
  2. お手本を実行する
  3. お手本を改造する
  4. 改造したプログラムを実行して動作を確かめる
  5. さらに難しい課題に挑戦する

お手本を改造しながら学ぶことで、理解が早まります。

これがコンピュータ言語学習の王道です。他のどんな言語にも応用できます。
しかし、今回、お手本としてどんなプログラムを示すか、けっこう迷いました。

ありきたりのものでは面白くないし、かといって、あまりに突飛なものでもみんな腰が引けてしまいそうです。
プログラミングに入門しようとなんども挑戦した人は沢山いると思いますが、その都度、味気ない数字の羅列を見て、挫折してしまったりしたのではないでしょうか。
足し算とかかけ算の結果とか、どうでもいいじゃないですか。

そういうわけで、僕は今回、入門の段階からいきなりコンピュータグラフィックを描いてみようと思います。
プログラミングを始めるとき、まず覚えなければならないのは、ソースコードという言葉です。

ソースコードは、略してコードとも呼ばれます(ただしコードは別の意味も持っているので注意)。
プログラミング言語で書かれたプログラムのことを言います。

プログラミング言語とは、コンピュータに命令するための特別な言葉です。独自の命令と独自の文法を持っています。
しかし、人間が作った言葉なので、英語や中国語を覚えるよりは単語の数も少なく、ずっと簡単です。

それでは、さっそくあなたのプログラミングを始めましょう。
まずは以下のコードをテキストエディタに順番にコピペし、それぞれ正しいファイル名でセーブしてください。

ファイル名:start.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="wiselogo.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body onload="onLoad()">
<canvas id="canvas0" width="500" height="500"
style="border:1px black solid">
</canvas>
</body>
</html>

ファイル名:wiselogo.js


var Vector = function(x,y){
    this.x = x;
    this.y =y;
    this.plus = function(v){
        this.x += v.x;
        this.y += v.y;
    },
    this.times = function(t){
        return new Vector(this.x*t,this.y*t);
    }
};

var logo = {
    canvas:null,
    context:null,
    cursor:new Vector(250,250),
    direction:new Vector(0,1),
    rotate :0,
    pen : false,
    penDown:function(){this.pen = true;},
    penUp:function(){this.pen = false;},
    init:function(){
        this.canvas =document.getElementById("canvas0");
        this.context=this.canvas.getContext("2d");
    },
    turn:function(r){
        this.rotate += r;
        this.direction.x = Math.sin(this.rotate*3.14159/180);
        this.direction.y = Math.cos(this.rotate*3.14159/180);
    },
    move :function(t){
        if(this.pen){
            this.context.beginPath();
            this.context.moveTo(this.cursor.x,this.cursor.y);
        }
        this.cursor.plus(this.direction.times(t));
        if(this.pen){
            this.context.lineTo(this.cursor.x,this.cursor.y);
            this.context.stroke();
        }
    },
    printpos :function(){
        alert('hoge: '+this.cursor.x+","+this.cursor.y);
    }
};

var move = function(t){logo.move(t)};
var turn= function(r){logo.turn(r)};
var penDown= function(){logo.penDown()};
var penUp = function(){logo.penUp()};

ファイル名:main.js


function onLoad() { //このあたりはあとで説明します
    logo.init(); //ここもあとで

    penDown(); //ペンを下ろす
    move(50); //50進む
    penUp(); //ペンをあげる

}

上記のソースコードをすべて正しいファイル名でセーブしたら、start.htmlをSafariかChromeで開いてみましょう。

Macの方はstart.htmlをダブルクリックすれば起動しますが、WindowsでChromeが標準ブラウザに設定されていない場合、Chromeのウィンドウを開いてstart.htmlをドラッグ&ドロップすれば大丈夫です。

上手く開けましたか?

こんな画面が表示されたら成功です。

もしうまくいかなかったら、以下のことを調べてみましょう。

  • start.html、wiselogo.js、main.jsの総てが同じフォルダ内にあるか
  • ChromeまたはSafariで開いているか?(InternetExplorerでは動作しません)

さて、この最初のプログラムはなにをしているのでしょうか?
たいていのプログラムには必ずメインとなる部分があります。このお手本プログラムの場合、それはもちろんmain.jsです。

このmain.jsではなにをしているのでしょうか?
functionとかinitとかいうあたりは読み飛ばしていただいて(あとで説明します)、注目してほしいのはpenDown()のあたりです。

実は、これは絵を描くプログラムになっています。
絵を描くときにはペンを使いますよね?

ここでは画面を紙として描く、仮想のペンを想像してください。そのペンを紙に下ろす。これがpenDown()という命令がやっていることです。

次にmove(50)は、50進むこと。ペンを下ろしたまま50ドット進みます。

最後にpenUp()で下ろしたペンを上げます。

それで画面の真ん中に、短い直線が表示されているというわけです。
この短いプログラムの中にも、いくつか法則というか、プログラミング言語の決まり事が見て取れます。

詳しく説明しましょう。

JavaScriptでは、//(スラッシュが二回)の後ろはコメントという扱いになって、ここには好きなことを書くことができます。たいていの場合は、プログラムが解りやすくなるようにメモなどを書くのが普通です。

さらに、青で示したのは命令です。ただし、命令のことをJavaScriptでは関数とも呼びます(厳密には異なりますがここはこういうものだと思って下さい)。

penDownは、ペンを下げろ、という命令なわけですね。

命令のうしろに続くふたつの括弧は、この命令に渡すパラメータを指定するための場所です。penDownにはパラメータがありませんが、moveには50というパラメータが渡されていますね。

最後の「;」はセミコロンと言って、文の終わりであることを示す記号です。日本語で言えば「。」にあたります。

コンピュータはセミコロンがないと文がどこで終わったのかわからなくて混乱してしまいます。
ですから、セミコロンは忘れずにつけるようにしましょう。

さて、これだけでは全く面白くありません。

このmain.jsを改造して、プログラムを覚えてみましょう。

テキストエディタを使って、main.jsを以下のように変えてみて下さい。


function onLoad() { //このあたりはあとで説明します
    logo.init(); //ここもあとで

    penDown(); //ペンを下ろす
    move(50); //50進む
    penUp(); //ペンをあげる
    move(50);
    penDown();
    move(50);
    penUp();

}

どうなりましたか?
以下のような画面になったでしょうか?

このプログラムがどういうふうに動作しているか、なんとなくわかりましたか?

一度ペンを下げて、50移動して、ペンを上げて、さらに50移動して、またペンを下げて、50移動して、最後にまたペンを上げました。

それで、点線のような模様が画面に描かれたわけです。

penDown、move、penUpの三つの命令だけだと、直線しか描けないので、ここで新しい命令、turnを登場させることにしましょう。

turnはその名の通り、方向を変えます。

再びmain.jsを以下のように改造してみて下さい。


function onLoad() { //このあたりはあとで説明します
    logo.init(); //ここもあとで

    penDown();
    move(100);
    turn(90);
    move(100);
    turn(90);
    move(100);
    turn(90);
    move(100);
    penUp();
}

turnは、moveと同じく、パラメータをとります。

moveのパラメータは移動距離でした。
turnのパラメータは角度になります。
100進んで、90度ターンして、100進んで、90度ターンして、と四回繰り返す訳です。

すると・・・結果はぜひ試してみて下さい。

次回はもっと複雑な図形に挑戦しますよ!

このエントリーをはてなブックマークに追加
はてなブックマーク - かんたんプログラミング #1:亀の子グラフィック
Post to Google Buzz
Share on GREE

No related posts.

Comments Closed