Nagashima Laboratory

カラーピッカー2（JavaScript）

カラーピッカー1で作成したプログラムに追記をして、条件分岐を加えます。また、これまでの制作の中で出てきた文法事項についても補足説明をしています。

キーワード：条件分岐（if/else）, データ型, 演算子

作成例（完成イメージ）

【準備】カラーピッカー1で作ったデータに追加していきます。

文字列の結合

これまでは、文字コードだけが表示される形になっていましたが、冒頭に「コード：」を追加して「コード：#000000」のように表示されるように変更します。

文字列をつなげるには + の記号を使います。文字列部分は、シングルクオート（’）で囲っています。ダブルクオート（”）でも動作します。

▼script.js

function changeColor(){
  document.body.style.backgroundColor = color.value;

  //カラーコードを表示
  text.textContent = 'コード：' + color.value;

}

条件分岐（if/else）

値の内容によって、実行するコードを変えたいときには、条件分岐を使います。JavaScriptでは if を使って「条件に当てはまるときには○○○、当てはまらないときには△△△」という設定を行います。この構文は if文 といいます。

▼script.js

//カラーコードを表示
if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
}

「color.value」の値が「#ffffff」と等しいときには「(white)」の表記を追加する、という設定になります。

このままでは、#ffffff 以外のときに、動作しなくなってしまいますので、条件に合わないときの動作も定義が必要です。そこで else を使用します。

elseの追加

else を使うと、条件に当てはまらないときの動作を定義できます。今回の例では「#ffffffではないとき」の振る舞い方を決められます。

▼script.js

  //カラーコードを表示
  if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
  } else {
    text.textContent = 'コード：' + color.value;
  }

else if の追加

else if を使うと、条件を更に追加できます。下記の例では、#000000（黒）のときに「(black)」の表記が追加されるようになります。

▼script.js

  //カラーコードを表示
  if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
  } else if (color.value === '#000000') {
    text.textContent = 'コード：' + color.value + '(black)';
  } else {
    text.textContent = 'コード：' + color.value;
  }

【補足】データ型

プログラムで扱うデータにはいくつかの種類があり、その種類のことを「データ型」といいます。

String文字列シングルクオート（’）、ダブルクオート（”）、バッククオート（`）で囲った文字列
Number数値-（253 – 1）〜253 – 1の数値
Boolean真偽値true/false
データ型の例

同じ数字であっても

a = 1;

と書くと「数値（Number）」として処理され

a = "1";

と書くと「数値」ではなく「文字列（String）」になります。

下の２例の違いを確認してみてください。

▼ブラウザのコンソールに入力①

a = 1;
b = 1;
console.log ( a + b );

▼ブラウザのコンソールに入力②

a = 1;
b = "1";
console.log ( a + b );

②の例のように数値と文字列が混在した場合は、数値を文字列に「暗黙的に」変換したあと、文字列として結合します。

【補足】演算子

+ や = などの記号を演算子といい、値をものに何らの処理を行い、その結果を返します。

▼ブラウザのコンソールに入力①

a = 1 + 2;
console.log( a );

この例ではまず「1 + 2」が計算され、その計算結果である「3」が定数 a に代入（=）されます。

数学の式と同じように（）で囲むと計算の優先順位を変えられます

▼ブラウザのコンソールに入力②

console.log ( 1 + 2 * 3 );

▼ブラウザのコンソールに入力③

console.log ( (1 + 2) * 3 );

数値の計算に使う演算子は、算術演算子と呼ばれ、次のようなものがあります。

+加算（足し算）
–減算（引き算）
*乗算（かけ算）
/除算（割り算）
%剰余（割り算したときの余り）
**べき乗（3**2と書くと、3の2乗）
++1を加算（インクリメント演算子）
—1を減算（デクリメント演算子）
算術演算子

【補足】等価（==）と厳格な等価（===）

==と===はどちらも「値が等しいかどうか」を比較する方法ですが、イコールが3個の===の方がより「厳格」です。

下の２例の違いを確認してみてください。

▼ブラウザのコンソールに入力 ①

a = 1;
b = "1";
console.log( a == b );

▼ブラウザのコンソールに入力②

a = 1;
b = "1";
console.log( a === b );

②の例では、同じ「1」であっても、a は数値、bは文字列のため、データ型が異なります。そのため、falseが返されます。

①の例では、型の違いは考慮されず、同じ「1」であるため、trueになります。

===を使った方が、より正確に比較ができますので、同じ値かどうかを比較したいときには、基本的には===を使う方がわかりやすいです。

参考書籍・リンク