WebGPUを使うための「HTML5＋CSS＋JavaScript」の文法を学ぼう

JavaScriptの文法

JavaScriptではHTML5のタグを制御するプログラミングができます。例えば、本連載で解説するWebGPUは<canvas>タグの矩形に3D画像を描画しますが、JavaScriptでプログラミングをします。HTML5もタグによってはJavaScriptで制御しないと全ての機能が使えないものもあります。

それでは、JavaScriptの文法について解説していきましょう。ここで最低限知っておくべきなのは「変数」「代入演算子」「算術演算子」「比較演算子」「配列」「関数」「if文」「for文」「while文」「switch文」「クラス」です。

変数と演算子

変数は値を入れたり見たりするための「入れ物」のことです。変数の値を変えたり受け渡したりして計算し、プログラミングします。変数は「整数」「小数」「真偽値」などの「型」や、「クラス」などの「オブジェクト」を保持します。

「演算子」には代入演算子や算術演算子、比較演算子などがあります。算数や数学では「=」は「等号」ですが、プログラミングにおいては「代入」する代入演算子です。加減乗除の計算には算術演算子を使います。値の大小や等しいかには比較演算子を用います。

・変数と代入演算子の書式

let 変数 = 値;
変数1 = 変数2;

・算術演算子の書式

変数 = 値 + 値;
変数 = 値 - 値;
変数 = 値 * 値;
変数 = 値 / 値;
変数 = 値 % 値;
変数 += 値;
変数 -= 値;
変数 *= 値;
変数 /= 値;
変数 %= 値;

・比較演算子の書式

値1 > 値2
値1 >= 値2
値1 < 値2
値1 <= 値2
値1 == 値2
値1 != 値2

配列

複数の変数を1つにまとめたものが配列です。例えば、3Dでは数多くの三次元頂点の変数を持つため、それをまとめて配列で保持します。配列にはたいてい同じ種類(型やクラス)の変数を保持します。

・配列の書式

let 配列 = [値,値,…];
配列[インデックス番号] = 値;
変数 = 配列[インデックス番号];

関数

プログラム文を機能ごとにまとめるものが関数です。例えば、3Dなら「三角形を描画しなさい」というプログラム文を1つの関数にまとめて、その関数に三角形の頂点を引数で渡せば引数の形の三角形を描画します。

・関数の書式

function 関数名() {
  ステートメント
}

function 関数名(引数1,引数2,…) {
  ステートメント
  return 戻り値;
}

変数 = 関数名(値);

制御構文

プログラムは通常、上から下に命令を実行して行きますが、その流れを変えるのが制御構文です。if文は「もし○○なら」という条件分岐します。for文は条件が成り立つ間値をインクリメントなどして繰り返し処理し、while文は条件が成り立つ間処理を繰り返します。switch文は変数などの値次第で分岐します。

・if文の書式

if ( 条件1 ) {
  条件1が成り立つ場合
} else if ( 条件2 ) {
  条件1が成り立たず条件2が成り立つ場合
} else {
  条件1も条件2も成り立たない場合
}

・for文の書式

for ( 初期化; 条件; インクリメントなど処理) {
  条件が成り立つ間ループ処理
}

・while文の書式

while( 条件 ) {
  条件が成り立つ間ループ処理
}

・switch文の書式

switch ( 変数など ) {
  case 値1: 変数が値1の場合 break;
  case 値2: 変数が値2の場合 break;
  case 値3: 変数が値3の場合 break;
  default: 変数がそれ以外の場合
}

クラス

クラスは関数と変数を機能ごとにまとめるような働きをします。例えば、3Dなら三角形クラスで三角形の頂点変数(「プロパティ」と言う)を持ち、三角形を描画する関数(「メソッド」と言う)を持つことで機能をクラスでひとまとめにできます。ここで注意しなければならないのは、クラスは単なる「設計図」で、「実体」を持つには「new クラス名()」で「インスタンス」を生成し、代入演算子で変数に代入します。

・クラスの書式

class クラス名 {
  constructor(引数) {
    コンストラクタ
  }
  メソッド名(引数) {
    プロパティ名 = 引数;
  }
}

let 変数 = new クラス名(値); // インスタンスの生成と代入
変数.メソッド名(値);

JavaScriptを使った例

「css」→「main.css」と「index.html」に続いて、次のサンプルコードをコーディングしてWebブラウザでindex.htmlを開いてください。右上のLIGHT、GRAY、DARKの3つのメニューをクリックすると、それぞれライトグレー、グレー、ダークグレーの背景色に変わります(図4)。

サンプルコードでは外部.jsファイルでJavaScriptをコーディングします。また、メニューのリンクのイベントリスナーで'click'されたらスタイルシートの背景色を変更します。

・サンプルコード「lib」→「main.js」

window.onload = function() {
  let light = document.querySelector('#light');
  light.addEventListener('click',() => {
    document.body.style = 'background-color: #ccc;';
  });
  let gray = document.querySelector('#gray');
  gray.addEventListener('click',() => {
    document.body.style = 'background-color: #999;';
  });
  let dark = document.querySelector('#dark');
  dark.addEventListener('click',() => {
    document.body.style = 'background-color: #666;';
  });
}

【サンプルコードの解説】
「onload」メソッドでindex.htmlファイルのDOMを全て読み込み、完了したら呼ばれます。
セレクタのIDが「#light」の<a>タグを取得し「light」変数に代入します。
lightがクリックされたら背景色をライトグレーにします。
「#gray」セレクタがクリックされたら背景色をグレーにします。
「#dark」セレクタがクリックされたら背景色をダークグレーにします。

おわりに

今回はWebGPUコンテンツを作る上で、最低限知っておくべきHTML5＋CSS＋JavaScriptの文法と、それを使った簡単なサンプルを解説しました。

次回は、本連載で作る「UltraMotion3D」ライブラリの完成版を使って、3Dオブジェクトをアニメーションさせたり、キャラクターをアニメーションさせたりしてみます。