独り言

プログラミングの講師をしています。新人研修で扱う技術の解説と個人の技術メモ、技術書の紹介など

【JavaScript】JavaScript入門（基礎文法編）

JavaScript Web

この記事ではJavaScriptの基礎文法について解説します。
JavaScriptはブラウザ上で動作する言語で、Webページと組み合わせて使用することが多いため、HTMLの知識がある程度あることを前提とします。
HTMLについては下記の記事を参照ください。

case10.hateblo.jp

目次

  • JavaScript入門
  • 変数
  • 演算
  • 制御構文
  • 配列とオブジェクト
  • ファンクション

JavaScript入門

JavaScriptとは

JavaScriptは、ブラウザ上で動作するプログラミング言語です。
JavaScriptは、ECMA Internationalという標準化団体が言語仕様を策定しており、正式名称はECMAScriptと呼ばれています。
JavaScriptは古くから存在する言語なのですが、2015年に大幅は機能強化が行われました。
この機能強化以降のJavaScriptを「ES6」と呼びます。
ES6以前のJaavScriptを「ES5」と呼びます。
ここで紹介するJavaScriptはES6を前提としたものとします。

JavaScriptでできること

JavaScriptはブラウザで動作する言語のため、ブラウザの操作やWebページに対する操作などができます。
例えば、Webページの要素のコンテンツや属性を書き換えたり、CSSを書き換えたりすることができます。
また、ボタンを押したときの処理などを定義することもできます。

もう一つの大きな機能としては、非同期通信と呼ばれる機能があります。
例えば、検索キーワードを入力欄で文字を入力すると、入力済みの文字からいくつか候補が表示されたり、郵便番号を入力すると住所が表示されるなどの機能があります。
これらの機能は非同期通信と呼ばれ、JavaScriptを使用することで実現可能です。

公式のサイト

JavaScriptの解説などを行っているサイトは数多くありますが、公式のサイトはMDNになります。
分からないことがあった時には積極的に活用すると良いでしょう。

導入

JavaScriptの学習をするにあたって必要なツールは2つです。

の2つです。
ほかのプログラミング言語では、開発環境を構築するのにそれなりに手間がかかり、環境構築の段階で挫折する人もいます。
一方でJavaScriptはブラウザさえあれば動作させることができるので、その点他のプログラミング言語と比べて学ぶ環境は作りやすいと言えます。

ここではブラウザは「Google Chrome」、テキストエディタは「Visual Studio Code」を使用します。
自分で手を動かしながら学びたい人は、それぞれインストールして使用できるようにしておきましょう。

初めてのJavaScript

簡単なサンプルプログラムを通してJavaScriptについて学んでいきます。
まずは以下のhtmlファイルを作成し、適当な場所に保存します。
保存出来たらダブルクリック、またはファイルをGoogle Chromeにドラッグアンドドロップして、Webページを表示させます。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学習</title>
</head>
<body>
    <p>Hello</p>
    <script>
        'use strict';
        // ブラウザのコンソールに「Hello JavaScript」が表示される
        console.log('Hello JavaScript');
    </script>
</body>
</html>

Webページ上ではp要素のHelloが表示されているだけで、JavaScriptのプログラムがどう動いたかはわかりません。
結果を確認するには、Chromeのディベロッパツールを起動します。

Windowsの場合、Chrome上で「F12」キー、または「Ctrl + Shift + I」キーで起動します。
起動したら、ディベロッパツールの中の「Console」タブを選択します。

Hello JavaScript

と表示されていれば成功です。
console.logの命令で指定した内容はこの部分に表示されます。
もし表示されていない場合は、スペルミスなどがないかをチェックしてみてください。

解説

index.htmlの内容を解説します。
なお、HTML部分の解説はここでは省略します。
HTMLについて分からない場合は先にHTMLの記事を参照してください。

JavaScriptのプログラムは、script要素の中に書きます。
別ファイルにプログラムを書いて読み込む方法もありますが、その方法については別途解説します。

文

JavaScriptでは、処理などを書く場合には最後に;(セミコロン)を付けます。
セミコロンを付ける処理の単位を文と呼びます。
今回の例では

'use strict';

と

console.log('Hello JavaScript');

の2つがそれぞれ文となります。

use strict

1行目に書かれた

'use strict';

ですが、これが書かれていると、プログラムに間違いがないかどうかをチェックし、間違えているとそこでエラーがでてプログラムが止まるようになります。
具体的にどのような違いがあるか例で確認します。

JavaScriptのプログラムの部分を以下の様に書き換えてみましょう。

'use strict';
str = 'Hello';
// ブラウザのコンソールに「Hello JavaScript」が表示される
console.log('Hello JavaScript');

ソースコードの書き換えが終わったら、ブラウザの再更新(再更新ボタン、またはF5キー押下)することで、再度実行することができます。
書き換えたプログラムを実行すると

Uncaught ReferenceError: str is not defined

というエラーがでて、「Hello JavaScript」の文字は表示されなくなります。

次に、「'use strict';」の行を削除してみます。

str = 'Hello';
// ブラウザのコンソールに「Hello JavaScript」が表示される
console.log('Hello JavaScript');

そうすると「'Hello JavaScript」は表示されます。

str = 'Hello';

このソースコードは、変数へ文字列を代入している処理ですが、宣言されていない変数への代入なので、コードとしては正しくないコードです。
「'use strict';」がなければ、無視して処理が続きますが、書かれている場合はエラーを検出して処理が止まります。
変数についての説明は後でします。
とりあえず今は、上記のプログラムは間違っていると認識しておいて下さい。

プログラムが正しくなくても処理が続いてしまうと不具合の元になりますので、基本的にはプログラムの1行目には「'use strict';」を書くようにします。

コメント

2行目に書かれた

// ブラウザのコンソールに「Hello JavaScript」が表示される

の部分は、コメントと呼ばれます。 コメントはプログラムの処理には影響を与えません。
プログラムの補足説明を書きたい場合や、プログラムを一時的に無効にしたい場合などに使用します。
コメントは基本的にどのプログラミング言語にもある機能なので、覚えておきましょう。

JavaScriptにおけるコメントの書き方は2種類あります。

// 1行コメント  1行のみコメントになる

/* 
    複数行コメント
    2行以上にまたがって書くことができる
*/

状況に合わせて使いこなせるようにしておきましょう。
テキストエディタでVisual Studio Code を利用している場合は、コメントアウトしたい行を選択して「Ctrl + /」によりコメントアウトできます。

console.log

console.log(出力したい値));

とすると、ブラウザのコンソールに値を出力することができます。
この処理を詳しく説明すると、
「consoleオブジェクトのlogメソッドの引数に出力したい値を渡して実行している。」です。

オブジェクトについては後ほど詳しく説明しまが、ここでは、操作の対象となるものをオブジェクトと呼ぶと認識しておいてください。
JavaScriptはブラウザ上で動作するプログラミング言語なので、例えばブラウザに関する操作や、Webページに関する操作、HTMLの要素に対しての操作などを行うことができます。
この「ブラウザ」「Webページ」「要素」等がそれぞれオブジェクトになります。
「console」では、ブラウザのコンソールに対しての処理を行うことができます。

メソッドは操作(処理)のことです。
オブジェクトによってそれぞれ決まったメソッドを持っています。
メソッドによっては、実行するときに値を受け取ることができるものもあります。
この受け取る値のことを引数と呼びます。
consoleオブジェクトのlogメソッドでは、引数で受け取った値をブラウザのコンソールに出力することができます。

しばらくはconsole.logメソッドを主に使用しながらJavaScriptの解説を進めていきます。

アラートの表示

続いてはコンソールではなく、ブラウザ上のアラートで文字を表示してみます。
以下のコードを書いてブラウザで表示してみてください。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学習</title>
</head>
<body>
    <p>Hello</p>
    <script>
        'use strict';
        // アラートで「Hello JavaScript」が表示される
        window.alert('Hello JavaScript');
    </script>
</body>
</html>

実行に成功すると、ブラウザの上部にアラートで文字が表示されます。
windowはブラウザを表すオブジェクトです。
alertメソッドを使うことで、ブラウザ上でアラートを出すことができます。
引数に文字を入れると、その文字がアラートで表示されます。
ちなみに、windows.は省略して書くことも可能です。

JavaScript入門まとめ

  • JavaScriptはブラウザ上で動く言語
  • 2015年以降の大幅改定されたあとのJavaScriptをES6という
  • JavaScriptのプログラムはscript要素内に書く
  • 'use strit'; を書くとエラーチェックをしてくれる
  • コメント文はプログラムで処理されない
  • コメントには2種類の書き方がある
  • console.logを使うことでブラウザのコンソールに値を出力することができる
  • 操作の対象のことをオブジェクト、操作のことをメソッドと呼ぶ
  • window.alertを使うことでアラートを表示することができる

変数・定数・リテラル

変数とは、データを保存しておく箱、もしくは値につけたラベルのようなものです。
プログラムでは、一時的にデータを保持していく必要のある場面があります。
そのような場合に変数を利用します。
これ以降のサンプルコードはHTMLのコードは省略します。
実際に動かして試す場合にはscript要素の中に以下のプログラムを書いて実行してみてください。

サンプルコード

'use strict';
// varを使った変数宣言
var greet1;
// 変数への代入
greet1 = 'Morning';
console.log(greet1);

// 値の上書き(再代入)
greet1 = 'Good Morning';
console.log(greet1);

// 宣言と代入を1行で書くことも可能
var greet2 = 'Hello';
console.log(greet2);

// letを使った変数宣言
let greet3 = 'Hi!';
console.log(greet3);

// 定数宣言
const greet4 = 'Bye';
// 定数は再代入ができない
// greet4 = 'Good Bye';
console.log(greet4);

結果

Morning
Good Morning
Hello
Hi!
Bye

解説

変数を使用する場合、まずは変数を宣言(定義)する必要があります。
JavaScriptでは、変数を宣言する方法が3つあります。

  • var：関数スコープの変数
  • let：ブロックスコープの変数
  • const：定数の宣言

の3つです。
変数を使用する場合、目的に応じて3つのキーワードのいずれかを指定し、その後に変数名を指定します。
変数に値をセットすることを代入といいます。
値を代入するときには「=」(イコール)を使用します。
数学ではイコールは等しいという意味合いで使用されますが、プログラミングでは代入の意味で使用します。
イコールを使用することで、右の値を左の変数に代入する、という意味になります。

var、let、constの違いですが、まずvarとlet・constでは、変数のスコープが異なります。
スコープとは、変数を扱える範囲のことです。
varのスコープは関数スコープで、letとconstはブロックスコープです。
関数スコープとブロックスコープの違いについては後々説明します。
とりあえず、宣言した変数がどの範囲まで使用できるかが異なってくること認識しておいて下さい。
ここでは一旦varを使用して変数を使っていきます。

letとconstは同じスコープですが、違いは再代入ができるかどうかです。
constを使用すると、一度値を代入すると別の値で上書き(再代入)することができません。
このような、一度代入すると再代入できない変数を定数と呼びます。
再代入する処理を書くとエラーになるので注意してください。
逆に、varやletを使用して変数を定義した場合は、何度でも再代入ができます。

変数名の付け方

変数には名前を付ける必要があります。
例でgreet1～greet4としているのが変数名です。
変数名には英数字、_(アンダースコア)、$(ドルマーク)が使用できます。
ただし、先頭の文字で数字は使用できません。
また、予約語(var, letなど、JavaScriptの構文で使用されるキーワード)を変数名にすることはできません。

上記のルールを守れば変数名の付け方は任意ですが、どんな値が入るのかできるだけ分かりやすい名前を付けることが求められます。

リテラルとデータ型

プログラムの中に直接書かれた文字列や数値などの値をリテラルと呼びます。
用語として覚えておきましょう。
例えば、

var greet = 'Hello';

というソースコードがあった場合、'Hello'がリテラルとなります。

サンプルコード

// 数値のリテラル 
console.log(100);
// 数値は小数も可能
console.log(20.5);
// 文字列リテラル
console.log('Hello');
// 文字列は"(ダブルクォーテーションでも可能)
console.log("World");
// 真偽値のtrueのリテラル
console.log(true);
// 真偽値のfalseのリテラル
console.log(false);

結果

100
20.5
Hello
World
true
false

リテラルにはデータ型と呼ばれるデータの種類が存在します。
JavaScriptで使用される代表的なデータ型には以下の種類があります。

  • String ： 文字列
  • Number ： 数値(整数、小数)
  • boolean ： 真偽値
  • Object ： オブジェクト

boolean型(真偽値)正しいか間違っているかを表すリテラルです。
正しい場合はtrue(真)、間違っている場合はfalse(偽)となります。
あとで解説する比較演算子や制御構文で使用します。

Object型は様々なデータを格納できる汎用的な型です。

文字列

'(シングルクォーテーション)や"(ダブルクォーテーション)で囲っている文字のことを文字列と呼びます。
中身が数値だったとしても、'(シングルクォーテーション)や"(ダブルクォーテーション)で囲われているものは文字列です。
例えば、"100"は文字列です。
数値として扱うことはできないので注意して下さい。
javaScriptでは文字列を表現する方法が3つあります。

  • シングルクォーテーションによる文字列
  • ダブルクォーテーションによる
  • テンプレートリテラル

サンプルコード

'use strict';

var str;
// この場合違いはない
str = 'Hello';  // Hello
str = "Hello";  // Hello

// 'の場合文字列に"を含めることができる
str = '"Hello"';  // "Hello"
// "の場合文字列に'を含めることができる
str = "'Hello'";  // 'Hello'

// 'での文字列の中で'を含める場合はエスケープが必要
str = '\'Hello\'';  // 'Hello'
// "での文字列の中で"を含める場合はエスケープが必要
str = "\"Hello\"";  // "Hello"

// 途中で改行をしたい場合
str = 'Hello\nWorld'; // Helloの後に改行してWorldを表示
str = "Hello\nWorld"; // Helloの後に改行してWorldを表示

// '', ""の場合、1つの文字列を以下のように途中で改行した場合エラーになる
// str = 'Hello
// World';

// テンプレートリテラル
// 文字列の途中で改行することができる
// 出力時には改行はそのまま改行として出力される
str = `Hello
World`;

var name = 'Alice';

// 文字列を結合する場合は「+」演算子を使用する
str = 'Hello ' + name;  // Hello Alice
str = "Hello " + name;  // Hello Alice
str = `Hello ` + name;  // Hello Alice
// テンプレート文字列の場合${変数名} とすると変数を埋め込むことができる
str = `Hello ${name}`;  // Hello Alice

シングルクォーテーションとダブルクォーテーション

シングルクォーテーションを使用した文字列とダブルクォーテーションを使用した文字列ではほとんど違いはありません。
どちらを使用するかは好みになりますが、HTMLで属性を記述する際には属性値を指定するのにダブルクォーテーションを使用するため、HTML要素を操作を行うJavaScriptでは、文字列はシングルクォーテーションを使用するようにするのが無難です。

エスケープ

エスケープとは、改行やタブなどの特殊な文字を表現するための記法です。
エスケープをするときには、「\」記号を使って表現します。
文字列の中で改行を表したい場合は、「\n」とすることで改行を表すことができます。
シングルクォーテーションの文字列の中でシングルクォーテーションを、ダブルクォーテーションの文字列の中でダブルクォーテーションを表したい場合は、それぞれ前に「\」記号を付けてエスケープ処理が必要になります。

文字列結合

「+」記号は、演算子と呼ばれるものです。
数値の計算でも使用しますが、文字列で使用すると左側の文字列と右側の文字列を結合する役割を持ちます。

真偽値

真偽値はboolean型とも呼ばれます。
trueとfalseの2種類の値しか持ちません。

真偽値は、後に説明するif文やfor文の条件式の評価値として使用されます。
実はboolan型以外の値を、条件式として評価される部分に使用したときに、値によってtrueかflaseに変換されます。

データ型ごとの真偽値判定

  • 文字列：空文字以外だったらtrue
  • 数値：0 or Not a Number 以外だったらtrue
  • object：null以外だったらtrue
  • undefined, null ⇒ false;

まとめ

  • 変数はデータの入れ物。またはデータの付けたラベル
  • 変数に値をセットすることを代入という
  • 変数を宣言するには3つの方法がある(var, let, const)
  • 宣言方法によって変数のスコープ(有効範囲)が異なる
  • 変数には何度でも値を再代入できる
  • constを使用すると定数になり、再代入ができない
  • 変数名には分かりやすい名前を付ける
  • プログラムの中に直接書かれた値をリテラルという
  • 文字列は3つの書き方がある(シングルクォーテーション、ダブルクォーテーション、テンプレートリテラル)
  • 特殊な文字の表現はエスケープを使用する
  • 文字列の結合は「+」を使用する

演算

コンピュータでの計算処理のことを演算と呼びます。
ここでいう計算処理とは、数値の計算だけではありません。
コンピュータは内部では0と1の計算だけで動いているため、どんな処理でも数値の計算で成り立っています。
演算には様々な種類がありますが、代表的なものをいくつか紹介します。
全ては紹介しませんので、さらに詳しく知りたい方は公式サイト(MDN)をご覧ください。

算術演算子

算術演算とは数値の計算のことです。
いわゆる、足し算や引き算、掛け算などの一般的な数値の計算です。
算術演算子は、数値の計算を行うための演算子のことです。
算術演算子には以下の種類があります。

  • + ： 加算
  • - ： 減算
  • * ： 乗算
  • / ： 除算
  • % ： 剰余(割り算の余り)
  • ** ： べき乗

算術演算子には優先順位があります。
優先順位は基本的に数学での計算の場合と同じです。
べき乗の優先順位が最も高く、その後が乗算、除算、剰余です。
加算と減算が最も優先順位が低いです。
優先順位を変更したい場合は()(括弧)を用いて優先順位を変更します。

算術演算子は基本的に数値の計算で使用しますが、「+」は文字列に使用することができ、その場合文字列を結合する役割を持ちます。

以下、コードの右側に出力した場合の結果を書いておきます。
サンプルコード

'use strict';

var num;
// 加算
num = 1 + 2; // 3
// 減算
num = 10 - 5; // 5
// 乗算
num = 3 * 3; // 9
// 除算
num = 10 / 4; // 2.5
// 剰余(除算の余り)
num = 10 % 3; // 1
// べき乗
num = 2 ** 3; // 8

// 組み合わせ
// 乗算が先になる
num = 1 + 2 * 3;  // 7
// 優先順位を変更する場合は()で変更
num = (1 + 2) * 3 // 9
// べき乗が先に計算される
num = 10 + 2 * 2 ** 3; // 26

var str;
// 文字列結合
str = 'Hello ' + 'World';  // Hello World
// 文字と数値の場合は文字列として評価される
str = 'Hello ' + 100;  // Hello 100

比較演算子

比較演算子は、左辺と右辺の値を比較する演算子です。
比較した結果、その比較が正しいか間違っているかを真偽値(true, またはfalse)として評価します。
あとに説明する制御構文(条件分岐、繰り返し)の中でよく使用されます。
比較演算子には以下の種類があります。

  • === ： 等しい
  • !== ： 等しくない
  • >= ： 左辺が右辺以上
  • > ： 左辺が右辺より小さい
  • <= ： 左辺が右辺以下
  • < ： 左辺が右辺より小さい

サンプルコード

'use strict';

var b;
// 等しい
b = 10 === 10; // true
// 等しくない
b = 10 !== 10; // false
// 10が5以上
b = 10 >= 5;   // true
// 10が5より大きい
b = 10 > 5;    // true
// 10が5以下
b = 10 <= 5;   // false
// 10が5より小さい
b = 10 < 5;

var num1 = 5;
var num2 = 10;
// 変数を使用した比較も可能
b = num1 === num2;  // false

// 文字列にも使用可能
b = 'Hello' === 'Hello';  // true
b = 'Hello' !== 'hello';  // false

論理演算子

論理演算子は真偽値を元に別の真偽値を評価するための演算子です。
制御構文で比較演算子と組み合わせて使用されます。
論理演算子には以下の種類があります。

  • && ： AND。左辺と右辺が両方trueの場合にtrue
  • || ： OR。左辺か右辺の片方でもtrueの場合true
  • ! ： NOT。trueの場合はfalse、falseの場合はtrue

「&&」と「||」では「&&」の方が優先順位が高くなります。
優先順位を変更するには、算術演算と同じく、()を使用して優先順位を変更します。

'use strict';

var b1 = true;
var b2 = false;
var b;

// AND 両方がtrueの時にtrue
b = b1 && b2; // false
// OR 片方でもtrueならtrue
b = b1 || b2; // true
// NOT trueとfalseが逆転
b = !b1;  // false

// &&が先に評価される
b = true || false && false // true
// ()で優先順位を変更する
b = (true || false) && false // false

var num1 = 10;
var num2 = 20;
// 比較演算子との組み合わせ
b = (num1 >= 10 && num2 >= 10);  // true
b = (num1 < 5 || num2 < 5);  // false

代入演算子

変数に値を代入するときに使用するのが代入演算子です。
今まで「=」を使用して変数に値を代入してきました。
変数に数値の計算や文字列結合して、その結果を元の変数に代入する場合、簡潔に書くための代入演算子が用意されています。
代入演算子には以下の種類があります。

  • = ： 右辺の値を左辺に代入
  • += ： 左辺に右辺の値を加算する(文字列結合も可能)
  • -= ： 左辺に右辺の値を減算する
  • *= ： 左辺に右辺の値を乗算する
  • /* ： 左辺を右辺で除算する
  • %= ： 左辺を右辺で割った余りを代入する
  • **= ： 左辺の値を右辺でべき乗する
'use strict';

var num;
// 通常の代入
num = 10;
// num = num + 5;
num += 5;  // 15
// num = num - 5
num -= 5;  // 10
// num = num * 10;
num *= 10; // 100
// num = num / 5;
num /= 5;  // 20
// num = num % 3;
num %= 3;  // 2
// num = num ** 3;
num **= 3; // 8

var str = 'Hello';
// str = str + ' World';
str += ' World'; // Hello World

単項演算子

単項演算は、演算の対象が1つとなる演算です。
単項演算子には以下の種類があります。

  • ++ ： インクリメント(1加算する)
  • -- ： デクリメント(1減算する)
  • - ： 単項負値(数値を負の数にする)
  • + ： 単項加算(数値以外の値を数値にする)

インクリメントとデクリメントはそれぞれ前に付けるか後ろに付けるかで、前置インクリメント(デクリメント)と後置インクリメント(デクリメント)に分かれます。
それぞれ評価されるタイミングが異なります。
前置は評価が先にされるのに対し、後置では評価が後になります。

'use strict';

var num = 10;
// 後置インクリメント
num++; // 11  // num += 1;
// 前置インクリメント
++num; // 12  // num += 1;
// 後置デクリメント
num--; // 11  // num -= 1;
// 前置デクリメント
--num; // 10  // num -= 1;

console.log(num++); // この時点では表示は10
console.log(num);   // 11
console.log(++num); // 先に評価される12

// 単項負値
num = -num;
console.log(num);  // -12

// 単項加算
console.log(+'3');   // 3
console.log(+true);  // 1
console.log(+false); // 0
console.log(+null);  // 0

まとめ

  • コンピュータでの計算処理のことを演算と呼ぶ
  • 数値の計算は算術演算といい、算術演算子(+, -, *, /, %, **)を使用する
  • 左辺と右辺を比較する演算を比較演算といい、比較演算子(===, !==, >=, <=, >, <)を使用する
  • 複数の比較演算を組み合わせたい場合は論理演算子(&&, ||, !)を使用する
  • 値を代入する演算子を代入演算子という
  • 計算結果を代入するときに代入演算子を使用することで簡単に書くことができる
  • 数値を1プラス(マイナス)する場合には単項演算子が使用できる

制御構文

制御構文はプログラムの処理の流れを制御するもので、条件分岐と繰り返し処理があります。

条件分岐

プログラムを作成していると、特定の条件の場合だけ処理をしたい場合が出てきます。
それを実現するのが条件分岐です。
JavaScriptで条件分岐を実現する方法は、ifを使用する場合とswitchを使用する場合の2つがあります。

if文

if文を使用すると、特定の条件の場合のみ実行させるような処理を書くことができます。

if文の構文

if文の基本形

if (条件式) {
    trueの時の処理
}

条件式の部分は、比較演算子や論理演算子を使用して、結果が真偽値(boolean)になる式を書きます。
処理の部分は何行でも書くことができ、中にさらに別のif文を書いたりすることも可能です。

処理が1行の場合は{}を省略可です。

if (条件式) 
    trueの時の処理(1行の場合)

特定の条件を満たすときの処理と、それ以外の場合の処理を分けて書きたい場合には、if else文を使用します。
if else文

if (条件式) {
    trueの時の処理
} else {
    falseの時の処理
}

更に細かく条件を分けることもできます。
その場合はelse ifを使用します。
if else if文

if (条件式1) {
    条件式1がtrueの時の処理
} else if (条件式2) {
    条件式2がtrueの時の処理
} else {
    どの条件式にも当てはまらない時の処理
}

else ifを使用する場合、最後のelseは省略することが可能です。
if文では、最初の条件に合致した処理が行われた段階でif文全体を抜けます。
例えば、条件式1がtrueになる場合、条件式1の処理を行いますが、その後、たとえ条件式2もtrueになるような条件式だったとしても、条件式2の処理は行われません。
条件式の書き方によっては絶対に通らない処理になってしまう可能性もあるので、条件式の順番には注意しましょう。

サンプルコード

'use strict';

var age = 25;
// if文
if (age <= 30) {
    console.log('若いですね');
}

// if文 
// 処理が1行の場合は{}を省略可
if (age <= 30) 
    console.log('若いですね');

age = 35;
// if else文
if (age <= 30) {
    console.log('若いですね');
} else {
    console.log('おじさんですね');
}

age = 45;
// if elseif else文
if (age <= 30) {
    console.log('若いですね');
} else if (age <= 40 ){
    console.log('おじさんですね');
} else {
    console.log('おっさんですね');
}

age = 25;
// 条件の順番に注意する
if (age <= 40) {
    console.log('おじさんですね');
} else if (age <= 30 ){
    // この条件は絶対に通らない
    console.log('若いですね');
} else {
    console.log('おっさんですね');
}

age = 45;
// 最後のelseは省略可
// この場合何も処理されない
if (age <= 30) {
    console.log('若いですね');
} else if (age <= 40 ){
    console.log('おじさんですね');
}

結果

若いですね
若いですね
おじさんですね
おじさんですね
おっさんですね

switch文

条件分岐の処理はif文だけでも実現可能ですが、変数などの取りうる値があらかじめ決まっている場合は、switch文を使うことで分かりやすく書けます。

構文

switch(式) {
    case ラベル:
        処理
        break;
    ...
    default :
        処理
        break;
}

switch文では、式の評価値が一致したラベルの部分の処理が行われます。
breakや処理は省略することも可能です。
breakを省略した場合は、次のラベルに流れます。
defaltではどのラベルにも一致しなかった場合の処理を書きます。
defaultは省略可能です。

サンプルコード

// 文字で比較
var blood_type = 'A';
switch (blood_type) {
    case 'A':
        console.log('几帳面ですね');
        break;
    case 'B':
        console.log('マイペースですね');
        break;
    case 'O':
        console.log('大雑把ですね');
        break;
    case 'AB':
        console.log('変わり者ですね');
        break;
    default:
        console.log('人間じゃないですね');
        break;
}

/*
if文で書くとこんな感じ
if (blood_type === 'A') {
    console.log('几帳面ですね');
} else if (blood_type === 'B') {
    console.log('マイペースですね');
} else if (blood_type === 'O') {
    console.log('大雑把ですね');
} else if (blood_type === 'AB') {
    console.log('変わり者ですね');
} else {
    console.log('人間じゃないですね');
}
*/

// 数値で比較
// 処理やbreakは必須ではない
// breakを書かなかった場合次のラベルに処理が流れる
var score = 5;
switch (score) {
    case 5:
    case 4:
        console.log('優秀ですね');
        break;
    case 3:
        console.log('普通ですね');
        break;
    case 2:
    case 1:
        console.log('頑張りましょう');
        break;
}

結果

几帳面ですね
優秀ですね

letとvarの違い

ここで変数宣言で使用するletとvarの違いについて説明します。
letとvarは変数の有効範囲(スコープ)に違いがあります。
if文などの{}(中かっこ)で囲われた部分をブロックといいます。
letを使用して宣言した変数は、スコープの範囲がブロックとなります。
つまり、if文のブロックで宣言した変数は、if文を抜けると無効になります。

constについてはletと同じ解釈となります。

'use strict';

var num = 10;
if(num <= 50) {
    var message = 'numは50以下です';
}
// messageはifブロックの外でも使用可能
console.log(message);

if(num <= 50) {
    let msg = 'numは50以下です';
}
// msgはifブロック外だとエラーになる
// console.log(msg);

三項演算子

三項演算子は条件演算子ともいいます。
if elseでの処理を簡単に書くことができる演算子です。

構文

条件式 ? trueの場合の値 : falseの場合の値;

'use strict';

var age = 25;
var msg = age < 30 ? '若い' : '若くない';
/*
if文で書くとこんな感じ
var msg;
if (age < 30) {
    msg = '若い';
} else 
    msg = '若くない';
}
*/
console.log(msg);

結果

若い

三項演算子は始めはとっつきにくいためおすすめされない場合もありますが、文字列を結合していくなど、特定の条件においてはif文よりもスマートで読みやすくなる場合もあるります。

繰り返し

同じような処理を複数回繰り返したい場合には、繰り返しの構文を使用します。
繰り返しの処理はループとも呼ばれます。
繰り返しの構文はfor文とwhile文があります。

for

for文はあらかじめ繰り返したい回数が決まっている場合によく使用される構文です。

構文

for(初期化; 条件式; 後処理) {
    繰り返したい処理
}

サンプルコード

'use strict';

// Helloを5回出力
for(let i = 0; i < 5; i++) {
    console.log('Hello');
}

// ifと同じく処理が1行の場合は{}を省略可能
for(let i = 0; i < 5; i++) 
    console.log('Hello');

// 1~10までの合計を計算
var total = 0;
for(let i = 1; i <= 10; i++) {
    total += i;
}
// 1~10までの合計を出力
console.log(total);

結果

Hello (×10)
55

while

繰り返す回数があらかじめ決まっていない場合には、while文を使用します。
while文は通常のwhile文とdo~while文の2つに分かれます。

while文

while(条件式) {
    繰り返したい処理
}

do while文

do {
    繰り返したい処理
} while(条件式)

while文とdo while文の違いは、条件を先に書くか後に書くかの違いです。
ほとんどの場合処理に差はありませんが、最初の1回目の処理が必ず実行されるかどうかの違いがあります。
while文の場合、最初の条件式の評価でfalseになった場合、中の処理は1度も実行されませんが、do while文の場合は条件を処理の後で評価するため、最初の1回は必ず実行されます。

'use strict';

// 通常のwhile文
// Helloを5回出力
let i = 0;
while(i < 5) {
    console.log('Hello');
    i++;  // 書き忘れると無限ループになるので注意
}

var total = 0;
i = 0;
while(i <= 10) {
    total += i;
    i++;
}
// 1~10までの合計を出力
console.log(total);

// do while文
i = 0;
do {
    console.log('Hello');
    i++;
} (i < 5)

continueとbreak

繰り返し処理を制御するための構文として、breakとcontinue文が使用可能です。
continueは1周分の処理をスキップして、次繰り返し処理に進みます。
breakは、繰り返し処理そのものを終了します。
for文、while文それぞれで使用可能です。

'use strict';

var total = 0;
// 奇数のみの合計
for(let i = 0; i < 100; i++) {
    if(i % 2 === 0) {
        continue;
    }
    total += i;
}
console.log(total);

total = 0;
// 合計3000を超えたらループ終了
for(let i = 0; i < 100; i++) {
    total += i;
    if(total >= 3000) {
        break;
    }
}
console.log(total);

2500
3003

制御構文まとめ

  • 制御構文には条件分岐と繰り返し処理がある
  • 条件分岐はif文とswitch文がある
  • if文はif, if else, if else if がある
  • 繰り返しはfor文とwhile文がある
  • while文はwhileとdo whileがある
  • 繰り返し処理の制御にはcontinueとbreakが使用可能

配列とオブジェクト

配列とオブジェクトは、どちらもまとまったデータを管理するための仕組みです。

配列

配列は、似たような複数のデータをまとめて管理する仕組みです。
例えば、変数を使って人の名前を格納する場合、30人分のデータが必要になった場合には30個の変数を用意する必要が出てきます。
このような問題を解決するのが配列です。

配列に値を格納するときには、[]を使ってカンマ区切りでデータを格納します。
配列に格納された一つ一つの値のことを要素と呼びます。 配列の定義

var 配列名 = [値1, 値2, 値3];

配列の要素にアクセスする場合、[]の中に何番目の要素かを指定します。
この数値のことを添え字やインデックスと呼びます。
添え字は0から始まることに注意してください。
配列へのアクセス

// 0番目の要素の表示
console.log(配列名[0]);
// 要素の上書き
配列名[0] = 100;

配列には様々なメソッドが用意されており、それらを活用することで様々な操作が可能です。

サンプルコード

'use strict';

// 配列の宣言
var fruits = ['いちご', 'みかん', 'ぶどう'];
// 添え字は0から始まる
console.log(fruits[0]);  // いちご
console.log(fruits[1]);  // みかん
console.log(fruits[2]);  // ぶどう
console.log(fruits);     // 全て表示
// 定義されていない要素はundefinedとなる
console.log(fruits[3]);  // undefined
console.log(fruits[-1]); // undefined

// 代入すれば値を上書きできる
fruits[0] = 'めろん';
console.log(fruits[0]);  // めろん

// 型の異なる値を格納することもできるが、バグの温床になる。普通はしない
var nums = ['100', 100];

// for文による配列の処理
// lengthプロパティで要素数を取得できる。これで要素数分のループができる
for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// for...of
// この方法でもループができる。
// (let 変数名 of 配列名) とすることで、変数に各要素が格納されながらループ処理できる
for(let fruit of fruits) {
    console.log(fruit);
}

// 末尾に要素を追加
fruits.push('りんご');
// 文字列として表示
console.log(fruits.toString());  // いちご,みかん,ぶどう,りんご

// 末尾を取り出す
var last = fruits.pop();
console.log(fruits.toString());  // いちご,みかん,ぶどう
console.log(last);  // りんご

// 先頭に要素追加
fruits.unshift('ばなな');
console.log(fruits.toString());  // ばなな,いちご,みかん,ぶどう

// 先頭を取り出す
var first= fruits.shift();
console.log(fruits.toString());  // いちご,みかん,ぶどう
console.log(first);  // ばなな

// 並び順を逆にする
fruits.reverse();
// |で区切った文字列にする
console.log(fruits.join('|'));  // ぶどう|みかん|いちご

オブジェクト

オブジェクトもデータをまとめて扱うための仕組みですが、配列とは少し違ったものです。
例えば、1人の人間は名前、年齢、血液型、など、様々な情報を保持しています。
このように、1つのものに複数のデータを扱えるようにしたい場合にオブジェクトを使用します。

オブジェクトを定義する場合には{}(中かっこ)を使用します。
名前と値のセットを格納していきます。
名前のことはプロパティ名とも呼びます。
プロパティ名と値のペアのことをプロパティと呼びます。

プロパティ名と値は:(コロン)で区切ります。
プロパティはいくつでも書くことができ、,(カンマ)で区切ります。
最後のプロパティの後のカンマはあってもなくても構いません。

オブジェクトの定義

var オブジェクト名 = {
    プロパティ名: 値,  // プロパティ
    プロパティ名: 値,  // プロパティ
    ...
};

プロパティへのアクセス

// どちらでもよい
オブジェクト名.プロパティ名;
オブジェクト名['プロパティ名'];

サンプルコード

'use strict';

// オブジェクトの定義
var user = {
    name: 'Alice',
    age: 20,
};
// オブジェクトへのアクセス
console.log(user.name);
console.log(user['name']);
// 値の変更
user.age = 23;
// user['age'] = 23; // これでもいい
console.log(user.age);
// 要素を追加
user.email = 'alice@xxx.co.jp';
// user['email'] = 'alice@xxx.co.jp'; // これでもいい
console.log(user.email);

関数(ファンクション)

関数は、簡単に言えば処理をまとめたものです。
色んな個所で同じような処理をする場合、全ての個所に同じ処理を書いていると非常に効率が悪いです。
また、その処理の内容が間違っていた場合、全ての個所をなおす必要があり、開発の効率も悪く、バグの原因にもなります。
例えば、一つのプログラムの中で10か所、同じ計算処理を行っていたとします。

この時、10か所全てに同じ処理を書いていた場合、仮に計算の処理が間違っていた場合、10か所全て修正する必要があります。
時間もかかりますし、修正漏れがあった場合にはバグにつながってしまいます。

このような問題を解決する仕組みが関数です。
処理を1つにまとめておくことで、処理の記述内容を減らし、かつ修正するときの労力を最小限に抑えることができます。

関数の定義の仕方には3つの方法があります。

パターン1 基本形

function 関数名(引数リスト) {
    処理
    return 戻り値;
}

パターン2 無名関数、匿名関数

const 変数名 = function(引数リスト) {
    処理
    return 戻り値;
}

パターン3 アロー式

const 変数名 = (引数リスト) => {
    処理
    return 戻り値;
}

アロー式では、引数が1つの場合は()を省略することができます。
また、処理がreturnのみの場合は、returnを省略することも可能です。

引数は関数が受け取ることができる値です。
引数は複数あっても構いません。必要なければ省略可能です。
returnでは関数の呼び出し元に返す値です。
こちらも必要なければ省略可能です。

処理の部分は何行でも書くことができます。
条件分岐や繰り返しなどの構文を使ったり、変数を使用したりなどができます。

サンプルコード

'use strict';

// 関数定義1
// 基本形
// 引数を2つ取り、その加算結果を戻り値として返す関数
function add(n, m) {
    return n + m;
}
// 関数呼び出し
// 引数で渡した値の合計値がsumに代入される
let sum = add(10, 20);
console.log(sum);  // 30

// 関数定義2 
// 変数への代入。無名関数、匿名関数と呼ばれる
const sub = function(n, m) {
    return n - m;
};  // 最後にセミコロンが必要

// 関数呼び出し
let dif = sub(30, 10);
console.log(dif);  // 20

// 関数定義3
// アロー式
const multi = (n, m) => {
    return n * m;
}
// 関数呼び出し
let ans = multi(20, 3);
console.log(ans);  // 60

// アロー式 省略形
const div = num => num / 2;
// 関数呼び出し
let num2 = div(100);
console.log(num2);  // 50

即時関数

即時間数は、即時実行関数とも呼ばれ、定義された後にすぐに実行される関数のことです。

構文

(function 関数名(引数リスト) {
    処理
})(実引数);

関数名は省略することも可能です。

関数まとめ

  • 関数とは処理をまとめたもの
  • 関数は引数で値を受け取ることができる
  • 関数は戻り値で値を返すことができる
  • 関数の定義の仕方は3つの方法がある
  • 通常の定義方法、無名関数、アロー式の3つがある
  • 即時間数は定義の後にすぐに実行される関数

参考書籍