息子に教えるJavaScript: 2014

2014年12月14日日曜日

Hour of Code

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

最近、Hour of Codeというサイトを知りました。

息子にプログラミングを教えたいと言いながら、コンピュータ教育の動向をあまり把握できて恥ずかしいかぎりですが、Scratchやblocklyのような制御ブロックを使って楽しみながらプログラミングの基礎が学べる素晴らしいサイトです。

『アナと雪の女王』を使ったコンテンツ、自分も思わず遊んでしまいました。これが『妖怪ウォッチ』ならば、息子もすぐに飛びつくかもしれないですね。

次の世代の子供達をどのように育てていくかということが、自分がこれから取り組んでいきたいテーマです。本サイト『息子に教えるJavaScript』は、そのうち、コンピュータをどうやって教えていくかということを模索する目的で執筆をはじめました。

息子に教えることを通じて、これからを担っていく子供達にコンピュータを教えていきたいというのが自分が目指しているところですので、今後、こういった素晴らしいコンテンツがあれば取り上げていきたいと考えています。

2014年12月13日土曜日

JavaScriptの可能性

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScriptが生まれた当初、自分は、フォームに入力した値のチェックや、HTMLを動的に変更してボタン有効/無効を制御したり、Webページに動きを与えるスクリプトという程度の認識しかありませんでした。Webブラウザ上で凝ったことをするにはJavaScriptでは不十分で、JavaアプレットやFlashを使う必要がありました。

この認識が大きく変わったのは、『Ajax』と呼ばれるサーバとの非同期通信を活用したWebページの登場や、一部ブラウザが『Canvas』と呼ばれる描画オブジェクトを独自にサポートしはじめたことでした。

JavaScriptの新しい活用方法が見出された結果、jQueryなどの便利なライブラリが生まれました。そして、これらの高機能化に対応すべくJavaScriptの処理エンジンの高速化が図られました。
スマートフォンやタブレットの登場も手伝って、カメラやオーディオの制御などもJavaScriptから行えるようになってきたことも大きな進化といえるでしょう。

HTMLがWebページを記述するための言語として揺るぎない地位を確立したのと同様に、JavaScriptも『ECMAScript』という規格で標準化が進められ、Webブラウザなどのフロントエンドで使われる言語として、今後ますます利用されていくでしょう。

Webブラウザ一つあればプログラム開発から実行まで行えるという手軽さは、プログラミングの教育にも適しており、今後、JavaScriptを学ぶ学生もたくさんいるでしょう。

そして、JavaScriptのもう一つ見逃せない動きがNode.jsの誕生です。
Google社が開発した『Chrome』ブラウザのJavaScriptエンジンを使って、サーバ上でJavaScriptを実行するという進化は、もはやJavaScriptがフロントエンドにとどまらないことを示しています。

2014年12月9日火曜日

Lesson18: 2のべき乗

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

同じ数値を足し合わせて得られた値を2つ足し合わせて、どこまでいけるか計算してみたよとノートを見せてくれた息子。

1 + 1 = 2

2 + 2 = 4

4 + 4 = 8

　　・
　　・
　　・

これは2進数の各桁なんだよと教えてしまいたくなるけど、まだ早いと思うので教えるのは今度にして、今回はコンピュータを使って同じ計算を行うサンプルをつくってみた。

はじめは何だかよく分からなくても、繰り返し続けていくうちにきっと何かひらめくときがくるはず。
そのときが訪れることを願って、これからも短いサンプルを書いて、
息子に教えていきたいと思う。

https://github.com/toshio/js4son/blob/master/chapter02/lesson18.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lesson18 Binaries</title>
  </head>
  <body>
    <div id="text"></div>
    <script>
    var value = "<table border='0'>";
    for (var i=0, a=1; i<=50; i++) {
        value += "<tr>"
               + "<td>2<sup>" + i + "</sup></td>"
               + "<td>=</td>"
               + "<td align='right'>" + a + "</td>"
               + "</tr>";
        a *= 2;
    }
    value += "</table>";
    document.getElementById("text").innerHTML = value;
    </script>
  </body>
</html>

実行結果

2⁰	=	1
2¹	=	2
2²	=	4
2³	=	8
2⁴	=	16
2⁵	=	32
2⁶	=	64
2⁷	=	128
2⁸	=	256
2⁹	=	512
2¹⁰	=	1024
2¹¹	=	2048
2¹²	=	4096
2¹³	=	8192
2¹⁴	=	16384
2¹⁵	=	32768
2¹⁶	=	65536
2¹⁷	=	131072
2¹⁸	=	262144
2¹⁹	=	524288
2²⁰	=	1048576
2²¹	=	2097152
2²²	=	4194304
2²³	=	8388608
2²⁴	=	16777216
2²⁵	=	33554432
2²⁶	=	67108864
2²⁷	=	134217728
2²⁸	=	268435456
2²⁹	=	536870912
2³⁰	=	1073741824
2³¹	=	2147483648
2³²	=	4294967296
2³³	=	8589934592
2³⁴	=	17179869184
2³⁵	=	34359738368
2³⁶	=	68719476736
2³⁷	=	137438953472
2³⁸	=	274877906944
2³⁹	=	549755813888
2⁴⁰	=	1099511627776
2⁴¹	=	2199023255552
2⁴²	=	4398046511104
2⁴³	=	8796093022208
2⁴⁴	=	17592186044416
2⁴⁵	=	35184372088832
2⁴⁶	=	70368744177664
2⁴⁷	=	140737488355328
2⁴⁸	=	281474976710656
2⁴⁹	=	562949953421312
2⁵⁰	=	1125899906842624

2014年12月4日木曜日

Lesson17: アルゴリズム（素因数分解）

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

車の仕組みが分からなくても車の運転ができるように、コンピュータの仕組みがわからなくても、豊富なアプリケーションを使いこなして、たいていのやりたいことはできると思います。

それでもなお、息子にコンピュータの仕組みやプログラミングについて学んでほしいと考えているのは、プログラミングを通じて、考える力を身につけてほしいと考えるからです。

例えば、ある数値の素因数分解を行うとき、素数の順に割れるかどうかを見て素因数を求めていきます。このように、問題を解く手順のことをアルゴリズムと呼び、プログラミングとは、そのアルゴリズムを記述することにほかなりません。

プログラムを書いてしまえば、面倒くさい計算はコンピュータが実行してくれます。
小さい頃は四則演算などを一生懸命練習して計算力を身につけることはとても重要なのですが、それなりに計算ができるようになったら、どのようにすれば解けるのかというアルゴリズムを考えてカタチにする力をつけていってほしいと思います。

今回は、素因数分解を行うJavaScriptを書いてみました。
まだ素因数分解を習っていない？　そんなルールに縛られることなく、知っていることを教えていきたいと思います。
今はまだよく理解できなかったとしても、いつかそうした断片的な知識がつながる瞬間がくると確信しています。

https://github.com/toshio/js4son/blob/master/chapter02/lesson17.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lesson17 Prime factorization</title>
  <body>
    <input id="number" type="number" min="2" max="10000" placeholder="Number" onchange="answer();"/>
    <input id="result" type="text"   maxlength="40" placeholder="result" readonly="readonly" />
    <script>
    function answer() {
        var number  = parseInt(document.getElementById("number").value);
        var value   = "";
        if (number) {
            value = factorize(number).join(" × ");
        }
        document.getElementById("result").value = value;
    }

    function factorize(value) {
        var factors = [];
        var divisor = 2;
        while (value >= 2) {
            if (value % divisor == 0) {
                value /= divisor;
                factors.push(divisor);
            } else {
                divisor++;
            }
        }
        return factors;
    }
    </script>
  </body>
</html>

素因数分解は、素数で割っていくことが基本ですので、そもそも2以外の偶数で割る必要がないなどを考慮すれば、もっと計算量の少ないアルゴリズムがかけると思います。

2014年12月3日水曜日

Lesson16: Canvas (時計)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

今年も残りあと1ヶ月。

新しいことをはじめようと意気込んだこの一年、結局、例年とあまり変わらない一年で終わりそうなので、来年につなげられるよう、しばらく中断していた記事を日々書いていこうと思います。

『息子に教えるJavaScript』と銘打って書き始めたものの、教えたいことがたくさんありすぎて、思いばかりが先に行ってしまっています。
コンピュータ、算数、科学・・・。少なくとも、自分が学んできたことの多くを息子に教えたい。本当に学ぶべきことは、もっと先にあるのだから、基礎となる部分だけでも教えられればと思います。

本Blogは、プログラミングを通して息子にコンピュータを教えたいという思いで書きはじめました。コンピュータの使い方は様々ですが、仕組みを理解するという点でプログラミングを学んでほしいと考え、身近なブラウザ上で動かせるJavaScriptを教えることにしました。

今回は、Canvasを使ったサンプルはないかと部屋を見渡したところ、たまたま時計が目に入ったので、アナログ時計を表示してみたいと思います。

あまり綺麗なソースではありませんが、細かいことは気にせずに、習うより慣れろ式に、短めのサンプルを例に挙げて、教えるきっかけになればと考えています。

https://github.com/toshio/js4son/blob/master/chapter02/lesson16.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lesson16 Clock</title>
    <style>
    html, body {
        width:    100%;
        height:   100%;
        margin:   0;
        padding:  0;
        overflow: hidden;
    }
    canvas {
        position: absolute;
    }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

    <script>
    function drawClock() {
        var canvas  = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var width   = canvas.width;
        var height  = canvas.height;
        var radius  = Math.min(width, height) / 2.0 * 0.8;
        var cx      = width  / 2;
        var cy      = height / 2;

        // Time
        var date   = new Date();
        var hour   = date.getHours() % 12;
        var minute = date.getMinutes();
        var second = date.getSeconds();

        // Clear canvas
        context.beginPath();
        context.fillStyle = "white";
        context.fillRect(0, 0, width, height);

        // Circle
        context.beginPath();
        context.arc(cx, cy, radius, 0, Math.PI * 2, true);
        context.strokeStyle = "black";
        context.lineWidth   = 5;
        context.stroke();

        // Numbers
        var hours = ["Ⅻ","Ⅰ","Ⅱ","Ⅲ","Ⅳ","Ⅴ","Ⅵ","Ⅶ","Ⅷ","Ⅸ","Ⅹ","Ⅺ"];
        context.beginPath();
        context.textAlign    = "center";
        context.textBaseline = "middle";
        context.font         = Math.floor(radius * 0.15) + "px 'ＭＳ 明朝'";
        context.fillStyle    = "black";
        for (var index in hours) {
            var radiusNumber = radius * 0.85;
            var thetaNumber  = (2 * Math.PI / 12 ) * index;
            var posNumber    = calcPosition(cx, cy, radiusNumber, thetaNumber);
            context.fillText(hours[index], posNumber.x, posNumber.y);
        }

        // Hour hand
        var radiusHour = radius * 0.7;
        var thetaHour  = (2 * Math.PI / 12 ) * (hour + minute / 60 + second / 3600);
        var posHour    = calcPosition(cx, cy, radiusHour, thetaHour);
        context.beginPath();
        context.moveTo(cx,  cy);
        context.lineTo(posHour.x, posHour.y);
        context.lineWidth = 4;
        context.stroke();

        // Minute hand
        var radiusMinute = radius * 0.9;
        var thetaMinute  = (2 * Math.PI / 60) * (minute + second / 60);
        var posMinute    = calcPosition(cx, cy, radiusMinute, thetaMinute);
        context.beginPath();
        context.moveTo(cx,  cy);
        context.lineTo(posMinute.x, posMinute.y);
        context.lineWidth = 3;
        context.stroke();

        // Second hand
        var radiusSecond = radius * 0.9;
        var thetaSecond  = (2 * Math.PI / 60) * second;
        var posSecond    = calcPosition(cx, cy, radiusSecond, thetaSecond);
        context.beginPath();
        context.moveTo(cx,  cy);
        context.lineTo(posSecond.x, posSecond.y);
        context.strokeStyle = "red";
        context.lineWidth   = 1;
        context.stroke();

        // Invoke when second changed
        setTimeout(drawClock, 1000 - date.getMilliseconds());
    }

    function calcPosition(cx, cy, radius, theta) {
        return {
            x: cx + (radius * Math.sin(theta)),
            y: cy - (radius * Math.cos(theta))
        };
    }

    function resize() {
        var canvas = document.getElementById("myCanvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        drawClock();
    }

    window.addEventListener("resize", resize, false);
    window.addEventListener("load",   resize, false);
    </script>
  </body>
</html>

2014年5月29日木曜日

Lesson 15: 制御文

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

ある条件を満たすときにだけ、特定の命令を実行させたい、ということがあります。

JavaScriptでも、他の言語同様に制御文があり、if文とswitch文が用意されています。
if文は、ある条件を満たすかどうか、switch文は取りうる値ごとに処理を分岐させたい場合に使用します。

if文の例

if文はある条件を満たす場合に実行したい処理を記述します。
else、else ifを用いて、条件が満たなかったときに実行したい処理や、さらに次の条件を記述することができます。

<!DOCTYPE html>
<html>
<head>
  <title>Lesson15-1</title>
</head>
  <body>
    <script>
      var value = prompt("Input number");
      var message;

      if(value == null || value == "") {
        message = "Not specified.";
      } else if (isNaN(value)) {
        message = value + " is not number.";
      } else {
        message = value + " is number.";
      }
      alert( message );
    </script>
  </body>
</html>

switch文の例

とりうる値によって処理を複数に分岐させたい場合は、if、else ifで一つずつ列挙してもよいですが、switch文を使用する方がシンプルでよいです。
caseごとに処理を記述します。各caseの終わりにbreakを入れないと、処理が突き進んでいきますので注意してください。
なお、caseで列挙した条件に合致しない場合、defaultで指定した処理が実行されます。

<!DOCTYPE html>
<html>
<head>
  <title>Lesson15-2</title>
</head>
  <body>
    <script>
    var day;
    switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    default:
        // bug
        break;
    }
    alert("Today is "+ day);
    </script>
  </body>
</html>

2014年5月21日水曜日

子どもに教えたいこと

このサイトは移転しました。5秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

地球の歴史

この地球上に生命が誕生したのは、今から約38億年前といわれています。
様々な環境の変化と、それに適応すべく進化を繰り返しながら、次の世代、その次の世代へとずっと引き継がれて、今ここに私たち人類が存在していると言われています。

長い年月をかけて、生命は進化を遂げてきました。原始の海で生命が生まれ、やがて陸に上がって、ある動物は空を跳び、ある動物は知性を手にして、火や道具を扱えるまでに進化を遂げたと言われてます。

人類の歴史

この壮大な地球の歴史、生命の歴史に比べれば、人類の歴史はほんのごく一瞬に過ぎません。
その短い期間に、人類が著しい生物学的な進化を遂げているというわけではありませんが、その代わりに、文明を築いて、その文明が大きく発達してきました。
これを『進化』と捉えると、科学技術が著しく発達し、コンピュータが発明され、世界中がインターネットで結ばれて、様々な文化が大きく影響しあって、新しい文化を生み出している今の状況は、現代のカンブリア大爆発といえるかもしれません。

驚くべきことに、コンピュータを取り巻く情報革命はまだ新しい扉を開いたに過ぎないことです。100年後、200年後、1000年後の社会はどうなっているのか、人類がどう『進化』していくのが、まったく想像さえもつきませんが、私たちがいるこの時代が、人類の歴史的な転換点に位置すると考えると、何だかとてもワクワクします。

未来を育てること

今、私たちが過ごしているこの時代は、これからもずっと続いていくだろう地球の歴史の中の、ほんの1ページにしか過ぎませんが、私たちがこうして生まれ育ってきたように、はるか昔から続く生命の連続性が途絶えることなく次の世代へと引き継いでいけるよう、これからを担っていく子どもたちが安心して育っていってほしいと願っています。

子どもを育てるというのは、未来を育てることだと考えています。
素敵な未来を育てていくために、自分には何ができるだろうと最近いつも考えています。その答えはまだ見出せていませんが、まずは自分の息子をしっかり育てていくことからはじめたいと考えています。
そして、コンピュータを仕事としている自分が息子に教えられることの一つ、それがプログラミングであり、まずは自分の息子に教えることを第一目的に、本blogを書きはじめました。

ツールとしてのコンピュータ

コンピュータは人類が創りだしたもっとも画期的な道具の一つです。
計算を自動で行うことを目的に開発されたコンピュータですが、今ではインターネットを通じて世界中のあらゆるな情報を処理することもできる、社会基盤として不可欠な存在となっています。
コンピュータについて知っておくことは、今後ますます重要となっていくでしょう。

息子がコンピュータのスペシャリストを目指す必要はないと考えています。ただ、国語や算数と同じように、コンピュータを十分に活用できる知識は持ち合わせてほしいと考えています。
クルマの仕組みが分からなくても、クルマの運転を行うには十分かもしれません。コンピュータもアプリケーションが充実しており、中身を知らなくても十分に使いこなせるでしょう。
ただ、ちょっと作業の自動化を図りたいときときとか、プログラムをささっと書いてラクできるくらいの能力は身につけてほしいですし、また、プログラミングを通じて物事を順序立てて考える力も養うことができればと願っています。

2014年5月13日火曜日

Lesson14: 配列

このサイトは移転しました。5秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

Lesson12では変数について説明しました。数値や文字列などのデータを格納する『箱』で、その箱には名前を付けることができるというものでした。
配列は、一つの箱に複数のデータをまとめて入れることができる入れ物です。
例えば、以下のように、変数weeksには、7つのデータ（配列要素）を格納することができます。

// 曜日
var weeks=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

『配列にすると何がうれしいの？』、『var sun="Sun"; var mon="Mon"; ・・・と定義してもいいんじゃないの？』と疑問に思うかも知れません。
そういう疑問は、プログラミングに限らず、何かを学ぶというときにとても大切なものです。

配列を使うメリットは、たとえば、for文などを使った繰り返しを行う場合です。

var i;
for( i = 0; i<weeks.length; i++ ) {
    document.write( weeks[ i ] + " " );
}

以下のように表示されます。

Sun Mon Tue Wed Thu Fri Sat

これは、以下のように書いたのと同等です。要素は、配列の0番目から順に格納されており、一つずつ参照することができます。

document.write( weeks[0] );
document.write( weeks[1] );
document.write( weeks[2] );
document.write( weeks[3] );
document.write( weeks[4] );
document.write( weeks[5] );
document.write( weeks[6] );

今回は配列要素は7個だけですが、要素が多い場合、for文を使って繰り返す書き方が便利ですね。

配列については、また今度、詳しく説明していきたいと思います。

2014年5月11日日曜日

Lesson13: 文字列操作(Stringクラス)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScriptで文字列の長さを求めたり、文字列内の特定文字列を置き換えたり、文字列操作を行うための方法について例を上げて説明します。

■文字列の定義

文字列の宣言は、以下のいずれも同じです。JavaScriptでは、ダブルクォート(")で括るか、シングルクォート(')で括るかで違いはありません。(言語によって、違いがあります)

var str = "文字列";
var str = '文字列';
var str = new String("文字列");
var str = new String('文字列');

■lengthプロパティ: 文字列の長さ

文字列の長さは、lengthプロパティで取得でます。

var str = "文字列";
var res = str.length;

変数resに3が格納されます。

■indexOf()メソッド: 指定した文字列が最初に出現する位置を調べる

var str = "あいうえお";
var res = str.indexOf("うえ");

変数resに2が格納されます。（開始位置は0から数えます）

■lastIndexOf()メソッド: 指定した文字列が最後に出現する位置を調べる

var str = "ABCABCABC";
var res = str.lastIndexOf("AB");

変数resに6が格納されます。

■substr()メソッド: 指定した範囲の文字列を切り出す

var str = "ABCDEFG";
var res = str.substr(1, 3);

変数resに"BCD"が格納されます。

■replace()メソッド: 文字列を置き換える

文字列を置き換える方法として、大きく2つがあります。

○replace(文字列, 置換文字列) 単純な置換

var str = "abcdefABCDEFABCDEF";
var res = str.replace("ABC", "XYZ");

変数resには "abcdefXYZDEFABCDEF" が格納されます。
最初に見つかった "ABC" のみが "XYZ" に置換されます。

○replace(正規表現パターン, 置換文字列) 正規表現を用いた置換

特定の文字列ではなく、あるパターンに一致する文字を置換したいという場合に、そのパターンを表現するために正規表現(Regular Expression)というものがあります。
正規表現は、JavaScriptに限らず多くのプログラム言語や、文章を編集するためのテキストエディタなど、コンピュータの様々なところで使われるたいへん便利なものです。
詳細は、後日RegExpクラスを説明するときに教えたいと思います。

正規表現を用いた置換の例を挙げます。

var str = "FirstName LastName";
var res = str.replace(/(\w+)\s(\w+)/, "$2 $1");

変数resには "LastName FirstName" が格納されます。
正規表現パターンは引用符(" または'）で括らず、/と/の間に記載します。

2014年4月2日水曜日

Lesson12: 変数

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScriptをはじめ多くのコンピュータ言語には、変数(Variable)というものがあります。
変数というのは、文字列だったり数値だったり、データを記憶させておく『箱』のようなものだと考えておけばよいでしょう。その箱には、変数名と呼ばれる名前をつけることができます。
プログラムから指定した名前の箱に文字列や数値などのデータを入れたり、箱から取り出したりすることができます。（取り出しても空にならないため、中身を見るという表現が近いです）

■変数宣言
言語によっては、あらかじめ変数を使用する旨を宣言しておく必要があります。また、言語によっては宣言時に、変数の種類（文字列、数値など）を明確にする必要があります。
JavaScriptでは、宣言は不要です。また、変数の種類は明記しません。

// 変数「name」を宣言
var name;

■文字列の代入
文字列は、引用句（"または'）で括ります。“=”はJavaScriptでは代入を意味し、右辺の内容が左辺に代入される（結果的に等しくなる）と考えてください。
また、文字列は、演算子“+”で連結することができます。

var name = "Tom";
var message = "My name is " + name + ".";
alert(message);

■数値

数値は引用句（"または'）を付けずに書きます。
数値同士は四則演算などの計算ができます。
また、文字列とは“+”で連結することができます。

var a = 3;
var b = 4;
var c = a + b;
alert(a + " + " + b + " = " + c);

2014年3月26日水曜日

プログラミングとの出会い

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

自分がはじめて触れたコンピュータは、『NEC PC-8001』というコンピュータでした。幼稚園に通っていた頃で、もう30年以上も前のことになります。

当時、『はるみのゲームライブラリ』という本に載っていたBASIC言語のプログラムを、兄に頼まれて仕方なく、ただ意味の分からぬままに打ち込んでいました。昔は、ゲームはプログラムを打ち込んで遊ぶものということが当たり前でしたし、打ち込んだプログラムはカセットテープに記録するという、今ではとうてい考えられないような不便な環境でした。

自分にとって、『はるみのゲームライブラリ』はその後の人生を大きく変えた一冊といえます。
打ち込んだゲームの絵をちょっと変えてみたりと、少しずつ元のプログラムをいじっていくあいだに、なんとなくその構造が分かってきて、いつのまにか自分でもそれなりに組めるようになってきました。

プログラミングは難しいものではありません。大切なのは、プログラミングをはじめるというその第一歩を踏み出すかどうかです。そして、とにかく習うより慣れろという言葉のとおり、継続的に何かに取り組む姿勢と学べる環境さえあれば、かならず上達していくでしょう。

今は、ググればたいてい必要な情報が手に入る時代。分からないことがあっても、教えてくれる先生方もたくさんいます。やる気さえ失わなければ、道はどんどん開けていくでしょう。

Lesson11: タイマー

このサイトは移転しました。5秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

一定間隔で何かを行いたい、そんなときに使えるのがタイマーです。
JavaScriptを使ってアニメーションを行う場合などによく利用されます。

タイマーを実現する関数として、指定間隔で繰り返し呼ばれるsetInterval()関数と、指定時間経過後に一度だけ呼ばれるsetTimeout()関数の2つがあります。
また、設定したタイマーを解除するために、clearInterval()関数、clearTimeout()関数がそれぞれ用意されています。
それでは、以下をテキストエディタ等で入力してください。はじめは内容がよく分からなくても、実際に打ち込んでいくなかで、次第に分かるようになってきます。

リスト11: lesson11.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson11</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="300px"></canvas>
    <script>
        var repeat   = 100;
        var counter  = 0;
        var interval = 50;
        var timerId;

        function draw() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var width  = canvas.width;
            var height = canvas.height;
            var r = Math.min(width, height) / 2 * counter / repeat;

            // Clear canvas
            context.clearRect(0, 0, width, height);

            // Draw circle
            context.beginPath();
            context.arc(width / 2, height / 2, r, 0, Math.PI * 2, true);
            context.fillStyle = "skyblue";
            context.fill();

            // Increase counter
            counter++;
            if (counter > repeat) {
                clearInterval(timerId);
            }
        }

        window.onload = function() {
            timerId = setInterval(draw, interval);
        };
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、50ミリ秒単位で100コマからなる簡単なアニメーションが実行されますす。

【解説】
setInterva()関数lの書式は以下の通りです。
　setInterval(処理, 実行間隔[ms])
処理には定義した関数名を指定するか、または引用句で括って、実行したい内容を記述してください。上記の例では、第一引数の draw となっている箇所は、"draw()"でも構いません。

2014年3月24日月曜日

Lesson10: 画像表示

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

Webブラウザ上に画像を表示する方法は2つあります。
一つはhtmlの<img>タグを使う方法、もう一つはJavaScriptを使ってCanvasに画像を貼り付ける方法です。
それでは、テキストエディタで打ち込んでみましょう。

リスト10-1: lesson10-1.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson10-1</title>
  </head>
  <body>
    <img src="表示したい画像のURL" />
  </body>
</html>

打ち込んだhtmlファイルをWebブラウザで表示すると、<img>タグのsrc属性で指定した画像が表示されます。画像をただ表示するだけであれば、タグ1つで実現できるんです。

続いて、Canvasに画像を貼り付ける表示するを示します。
JavaScriptを使ってゲームをつくる場合は、こちらを使うことが多いかもしれませんね。

リスト10-2: lesson10-2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson10-2</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var image = new Image();
        image.onload = function() {
            context.drawImage(image, 0, 0);
        };
        image.src = "表示したい画像のURL";
    </script>
  </body>
</html>

【解説】
Imageクラスのインスタンスをnew Image()という命令で作成します。
クラスやインスタンスという言葉は、オブジェクト指向プログラミングで使われる概念で、種類とその実体をあらわします。
作成したインスタンスのsrcプロパティに対して画像のURLを指定することにより画像が読み込まれます。
ただし、画像ファイルの読み込みには時間がかかりますので、インスタンスのonloadプロパティに読み込み完了時に呼び出す関数を指定します。
そして、画像の読み込みが終わった時点で、描画コンテキストのdrawImage()関数を呼んで、Canvasに画像を貼り付けます。

2014年3月20日木曜日

Lesson09: Canvas(円)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

前回はCanvasに長方形を描画してみました。
今回はCanvasに円を描いてみましょう。
それでは、テキストエディタで以下を打ち込んでください。

リスト9: lesson09.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson09</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="200px"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var width  = canvas.width;
        var height = canvas.height;

        // Rectangle
        context.beginPath();
        context.strokeStyle="gray";
        context.rect(0, 0, width, height);
        context.stroke();

        // Circle
        context.beginPath();
        context.arc(width / 2, height / 2, height * 3 /10, 0, Math.PI * 2, true);
        context.fillStyle = "#ed2939";
        context.fill();
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、日本の国旗が表示されます。

【解説】

canvas要素から描画コンテキスト取得するまでは前回と同様ですね。
今回は、canvas要素のwidth属性とheight属性を取ってきて、その値をベースに描画しますので、HTMLの<canvas>タグの大きさを変えても、それに合わせて描画する大きさも変わるように計算を行っています。

円を描く関数は、以下の書式です。
arc(x, y, radius, startAngle, endAngle, anticlockwise)

引数	解説
x,y	円の中心座標
radius	円の半径
startAngle	開始角度
endAngle	終了角度
anticlockwise	反時計回りかどうか

開始角度、終了角度は生活で馴染みがある °（degree; 度）の単位ではなくて、ラジアン(radian)という単位を使います。
1ラジアンの定義は『円の半径に等しい長さの弧の中心に対する角度』です。
難しければ、180°=π[rad] (3.14159・・・)　、360°=2π[rad]ということを覚えておいてください。
上記の例では、終了角度が Math.PI * 2 なので、0°～360°の円弧を描きます。
弧を描く場合はarc()関数を呼び出した後に、stroke()関数を、中を塗りつぶす場合はfill()関数を呼び出してください。

2014年3月19日水曜日

Lesson08: Canvas(長方形)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

Lesson07では、HTML Canvasに直線を引いてみました。
今回は長方形を描いてみましょう。
せっかくですので、長方形に色も付けてみたいと思います。
以下をテキストエディタで打ち込んでください。

リスト8: lesson08.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson08</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="200px"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // Blue
        context.fillStyle = "#0055A4";
        context.fillRect(0,   0, 100, 200);
        // White
        context.fillStyle = "#FFFFFF";
        context.fillRect(100, 0, 200, 200);
        // Red
        context.fillStyle = "#EF4135";
        context.fillRect(200, 0, 300, 200);
    </script>
  </body>
</html>

保存したファイルをWebブラウザから開いてみてください。
フランスの国旗Tricolour（トリコロール）が描けました。

fillStyleで色を指定しています。#の後ろに続く6桁の英数字は、光の三原色RGB （Red, Green, Blue）の順に、それぞれ16進数 2桁(256階調）で表されています。
16進数というのは、いつか改めて説明しますが、1桁が0～9、A～Fの計16個の『数字』で表現される数値です。

Lesson07: Canvas(直線)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

最近のWebブラウザは、HTMLのCanvasというものをサポートしています。

ブラウザ上に線を引いたり、円を描いたりと、自由に図を描くことができる機能です。
手はじめにCanvasに直線を描いてみましょう。
はじめは意味が分からなくても『習うより慣れろ』の精神で、とにかくテキストエディタで以下を打ち込んで、体で覚えてください。

リスト7: lesson07.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson07</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400px" height="300px"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(  0,   0);
        context.lineTo(400, 300);
        context.stroke();
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、Webブラウザ上に直線が描画されます。

<canvas>要素で、幅400 pixel×高さ300 pixelの描画領域を定義しています。
JavaScript側からcanvas要素の描画コンテキストに、(0, 0)→(400, 300)まで直線を引く命令を出しています。

2014年3月18日火曜日

Lesson06: HTML操作

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScriptは元々、Webページをインタラクティブにしたり、HTMLだけでは実現できないような動的なページをつくれるようにすることを目的に開発されました。
そのため、HTMLで記述された要素に対して、値を取得したり、設定したりといった操作も簡単に行うことができます。

今日のレッスンでは、2つの入力フォームから数値を取得し、足した結果を別の入力フォームに設定する例を取り上げます。いつもの通り、以下をテキストエディタで入力してください。

リスト6: lesson06.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson06</title>
  </head>
  <body>
    <input id="A" type="number" value="0" min="0" max="99" oninput="calc()" />
    +
    <input id="B" type="number" value="0" min="0" max="99" oninput="calc()" />
    =
    <input id="C" type="number" value="0" readonly />
  </body>
  <body>
    <input id="A" type="number" value="0" min="0" max="99" oninput="calc()" />
    +
    <input id="B" type="number" value="0" min="0" max="99" oninput="calc()" />
    =
    <input id="C" type="number" value="0" readonly />
    <script>
        function calc() {
            var a = document.getElementById("A").value;
            var b = document.getElementById("B").value;
             try {
                var sum = parseInt(a) + parseInt(b);
                document.getElementById("C").value = sum;
            } catch (e) {
                document.getElementById("C").value = "";
            }
        }
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、3つの入力フォームが表示されます。
1つ目と2つ目の入力フォームに数値を入力すると、たし算の結果が表示されます。

<input>要素はHTMLの入力フォームです。ここに指定しているid属性はHTMLファイル内で一意の識別子で、任意のHTML要素に付与できます。
id属性を指定することで、JavaScriptから、document.getElementById("識別子")という命令で要素オブジェクトを取得することができます。
oninput属性には、フォームに値が入力されるたびに、<script>内で定義したしたcalc()関数を呼び出す指定をしています。

calc関数は、取得した<input>要素のvalue属性から、入力された文字列を取得して、それを数値として扱ってたし算を行い、その結果を3つめの<input>要素のvalue属性に設定しています。
入力された文字列が数値以外の場合、parseInt()で例外が発生するため、その場合は、結果は空欄にしています。

2014年3月17日月曜日

Lesson05: 繰り返し

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScript言語で繰り返しを表現する方法の一つに、for文があります。
たとえば、以下の計算をしたい場合、すぐに思いつく方法は1から100までを一つずつ足していくことでしょうか。

1 + 2 + 3 + 4 + 5 + ... + 96 + 97 + 98 + 99 + 100 =

これを自分で計算するのは、とてもしんどいですね・・・。
こういう繰り返し作業は、実はコンピュータが得意とするものです。
さっそく、JavaScript言語を使って解いてみましょう。
いつものように、テキストエディタで以下を入力してみてください。

リスト5-1: lesson05-1.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson05</title>
  </head>
  <body>
    <script>
      var a = 0;
      for (var i=1; i<=100; i++) {
          a = a + i;
      }
      alert("Answer: " + a);
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、一瞬で答えが出てきましたね！
繰り返しは for (初期処理; 繰り返し条件; カウンタ変数の増減)という書式で、{から}で括られた命令の並びを条件が成り立つあいだ繰り返し実行します。

実はこの問題、1から順に数値を足さなくても、あっというまに答えを導くことができます。
この数は三角数と呼ばれ、n × (n + 1) ÷ 2という計算式で表されます。
せっかくですので、これもJavaScript言語で書いてみましょう。

リスト5-2: lesson05-2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson05</title>
  </head>
  <body>
    <script>
      var n = 100;
      var a = n * (n + 1) / 2;
      alert("Answer: " + a);
    </script>
  </body>
</html>

同じ答えが表示されましたね！
計算を何回も繰り返すことと数式を一つ解くこと、この例ではそれほど違いはないように見えますが、より複雑な処理の場合、どのように組むかによって性能がまったく変わってくることがよくあります。
プログラムが自由に組めるようになったら、次は、分かりやすいプログラムや効率のよいプログラムが書けるようにしていきたいですね。

2014年3月16日日曜日

Lesson04: 制御文

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

プログラムは、基本的に記述された命令の順序で実行されます。
多くのプログラム言語には、制御構文と呼ばれる命令の実行順序を変化させる構文が用意されています。
JavaScript言語で使われる主な制御構文ものとして、以下があります。

繰り返し(for文, while文）
条件分岐（if文, switch文）
関数呼び出し

繰り返しは、指定した命令の並びを一定の条件のもとで繰り返し実行するための構文です。
条件分岐は、ある条件が成り立つ場合とそうでない場合で、それぞれ異なる命令の並びを実行するための構文です。
関数呼び出しは、意味をもった命令のまとまりを関数として定義し、その関数を命令の並びの中から、一つの命令のように呼び出せるようにする構文です。

制御構文の詳細は次回以降、繰り返し、条件分岐、関数呼び出しの順に説明していきます。

2014年3月15日土曜日

Lesson03: イベント

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

JavaScriptで書かれたプログラムは、ユーザがボタンを押したなどの操作や、一定時間が経過したなどのイベントをきっかけに実行されることがよくあります。
最初は意味が分からなくてもいいので、以下をテキストエディタで打ち込んでください。

リスト3: lesson03.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson03</title>
  </head>
  <body>
    <input type="button" value="Click me" onclick="alert(1+1)" />
  </body>
</html>

打ち込み終わったら、Webブラウザで開いてみてください。
今回は、HTMLの <input> タグを使って、Webブラウザ上にボタンを表示します。そして、このボタンのonclick属性に、Lesson02で学んだalert（アラート）関数を指定することにより、ボタンが押されたときに、alert関数が呼ばれます。
また、alert関数に渡しているパラメータは、今回は引用符（ ' ' または " "）で括られた文字列ではなく、数式 1+1 です。そして、警告ダイアログには計算された結果が表示されます。

2014年3月14日金曜日

Lesson02: 初めてのJavaScript

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

これから、JavaScript言語について学びましょう。

まずは、以下のHTMLをテキストエディタなどで打ち込んでください。打ち込み終わったらファイルに保存して、Webブラウザから開いてみてください。

リスト2: lesson02.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson02</title>
  </head>
  <body>
    <script>
      alert("Hello, World");
    </script>
  </body>
</html>

HTMLの中の <script> から </script> までに書かれている内容がJavaScript言語で書かれたプログラムです。
このサンプルでは、Webブラウザに対して、alert（アラート）という命令を出しています。
作成したHTMLをWebブラウザで表示すると、警告ダイアログが表示されます。

2014年3月13日木曜日

Lesson01: HTML

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

HTML(HyperText Markup Language)とは、Webブラウザに文書や画像を表示するための言語です。
テキストエディタなどを使って以下を打ち込んでください。
打ち込んだらファイルに保存して、保存したファイルをWebブラウザで読み込んでください。

リスト1: lesson01.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson01</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <p>That's one small step for a man.</p>
  </body>
</html>

HTMLは、< と > で囲まれたタグというものを使って記述します。
タグには、基本的に開始タグと終了タグがあります。
たとえば、上記の例では、<html>から</html>までがHTML文書の開始と終了を表し、その中に、 <head>ヘッダ部分</head> と<body>本文</body>が含まれています。

ついでに説明してしまうと、<title>はタイトル、<h1>は見出し1(heading 1)を表し、大きい順に<h1>から<h6>まであります。また、<p>は段落(paragraph)を表しています。

上記のHTML文書を覚えようと努力する必要はありません。何も見なくてもすらすらと打ち込めるようになるまで、ただ繰り返し練習をしてください。

2014年3月6日木曜日

JavaScriptを選んだ理由

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

自分がはじめてプログラミングを学んだのは、BASIC言語でした。コンピュータの電源を入れたらすぐに使えるというもので、当時はゲームは本や雑誌に載っているプログラムを打ち込んで遊ぶというのが一般的でした。今からはとても考えられないような不便な環境でした。

さて、これからの子どもはどんな言語からはじめればよいのでしょうか。C言語やJava言語は環境を整える必要があります。PythonやRubyといったスクリプト言語も、Raspberry Piなど手元にLinux環境がなければ敷居は高いと考えます。
それから、プログラムの第一歩として、コンソール画面に『Hello, World』という一行を出すだけでは、目の肥えた現代の子どもたちの心を掴むことはなかなか難しいでしょう。

昨今たくさんのコンピュータ言語で溢れかえっているなかで、すぐにはじめられる環境が揃っていて、これからもずっと使われ続けるだろう言語。そして、かつてのBASICがそうだったように、手軽にグラフィックを扱うことができて、プレゼンテーション力を備えた言語、『JavaScript』がまさにその一つではないかと考えます。

はじめに

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

『息子に教えるJavaScript』へお越しくださいましてありがとうございます。
本blogは、これからコンピュータのプログラミングを息子に教えたいと考える父親もしくは母親が、どのように教えていけばよいかの一例として、参考にしていただくことを目的としています。

参考にできる点もあれば、参考にできない点もあるかもしれませんが、このblogで紹介する内容を自分流の教え方にアレンジしていただき、ぜひ、皆様の大切なお子様にプログラミングを教えてください。
子どもにとってみれば、親から教えてもらうことが何よりも嬉しいことでしょう！

小さい頃からプログラムを組めるようになる必要はあまりないと考えています。プログラムを知らなくても、色々なアプリケーションを通じてコンピュータを十分活用することはできます。

子どもにとってはピアノやギターを習ったり、サッカーや水泳で体をたくさん動かすことも、すごく大切なことです。これらのバランスをうまくとりながら、コンピュータについても少しずつ学んでいってほしいと考えております。

本blogがそのお手伝いをできるのであればさいわいです。

登録: 投稿 (Atom)