PR

【JavaScript】データ型の基本と「動的型付け」の仕組みを1分で解説

JavaScript

JavaScriptはWebページを動的にするために広く使用されているプログラミング言語です。JavaScriptを学ぶ上で最初に理解するべき重要な概念の1つが「データ型」です。

参考 データ型とは?

データ型とは、変数や値が持つことができる「種類」を指しそれぞれが異なる特性を持っています。数値、文字列、ブーリアンといった基本的なデータ型から、より複雑なオブジェクトや関数に至るまで、JavaScriptでは多様なデータ型を扱うことができます。

データ型とは
図1:データ型とは

この記事では、JavaScriptの基本的なデータ型を初心者にも分かりやすく解説します。

基本的なデータとそれぞれの型がどのように使われるのか、また型変換の基礎知識についても触れていきます。JavaScriptのデータ型を理解することは、より効率的にコードを書き、エラーを減らすための第一歩。この記事を通して、JavaScriptの基礎を固めさらに深い知識を身につける準備をしましょう。

データ型説明
数値 (Number)整数や浮動小数点数など、数学的な数値を表します。
文字列 (String)テキストデータを表し、シングルクォート、ダブルクォート、バックティックで囲みます。
真偽値 (Boolean)true または false のいずれかを持ち、条件判断に使われます。
未定義 (undefined)値が割り当てられていない変数の状態を表します。
空の値 (null)「何もない」状態を意図的に表すために使用します。
シンボル (Symbol)ES6で導入された、一意で不変の値を作成するためのデータ型です。
表1:JavaScriptにおける基本のデータ型

参考 HTML CSS JavaScriptの違い・役割を3分で解説

スポンサーリンク

JavaScript:動的型付け

JavaScriptは動的型付け言語に分類されます。動的型付けとは、その名の通りプログラムの実行過程で「自動的にデータ型が設定される」ということ。

参考 let(変数の宣言)

この特性はJavaScriptの柔軟性の1つであり、開発者がより速くコードを書けるようにする一方で、型関連のエラーを引き起こしやすくもします。動的型付けについて理解することは、JavaScriptの効果的な使用において不可欠です。

JavaScriptエンジンは、コードの実行時に変数の型を推論します。例えば、数値を代入するとその変数は自動的に数値型に。後にその変数に文字列を代入すれば、型は文字列型に変わります。動的型付けを行わないプログラミング言語では変数の宣言時に必ずデータ型を指定する必要があります。しかし、JavaScriptではこのデータ型の宣言が必要ではありません。

JavaScriptの動的型付けを理解するために、いくつかのサンプルコードを通じて実例を見てみましょう。↓の例を確認しながら、JavaScriptがどのように変数の型を実行時に決定するかをご説明します。

サンプルコード 変数に異なる型の値を代入

let data = 42; // 最初は数値型
console.log(typeof data); // 出力: "number"

data = "JavaScript"; // 同じ変数に文字列を代入
console.log(typeof data); // 出力: "string"

↑の例では、data 変数が最初に数値型(number)であることを typeof 演算子で確認しています。その後、同じ変数に文字列を代入しており、typeof で確認すると、変数の型が動的に文字列型(string)に変更されていることがわかります。

つまり、42 は数値なのでJavaScriptではその変数を「数値型」として扱っていたが、後から「"JavaScript"」が代入されたので今度は「文字列型」として扱うようになったということ。このように、JavaScriptでは自動的に変数のデータ型を決定・変換します。

サンプルコード 動的型付けによる演算

let result = 5 + 7; // 数値同士の加算
console.log(result); // 出力: 12

result = "5" + 7; // 文字列と数値の加算(連結)
console.log(result); // 出力: "57"

result = "5" * "2"; // 文字列の乗算(数値に変換されて計算)
console.log(result); // 出力: 10

↑の例では、JavaScriptがどのように異なる型の値を扱うかを示しています。注目すべきポイントは、文字列と数値を+演算子で結合すると、数値が文字列に変換され結果として文字列が返される点です。また、*演算子を使用した場合、文字列が数値に暗黙的に変換され、計算が実行される点に注目しましょう。

動的型付けのメリット

動的型付けのメリットは、データ型を強く意識することなくコーディングが可能になるという点です。「そもそもデータ型って何?」というのをそこまで理解していなくても感覚的にコーディングすることが可能になることが1番のメリットだと言えます。

  1. 柔軟性: 変数に異なる型のデータを自由に代入できるため、開発が迅速に行えます。
  2. 簡潔さ: 型宣言が不要なため、コードが簡潔になります。

動的型付けのデメリット

逆に動的型付けのデメリットは、自動的にデータ型が決定される故に「意図しないデータ型変換が行われてしまう」という点。本当は「001」という値を文字列として扱いたかったが、数値型に変換され「1」として演算されてしまうようなバグが発生するイメージです。

  1. 型安全性の欠如: コンパイル時ではなく、実行時に型エラーが発生する可能性があるため、バグを見つけにくくなる場合があります。
  2. パフォーマンス: 型チェックが実行時に行われるため、パフォーマンスに影響を与えることがあります。

JavaScriptの動的型付けは変数がプログラム実行中にさまざまな型のデータを保持できる柔軟性を提供します。しかしこの柔軟性は型関連のバグを引き起こす可能性もあるため、開発者は型変換の仕組みと、それに伴う挙動を正確に理解しておく必要があります。上記のサンプルコードを参考に、動的型付けの概念を探索し、JavaScriptでの効率的なコーディングに活かしてください。

JavaScriptのデータ型

JavaScriptでは基本となるデータ型が6つあります。この6つのデータ型をしっかり理解し適切に使い分けることでJavaScriptのコーディングスキルが徐々に向上していくことでしょう。

データ型説明
数値 (Number)整数や浮動小数点数など、数学的な数値を表します。
文字列 (String)テキストデータを表し、シングルクォート、ダブルクォート、バックティックで囲みます。
真偽値 (Boolean)true または false のいずれかを持ち、条件判断に使われます。
未定義 (undefined)値が割り当てられていない変数の状態を表します。
空の値 (null)「何もない」状態を意図的に表すために使用します。
シンボル (Symbol)ES6で導入された、一意で不変の値を作成するためのデータ型です。
表1:JavaScriptにおける基本のデータ型

1つ1つサンプルコード付きでわかりやすく解説していきます。

数値 (Number)

JavaScriptにおける数値(Number)型は、整数や浮動小数点数を含む幅広い数値を扱うことができるデータ型です。数値型は演算、金額の計算、測定値の処理など、多岐にわたる用途で使用されます。JavaScriptの数値は内部的には64ビットの浮動小数点形式で表現され、非常に大きな数値や非常に小さな数値の精密な表現が可能です。ここでは、数値型の特徴と使用方法について詳しく見ていきましょう。

let decimal = 42; // 10進数の整数
let hex = 0x2A; // 16進数の整数(42と等価)
let octal = 0o52; // 8進数の整数(42と等価)
let binary = 0b101010; // 2進数の整数(42と等価)
let floatingPoint = 3.14; // 浮動小数点数
let bigNumber = 2.99792458e8; // 光速(m/s)を指数表記で

console.log(decimal, hex, octal, binary, floatingPoint, bigNumber);

// 特別な数値の例
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log("not a number" / 2); // NaN

ポイント 数値の表現

  1. 整数
    • 10進数、16進数(0xで始まる)、8進数(0oで始まる)、2進数(0bで始まる)のリテラルを使用して表現可能。
  2. 浮動小数点数
    • 小数点を含む数値や、指数表記(eまたはEを使用)で表される数値。

ポイント 特別な数値

  1. Infinity
    • 無限大を表す特別な値で、何かを0で割ったときなどに発生する。
  2. -Infinity
    • 負の無限大を表す。
  3. NaN (Not a Number)
    • 「数値ではない」という特別な値で、数学的に無効な操作の結果として返される。

JavaScriptの数値型は、その柔軟性と包括性により、さまざまな数値計算を可能にしますが、特別な数値や精度の問題に注意が必要です。

文字列:String

文字列(String)型は、テキストデータを扱うためのデータ型です。文字列型は、文字の列(例: "こんにちは"、"Hello, world!")を表現し、Webページ上のテキスト表示、ユーザー入力の処理、テキストベースのデータの操作など、多くの場面で使われます。文字列は、シングルクォート(')、ダブルクォート(")、またはバックティック(``)で囲むことによって作成されます。

シングルクォートダブルクォートは、基本的に同じように文字列を定義しますが、テキスト内でクォートを使用したい場合は、異なる種類のクォートを外側と内側で使い分けることが一般的です。

let singleQuoted = 'テキスト';
let doubleQuoted = "テキスト";
let withQuotes = 'シングルクォート\' とダブルクォート"';
console.log(singleQuoted, doubleQuoted, withQuotes);

ダブルクォーテーションでも、シングルクォーテーションでも意味は全く同じです。ただし、両者を併用することはできません。

let strNG = "Hello World!!'; //"と`は併用できません。

文字列の操作

JavaScriptのStringオブジェクトには、文字列を操作するための多くのメソッドが用意されています→テキストの検索、置換、分割、結合などが容易に行えます。

  • 検索
    • indexOf(), includes() などを使用して、特定の文字列が含まれているかを検索。
let sentence = "Hello, JavaScript!";
let searchWord = "Java";

// 文字列が含まれるか確認
console.log(sentence.includes(searchWord)); // 出力: true

// 特定の文字列が最初に現れる位置を検索
console.log(sentence.indexOf("Java")); // 出力: 7
console.log(sentence.indexOf("python")); // 存在しない場合は-1を返す 出力: -1
  • 置換
    • replace() を使用して、文字列内の一部を置き換える。
let oldString = "Hello, JavaScript!";
let newString = oldString.replace("JavaScript", "World");

console.log(newString); // 出力: "Hello, World!"
  • 分割
    • split() を使用して、文字列を配列に分割する。
let fruits = "apple,orange,banana,grape";
let fruitArray = fruits.split(",");

console.log(fruitArray); // 出力: ["apple", "orange", "banana", "grape"]
  • 結合
    • + 演算子や concat() メソッドを使用して、複数の文字列を結合。
let firstName = "Taro";
let lastName = "Yamada";
let fullName = firstName + " " + lastName; // + 演算子による結合

console.log(fullName); // 出力: "Taro Yamada"

// `concat` メソッドによる結合
let greeting = "Hello, ";
console.log(greeting.concat(fullName)); // 出力: "Hello, Taro Yamada"
  • 切り出し
    • substring(), slice() などを使用して、文字列の一部を切り出す。
let sentence = "Hello, JavaScript!";
// `substring` を使用した切り出し
console.log(sentence.substring(7, 11)); // 出力: "Java"

// `slice` を使用した切り出し
console.log(sentence.slice(7, -1)); // "JavaScript" の最後の"!"を除いて全てを取得

文字列の不変性

JavaScriptの文字列は不変(immutable)です。つまり、文字列が一度作成されると、その文字列を直接変更することはできません。文字列を変更するには、新しい文字列を作成する操作が必要です。

let original = "Hello";
let modified = original.replace("H", "J");
console.log(original); // "Hello"
console.log(modified); // "Jello"

論理型:Boolean

論理型(Boolean型)は、真偽値を扱うデータ型であり、true(真)またはfalse(偽)のいずれかの値を取ります。この型は、条件分岐やループの制御、論理演算など、プログラムの流れを決定する際に重要な役割を果たします。

Boolean型の値は、直接trueまたはfalseを使用するか、Boolean()関数を用いて他のデータ型の値をBoolean型に変換することで作成できます。

let isTrue = true;
let isFalse = false;

// Boolean()関数を使った変換例
let truthyValue = Boolean(1); // 数値の1はtrueに変換される
let falsyValue = Boolean(0); // 数値の0はfalseに変換される

console.log(isTrue); // 出力: true
console.log(isFalse); // 出力: false
console.log(truthyValue); // 出力: true
console.log(falsyValue); // 出力: false

真偽値を返す表現

JavaScriptでは、特定の演算子や関数式が評価された結果として真偽値が返される場合があります。例えば、比較演算子や論理演算子の結果は真偽値になります。

let result = 10 > 5; // 比較演算子の結果は真偽値
console.log(result); // 出力: true

let isEven = 4 % 2 === 0; // 4は偶数か?
console.log(isEven); // 出力: true

let hasValue = !!'文字列'; // 真偽値に強制変換
console.log(hasValue); // 出力: true

null

nullは特別な値の1つで、「何もない」「空」または「存在しない値」を意味します。nullは意図的に変数に「値がない」ことを示すために使われることが多く、オブジェクトやデータが期待されるが、何らかの理由で利用不可能または未定義の場合に利用されます。nullは後述するundefinedと密接に関連していますが、両者の間には重要な違いがあります。

ポイント nullの特徴と使用例

  • 明示的な「何もない」の表現
    • プログラマが変数に意図的に「値がない」状態を設定するために使用する。
  • オブジェクトのプレースホルダー
    • オブジェクトを参照する予定の変数が一時的にオブジェクトを持たない場合にnullを割り当てることがあります。
let book = null; // まだ本の情報がない、または本の情報をリセットしたい場合
console.log(book); // 出力: null

nullの型

JavaScriptにおけるnullの型に関しては少し特異な振る舞いを見せます。→typeof演算子を使用すると、nullの型はobjectとして返されます。これは、JavaScriptの初期設計の名残であり、nullが実際にはプリミティブ型であるにも関わらず生じる挙動です。

console.log(typeof null); // 出力: object

この振る舞いはJavaScriptの混乱の原因となることがありますが、nullが特別な値であることを理解しておけば、適切に扱うことができます。nullは、変数に「値がまだ設定されていない」または「オブジェクトが存在しない」ことを明示的に示すために重要な役割を果たします。

undefined

undefinedは、変数が宣言されたが、まだ値が割り当てられていないときのデフォルトの値です。nullと同様に、undefinedもJavaScriptの基本的なデータ型の一つであり、特別な意味を持ちます。

let notAssigned;
console.log(notAssigned); // 出力: undefined

function doNothing() {}
console.log(doNothing()); // 出力: undefined

let emptyObject = {};
console.log(emptyObject.noSuchProperty); // 出力: undefined

ポイント undefinedの特徴

  • 変数のデフォルト値
    • 新しく宣言された変数は、自動的にundefinedという値を持つ。
  • 関数の返り値
    • 何も値を返さない関数からの返り値は、undefinedになる。
  • 未定義のプロパティ
    • オブジェクトから存在しないプロパティを読み取ろうとすると、undefinedが返される。

JavaScriptでは、undefinedは変数が初期化されていないことを示すために使われますが、これを直接チェックすることはあまり推奨されません。変数が「定義されていない」かどうかを確認するには、typeof演算子を使用するか、より一般的には変数がnullまたはundefinedでないことを確認する方法があります。

undefinedの明示的な使用は稀であり、ほとんどの場合はJavaScriptエンジンによって内部的に扱われます。しかし、変数が初期化されていない場合の挙動を理解し、適切に扱うことは、エラーを防ぐ上で重要です。

Symbol

JavaScriptのSymbolは、ES6(ECMAScript 2015)で導入された新しいデータ型です。シンボルは、一意で不変の値を生成することができ、主にオブジェクトのプロパティキーとして使用されます。シンボルによって作成される値は、他のどんなシンボルとも重複しないため、名前の衝突を避けることができる特性を持っています。

let symbol1 = Symbol("description");
let symbol2 = Symbol("description");

console.log(symbol1 === symbol2); // 出力: false

↑のコードでは、symbol1symbol2は同じ説明文字列を持っていますが、それぞれが一意のシンボルであるため、等価比較はfalseを返します。

まとめ JavaScriptにおけるデータ型の基本

  • 動的型付け
    • JavaScriptは動的型付け言語→変数の型が実行時に決定される。
    • 型変換は暗黙的に行われることが多く柔軟性と便利だが、型関連のバグに注意が必要。
  • 基本的なデータ型
    • 数値 (Number): 整数や浮動小数点数を含む数学的な数値
    • 文字列 (String): テキストデータを扱うためのデータ型で、シングルクォート、ダブルクォートで囲む。
    • 論理型 (Boolean): 真偽値(trueまたはfalse)を表し、条件分岐やループ制御に使用される。
    • 未定義 (undefined): 値が割り当てられていない変数の状態を示す。
    • 空の値 (null): 「何もない」状態を意図的に設定するために使用する。
    • シンボル (Symbol): ES6で導入された、一意で不変の値を作成するためのデータ型です。
// 数値 (Number)
let number = 42;
console.log(number); // 42

// 文字列 (String)
let string = "Hello, JavaScript!";
console.log(string); // Hello, JavaScript!

// 文字列の結合
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

// 論理型 (Boolean)
let isTrue = true;
let isFalse = false;
console.log(isTrue, isFalse); // true false

// 論理演算
let andOperation = true && false;
let orOperation = true || false;
console.log(andOperation, orOperation); // false true

// 未定義 (undefined)
let undefinedVariable;
console.log(undefinedVariable); // undefined

// 空の値 (null)
let nullVariable = null;
console.log(nullVariable); // null

// シンボル (Symbol)
let symbol1 = Symbol("unique");
let symbol2 = Symbol("unique");
console.log(symbol1 === symbol2); // false

// 特別な数値
let infinity = 1 / 0;
let notANumber = "text" / 2;
console.log(infinity, notANumber); // Infinity, NaN

// 文字列の操作
let sentence = "JavaScript is fun!";
console.log(sentence.includes("fun")); // true
console.log(sentence.split(" ")); // ["JavaScript", "is", "fun!"]
console.log(sentence.replace("fun", "awesome")); // JavaScript is awesome!

// オブジェクトのプロパティとしてのシンボル
let id = Symbol("id");
let person = {
    name: "John",
    [id]: 123
};
console.log(person[id]); // 123

スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank
月額10,780円でJavaScript、Pythonなどのカリキュラムが
学び放題
質問し放題転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
JavaScriptWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました