JavaScriptにおけるデータ型とリテラルをマスターしよう🧙‍♂️

公開日 : 最終更新日 :

  • コーディング

こんにちは、AndHAコーディング部です。

前回は、varを卒業しよう!JavaScript初心者向けconstとletの活用ガイド🧐 と題して変数宣言の基本を学びました。

今回は、JavaScriptの基本的なデータ型とリテラルについて解説します。
初心者エンジニアの皆さん、一緒に学んでいきましょう!

データ型とリテラル

JavaScriptのコーディングにおいて、変数や定数にデータを格納する際、それぞれのデータは特定の「型」を持っています。
この「型」とは、データの特性や性質、そして操作の仕方を示すもので、正確なプログラミングやバグの回避、さらには効率的なコードの実装において極めて重要な役割を果たします。

データ型は、データの「カテゴリ」や「クラス」を示すものです。例えば、数字、文字、真偽値など、データが何であるかを示す基本的な性質を持っています。JavaScriptには、プリミティブ型とオブジェクト型という2つの主要なデータ型があります。

リテラルは、特定のデータ型の値をソースコード内に直接書き込む方法を指します。リテラルにより、変数や定数に具体的な値を直接代入することができます。例として、42は数値リテラル、"Hello"は文字列リテラルとなります。

データ型とリテラルの理解は、JavaScriptの基礎として非常に重要です。
それぞれのデータがどのような特性を持ち、どのようにソースコード内で表現されるのかを知ることで、より深い理解と効果的なコーディングが可能となります。

それでは、次のセクションからそれぞれの解説に入っていきます。

プリミティブ型(データ型)

プリミティブ型は、JavaScriptにおける基本的なデータ型のひとつで、単一の値しか持たない特性を持っています。
これは、変数に格納されたプリミティブ型のデータは、その値そのものが直接格納・操作されることを意味します。
さらに、一度定義されたプリミティブ型のデータは変更不可能(イミュータブル)であり、これによりデータの安全性が保たれます。

以下に、主要なプリミティブ型の基本について詳しく解説します。

Number(数値)

数値データを表現するための型で、整数から浮動小数点数まで様々な数値を扱うことができます。

let integer = 42;
let float = 3.14;

String(文字列)

文字列データを表現するための型で、テキストはダブルクォートやシングルクォートで囲むことで定義します。

let greeting = "Hello, World!";
let name = 'Alice';

Boolean(真偽値)

真偽値を表現する型で、trueまたはfalseの2つの値のみを持ちます。

let isTrue = true;
let isFalse = false;

Undefined

変数が初期化されていない状態を示す型です。
変数を宣言したが、値を割り当てていない場合にこの型が割り当てられます。

let uninitializedVar;
console.log(uninitializedVar); // Outputs: undefined

Null

何も値がない、つまり「空」を示す型です。
これは、変数に明示的に「値がない」ことを示すために使用されます。

let emptyVar = null;
console.log(emptyVar); // Outputs: null

Symbol(シンボル)

ES6で導入された型で、完全にユニークな値を生成するために使用されます。
主にオブジェクトのプロパティのキーとして使用されることが多いです。

const uniqueSymbol = Symbol("description");
console.log(uniqueSymbol); // Outputs: Symbol(description)

BigInt(巨大な整数)

通常のNumber型では扱えない、非常に大きな整数を表現するための新しい型です。
大きな数値計算において有効です。

const bigIntValue = 1234567890123456789012345678901234567890n;
console.log(bigIntValue); // Outputs: 1234567890123456789012345678901234567890n

これらのプリミティブ型を理解することで、変数の定義やデータの操作において、より的確なコーディングが可能となります。

オブジェクト型(データ型)

オブジェクト型は、JavaScriptの非常に強力なデータ型の一つで、複数の異なるデータや機能を一つの変数にまとめて格納することができます。
オブジェクト型はキーと値のペアの集合で、その内容は変更可能(ミュータブル)です。
これは、オブジェクトのプロパティやメソッドを後から追加、変更、削除することができることを意味します。
オブジェクト型のデータは参照によって格納・操作されるため、一つのオブジェクトへの変更は他のすべての参照に影響を与えることがあります。

以下に、オブジェクト型の主要な種類とそれぞれのデモコードを示します。

オブジェクトリテラル

キーと値のペアを持つ基本的なオブジェクトです。

const person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
person.greet(); // Outputs: Hello, Alice

配列

オーダリストされた値のコレクションです。

const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // Outputs: banana

関数

一連の命令を実行するオブジェクトです。

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Bob")); // Outputs: Hello, Bob

日付

日時を表すオブジェクトです。

const today = new Date();
console.log(today); // Outputs: current date and time

これらのオブジェクト型を適切に使用することで、データの構造やプログラムの動作を柔軟に制御することができます。

リテラル

JavaScriptにおけるリテラルとは、ソースコード内に直接記述されるデータの表現方法です。
これにより、変数や定数に具体的な値を明示的に代入することができます。
リテラルは、その形式や構文によって、データ型を直接示す役割を持っています。

以下に、主要なリテラルとそれぞれのデモコードを示します。

文字列リテラル

文字列はダブルクォートやシングルクォートで囲まれます。
また、ES6から導入されたテンプレートリテラルを用いることで、文字列内で変数や式を動的に埋め込むことが可能です。

const greeting = "Hello, World!";
const name = 'Alice';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`; // テンプレートリテラル

数値リテラル

整数や浮動小数点数を直接記述する方法です。
ES2020で導入されたBigIntリテラルを使用すると、通常のNumber型で扱える範囲を超える大きな整数を表現することができます。
また、ES2021のNumeric Separatorsを使用すると、数値リテラルの可読性を向上させることができます。

const age = 30;
const piValue = 3.14;
const bigIntValue = 1234567890123456789012345678901234567890n; // BigIntリテラル
const readableNumber = 1_000_000; // Numeric Separators

真偽値リテラル

真偽値はtrueまたはfalseとして表現されます。
これらは、条件判断やトグルの切り替えなどに用いられます。

const isAdult = true;
const isChild = false;

オブジェクトリテラル

オブジェクトは{}内にキーと値のペアとして表現されます。
この形式を用いて、複数の情報を一つの変数にまとめて扱うことができます。

const person = { name: "Bob", age: 25 };

配列リテラル

配列は[]内に値のリストとして表現されます。
配列を利用することで、複数の値を順番に格納し、インデックス番号を用いてアクセスすることが可能となります。

const colors = ["red", "green", "blue"];

リテラルを使用することで、データの初期化や操作を直感的かつ効果的に行うことができます。
リテラルの形式や特性を理解することは、日常のコーディングにおいて非常に役立つことでしょう。

まとめ

この記事を通じて、JavaScriptの基本的なデータ型とリテラルについての理解を深めることができました。
データ型は、変数や定数に格納されるデータの性質や操作方法を示すもので、それぞれの特性や使用方法を知ることでより効果的かつ安全なコーディングが可能となります。
リテラルはソースコード内で具体的な値を直接記述する方法を提供し、データの初期化や操作を簡単に行うことができます。

次回は、JavaScriptの演算子について解説をしています。

それでは、また。

合わせて読みたい!