JavaScriptの練習をしてみた【基本文法:データ型編】

JavaScript

この記事では,JavaScriptの基礎文法として,データ型を学習します.

データ型

JavaScriptには,「変数の型」はありませんが,文字列、数値、真偽値といった値に対する「データ型」はあります.

つまり,C言語のように変数を宣言したときに「valueは整数を入れる変数,strは文字列を入れる変数」のような変数の型はありませんが,「28は数値で,”Hello”は文字列」といった判別はされます.

何か値があったときに,「それはどんな種類の値か?」に答えるものがデータ型です(例:28はどんな種類の値か?→数値).

※ちなみに,TypeScriptはJavaScriptに変数の型を付けたものです

基本的なデータ型は以下の通りです.

  • 数値(Number): 28 や 4.23 など
  • 巨大な整数(BigInt): 任意精度の整数
  • 文字列(String): “Hello world” など
  • 真偽値(Boolean): true または false
  • undefined: 値が未定義であることを意味する
  • null: 値が存在しないことを意味する
  • シンボル(Symbol): 一意で不変な値

一方で,これらのデータ型を持つ値を要素として持つデータ型として,オブジェクト、配列、関数などがあります.

(JavaScriptでは,関数もデータの一つとして扱います)

データ型を調べたいときは,「typeof」を使います.以下はその例です.

console.log(typeof 28); // >> number
console.log(typeof "Hello"); // >> string
console.log(typeof true); // boolean

細かいところは省略しますが,各データ型について説明していきたいと思います.

基本的なデータ型

数値(Number)

整数と少数

数値には,整数もしくは少数があります.

ここで,この後の説明のために整数かどうかを判別する手段を紹介しておきます.

Number.isInteger(数値)で,その数値が整数ならtrue,整数でないならfalseを返します.

console.log(Number.isInteger(3)); // >> ture
console.log(Number.isInteger(2.4)); // >> false

整数と少数は,計算することができます.

console.log(3+0.4); >> 3.4

明らかに,3.4は整数ではありません.

console.log(Number.isInteger(3+0.4)); >> false

では,以下のようにたまたま整数になった場合は,JavaScriptは整数と判定するでしょうか?少数と判定するでしょうか?

console.log(0.7+2.3); >> 3

「3」だけみると整数な感じですが,「3.0」という少数な気もしますね.

これは,整数と判定されます.

console.log(Number.isInteger(0.7+2.3)); >> true

つまり,本質的にはJavaScriptでは整数と少数は区別されていないようです.

ちなみに,少数は以下のように最初の0は省略することができます.

console.log(0.24); // >> 0.24
// これでも同じ
console.log(.24); // >> 0.24

2進数,8進数,16進数表記

10進数だけでなく,2進数,8進数,16進数表記で数値を書くこともできます.

2進数表記の数値の場合は,その前に「0b」を付けます(例:0b011).

8進数表記の場合は,その前に「0o」を付けます(例:0o44).

16進数表記の場合は,その前に「0x」を付けます(例:0x1A).

例えば,10進数の28を表したい場合,他のn進数表記は以下のようになります.

// 10進数
console.log(28); // >> 28
// 2進数
console.log(0b11100); // >> 28
// 8進数
console.log(0o34); // >> 28
// 16進数
console.log(0x1C); // >> 28

指数

JavaScriptで指数を表現するには,以下のようにします.

// 2×(10の8乗)
console.log(2e8); >> 200000000
console.log(2E8); >> 200000000

巨大な整数(BigInt)

JavaScriptの数値は倍精度浮動小数です.そのため,扱える数値の最大値は(2の53乗)-1です.

これは以下で確認することができます.

console.log(Number.MAX_SAFE_INTEGER); // >> 9007199254740991

数値(numberデータ型)として値を扱う場合は,これ以上の値は正確なものにならない可能性があります.試しに,これに100を足したものを表示してみます.

console.log(Number.MAX_SAFE_INTEGER+100); // >> 9007199254741092

少し,値がずれてしまっていることが分かります.

これ以上の値を正確に使いたい場合は,BigIntというデータ型を使います.

数値の後ろに n を付けることで,BigIntになります.

console.log(9007199254741091n+100n); // >> 9007199254741191n

正しい数値を出せていますね.

BigIntとnumberは計算することができません.

console.log(9007199254741091n+100); // >> TypeError: Cannot mix BigInt and other types, use explicit conversions

また,少数をBigIntにすることはできません.

console.log(34.5n); // >> SyntaxError: Invalid or unexpected token

文字列(String)

文字列は,「”」か「’」,もしくは「`」で挟むことで文字列として扱われます.

console.log("文字列"); // => "文字列"
console.log('文字列'); // => "文字列"
console.log(`文字列`); // => "文字列"

エスケープシーケンス

JavaScriptには,いくつかのエスケープシーケンス(文字列中で\(バックシュラッシュ)を付けて意味をなすもの)があります.

例えば,文字列を改行するには,以下のようにします.

console.log("こんにちは!\nいつもサイトを閲覧して下さり,\nありがとうございます。");

出力結果

こんにちは!
いつもサイトを閲覧して下さり,
ありがとうございます。

ちなみに,以下のようにするとエラーが出ます.

console.log("こんにちは!
            いつもサイトを閲覧して下さり,
            ありがとうございます。"); // >> SyntaxError: Invalid or unexpected token

また,文字列中に文字としての「”」を入れたいとしましょう.そのまま書くと,以下のようになり,エラーが出ます.

console.log("JavaScriptを学ぶのは"超楽しい"ですね!"); >> SyntaxError: missing ) after argument list

このような場合には,\を使って「”」をエスケープする必要があります.

console.log("JavaScriptを学ぶのは\"超楽しい\"ですね!"); >> JavaScriptを学ぶのは"超楽しい"ですね!

他のエスケープシーケンスの例としては,以下があります.

エスケープシーケンス意味
\'‘(シングルクォート)を文字列として扱う
\"“(ダブルクォート)を文字列として扱う
\` `(バッククォート)を文字列として扱う
\\\(バックスラッシュ)を文字列として扱う
\n改行
\tタブ

バッククォートによる文字列

「`」(バッククォート)で囲んだ文字列は,「”」や「’」で囲んだ文字列とは異なり,少し特殊です.

例えば,先ほど説明したように「”」や「’」では「\n」を入れないとエラーが出て改行できませんでしたが,「`」なら改行を受け入れてくれます

console.log(
`こんにちは!
いつもサイトを閲覧して下さり,
ありがとうございます。`
);

出力結果

こんにちは!
いつもサイトを閲覧して下さり,
ありがとうございます。

また,「`」による文字列の場合,以下のようにすることで文字列の途中に変数の値を文字列として挿入することができます.

let value = 30;

console.log(`本日は${value}日です`); >> 本日は30日です

真偽値(Boolean)

Booleanは,trueもしくはfalseをもつデータ型です.

条件分岐やフラグなどでよく使います.

undefined

undefinedは具体的な値が決まっていない状態を表すデータ型です.

let value; // この時点では値は入れていない

console.log(typeof value); // >> undefined

value = 3; //データ型がnumberの値を入れる

console.log(typeof value); // >> number

上の例では,最初にvalueを定義した時点では値を入れていないので,データ型が決まっていません.そのため,その時点でのデータ型はundefinedになっています.

null

nullは値がないことを意味するデータ型です.

undefinedとの違いが分かりにくいかもしれませんが,undefinedは「まだ値を持っていない状態」で,nullは「何かを返すべきだが、返すものがない場合に意図的に使われるもの」です.

Symbol

※少し難しいので,JavaScriptを最初に学ぶときにはSymbolのことはいったん無視してもいいと思います.

Symbolはユニーク(唯一)で不変なデータ型です.つまり,まったく同じ内容のSymbolは作ることができません.

Symbolは以下のように作成します.

const sym = Symbol();

これをどういったときに使うかですが,例えばオブジェクトのキーとして利用することが考えられます.Symbolをキーとすることで,オブジェクトのキーが被ることがなくなり,またキーが書き換えられたりすることがなくなるため,ソースコードの安全性が高まります.

let obj = {};
const sym = Symbol("オブジェクトのキー");
obj[sym] = "値";

console.log(obj[sym]); // >> 値

オブジェクトについては,以下をご覧ください.

オブジェクト、配列

オブジェクトと配列に関しては改めて記事を書くので,ここでは簡単に紹介しておきます.

オブジェクト

オブジェクトは,要素として「キーと値」の組合せを持つデータです.キーと値の組合せをプロパティと呼びます.

オブジェクトを作成するには,以下のようにします.

// オブジェクトobjを作成
const obj = {
    // キー: 値
    "key": "value"
};

キーは文字列で書きますが,””は省略することができます.上の例では値の部分は文字列”value”になっていますが,これまで紹介したデータ型である数値や真偽値でも,入れ子にオブジェクトを入れてもよいです.

const obj = {
    // キー: 値
    key: 3
};

また,複数のプロパティを入れるには,以下のようにします.

const obj = {
    // キー: 値
    key1: 3,
    key2: 24
};

オブジェクトから値を取り出すときは,以下のようにします.

const obj = {
    key1: 3,
    key2: 24
};

// 以下はどちらも同じ意味
console.log(obj["key1"]); >> 3
console.log(obj.key1); >> 3

後からオブジェクトにプロパティを入れる場合は,以下のようにします.

const obj = {
    key1: 3,
    key2: 24
};

obj["key3"] = 555;

console.log(obj["key3"]); >> 555
console.log(obj.key3); >> 555

ちなみに,空のオブジェクトも生成できます.

// 空のオブジェクトobjを作成
const obj = {};

配列

配列は,以下のように宣言します.

const array_empty = []; // 空の配列
const array = ["おはよう", "こんにちは", "こんばんは"]; // 配列

要素の値には,数値や文字列など,色々なデータ型を入れることができます.

オブジェクトと違い,配列の要素には順番が付いています.この例では,0番目の要素として”おはよう”,1番目の要素として”こんにちは”,2番目の要素として”こんばんは”が入っています.

値の取り出し方は,以下の通りです.

const array = ["おはよう", "こんにちは", "こんばんは"]; // 配列

console.log(array[0]); // >> おはよう
console.log(array[1]); // >> こんにちは
console.log(array[2]); // >> こんばんは

まとめ

基本的なデータ型は以下の通り.

  • 数値(Number): 28 や 4.23 など
  • 巨大な整数(BigInt): 任意精度の整数
  • 文字列(String): “Hello world” など
  • 真偽値(Boolean): true または false
  • undefined: 値が未定義であることを意味する
  • null: 値が存在しないことを意味する
  • シンボル(Symbol): 一意で不変な値

・オブジェクト,配列は上の基本的なデータ型を要素に持つデータ型.

・各データ型の特徴は,本文をご覧ください.

次回は,基本文法として演算子を学習します.

参考

データ型とリテラル · JavaScript Primer #jsprimer
JavaScriptの値の種類にあたるデータ型についてを紹介します。データ型には大きく分けてプリミティブ型とオブジェクトがあり、それぞれのデータ型を簡単なコード例とともに紹介していきます。一部のデータ型にはリテラルというデータ型を簡単に記述するための構文が用意されており、リテラルについても合わせて紹介していきます。

コメント

タイトルとURLをコピーしました