JavaScript PR

【初心者向け】JavaScriptのデータ型を解説します

  /
記事内に商品プロモーションを含む場合があります

JavaScriptで扱うことのデータの型が定めされていて、大きく分けるとプリミティブ型とオブジェクト型に分かれます。

ここではプリミティブ型を中心に解説します。

プリミティブ (primitive）は、「原始的な」という意味があり、オブジェクトでなく、メソッドを持たないデータのことで、以下の7種類のデータ型があります。

  1. 文字列
  2. 数値
  3. Biglnt
  4. 真偽値
  5. null
  6. undefined
  7. シンボル ※他のデータ型にくらべ利用頻度が少ないため説明を割愛

それでは1つ1つ解説していきます。

 

JavaScriptのデータ型【文字列（string）】

文字列は、文字通り文字を記述が記述されたデータとなります。

プログラミングでは、基本的に日本語を使うことはありませんが、文字列の場合には、日本語も使うことが可能です。

文字列は、「”（ダブルクォート）」もしくは「’（シングルクォート）」とで囲んだ範囲が文字列型のデータを表現しています。

console.log('こんにちは');

console.log("こんにちは");

ダブルクォートとシングルクォートどちらを使うべきか

JavaScriptで文字列を表現する際には、「”（ダブルクォート）」もしくは「’（シングルクォート）」を使いますが、どちらを使うべきでしょうか？

答えは、どちらでも問題ありません。

ただし、「”（ダブルクォート）」を「’（シングルクォート）」同じコード内で、使うと可読性に欠けるので、同じプロジェクト内では、どちらか一方を使うにします。

なお、文章の中で強調するために、「”（ダブルクォート）」や「’（シングルクォート）」を利用したい場合は、文字列全体「”（ダブルクォート）」で囲み、協調したい部分を「’（シングルクォート）」で囲うなど、逆のものを利用すれば強調として使うことが可能です。

また、同じ「”（ダブルクォート）」や「’（シングルクォート）」を使う場合も「/（バックスラッシュ）」を使うことで、文字列内で利用することが可能です。



//「トムは"こんにちは！"といった。」と出力される
console.log('トムは"こんにちは！"といった。');

//「トムは'こんにちは！'といった。」と出力される
console.log("トムは'こんにちは！'といった。");

//「I'm TOM」と出力される
console.log('I\\'m TOM');

 

JavaScriptのデータ型【数値(number)】

数値は、文字列と同じく最もよく使う型で、数字を使うための型です。

文字列では、「”（ダブルクォート）」もしくは「’（シングルクォート）」を使うことで文字列を表現していましたが、数値は、そのようなものはなく、直接、数値を記載すれば数値型となります。

また、小数点以下の数値も扱うことが可能です。

console.log(5);

console.log(3.55);

数値には限界と誤差がある

数値を扱う時に注意すべきことがあります。

それは　①扱える桁数に限界がある

②計算では誤差が生じることがある

下記が、その例になります。

//「9876543219876544」と表示される
console.log(9876543219876543);

//「9.876543219876545e+24」と表示される
console.log(9876543219876543987654321);

//「0.30000000000000004」と表示される
console.log(0.1 + 0.2);

まず、数値型の精度は53ビットとなるので、桁が多くなると表示ができなくなります。

1つ目の例では最後の数字が切り上げられており、2つ目の例では、「e+24」という形（24桁）で数値が途中から表示されておりません。

このように、桁の多い数値は表示ができないことに注意が必要です。

また、3つ目の例では、0.1と0.2を足している為、0.3が答えとなるのですが、「0.30000000000000004」と表示されています。

特に小数点を扱う時などは、このような計算誤差があることを覚えておきましょう。

JavaScriptのデータ型【Biglnt】

BigintはES2020で追加された、現時点（2022年）では、まだ使用頻度が少ないですが、もう一つの数値の型です。

Biglntは、任意精度整数であり、整数を扱う時に使う型です。

任意精度というのは、どれだけ大きな数でも誤差なく使用することができるということなので、number型では、53ビットが限界ですが、Biglntについては、そのような制限がなく、どれだけ大きな数でも誤差なく使用することができます。

ただし、少し扱いがむずかしいのと、計算速度はnumber型の方が高速であるため、number型の速度で十分な場合はnumber型を使い方がよいです。

JavaScriptのデータ型【真偽値(boolean)】

真偽値は、「true」と「false」の２つの値だけの型となり、条件判定などをする際に使われます。

簡単に言えば、「YES」か「NO」かという2択となります。

よく使われるコードでは「if文」で使われます。



let num = 5;

if( num > 3){
 cosole.log("numは3以上です。);
}

上記の例では、ifと書かれている部分の後ろの( num > 3)の部分は、「numは３より大きい数字」かどうかを判定しており、それが正しい場合は、 「numは3以上です」と表示される文章です。

この( num > 3)の部分は、つまるところ、「3より大きい値どうかを判定している」部分であり、見た目上はわかりませんが、ここの値は真偽値である「true」と「false」のどちらかになります。

if文の場合、ここが「true」になった場合、{ }内の挙動を起こします。

下記は、主なデータがbooleanに変換された場合の変換される真偽値の値です。

種類 値 真偽値
数値 11 TRUE
0 FALSE
-5.894 TRUE
長整数 44450ｎ TRUE
0ｎ FALSE
文字列 “banana” TRUE
 “” FALSE
オブジェクト {1:’banana’, 2:’cherry’} TRUE
{} TRUE
[‘banana’, ‘cherry’] TRUE
[] TRUE
function(x){return x;} function(x){return x;} TRUE
その他 undefined FALSE
null FALSE
Nan FALSE

 

JavaScriptのデータ型【null・undefined】

この２つの型は、両方とも「データがない」ということを表した型です。

文字列や数字などについては、それぞれ「”こんにちは”」や「123」など型に応じた値がありますが、nullとundefinedについては、それ自体が型であり値となります。

両方とも同じ「データがない」ですが、

 

  1. undefinedは、「値が未定義」「値が代入されていない」。
  2. nullは、「値が空」「値がない」「値が不明」。

という違いがあります。

なお、nullは、意図的にデータがない状態を作った場合に現れる値であるのに対し、undefinedは意図せず発生している値や定義漏れの場合に現れることが多いです。

JavaScriptのデータ型の型変換

JavaScriptでは、例えば、文字列と数値を連結させようとした時などにエラーとならず、必要に応じて自動で型の変換をしてくれます（エラーとなる言語もあります）。

JavaScriptのデータ型変換【文字列に変換】

まず、型を変換する場合、下記のように「String(値)」もしくは、「値.toString( )」で明示的に変換することが可能です。

※typeof(値)で型を確認することができます。

let num = 11;

    console.log(typeof(num)); //number
    
    numConversion = String(num);
    
    console.log(typeof(numConversion)); //string

    numConversion2 = num.toString()

    console.log(typeof(numConversion2)); //string

このように明示的に、数値型など他の型の値を文字列型に変更することが可能ですが、数値型と文字列型の値を「＋」を使って連結させようとした場合には、自動的に数値型が文字列型に変換されます。

let num = 11;　//number型
    let str = "歳"　//string型

    numConversion = num + str; 

    console.log(numConversion);  //11歳と表示される
    console.log(typeof(numConversion)); //string型と表示される

言語によっては、異なる型の値を連結させようとする場合に、エラーとなる場合がありますが、JavaScriptでは、自動で判断し、型を変換させ連結させてくれます。

JavaScriptのデータ型変換【数値に変換】

自動での型変換は、数値型への変換も可能です。

まずは、明示的に型を変換する方法ですが、Number(値)で変換が可能です。

let num = "11";

console.log(typeof(num)); //string

numConversion = Number(num);

console.log(typeof(numConversion)); //number

このように明示的に数値型に変更が可能ですが、下記の様に文字列型になっている数字に対して演算を行う場合には、自動で数値型に変換され、演算がされます。

※「＊」は掛け算

let num = "11";

console.log(typeof(num)); //string

numConversion = num * 2　　//「11 × 2」

console.log(typeof(numConversion)); //number

console.log(numConversion); //22と表示される

なお、演算の中で「＋」の場合には、注意が必要で、文字列型の数値と数値型の数値を「＋」で足す場合には、連結扱いとなり数値型の数値が文字列に変換され、文字列型として連結されてしまいます。

let num = "11";

console.log(typeof(num)); //string

numConversion = num + 2 //「2」が文字列に変換される

console.log(typeof(numConversion)); //string

console.log(numConversion); //112と表示される

JavaScriptのデータ型変換【真偽値に変換】

真偽値（boolean)でも少し解説しましたが、if文の「if(値)」のこの値の部分については、表面上は違う値の様に見えます、真偽値に値である「true」と「false」のどちらかに変換がされています。

下記の場合、( num > 3)部分は「true」と変換されています。

let num = 5;

if( num > 3){
 cosole.log("numは3以上です。);
}
「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



関連記事