JavaScriptの文法
まずはJavaScriptの文法の書式だけ解説します。後から実際のサンプルを例示します。JavaScriptはC/C++に似ています。クラス（class）の文法など、本連載では使わない文法は解説を省略します。
変数と演算子の文法
変数はRust同様、値を入れてみたり、後から値を上書きしたりできる入れ物のようなものです。演算子を使って変数に代入したり、計算した値を代入や取得できたりします。
計算に使う代入演算子と算術演算子と複合代入演算子は、ほぼRustと同じです。計算に使う数値の「データ型」は「Number（整数または浮動小数点数）」と「BigInt（長整数）」です。データ型には他にも「Boolean（論理値）」と「null」と「undefined（未定義）」と「String（文字列）」と「Symbol（シンボル）」と「Object」があります。
| 演算子 | 役割 |
|---|---|
| = | 代入演算子 |
| + | 加算の算術演算子 |
| - | 減算の算術演算子 |
| * | 乗算の算術演算子 |
| / | 除算の算術演算子 |
| % | 剰余の算術演算子 |
| += | 加算の複合代入演算子 |
| -= | 減算の複合代入演算子 |
| *= | 乗算の複合代入演算子 |
| /= | 除算の複合代入演算子 |
| %= | 剰余の複合代入演算子 |
配列の文法
配列は0～複数個の変数を同時に1つにまとめて持つことができる入れ物のようなものです。次の配列の書式のように、配列を宣言して、配列の要素を代入し、配列の要素を取得できます。
配列の書式
let 配列名 = [要素1,要素2,・・・]; // 配列の宣言
配列名[インデックス番号] = 値; // 配列の要素に代入
let 変数 = 配列名[インデックス番号]; // 配列の要素を取得
関数の文法
JavaScriptでは関数はfunctionで宣言し、引数と戻り値にデータ型を指定する必要はありません。「静的型付け言語」のRustと違い「動的型付け言語」だからです。ただし本連載では解説しませんが、「TypeScript（JavaScriptを高度に拡張したようなプログラミング言語）」は静的型付け言語なのでデータ型の指定が必要です。
関数の書式
function 関数名(引数1,引数2,・・・) {
ステートメント
return 戻り値；
}
JavaScriptの制御構文
Rust同様JavaScriptも上から下にプログラムが流れて実行されます。その流れを変えるのが制御構文です。条件に応じて分岐するif文とswitch文の条件構文と、繰り返し処理するfor文とwhile文などがあります。
switch文はRustのmatch文に当たるもので、それ以外はRustの文法に近いです。他にもforEach文という繰り返し構文もあり、これはRustのfor文で配列の要素を1つずつ繰り返すのに似ています。
分岐構文if文の文法
Rust同様「もし○○なら」という条件構文はif文を使います。ifだけでも、if～elseでも、if～else if～elseでも使用可能です。また、else ifはいくつでも条件を並べることができます。
分岐構文if文の書式
if (条件1) {
条件1が成り立つ場合
} else if (条件2) {
条件1が成り立たず条件2が成り立つ場合
} else {
条件1も条件2も成り立たない場合
}
if文などで条件は大抵「比較演算子」などの条件式を使います。ここに書いた比較演算子はRustも全く同じ文法です。
| 比較演算子 | 意味 |
|---|---|
| A > B | AがBより大きい |
| A >= B | AがB以上 |
| A < B | AがBより小さい |
| A <= B | AがB以下 |
| A == B | AとBが等しい |
| A != B | AとBが異なる |
分岐構文switch文の文法
次の書式を見てもらった通り、switch文の変数1の値に応じて、どのcaseの値と一致するか調べて一致するステートメントを実行し、どのcaseにも当てはまらない場合はdefaultを実行します。
分岐構文switch文の書式
switch (変数1) {
case 値1: ステートメント1 break;
case 値2: ステートメント2 break;
case 値3: ステートメント3 break;
default: ステートメント4
}
繰り返し構文for文の文法
次のfor文の書式の通り、変数1が値1から始まって、変数1が加減乗除などされていくうちに、条件（大抵比較演算子を用いる）が成り立つ間、ステートメントをループして実行します。
繰り返し構文for文の書式
for (let 変数1 = 値1; 条件; 変数1の加減乗除など) {
ステートメント
}
繰り返し構文while文の文法
次の書式を見てもらった通り、while文は条件が成り立つ間、ステートメントをループして実行します。この条件も大抵比較演算子です。条件が成り立たなくなったら、ループを抜け出します。
繰り返し構文while文の書式
while (条件) {
ステートメント
}
JavaScriptを使ったサンプル
次のサンプルスクリプト「index.html」は、2ページ目のindex.htmlを書き換えて、<h1>タグの"CodeZine"の文字列をクリックしたら"クリックしました！"の文字列に入れ替えるプログラムを組みます。「<script src="main.js"></script>」でJavaScriptを記述したmain.jsファイルを読み込みます。JavaScriptはhtmlファイルの外部ファイルにも、htmlファイル内にも記述することができます。
main.jsファイルで<h1>タグの「addEventListener('click',()=>{});」メソッドで<h1>タグのクリックをフックし、<h1>タグの「innerText」プロパティで<h1>タグ内の文字列を指定します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tauri 2.0ではじめるRustプログラミング</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
(後略)
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
let h1 = document.querySelector('h1');
h1.addEventListener('click', (e) => {
if (h1.innerText == "CodeZine") {
h1.innerText = "クリックしました！";
} else {
h1.innerText = "CodeZine";
}
});
});
サンプルコードの解説
全てのDOMが読み込み完了した後なら「document.querySelector」メソッドでDOMの<h1>タグが取得できるようになるのでh1変数に代入します。
<h1>タグをクリックするたびに、<h1>タグを"CodeZine"と"クリックしました！"の文字列に交互に入れ替えます。
おわりに
今回は、Webページを作るのに欠かせないHTML5＋CSS＋JavaScriptの文法と使い方について解説しました。次回は、本題のお絵描きアプリの開発に入っていきます。まずはフロントエンドだけでプログラミングしてJavaScriptでプログラムを制御します。
