フロントエンド開発のためのJavaScript入門 – データ型

プログラミング/JavaScript

本記事では、JavaScriptで扱うことが出来るデータ型を紹介します。

それぞれのデータ型についての詳細は、別の記事で紹介していこうと思います。

本記事で学ぶこと

  • 数値型
  • 文字列型
  • 論理型
  • null
  • undefined
  • 配列
  • オブジェクト
  • Map
  • Set
  • 関数

数値型

数値型は、整数と浮動小数点を扱う型です。

const price = 1000; // 整数
const temperature = 26.6; // 浮動小数点

数値型は、以下の演算子を使って、計算することが出来ます。

演算演算子例
加算+1 + 2 => 3
減算–3 – 5 => -2
乗算*5 * 2 => 10
除算/10 / 5 => 2
剰余%10 % 3 => 1
前置加算(減算)++(–)x = 0のとき、
++x => 1
(x = x + 1と同じ意味)

y = 0のとき、
–y => -1
(y = y – 1と同じ意味) 
console.log(1 + 2); // 3
console.log(3 - 5); // -2
console.log(5 * 2); // 10
console.log(10 / 5); // 2
console.log(10 % 3); // 1

let a = 0;
console.log(++a); // 1

let b = 0;
console.log(--b); // -1

文字列型

シングルクォート(‘)、またはダブルクォート(“)で囲むと文字列となります。

また、バッククォートで囲むとテンプレートリテラルといって、文字列の中に変数の値や計算結果を埋め込むことが出来ます。

文字列の中に値を埋め込むには、${変数名}とします。

const userName = 'yohyoh'; // シングルクォート
const country = "Japan"; // ダブルクォート
const message = `I'm ${userName}. I'm from ${country}.`; // I'm yohyoh. I'm from Japan.

論理型

論理型の値は、「true」または「false」しかありません。

主に、if文で条件分岐させる場合に使用します。

null型

null型の値は、「null」しかなく、値がないことを示す値です。

undefined型

undefined型の値は、「undefined」しかなく、値が定義されていないことを示す値です。

宣言しただけで値を代入していない変数は、「undefined」となります。

let userName;
console.log(userName); // undefined

配列型

配列は、複数の値をまとめて1つのデータとして扱うことが出来ます。

配列の要素には、インデックスを使用してアクセス出来ます。

const languages = ['JavaScript', 'Rust', 'PHP'];
console.log(languages); // ['JavaScript', 'Rust', 'PHP']
console.log(languages[0]); // 'JavaScript'
console.log(languages[1]); // 'Rust'
console.log(languages[2]); // 'PHP'

オブジェクト型

オブジェクト型も配列と同じく、複数の値をまとめて1つのデータとして扱うことが出来ます。

配列と異なる点は、要素ひとつひとつがプロパティ名(キー名)と値のセットで、要素へのアクセスにはインデックスではなく、プロパティ名を指定することです。

const book = {
  title: 'これからのJavaScriptの教科書',
  price: 3200,
};

console.log(book.title); // 'これからのJavaScriptの教科書'
console.log(book.price); // 3200

Map型

Map型は、オブジェクト型にとても似ていて、要素はキーと値のセットです。

要素には、get(キー名)でアクセス出来ます。

Mapとオブジェクトの違いについては、別の記事で紹介したいと思います。

const protocols = new Map([
  ['DHCP', 'Dynamic Host Configuration Protocol'],
  ['HTTPS', 'Hypertext Transfer Protocol Secure'],
  ['HTTP', 'Hypertext Transfer Protocol'],
]);

console.log(protocols.get('HTTPS')); // Hypertext Transfer Protocol Secure

Set型

Set型も配列同様、複数の値を保持できますが、重複する要素を持つことが出来ません。

また、配列、オブジェクト、Mapのように各要素にインデックスやキー名を使ってアクセスすることは出来ません。

const prefectures = new Set([
  '東京',
  '神奈川',
  '千葉',
  '埼玉',
]);

console.log(prefectures.has('東京')); // true
console.log(prefectures.has('北海道')); // false
console.log(prefectures.size); // 4

関数型

JavaScriptでは、関数もひとつのデータとして扱うことが出来るので、他のデータ型同様変数に代入したり、関数の引数に関数を渡したりすることが出来ます。

function calculateAmount(price, taxRate) {
  return price + price * taxRate;
}

const price = 1000;
const taxRate = 0.1;
const amount = calculateAmount(price, taxRate);
console.log(amount); // 1100

const calculator = calculateAmount; // 変数に代入
console.log(calculator(price, taxRate)); // 関数のように呼び出すことが出来る

まとめ

今回は、JavaScriptで扱うことが出来るデータの型をサラッと紹介しました。

それぞれのデータ型についての詳細は、今後記事にしていこうと思うので、参考にしてみてください。

以上で、今回は終了です。

記事を読んでいただきありがとうございました。

読んだ感想や疑問、ご指摘などコメントしていただけると幸いです。

次回は、数値型についてもう少し詳しく紹介していきます。