JavaScriptをもう一度学びたい人へ 演算子、条件文、関数の基礎をおさらい

この春、JavaScriptを始めた新人さんも。いつもコピペで済ませているデザイナーさんも。JavaScriptの演算子、条件文、関数の基礎をおさらい。

JavaScriptでクリエイティブなプログラミングに取り掛かる前に、しっかりと基礎を固めることはとても重要です。この記事では自分でプログラムを書けるようになるためにもっとも重要なJavaScriptの基礎を説明します。説明するのは、演算子、条件文、関数です。

始める前に、前提として基本的なJavaScriptの構文、コメント、データ型、変数への値の代入を理解してください。おぼつかないという人は『これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する』を参照してください。

注：このガイドはJavaScriptおよびプログラミングのまったくの初心者を対象としています。そのため多くの概念はシンプルな方法で示し、strictモードのES5シンタックスを使っています。

準備はできましたか？ それでは始めましょう。

JavaScriptの演算子

JavaScriptの演算子は、データでいろいろな計算をするために使われる記号です。JavaScriptではいくつかのタイプの演算子が使われますが、この記事ではもっとも一般的なものを例とします。代入演算子、算術演算子、比較演算子、論理演算子です。

代入演算子

代入演算子は、通常はデータを変数に代入します。下の例では文字列"Europe"を変数continentに代入しています。

var continent = "Europe";

代入はイコール記号（=）で表されます。異なるタイプの代入演算子もありますが（ここで一覧できます）、イコール記号の演算子がもっとも一般的です。

なお、記事中の例はすべてconsole.log()関数またはChromeデベロッパーツールのコンソールで実際に試せます。

算術演算子

JavaScriptでもほかのプログラミング言語と同じく、計算機のように演算する機能が組み込まれています。算術演算子は数値あるいは数値を入れた変数を使って算術演算をします。すでに知っていると思いますが、このうちもっともよく使われるのは、加算、減算、乗算、除算の四則演算です。

■加算（足し算）：Addition
加算演算子はプラス記号（+）で表され、2つの値を足し合わせた結果（和）を返します。

var x = 2 + 2; // x returns 4

■減算（引き算）：Subtraction
減算演算子はマイナス記号（-）で表され、2つの値を引き算した結果（差）を返します。

var x = 10 - 7; // x returns 3

■乗算（掛け算）：Multiplication
乗算演算子はアスタリスク記号（*）で表され、2つの数値を掛け算してその結果（積）を返します。

var x = 4 * 5; // x returns 20

■除算（割り算）：Division
除算演算子はスラッシュ記号（/）ｌで表され、2つの数値を割り算した結果（商）を返します。

var x = 20 / 2; // x returns 10

■剰余（余り）：Modulus
加減乗除に比べて少し認知度が低いのが剰余演算子で、パーセンテージ記号（%）で表され、割り算したあとの余り（剰余）を返します。

var x = 10 % 3; // returns 1

10割る3は3で、余りが1ですね。

■インクリメント演算子：Increment
インクリメント演算子はプラス記号2つ（++）で表され、数値が1だけ増加します。

var x = 10;
x++; // x returns 11

この場合は代入後に実行されます。あるいは++xのように書けば、代入前に実行されます。以下の2つを比べてください。

var x = 10;
var y = x++;
// y is 10, x is 11

var x = 10;
var y = ++x;
// y is 11, x is 11

■デクリメント演算子：Decrement
デクリメント演算子はマイナス記号2つ（--）で表され、数値が1だけ減少します。

var x = 10;
x--; // x returns 9

インクリメント演算子と同様に、こちらも--xと書けます。

比較演算子

比較演算子は2つの値が等しいか異なるかを評価し、true（真）もしくはfalse（偽）を返します。通常これらは論理式の中で使います。

■等価演算子：Equal
JavaScriptでは2つのイコール記号（==）は両者が等価（等しい）なことを意味します。はじめて学ぶ人は1つ、2つ、3つのイコール記号が表す意味の違いに混乱しますが、とにかくイコール記号が1つ（=）だと変数への値の代入の意味であり、等しいという意味ではないことを覚えておいてください。

var x = 8;
var y = 8;

x == y; // true

この演算はデータ型に対して寛容で、数値の代わりに文字列が使われていてもtrueが返ります。

var x = 8;
var y = "8";

x == y; // true

■厳密等価演算子：Strict Equal
JavaScriptにおいて3つのイコール記号（===）は厳密な等価（等しい）を意味します。

var x = 8;
var y = 8;

x === y; // true

厳密等価演算子でtrueが返るにはデータ型と値の両方が等しくなっている必要があり、普通の等価演算子（==）よりも正確に評価できるためより頻繁に使用されます。

var x = 8;
var y = "8";

x === y; // false

■不等価演算子：Not Equal
JavaScriptでは等号の前にエクスクラメーション記号（!=）を付けると不等価（等しくない）の意味になります。これはちょうど==の逆の演算で、==と同じくデータ型を評価せず値のみで評価されます。

var x = 50;
var y = 50;

x != y; // false

以下のようにデータ型が文字列でも数値でも同じ値として扱われます。

var x = 50;
var y = "50";

x != y; // false

■厳密不等価演算子：Strict Not Equal
JavaScriptでは2つの等号の前にエクスクラメーション記号（!==）を付けると厳密な不等価を意味します。ちょうど===の逆で、値とデータ型の両方を考慮します。

var x = 50;
var y = 50;

x !== y; // false

厳密不等価演算子は以下のように文字列型と数値型は異なったものとして評価します。

var x = 50;
var y = "50";

x !== y; // true

■小なり演算子（より少ない）：Less Than
そのほかおなじみの記号、小なり（<）演算子は左側の値が右側の値よりも小さいかどうかを評価します。

var x = 99;
var y = 100;

x < y; // true

■小なりイコール演算子（より小さいまたは等しい）：Less Than or Equal To
小なりイコール（<=）演算子は小なり演算子と同じですが、両者の値が等しい場合にもtrueが返ります。

var x = 100;
var y = 100;

x <= y; // true

■大なり演算子（より大きい）：Greater Than
大なり（>）演算子は左側の値が右側の値よりも大きいかどうかを評価します。

var x = 99;
var y = 100;

x > y; // false

■大なりイコール演算子（より大きいまたは等しい：Greater Than or Equal To）
大なりイコール（>=）演算子は大なり演算子と同じですが、両者の値が等しい場合にもtrueが返ります。

var x = 100;
var y = 100;

x >= y; // true

論理演算子

論理演算では、true（真）、false（偽）の判定のために上で説明した比較演算子がよく使われます。真偽判定には、これまでに説明したもののほかにも以下の3つの演算子が使われます。

次項の条件文を学ぶ前に、これらの演算子を理解しておくことはとても重要です。

■And演算子
And演算子は2つのアンパサンド記号（&&）で表されます。もし&&の左側の式と右側の式の両方がtrueであれば、And演算子を含む式全体の評価結果がtrueになります。

var x = 5;

x > 1 && x < 10; // true

上の例では、xの値は5です。この論理式では、xが1より大きくかつ10より小さいかどうかを評価しており、その結果は真です。

var x = 5;

x > 1 && x < 4; // false

上の例では、xは1より大きいものの、4より小さくないためにfalseが返ります。

■Or演算子
Or演算子は2つのパイプ（縦棒）記号（||）で表されます。もしの左側と右側の式のどちらか1つでもtrueであれば、||を含む式全体の評価結果がtrueになります。

var x = 5;

x > 1 || x < 4; // true

xは4より小さくありませんが1より大きいため、この式の結果はtrueです。

■Not演算子
最後に紹介する論理演算子はNot演算子で、エクスクラメーション記号（!）で表され、式の結果がtrueならfalseを、式の結果がfalseならtrueを返します。また値が存在するときにもfalseが返りますが、false（偽）と判定するわけではありません。これを理解するため少し時間をとりましょう。

var x = 99;

!x // false

xは存在し、値も入っています。!xの結果はfalseが返ります。あるいはブーリアン型の判定もできます。もし中の値がfalseなら、!演算子で判定するとtrueが返ります。

var x = false;

!x // true

この演算子は一見ややこしく見えますが、次項の条件文を理解すると合点がいくと思います。

演算子の優先順位

学校で数学を習う際に、演算子の優先順を覚えるためにPEMDAS（Please Excuse My Dear Aunt Sally：私の叔母・サリーを許して）という語呂合わせを習ったことがあるかもしれません。この頭文字はそれぞれ、括弧（Parentheses）、指数（Exponents）、乗算（Multiplication）、除算（Division）、加算（Addition）、減算（Subtraction）を表します。

JavaScriptにはさらに多くの演算子があることを別にすれば、同じ考え方が当てはまります。演算子の優先順位の表はMDNのリファレンスに掲載されています。

説明してきた演算子を、優先順位が高い順に並べました。

• 括弧（()）：Grouping
• Not演算子（!）：Not
• 乗算（*）：Multiplication
• 除算（/）：Division
• 剰余演算（%）：Modulus
• 加算（+）：Addition
• 減算（-）：Subtraction
•  小なり演算（<）：Less than
• 小なりイコール演算（<=）：Less than or equal
• 大なり演算（>）：Greater than
• 大なりイコール演算（>=）：Greater than or equal
• 等価演算（==）：Equal
• 不等価演算（!=）：Not equal
• 厳密等価演算（===）：Strict equal
• 厳密不等価演算（!==）：Strict not equal
• And演算（&&）：And
• Or演算（||）：Or
• 代入（=）：Assignment

例を挙げます。以下の式でxの値はいくつになると思いますか？

var x = 15 - 5 * 10;

-35と答えた人は正解です。その理由は掛け算は引き算よりも優先されるので、JavaScriptエンジンは最初に5*10を計算してからその結果を15から引きます。

演算の優先順位を変えるには括弧を使用します。

var x = (15 - 5) * 10;
// x is 100

条件文

いままでにJavaScriptのコードを見たことがあるなら、おそらく見慣れた英単語のifやelseを目にしているでしょう。これらは条件文、あるいは条件式がtrue（真）かfalse（偽）によって実行回路を分岐するコードブロックです。

説明してきたすべての比較演算子と論理演算子が条件文の作成に活用できます。

条件文は、条件の評価結果に応じて異なる結果を出力する、フローチャートのように考えられます。

If／Else文

■If文
if文は常にifキーワードから始まってうしろに括弧（()）を伴い、次には波括弧（{}）に囲まれたコード（条件成立時に実行される）が来ます。if（）{}のように記述されます。if文には通常、より大量のコードが含まれているため、インデント付きで複数の行に書き込まれます。

if () {
}

if文では括弧内の式がtrueだった場合にのみ波括弧内のコードが実行されます。もしfalseならこのコードブロックは無視されます。

if (condition) {
  // execute code
}

最初、if文は変数が存在するかどうかの評価に使います。

var age = 21;

if (age) {
  console.log("Your age is " + age + ".");
}

上の例では、age変数は存在するので、このコードはコンソールに出力します。if文では初期値でtrueと判定するので、if(age)は、if(age ===true)の簡略型になります。

条件文をさらに強化するため、先に学習した比較演算子が使えます。これまでにアルコール飲料のWebサイトを見たことがあれば、年齢制限がかけられていることは知っていますね。米国の場合、年齢は21歳です。これらのサイトではユーザーの年齢が21よりも大きいもしくは等しいことを判定するためif文が使われているかもしれません。

var age = 21;

if (age >= 21) {
  console.log("Congratulations, you can view this site.");
}

■Else文
もし条件に合致しないユーザーには異なるメッセージを表示したいとき、else文が使えます。最初の条件が真にならない場合そのコードブロックは無視されelseコードブロックが実行されます。

if (condition) {
  // execute code
} else {
  // execute other code
}

以下は制限より若いユーザーの場合の例です。条件に合致しないユーザーには2番目のコードブロックが実行されます。

var age = 18;

if (age >= 21) {
  console.log("Congratulations, you can view this site.");
} else {
  console.log("You must be 21 to view this site.");
}

■Else If文
もし2つ以上の条件分岐があるなら、複数の条件に応じてコードを実行するためにelse if文が使えます。

var country = "Spain";

if (country === "England") {
  console.log("Hello");
} else if (country === "France") {
  console.log("Bonjour");
} else if (country === "Spain") {
  console.log("Buenos días");
} else {
  console.log("Please enter your country.");
}

上記の例ではcountryの値を"Spain"にセットしたので、出力結果は"Buenos Días"となります。

Switch文

このほかにもswitch文という別のタイプの条件文があります。if文とよく似ていて、同じ機能を担いますが書き方が異なります。

switch文は想定される分岐の数が多い場合に便利で、else if文をたくさん並べるよりも通常好まれます。

switch文はswitch(){}のように書きます。

switch (expression) {
  case x:
    // execute code
    break;
  case y:
    // execute code
    break;
  default:
    // execute code
}

この中にはcase、break、defaultというキーワードがあります。理解しやすいよう、先ほどのelse if文の例と同じ処理をswitch文を使って実行します。

var country = "Spain";

switch (country) {
  case "England":
    console.log("Hello");
    break;
  case "France":
    console.log("Bonjour");
    break;
  case "Spain":
    console.log("Buenos días");
    break;
  default:
    console.log("Please enter your country.");
}

上の例では、ある文字列を評価し、それぞれの場合（case）にもとづいたコードブロックが実行されます。breakキーワードは、一致したcaseがあった場合にそこから先にある別のcaseのコードまで一緒に実行されてしまうことを防ぎます。一致しなかった場合にはelse文のときと同じようにdefaultコードブロックが実行されます。

関数

JavaScriptの関数の実態は、その中に含まれたコードの塊です。関数はあるタスクや計算を実行し、引数（後述）も受け取れます。関数を使う主な理由は再利用可能なコードを書くためで、関数に渡す値次第で実行するたびに異なる結果が得られます。

宣言：Declaration

関数を使えるようにするためには、宣言（ないし定義）がされていなければなりなりません。関数はfunctionキーワードで宣言でき、変数と同じ名付け方のルールが適用されます。

関数はfunction(){}のように書きます。以下はシンプルな「Hello, World!」を出力する関数です。

function greeting() {
  return "Hello, World!";
}

関数の呼び出し

関数を呼び出す（使用する）には、関数の名前に続けて括弧を付けます。

greeting(); // returns "Hello, World!"

仮引数（parameter）と実引数（argument）

関数は引数を受け取って計算もできます。実引数（argument）とは関数に渡す値です。仮引数（parameter）とは、値を受け取った関数が計算を実行するのに使う（その関数内だけで有効な）ローカル変数です。

注：ローカル変数とは、特定のコードブロック内でのみ機能する変数です。

例としてaddTwoNumbersという名の関数を作ります。そうです、その名の通り2つの数値を足し合わせる関数です（真面目な話、気の利いた関数名を付けることはとても重要です）。ここに実引数として数値7と3を渡しますが、これを関数は仮引数xとyとして受け取ります。

function addTwoNumbers(x, y) {
  return x + y;
}

addTwoNumbers(7, 3); // returns 10

7 + 3 = 10なので、この関数は10を返します。下の例ではまったく同じ関数に値の異なる引数を渡したので、異なる結果となり関数が再利用できることが分かります。

function addTwoNumbers(x, y) {
  return x + y;
}

addTwoNumbers(100, 5); // returns 105

JavaScriptではほかにも関数の宣言方法が何通りか存在します。『Quick Tip: Function Expressions vs Function Declarations』にはさらに詳しく書かれています。

最後に

この記事では超重要なJavaScriptの3つの基本概念、演算子、条件文、関数を説明しました。演算子はデータの演算を実行するための記号であり、代入、算術演算、比較演算、論理演算について説明しました。条件文は条件演算の結果が真か偽かに基づいて実行されるコードであり、いっぽう関数は再利用可能な、特定タスクを実行するコードの塊です。

以上の知識が身に付いたら、JavaScriptの中級者の概念を学ぶ準備が整ったことになります。

※本記事はJames Kolce、Tom Grecoが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

（原文：Back to Basics: JavaScript Operators, Conditionals & Functions）

［翻訳：西尾健史／編集：Livit］