ゼロから始めるJavaScript講座Vol04 データ型の種類


ゼロから始めるJavaScript講座Vol04 データ型の種類
目次
  1. ゼロから始めるJavaScript講座データ型の種類
  2. データ型とは
  3. 数値型と文字列型
  4. 論理型
  5. null型
  6. undefined型
  7. 課題

ゼロから始めるJavaScript講座データ型の種類

データ型とは

データの扱いに関する形式のことをデータ型といいます。文章だと分かりづらいと思いますので、お手本に従いプログラムを完成させてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>データ型</title>
</head>
<body>
    <script>
        var sum;
        var num = 1; // 数値型
        var str = '1'; // 文字列型
        // 数値型(1) + 数値型(1)
        sum = num + num;
        document.write("<p>1 + 1 = " + sum + "</p>");
        // 文字列型('1') + 文字列型('1')
        sum = str + str;
        document.write("<p>'1' + '1' = " + sum + "</p>");
        // 数値型(1) + 文字列型('1')
        sum = num + str;
        document.write("<p>1 + '1' = " + sum + "</p>");
    </script>
</body>
</html>

javascript-type1-639

データ型は値の種類のようなもので、プログラムの中にある全ての値は、その値の種類(データ型)に関する情報を持っています。

数値型と文字列型

データ型にはいくつか種類があり、冒頭のtype.htmlでは「数値型文字列型

javascript-type2-639

変数numのように、値を何も囲わず数字のそのまま記載するとデータ型は数値型

javascript-type3-639

しかし変数strのように値をシングルクォート又はダブルクォートで囲うと、見た目上は数値のように見えますが、データ型は文字列型

このように変数numと変数strは、値が同じ「1」ですが、データ型が「数値型」、「文字列型」と異なっています。

javascript-type4-639

+(プラス)記号を用いた場合、

  • データ型が数値型- データ型が文字列型

が行われます。このように値は同じ「1」ですが、データ型によって+(プラス)記号により行われる処理内容が異なります。

javascript-type5-639

そしてデータ型が「数値型」「文字列型」と異なる値に+(プラス)記号を用いた場合、数値型は文字列型として扱われ、文字列結合が行われます。

このようにプログラムは値だけでなくデータ型も処理に影響します。今回は一度変数に代入して利用しましたが、データ型は全ての値に存在しており、

javascript-type6-639

例えば上記のように変数に値を代入せず直接記載した場合も「1」という値に対して「数値型文字列型

データ型の理解はなかなか難しいですが、

数値型は囲まずそのまま記載例)1、100、222

例)’1’、’abc’、’002′文字列型*はシングルクォート又はダブルクォートで囲って記載 *

ということを覚えておきましょう。

データ型にはその他「論理値型」「null型」「undefined型」などがあります。

論理型

true(真)又はfalse(偽)の2つの値を持つ形式となります。

詳細については「if」説明時に行い、定義の仕方のみ、例を以下に示します。

javascript-type7-639


null型

値を持たないことを表す形式となります。null型の値はnullのみとなります。変数を箱と考えた場合、箱の中身(値)が空っぽの状態がnullです。

javascript-type8-639

一番下にある「varnothing=null」がnull型であり、値がない状態となります。データとして「何もない」ことを表現する場合、nullを利用します。


undefined型

「未定義である」ことを表す形式となります。undefined型の値はundefinedのみとなります。

javascript-type9-639

変数undefを宣言した後、値を何も代入せずに変数の表示を行うとundefinedと表示されます。このように値が未定義のものはundefined型となります。

null型とundefined型は似ていますが、null型は「値がないと定義」、undefined型は「未定義」と意味が異なります。


「数値型」「文字列型」「論理型」「null型」「undefined型」と計5つのデータ型を紹介しました。

最初はなかなか意図して利用するのが難しいと思いますが、+(プラス)記号による加算と文字列結合のように、データ型を考慮してプログラムを書く必要があるものが多々あるため、少しずつ意識できるようになっていきましょう。

課題

以下の変数のデータ型が何か答えなさい。変数q_9、q_10に関しては値も答えなさい。

javascript-data-work-639

NEXTLESSON演算子とは演算子とは

PREVLESSON変数の使い方変数の使い方


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp