JavaScript入門：変数・型・条件分岐・繰り返しを学ぶ

JavaScriptは、ブラウザーの画面操作や、Node.jsによるサーバー側の処理に使われる言語です。この連載では、基本構文から始め、最後にクラスを使った並列タスクキューを実装します。第1回では、値を変数へ保存し、条件と繰り返しで処理する流れを学びます。

実行環境を用意する

Node.jsでファイルを実行する

サポート中のNode.js LTSをインストールし、ターミナルでバージョンを確認します。この記事の例は外部パッケージを使いません。作業用フォルダーにbasics.mjsを作り、以下のコードを保存してください。

node --version
node basics.mjs

.mjsはJavaScriptのES Modulesとして扱われる拡張子です。ブラウザーの開発者ツールでも短い式を試せますが、ファイルに保存すると変更前後の結果を比較しやすくなります。

JavaScriptと実行環境を区別する

ifや関数などは言語の機能です。documentはブラウザーのDOM APIで、通常のNode.jsにはありません。逆にNode.js固有のファイル操作APIを、そのままブラウザーで使うこともできません。連載ではブラウザー用の例とNode.js用の例を明記します。

変数と値の型を理解する

constとletを使い分ける

再代入しない変数はconst、後から別の値を入れる変数はletで宣言します。constは変数への再代入を禁止しますが、オブジェクトの中身を変更できなくするものではありません。

文字列と数値を区別する

文字列の"100"と数値の100は異なります。+は文字列の連結にも使われるため、計算前に型を意識します。比較には、型変換を行わない===を基本として使います。

次のコードをbasics.mjsへ保存します。

const learner = '花子';
let completed = 0;
const scores = [80, 65, 92];
const passingScore = 70;

for (const score of scores) {
  if (score >= passingScore) {
    completed += 1;
    console.log(`${score}点：合格`);
  } else {
    console.log(`${score}点：復習`);
  }
}

const total = scores[0] + scores[1] + scores[2];
const average = total / scores.length;

console.log(`${learner}さん：${scores.length}科目中${completed}科目合格`);
console.log(`平均点：${average.toFixed(1)}`);
console.log('100' + 20); // 10020
console.log(Number('100') + 20); // 120
console.log('100' === 100); // false

条件分岐と繰り返しを読む

ifで処理を分ける

score >= passingScoreがtrueなら合格側、そうでなければ復習側を実行します。=は代入、===は比較です。条件式の中で意図せず代入していないか確認してください。

for...ofで配列の値を取り出す

for...ofでは配列の要素を順に取り出します。例のcompleted += 1は、現在の値へ1を加えて保存する処理です。

このプログラムでは80点と92点が合格となり、合格数は2、平均点は79.0です。toFixed(1)の戻り値は表示用の文字列です。後で数値として計算する値と、画面に表示する文字列を区別します。

空の値と数値変換に注意する

null・undefined・NaNを区別する

nullは値がないことを明示するときに使います。undefinedは値が設定されていない場合などに現れます。NaNは数値として計算できなかった結果を表し、NaN === NaNはfalseです。判定にはNumber.isNaNなどを使います。

入力文字列を確認してから変換する

空文字列をNumberへ渡すと0になります。入力のない状態を0点と誤解しないよう、空欄を先に確認します。次のコードは別ファイルparse-score.mjsとして保存します。

export function parseScore(input) {
  if (typeof input !== 'string' || input.trim() === '') {
    throw new TypeError('点数を文字列で入力してください。');
  }
  const score = Number(input);
  if (!Number.isFinite(score) || score < 0 || score > 100) {
    throw new RangeError('点数は0以上100以下の数値にしてください。');
  }
  return score;
}

console.log(parseScore(' 85 ')); // 85
try {
  parseScore('未入力');
} catch (error) {
  console.log(error.message);
}

練習と次のステップ

自分で変更する

• 合格点を80点へ変えて、結果を予想してから実行します。
• 点数の配列を変更します。要素数を変えると、現在の合計計算が3科目専用だとわかります。
• parseScoreへ空白、0、100、101を渡して境界の動作を確認します。

関数へ処理をまとめる

次は関数・スコープ・モジュールで、配列の長さが変わっても使える関数を作ります。全体の学習順はJavaScriptの記事一覧で確認できます。

参考資料

• MDN：文法とデータ型
• MDN：制御フローとエラー処理
• Node.js：ダウンロード