【JavaScript教材②】データ型の解説から各種演算子の使い方までを徹底解説

ファド

こんにちは！
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します！

こちらの記事はJavaScript教材の第2回目の記事になります。

その他のJavaScript教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

データ型について

フォルダ名：「data_type」

データ型とは、プログラミング言語などが扱うデータをいくつかの種類に分類し、それぞれについて名称や特性、範囲、扱い方、表記法、メモリ上での記録方式などの規約を定めたものです。

すごく難しい言葉で説明してしまいましたが、簡単に言うとデータの種類のことです。

JavaScriptには、文字列、数値、真偽値といった値の型があります。
これらの値の型のことをデータ型と呼びます。

データ型を大きく分けると、プリミティブ型(基本型)とオブジェクト(複合型)の2つに分類されます。
・プリミティブ型は、真偽値や数値などの基本的な値の型のことです。
・オブジェクトは複数のプリミティブ型の値、またはオブジェクトからなる集合のことです。

JavaScriptのデータ型をさらに細かく見ていくと、7つのプリミティブ型とオブジェクトから成り立っています。

プリミティブ型

オブジェクト

プリミティブ型でないものは、すべてオブジェクトとなります。
例えば、配列(Array)や関数(Function)、オブジェクト(Object)、日付(Date)、正規表現(RegExp)、JSONなどです。
まだ学習したことのないものばかりですが、これから順番に学習していくので心配はいりません。

ここは簡単に、プリミティブ型でないものはオブジェクトであると覚えていれば問題ありません。

また、typeof演算子を使うことで、データ型を簡単に調べることができます。
使い方は下記の通りです。

console.log(typeof true);                  // "boolean"
console.log(typeof 543);                   // "number"
console.log(typeof 1234569254740992n);     // "bigint"
console.log(typeof "文字列");               // "string"
console.log(typeof Symbol("シンボル"));     // "symbol"
console.log(typeof undefined);             // "undefined"
console.log(typeof null);                  // "object"
console.log(typeof ["配列"]);              // "object"
console.log(typeof { "key": "value" });   // "object"
console.log(typeof function() {});        // "function"

コメントアウトされている部分は、全て実行結果です。
typeof nullは本来であればnullですがobjectとなるのは、JavaScriptの仕様(バグ)です。
他のプリミティブ型の値については、typeof演算子でそれぞれのデータ型を調べることができます。
また、typeof ["配列"]はオブジェクトの中のarrayですが、objectと返ってくるところも、気をつけましょう。
このように、typeof演算子は便利ではありますが、オブジェクトの中のどの種類なのかを判定することはできないので注意してください。

リテラル

リテラルとは、プログラム上で数値や文字列など、データ型の値を直接記述できるように、構文として定義されたものです。
例えば、"と"で囲んだ範囲が文字列リテラルで、これは文字列型のデータを表現していることになります。

コードで説明すると、下記のようになります。

// ダブルクォーテーションで囲んだ範囲が文字列リテラルになる
const str = "文字列リテラル";

下記の4つのプリミティブ型は、それぞれリテラル表現を持っています。
・真偽値
・数値
・文字列
・null

また、オブジェクトの中でもよく利用されるものに関してはリテラル表現が用意されています。
・オブジェクト
・配列
・正規表現

これらのリテラルについて、まずはプリミティブ型から順番に見ていきます。

真偽値（Boolean）

真偽値にはtrueとfalseの2つのリテラルがあります。
それぞれはtrueとfalseの値を返すリテラルで、正か偽かの見た目通りの意味となります。

console.log(true);  // true
console.log(false); // false

コメントアウトされている部分は、全て実行結果です。

数値（Number）

数値には543のような整数リテラルと4.54326のような浮動小数点数リテラルの2つがあります。

console.log(1);          // 1
console.log(132);        // 132
console.log(4532);       // 4532
console.log(1.5342);     // 1.5342
console.log(5.43522);    // 5.43522

コメントアウトされている部分は、全て実行結果です。

長整数（BigInt）

BigIntリテラルには、数値の後ろにnをつけます。
こちらの型は、新しく追加されたもので、こういうのがあるのだな程度に覚えていただければ大丈夫です。

console.log(5432n); // 5432n
console.log(1n);    // 1n
console.log(32n);   // 32n

コメントアウトされている部分は、全て実行結果です。

null

nullリテラルは、null値を返すリテラルです。
nullは「値がない」ということを表現する値です。

let hoge = null;
console.log(hoge); // null

コメントアウトされている部分は、全て実行結果です。

オブジェクト（Object）

JavaScriptにおいて、オブジェクトはあらゆるものの基礎となります。
オブジェクトを作成する方法として、オブジェクトリテラルがあります。
オブジェクトリテラルは{ }を書くことで、新しいオブジェクトを作成できます。

let object = {}; // 空のオブジェクトを作成

値がある場合は、このような形になります。

let object = {
    "key1": "value1",
    "key2": "value2"
}

// ドット記法(値の取得方法)
console.log(object.key1);     // "value1"
// ブラケット記法(値の取得方法)
console.log(object["key2"]);  // "value2"

console.log()の後のコメントアウトは、全て実行結果です。
オブジェクト内の値を取り出す場合は、.(ドット)の後に取得したい値を指定します。

配列

オブジェクトリテラルと並んで、頻繁に使われるリテラルとして配列リテラルがあります。
配列リテラルは[と]で値をカンマ区切りで囲み、その値を持つArrayオブジェクトを作成します。
配列(Arrayオブジェクト)とは、複数の値に順序をつけて格納できるオブジェクトの一種です。

// 空の配列を作成
let emptyArray = [];
console.log(emptyArray);  // []

// 値を持った配列を作成
let array = [1, 2, 3];
console.log(array[0]);  // 1
console.log(array[2]);  // 3

let arrayString = ['1番目', '2番目', '3番目'];
console.log(arrayString[0]);  // 1番目
console.log(arrayString[2]);  // 3番目

console.log()の後のコメントアウトは、全て実行結果です。

少しややこしいですが、配列は0からはじまるインデックス(番号)に、対応した値を保持しています。
上記の配列arrayを例にすると、インデックスが0の場合は数値の1、インデックスが1の場合は数値の2、インデックスが2の場合は数値の3になるので、console.log(array[0])と記述された場合は、数値の1が出力される。
このように、作成した配列の要素を取得するには、配列に対して配列名[インデックス番号]という構文で指定したインデックスの値を参照できます。

★検索ワード
・JavaScript 文字列
・JavaScript 数値
・JavaScript 真偽値
・JavaScript null
・JavaScript undefined
・JavaScript 配列

演算子について

フォルダ名：「operator」

JavaScriptには、算術演算子や代入演算子、論理演算子といったものがあります。
それらがどのようなものなのかということから、どのように扱うのかまでを説明していきます。

算術演算子

手を動かしながら見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script type="text/javascript" src="app.js"></script>
</body>

</html>

app.jsを下記の通り編集してください。

let plus = 12 + 32;
console.log(plus);      // 44

let minus = 29 - 12;
console.log(minus);     // 17

let time = 10 * 2;
console.log(time);      // 20

let divide = 100 / 20;
console.log(divide);    // 5

let extra = 33 % 5;
console.log(extra);     // 3

let exponent = 5 ** 5;
console.log(exponent);  // 3125

各console.log()の後のコメントアウトは、全て実行結果です。

5 ** 5は、5✕5✕5✕5✕5の計算をしています。
べき乗は忘れがちなので、ぜひ覚えておきましょう！

もちろん数字の部分を変数にすることもできます。

let num = 5;
let ten = 10;

let result = num * ten;
console.log(result); // 50

変数numは5、変数tenは10なので、num * tenは5 ✕ 10という意味になります。
よって、出力結果は50になります。

代入演算子

手を動かしながら見ていきましょう。
index.htmlはそのままで、app.jsを下記の通り編集してください。

let baseNum = 100;

let variable = baseNum;
console.log(variable);  // 100

baseNum += 10;
console.log(baseNum);   // 110

baseNum -= 30;
console.log(baseNum);   // 80

baseNum *= 10;
console.log(baseNum);   // 800

baseNum /= 8;
console.log(baseNum);   // 100

baseNum %= 7;
console.log(baseNum);   // 2

baseNum **= 4;
console.log(baseNum);   // 16

各console.log()の後のコメントアウトは、全て実行結果です。
自らに再代入しているので、代入演算が終わった後に変数baseNumの数値が変化するのは、とても面白いですね。
ぜひ覚えておきましょう！

もちろん文字列も足すことができます。
イメージは文字を連結していくということです。

let baseWord = '私は';
let boysName = 'ボブ';
let fin = 'です';

baseWord += boysName;
console.log(baseWord); // 私はボブ

baseWord += fin;
console.log(baseWord); // 私はボブです

各console.log()の後のコメントアウトは、全て実行結果です。
文字を繋ぎ合わせることを、文字列連結と言います。
こちらも合わせて覚えておきましょう。

ちなみに、普通に足すことで文字列連結を行うこともできます。

let sentence1 = "これは" + "文章" + "です";
console.log(sentence1); // これは文章です

let word1 = "これは";
let word2 = "文章";
let word3 = "です";
let sentence2 = word1 + word2 + word3;
console.log(sentence2); // これは文章です

各console.log()の後のコメントアウトは、実行結果です。
直感的でわかりやすいですね！

比較演算子

手を動かしながら見ていきましょう。
index.htmlはそのままで、app.jsを下記の通り編集してください。

console.log(12 < 12);  // false
console.log(12 > 32);  // false
console.log(12 <= 12); // true
console.log(12 >= 32); // false

各console.log()の後のコメントアウトは、全て実行結果です。
比較演算子を使用した時に返ってくる値は、真偽値（trueもしくはfalse）です。
比較演算子は算数や数学で使用していたのと同じ使い方なので、とてもわかりやすいですね。

等価演算子

等価演算子を使用した時に返ってくる値も比較演算子と同じく、真偽値（trueもしくはfalse）です。

さて、等しいと厳密に等しいや等しくないと厳密に等しくないの違いは何でしょうか？
それは、厳密に等しい場合は、データ型も合っているかの確認をします。

言葉で説明するだけでは理解しづらいかと思いますので、手を動かしながら見ていきましょう。
index.htmlはそのままで、app.jsを下記の通り編集してください。

console.log(12 == "12");  // true
console.log(12 === "12"); // false
console.log(12 != "12");  // false
console.log(12 !== "12"); // true

各console.log()の後のコメントアウトは、全て実行結果です。
console.log(12 == "12")のコードをよく見てください。
左辺が12で右辺が"12"となっています。
つまり、左辺は数値の12であるのに対して、右辺は文字列の12なのです。

しかし、今回の等価演算子は==なので厳密には判断しません。
つまり、==の場合は双方のデータ型が同じである必要がないです。

そのため、console.log(12 == "12")の場合は12と12の単純比較なので、trueが返ってきます。

一方で、console.log(12 === "12")の場合は厳密に判断することになります。
そのため、数値の12と文字列の12では、データ型が違うので、falseが返ってくるようになります。

console.log(12 != "12")とconsole.log(12 !== "12")も全く同じです。
console.log(12 != "12")の場合、厳密に判断しないので、数値の12と文字列の12は等しいと判断されます。
そのため、!=である場合、等しくない場合にtrueとなるので、falseが返されます。

console.log(12 !== "12")の場合は、厳密に判断するので、数値の12と文字列の12は等しくないと判断されます。
そのため、!==である場合、等しくない場合にtrueとなるので、trueが返されます。

★検索ワード
・JavaScript　演算子とは
・JavaScript　算術演算子
・JavaScript　代入演算子
・JavaScript　比較演算子
・JavaScript　等価演算子

次の教材

次の教材は下記から簡単に飛ぶことができます！
引き続きプログラミングを楽しんでいきましょう！

あわせて読みたい

【JavaScript教材③】DOMの操作方法から要素の作成・削除、イベントハンドラやイベントリスナーまでを徹... こちらの記事はJavaScript教材の第3回目の記事になります。 その他のJavaScript教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 【DOM操作について...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします！

サポート価格はなんと1日あたりたったの約300円！

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります！

なお、サポート内容の詳細は下記の通りです。

• 目標設定
• マインドセット
• オリジナル教材見放題
• オリジナル課題見放題
• オリジナル課題の解答見放題
• 課題コードレビュー
• 教材への無制限質問
• 課題への無制限質問
• ポートフォリオ作成アドバイス
• 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください！

あわせて読みたい

【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ！｜【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして！この度はプランをご覧いただき、誠にありがとうござ...