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

このサイトは移転しました。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()"でも構いません。

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に画像を貼り付けます。

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()関数を呼び出してください。

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)まで直線を引く命令を出しています。

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()で例外が発生するため、その場合は、結果は空欄にしています。

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>

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

Lesson04: 制御文

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

---

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

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

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

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

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 です。そして、警告ダイアログには計算された結果が表示されます。

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ブラウザで表示すると、警告ダイアログが表示されます。

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文書を覚えようと努力する必要はありません。何も見なくてもすらすらと打ち込めるようになるまで、ただ繰り返し練習をしてください。

JavaScriptを選んだ理由

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

---

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

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

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

はじめに

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

---

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

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

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

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

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