← Back

【JavaScript】プログラミング初心者が知っておくべきプリミティブ型のこと

2023年1月25日eyecatch

この記事では、Javascriptのプリミティブ型についてプログラミング初心者が抑えておくべきことに厳選して解説します。

プリミティブ型とは、値を管理する最も基本的なデータ型のことです。

プリミティブ型はプログラミング言語によって数が異なります。

JavaScriptには、プリミティブ型が6種類存在します。

この記事は、プログラミング初学者の方に向けて、難しい言葉は使わず分かりやすい言葉で解説しています。

JavaScriptのプリミティブ型 6つの基本要素

初めに、プリミティブ型とは何か紹介します。

冒頭でも述べましたが、プリミティブ型は「最も基本的なデータの種類」のことを言います。

プログラミング言語には、データの種類が複数用意されていて、このデータの種類のことをデータ型と呼びます。

データ型の中でも、始めから用意されていて標準的なもの、それがプリミティブ型です。

プリミティブ型に該当しないデータ型は全てオブジェクトとなります。

JavaScriptには6つのプリミティブ型があります。

  • Number
  • BigInt
  • String
  • Boolean
  • Undefined
  • Symbol(この記事では記載していません。)


数値型 Number BigInt

次に数値型のNumberとBigIntについて紹介します。

Number・BigIntとは

JavaScriptには、数値を扱うNumberとBigIntというプリミティブ型が2種類用意されています。

2種類ありますが、基本的に数値を扱うときはNumberを使用します。

ちなみに、BigIntはNumberでは大きすぎて表すことのできないデータを表現します。

JavaScriptのNumberでは、小数点(浮動小数点数)からマイナスの値まで幅広く扱います。

【補足】
NumberとBigIntは扱う数字の範囲以外にもオブジェクトの動作に違いがあります。

具体的には、NumberではMathオブジェクトという組み込みオブジェクトが使えますが、BigIntではMathオブジェクトが動作しません

詳細について確認したい方は、こちらをご確認ください。

NaN(Not a Number)とは

NaNはNot a Numberという名前の通り、数字ではない値のことです。

イメージが湧きにくいかもしれませんが、以下の場合にNaNとなります。

  • 0を0で割った場合 ⇒ 0/0
  • NaNとして演算した場合 ⇒ 1+NaN , 1-NaN など


このように、演算で使用した場合にNaNを返す場合があります。
また、NaNは結果だけではなく演算で直接使用することもできます。

演算で使用した場合、結果は必ずNaNを返します

Infinity(無限大)とは

Infinityはその名の通り、無限大のことです。

JavaScriptでは扱いきれない数値に対して使用されます。

Infinityはとてつもなく大きい数字(10を1000回掛けた結果)であったり、数値を0で割ったりすると発生します。

Number < BigInt < Infinityのイメージです。

数値を0で割ったりした場合など、想定されていなかった数値の処理がされたときもInfinityの値を取ります

let inf = 1 / 0 ;
//Infinityが返ってきます。


0を0で割った場合は、InfinityではなくNaNになります。

間違いやすい点なので注意が必要です。

文字列型 String

3つ目に文字列のStringについて紹介します。

Stringの記述方法

Stringを記述するときは、シングルクォート(')またはダブルクォート(")で囲みます。

let bestColor = "red" ;

let bestColor = 'red' ;

基本的にどちらで囲んでも問題はありません。

しかし、はじめをシングルクォート(')で囲んで、最後をダブルクォート(")で囲むことはできません。

コードの見やすさを考慮して、どちらかに統一して記述することをおすすめします。

【補足】
以下のように、異なったタイプのクォートを使うことで、シングルクォートまたはダブルクォートを文字に含めることができます。

let quote='挨拶をします。"hello" ' ;    //挨拶をします。"hello"と出力されます

let quote="挨拶をします。'hello' " ;    //挨拶をします。'hello'と出力されます


Stringプロパティ

Stringには標準でlengthプロパティが備わっています。

lengthプロパティでは文字列の長さを扱うことができます。

let str = 'aaabbbccc'

console.log(str.length);   //strに格納されている文字列の数(9)が出力される。


Stringメソッド

全てのStringには、最初から組み込まれているメソッドが存在します。

Stringメソッドを使用することで、Stringに対して様々な操作ができます。

  • 文字列内を検索する。
  • 文字列内の指定した文字を他の文字に変換する。
  • 文字列の両端のスペースを取り除く。


Stringプロパティとは異なり、Stringメソッドは数多く存在しています。

メソッドとプロパティの違い(補足)

プロパティとは、何らかの情報を保持するものです。

一方で、メソッドとは何らかの情報を処理をするものです。

一般的には、プロパティで何らかの情報を取得し、取得した情報をもとにメソッドで処理するという流れになります。

また、メソッドは、()なしで記述すると実行されません

()なしで記述すると、格納されているメソッドそのものが結果として返ってきます。

真偽値 Boolean

4つ目に真偽値のBooleanについて紹介します。

Boolean型の特徴

Booleanのことをブール型、真偽値と呼びます。

Booleanは、trueかfalseどちらかの値を取るという特徴があります。

10 < 8 ; //FALSEが返されます

let str = 'aaa' ;
str === 'aaa';    //TRUEが返されます

Boolean(真偽値)は、比較演算子論理演算子とあわせて使用されます。

多くの場合、If文の条件式を判定するときに使用されます

truthy・falsyな値

Boolean(真偽値)を指定する場面で、数字(Number、BigInt)や文字(String)を代入すると、truthyfalsyな値に変換されます。

数字や文字を変換して、trueとして扱われる値のことをtruthyな値といいます

数字や文字を変換して、falseとして扱われる値のことをfalsyな値といいます

falsyとなる値は、JavaScriptで定義されており、以下の8つが該当します。

  • 0
  • -0
  • 0n
  • 空文字
  • null
  • undefined
  • NaN

8つ以外の値は全てtruthyとなります。


論理演算子

論理演算子はtruthy・falsyな値と組み合わせて使用します。

論理演算子は2つあります。

  • &&(左側がtruthyであれば、右側の値を返す。そうでなければ左側の値を返す。)
  • ||(左側がtruthyであれば、左側の値を返す。そうでなければ右側の値を返す。)


返した値をもとに、trueかfalseか判定されます。

console.log(1 && 0);
//左側の値がtruthyなので右側の値を返す。右側の値はfalsyなのでfalseが出力される。

console.log(0 && 1);
//左側の値がfalsyなので左側の値を返す。左側の値はfalthyなのでfalseが出力される。

console.log(1 && 1);
//左側の値がtruthyなので右側の値を返す。右側の値はtruthyなのでtrueが出力される。

console.log(1 || 0);
//左側の値がtruthyなので左側の値を返す。左側の値はtruthyなのでtrueが出力される。

console.log(0 || 1);
//左側の値がfalsyなので右側の値を返す。右側の値はtruthyなのでtrueが出力される。

console.log(1 || 1);
//左側の値がtruthyなので左側の値を返す。右側の値はtruthyなのでtrueが出力される。

文字列でも同じように判定されます。

NullとUndefined

Nullはプリミティブ型ではありませんが、undefinedと混合するため記載します。

  • Nullとは、意図的に値が存在しないことを表し、使うときは値を代入する
  • undefinedは値がまだ定義されていないときに出力される


重要な点は、Nullを使用する場合は意図的に値が無いことを伝えるということです。

undefinedは、変数宣言後に値を代入しないと変数に格納されます。

let name;
console.log(name);  //nameに値を代入していないのでUndefinedが格納されます。

Nullは、データが無いことを意図的に伝える場合などに使用します。

まとめ

今回はJavaScriptのプリミティブ型について基礎を解説しました。

プリミティブ型はJavaScriptを学ぶ上で、最初に理解しておくべき重要な項目です。

  • Number
  • BigInt
  • String
  • Boolean
  • Undefined
  • Symbol

6つのプリミティブがあることをきちんと抑えておきましょう。

当ブログでは、JavaScriptに関する情報を初学者に向けて分かりやすい言葉で解説しています。

プリミティブ型と併せて理解しておくべき重要な要素である「オブジェクト」について、こちらの記事でまとめました。

よかったらぜひチェックしてみてください!

管理人

管理人

最後まで読んでいただきありがとうございました。

この記事の目次
フロントエンドRPGについて

当ブログは、Web開発に役立つ情報を日々の学びをもとに発信しています。
サイト制作やブログのカスタマイズについて承ります。
お気軽にご連絡・ご相談ください。

©2024 フロントエンドRPG Created by KOBI 23プライバシーポリシー