はじめての JavaScript と p5.js

p5.js を使いながらプログラミングの基礎概念と JavaScript を習得していきましょう。

演習：p5.js Web Editor を開こう

p5.js のウェブサイトにある "Start Coding" ボタンをクリックしてください。

最初から以下のようなプログラムが少しだけ書かれていますが、これは p5.js を使う限り、毎回書くことになる定型的な部分です。プログラムの上には実行ボタンと停止ボタンがあります。実行結果は右のプレビューに表示されます。下にあるコンソールはプログラムのエラーがあるときなどにメッセージが表示される部分です。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

これだけのプログラムからも学べることがあります。テキストが色分けされているのがわかりますか。プログラミング言語にはそれぞれ特別な意味を持つキーワードがあり、それがわかりやすいように色を付けた状態で表示・編集するのが一般的です。色分けがされていると入力ミスなどに気付きやすくなるので重宝します。どういうキーワードがどういう意味を持つのかはこれから少しずつ扱っていきます。

演習：プログラムを入力して、結果を見てみよう

最初にしてはまあまあ長いプログラムになりますのでコピペ推奨です。右上の Copy ボタンを押してコピーし、エディタに貼り付けてください。各行の // より後の部分は「コメント」と呼ばれるプログラム中に書けるメモのようなもので動作には関係ありません。

function setup() {
  createCanvas(128, 128);
  strokeWeight(4);     // 枠線を太くする(当社比4倍)
}

function draw() {
  background(0);       // 背景を黒にする
  fill(178, 100, 162); // 塗りつぶし色を紫にする
  triangle(12,120,116,120,116,10); // 三角形を描画する(1) 
  fill(94, 185, 84);   // 塗りつぶし色を緑にする
  triangle(0,108,106,108,106,0);   // 三角形を描画する(2)
  fill(255);           // 塗りつぶし色を白にする
  textSize(32);        // テキストのサイズを32にする
  textFont("serif");   // テキストのフォントを変える
  text("46", 68, 100); // "46" というテキストを描画する
}

描画の基本

それでは今動いたプログラムを読み解いていきましょう。だいたい1行が1処理に対応していて、上から下へと順番に実行されていきます。書くときは試行錯誤があるので必ずしも上から順番に書くわけではありません。

ステップ 1 / 7

キャンバスサイズを128x128に設定して、背景色を黒にする

function setup() {
  createCanvas(128, 128);
}

function draw() {
  background(0);
}

実行結果

ウェブエディタ上でも試行錯誤を体験してみましょう。 // を行の先頭に付け加えると、その行全体がコメントになって、その処理が実行されなくなります。これを利用すると、その処理があるときとないときを簡単に見比べることができます。よく使うのでそのためのキーボードショートカットも用意されています（Windows では Ctrl + /, Mac では Command + /）。たとえば fill の行をコメントにして保存すると（下参照）三角形の色が変わるので「これは色を変える処理だ」とわかります。

function draw() {
  ...
  // fill(178, 100, 162);
  ...
}

命令の順番も重要です。試しに以下のように命令の順番を入れ替えてみましょう。

...
fill(178, 100, 162); // 塗りつぶし色を紫にする
triangle(0,108,106,108,106,0);   // 三角形を描画する(2)
triangle(12,120,116,120,116,10); // 三角形を描画する(1)
fill(94, 185, 84);   // 塗りつぶし色を緑にする
...

三角形の色が2つとも紫になってしまいましたね。ある色の図形を描画するためには、まず先に色を変えて、その後で描画しなければならないということです。さらに以下のように順番を入れ替えてみましょう。

...
fill(94, 185, 84);   // 塗りつぶし色を緑にする
triangle(0,108,106,108,106,0);   // 三角形を描画する(2)
fill(178, 100, 162); // 塗りつぶし色を紫にする
triangle(12,120,116,120,116,10); // 三角形を描画する(1)
...

今度は2つの三角形の前後が入れ替わってしまいました。続けて図形を描画すると後から描画したものによって上書きされるので、手前に重なって描画されるということですね。ここまでをまとめると：

1行に1命令。上から下へ実行されていく。
先に塗りつぶし色・線の太さ・色などを設定してから、図形を描画する。
複数の図形を描画すると、後に描画したものが手前に重なって描画される。

思い通りに描画する手順を正確に言語化するのはそれほど易しいことではありません。だんだんと慣れていきましょう。

文、関数

プログラムの意味が大体わかったところでいくつか用語を覚えていきましょう。 JavaScript のプログラムは文 (statement) と呼ばれる命令の基本単位から成っています。普通は1行に1つの文を書きます。1行に2つ以上の文を書くときはセミコロン ; で区切る必要があります。 1行に1文しか書かない場合もセミコロンをつけておくのが無難です。

function は複数の文を1つの処理としてまとめることができる機能です。日本語では「関数」と呼びます。関数を作るときには以下のように書きます。括弧の種類等も決まっていますので注意してください。このような決まった書き方のことを文法 (syntax) と呼びます。

function 関数名(){
  // 好きなだけ
  // 文（命令）を
  // 書ける
}

一度、関数を作っておけば 関数名() と書くことでその処理を呼び出すことができます。何度も出てくるような一連の処理は関数にしておくと便利です。

最初の例では setup() と draw() という2つの関数を作っています。これらの名前の関数には、以下の通り特別な役割があって p5.js によって自動的に呼び出されます。

setup() は、プログラム実行開始時に呼び出されます。画面サイズの変更など最初に1回だけ行いたい処理はここに書きます。
draw() は、繰り返し呼び出されます。ゲームやアニメーション作品で必要な繰り返しの画面描画等、繰り返し行いたい処理はここに書きます。

今回の例では draw() で毎回まったく同じ図形を描画しますので静止画に見えています。実は人知れず秒間60回ほど再描画しています。少しずつ違う図形を描画するとアニメーションになりますが、これは後の回で扱います。

p5.js の命令いろいろ

実は background, strokeWeight, fill, triangle, ... 等の命令も関数の呼び出しです。これらは p5.js に含まれる関数で、ほかにも色々なものが用意されています。 p5.js のように色々な機能を簡単に使えるように用意したプログラム集のことを「ライブラリ」と呼びます。

p5.js の機能は順番に少しずつ取り上げていきますが、 Reference を見ていただくと一覧がありますので、自分で読んで色々試してみるのも良いでしょう。（説明は英語ですが、使用例も載っているのでわかりやすいと思います。）こういうのは覚えきれるものではありませんので慣れている人でもちょくちょく Reference を確認します。いつでもすぐ確認できるようにブックマークに入れておくことをお勧めします。

関数の引数

ところで、これらの関数を呼び出すときには丸かっこの中に数字や文字列を書いていますね。どんな値を書くかによって関数の処理内容が変わっています。同じ fill でも値によって違う色に設定することができ、同じ triangle でも値によって違う位置に三角形を描画することができるというわけです。

...
fill(178, 100, 162); // 178, 100, 162 = 紫
triangle(12,120,116,120,116,10); // 12,120,116,120,116,10 = 三角形の位置
fill(94, 185, 84);   // 94, 185, 84 = 緑
triangle(0,108,106,108,106,0);   // 0,108,106,108,106,0 = 三角形の位置
...

このような、関数に与える値のことを引数ひきすう (parameter) と言います。関数を呼び出す際、丸かっこの中にカンマ区切りで書きます。関数によって必要な引数の個数や意味が異なります。色も位置も引数として指定します。

色の指定

たとえば、 fill に3つの引数を与えた場合、前から順に赤、緑、青の強さを表します。3色の合成によって様々な色を指定するわけですね。それぞれの値は0～255の間の数値で、値が大きいほどその色が強くなります。数値を変えて色の変化を観察してみましょう。こういった内容は Reference の fill の項目に記載されています。 fill に引数1つを与えた場合 fill(n) は fill(n, n, n)と同じ意味になり、灰色になります。色に関係する命令は他にもありますが、どれも同じように色を指定すると思っていただいて大丈夫でしょう。

自分の使いたい色の数値を探すのは面倒なので color picker と呼ばれるツールを使います。Google で color picker と検索すると表示されるのを使うと簡単です。

位置の指定（座標）

画面上の1点を指定するには2つの数値が必要です。数学にも出てきたx座標とy座標です。三角形の位置を決めるには3点を指定する必要がありますから、引数は2x3=6つ必要というわけです。数学で出てくる座標と違って原点 (0,0) は左上隅で、右に行くほどx座標が大きくなり、下に行くほどy座標が大きくなりますのでご注意ください。プログラム中の数値を変えて位置の変化を観察してみましょう。

座標の説明

演習：エラーに慣れ親しもう

プログラムは1文字書き間違えるだけでも動作が変わってしまいます。関数の名前を間違えるなど、間違い方によってはエラーとなって動かなくなってしまうこともあります。エラーが出たときにはメッセージがコンソールに出力されますので、それをヒントに修正していきます。

慣れないうちはエラーメッセージが表示されるとパニックになるかもしれません。わざとエラーを作ってどう表示されるか確認しつつ、早めに慣れてしまいましょう。エラーの内容とエラーの箇所（プログラム中での行数）が表示されます。

関数名を間違えてみる例： fil(178, 100, 162);
閉じ括弧を忘れてみる　例： fill(178, 100, 162;
余計なカンマを入れてみる　例： fill(178, 100,, 162);

よく出るエラーメッセージの例を挙げておきます。

ReferenceError: ... is not defined は「そんな名前のものは定義されていないぞ」という意味で、スペルミスが多いです。
SyntaxError: missing ... は「...が（あるはずなのに）ないよ」という意味で、括弧の書き忘れなどが多いです。

それ以外、コンソールに何もエラーは出ないんだけど思った通りに動かないという場合が一番やっかいです。そういう場合に使う道具の1つとしてコンソールに表示する命令があります。プログラム中に console.log("表示したい文字列") と書くとその命令が実行されたときにコンソールに文字列が表示されます。

Next: 計算で図形を描く →