この記事では、JavaScriptで扱うデータ型を説明していきます。
JavaScriptを扱っていくためには、データ型やその種類を把握する必要があります。
Webサイトのアニメーション作成にも使用していく知識なので、今回の記事でイメージを膨らませていきましょう。
目次
JavaScriptのデータ型
JavaScriptには、「データ型」というものがあります。
- プリミティブ型
- オブジェクト型
JavaScriptのデータ型には大きく分けて上記の２種類あります。
オブジェクト型のデータ
オブジェクト型のデータには以下のようなものがあります。
- オブジェクト（Object）
- 配列（Array）
- 関数（Function）
- 日付（Date）
- 正規表現（RegExp）
- JSONオブジェクト
上記の例の共通点として、複数の値を使う点があります。
プリミティブ型のデータ
プリミティブ型のデータには以下のようなものがあります。
- 文字列（String）
- 数値（Number）
- 真偽値（Boolean）
- undefined
- null
上記の例の共通点として、単一の値を使う点があります。
プリミティブ型の値には他にも「シンボル（Symbol）」や「長数列型（Bigint）」などのデータもあります。
ただ、少々発展的な内容になってしまうので、よく利用される５つのデータについて紹介していきます。
よく使用するプリミティブ型のデータ５つ
それではプリミティブ型のデータについて見ていきましょう。 これから紹介するデータ型は「値」とも言いますので、覚えておきましょう。
文字列（String）
文字列（String）は、テキストのデータ型となります。
console.log("テキスト");以前の記事で、テキストを表示するときは「" "」（ダブルクォーテーション）または、「' '」（シングルクォーテーション）で囲むという説明をしましたが、 上記のルールは文字列（String）というデータ型を表すために必要なものだったのです。
数値（Number）
数値（Number）は、計算を行う数値を扱うデータ型となります。
//数値なので計算できる
console.log(10 + 10);
//文字列なので計算できない
console.log("10 + 10");数値（Number）は、JavaScriptのプログラムの中で計算を行う際に使用します。
上記の例では、数値と文字列の例を記述しました。 文字列というデータ型で記述するとそのまま「”10 + 10”」というテキストが表示されます。
以上の例からデータ型によってJavaScriptの処理が大きく変わってしまうことをイメージしていただければ大丈夫です。
真偽値（Boolean）
真偽値（Boolean）は、「true」と「false」という２つの値があります。
確認のために、console.log()に真偽値を入れてみると、以下のように結果が出力されます。
console.log(true);// => "true"
console.log(false);// => "false"詳しくは「if文」という項目で出てきますが、
「true」か「false」のどちらかの結果が出たときに処理を切り替える際などに使っていきます。
undefined
undefinedは、未定義という意味を持った値です。
変数や配列などの初期値の設定に使用されることが多いです。
//変数の中身は「テキスト」という文字列
let sample = "テキスト";
console.log(sample); // => "テキスト"//変数の中身は何も定義していない
let sample;
console.log(sample); // => "undefined"上記のコードのように、変数の中身が未定義の状態だと「undefined」の値を返します。
null
nullは、特別なデータになります。 意図的にオブジェクトの値が存在していないことを表すために用いられます。
ここでややこしくなってしまうのが、「null」以外にも「0」や「undefined」などの値を設定しない方法が存在します。
なので、それぞれの値の違いのイメージを掴んでおきましょう。
画像の例ではnullを説明する際に使われる有名な例です。
数値の「0」はトイレットペーパーの紙が切れてしまい、値は0の状態になっています。
次に、「null」は、トイレットペーパーの入れ物は存在しますが、中身が入っていない状態を示しています。
最後に、「undefined」はトイレットペーパーの入れ物がそもそも存在していない（定義されていない）状態を示します。
実際に使用してみないと、この辺りのイメージを掴むのは難しいのですが、
大切なこととして、nullという値は「0」や未定義の意味を持つ「undefined」とは別物のデータということを覚えておきましょう。
データ型を判断する
最後に、データ型を確認する方法を学んでいきましょう。
console.log()の引数にtypeof演算子を使用することで、データ型を調べることができます。
//文字列
console.log(typeof "テキスト"); // => "string"
//数値
console.log(typeof 2022); // => "number"
//真偽値
console.log(typeof false);// => "boolean"
//undefined
console.log(typeof undefined); // => "undefined"
//null
console.log(typeof null); // => "object"
//配列
console.log(typeof ["配列"]); // => "object"
//関数
console.log(typeof function() {}); // => "function" 実際に記述して覚えよう！
ここまでで、「プリミティブ型」と「オブジェクト型」のJavaScriptデータ型を確認してきました。
JavaScriptは、参考書や記事で読んだだけでは知識が身につくのに時間がかかってしまいます。
実際にアウトプットすることで、知識を定着させることを意識していきましょう！
