Water Sunlight

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JavaScript 型と変数 ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2020-10-20//

===== 変数と定数 =====

プログラミングに於ける式は、オペレータ(演算子)とオペランド(被演算子)によって構成されています。そして、オペランドは変数、定数とリテラルのいずれかに分類することができます。

変数と定数は使用する前に宣言しなくてはなりません（当然のことですが、リテラルに宣言は不要です）。但し、明示的に[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode|Strictモード]]を宣言しない場合は、非Strictモードとなり変数の宣言は免除されます。尚、非Strictモードは[[https://developer.mozilla.org/ja/docs/Glossary/Sloppy_mode|Sloppy モード]]と呼ばれることもあります。

==== 変数の宣言 ====

構文
<code javascript>
var 変数名 [= 初期値], … ; // ローカルスコープ、２重定義可能
let 変数名 [= 初期値], … ; // ブロックスコープ、２重定義禁止 [ES2015]
</code>

宣言で使用する ''var'' 命令または ''let'' 命令の違いについては、本編の[[http://www.y2sunlight.com/water/doku.php?id=js:function:scope|JavaScript 変数のスコープ]]を参照してください。

以下にいくつかの例を示します。

<sxh javascript;title:Example>
var foo = 1;
let bar = 1; 
</sxh>

変数が複数ある場合はカンマで区切って、次のように書くことができます。

<sxh javascript;title:Example>
var foo = 1, bar = 1;
</sxh>

==== 定数の宣言 ====

ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>以降では、定数を宣言するための[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const|const]]命令が利用できるようになりました。

<code javascript>
const 定数名 = 値, … ;  // [ES2015]
</code>

<sxh javascript;title:Example>
const TAX_RATE = 0.1, PI = 3.14;
</sxh>

\\

===== データ型 =====

JavaScriptには以下の ''プリミティブ型'' が存在します。

  * Number --- 整数または浮動小数点数
  * BigInt --- 長整数（任意の精度を表現できる整数）
  * String --- 文字列
  * Boolean --- 真偽値（trueまたはfalse）
  * Symbol<sup>[[js:top#ECMAScript|*2015]]</sup> --- シンボル型
  * Null --- null値（空）のみを持つ型
  * Undefined --- undefined値（未定義）のみを持つ型

また、以下の ''構造型'' と呼ばれる型が存在します。

  * Object --- newキーワードで生成されるインスタンスのための型
  * Function --- 非データ構造である関数のための型

本章ではこれらのデータ型のうち プリミティブ型について説明し、構造型については他の章に譲ることにします。詳しくはMDNの以下の項を参照してください。

  * [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures|JavaScript のデータ型とデータ構造]]
  * [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_Types#data_structures_and_types|データ構造とデータ型]]

\\

==== 数値型 Number ====

JavaScriptの数値型は整数と浮動小数点数を区別しません。具体的にはIEEE754で定義された[[https://ja.wikipedia.org/wiki/%E5%80%8D%E7%B2%BE%E5%BA%A6%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0|倍精度浮動小数点数]]を表します。

整数リテラル
<code>
0
123       // 先頭が0以外は10進数
0377      // 先頭が0の場合は8進数
0xCAFE91  // 先頭が0xの場合は16進数 
</code>

浮動小数点リテラル
<code>
3.14      // 小数点を含む数値
6.02e+23  // 指数部分を含む数値
</code>

=== Numberオブジェクト ===

JavaScript では Number 型以外にNumberオブジェクトが存在します。例えば以下の例を見てください。

<sxh javascript;title:Example>
let n1 = 123;
let n2 = new Number(123);

console.log(typeof(n1)); // number
console.log(typeof(n2)); // object
</sxh>

ここで変数 n1 は number 型ですが、n2 は Number オブジェクトになります。number型の変数にNumberオブジェクトのメソッドを適用すると暗黙的にnumber型からNumberオブジェクトへの変換が行われます。

<sxh javascript;title:Example>
let n = 1234.56;
console.log(n.toLocaleString());  // 1,234.56
</sxh>

この例では、変数 n は number 型ですが toLocaleString() が適用される前に Number オブジェクトへ暗黙的に変換されています。Numberオブジェクトについては本編の「[[js:build-in:number]]」を参照してください。

\\
==== 長整数型 BigInt ====

bigint 型は number 型で表現できる最大の数（[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER|Number.MAX_SAFE_INTEGER]]）より大きな数について信頼性のある表現方法を提供します。

BigInt のリテラルは以下の様に末尾に n をつけて表します。

BigIntのリテラル
<code javascript>
123n
3.14n
</code>

BigInt の使用例を以下に示します。

<sxh javascript;title:Example>
let n = Number.MAX_SAFE_INTEGER;

console.log(n);                // 9007199254740991
console.log(n * 10);           // 90071992547409900
console.log(BigInt(n) * 10n);  // 90071992547409910n
</sxh>

[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt|BigInt()]] 関数は bigint 型を生成します。この例で分かるように number 型は大きな整数の演算を行うと精度が損なわれますが、bigint 型では精度が保障されます。

bigint 型は number 型と異なり相補的なオブジェクトは存在しません。

<sxh javascript;title:Example>
let bn = 123n;
console.log(typeof(bn)); 　// bigint
</sxh>

bigint 型は他の型と演算することができません。bitint 型と number 型をまぜて演算したい場合はどちらかの型に明示的に型変換する必要があります。但し、この場合、bigint 型は number 型に型変換すると精度が落ちるのは言うまでもありません。

<sxh javascript;title:Example>
let bn = 123n;
let n = 123;
console.log(bn + BigInt(n)); // 246n
</sxh>

\\

==== 文字列型 String ====

文字列は英数字記号などの文字の並びのことです。JavaScriptでは文字列を扱うデータとして string 型があります。但し、他の言語で見られるようなひとつの文字データを表す型（例えば C/C++ の char型）は存在しません。

文字列型は内部的にユニコード（UTF-16）が使用されます。string 型のユニコードについては本編の「[[js:build-in:string#文字コード|JavaScript Stringオブジェクト 文字コード]]」を参照して下さい。

文字列リテラル
<code javascript>
'Hello'                    // シングルクォートで囲まれた 0 個以上の文字の並び
"3.14"                     // ダブルクォートで囲まれた 0 個以上の文字の並び
'name = "sato"'            // 文字列中にダブルクォートのある場合はシングルクォートで囲む
"I like O'Roilly's book."  // 文字列中にシングルクォートのある場合はダブルクォートで囲む
</code>

テンプレートリテラル
<code javascript>
let name = 'sato';
let greeting = `Hello ${name}.
It's fine today.`;
</code>

上例の様にバッククォートで文字列を囲むと文字列リテラルを表すことができます。このようにES2015<sup>[[js:top#ECMAScript|*2015]]</sup>からはPHP言語などのようなヒアドキュメント形式の文字列リテラルが使えるようになりました。この機能を[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals|テンプレートリテラル]]と呼びます。

テンプレートリテラルでは以下のことが出来ます。

  * 複数行にまたがる文字列
  * 文字列への変数の埋め込み（いわゆる変数展開）など

詳しくは[[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals|MDN]]をご覧ください。

=== エスケープシーケンス ===

JavaScriptでは他の言語と同様に文字列リテラル内でバックスラッシュを使用することにより、特別な文字を表現することが出来ます。これはエスケープシーケンスと呼ばれます。

^コード^出力^
|\n|改行|
|\t|水平タブ|
|\'|シングルクォート|
|\"|ダブルクォート|
|\777|３桁の８進数|
|\x41|２桁の１６進数|
|\u9ad8|最大４桁の１６進数で、UTF-16のコードポイント（U+0000 ～ U+ffff）を表す|

UTF-16のコードポイントを使った例を以下に示します。

<sxh javascript;title:Example>
console.log("\u4f50\u85e4");  // 佐藤
</sxh>

=== Stringオブジェクト ===

JavaScriptでは string 型以外に Stringオブジェクトが存在します。例えば以下の例を見て下さい。

<sxh javascript;title:Example>
let s1 = "Hello";
let s2 = new String("Hello");

console.log(typeof(s1)); // string
console.log(typeof(s2)); // object
</sxh>

ここでは、変数 s1 は string ですが s2 は Stringオブジェクトになります。string 型の変数に Stringオブジェクトのメソッドを適用すると暗黙的に string 型から Stringオブジェクトへの変換が行われます。

<sxh javascript;title:Example>
let s = "HELLO";
console.log(s.toLowerCase());  // hello
</sxh>

この例では、変数 s は string 型ですが toLowerCase() が適用される前に Stringオブジェクトへ暗黙的に変換されています。Stringオブジェクトについては本編の「[[js:build-in:string]]」を参照して下さい。

=== 文字列の操作 ===

JavaScriptでは文字列を結合する為の演算子として、数値と同様に、+ 演算子を適用することが出来ます。

<sxh javascript;title:Example>
let name = "sato";
console.log('Hello ' + name);  // Hello sato
</sxh>

文字列を操作するために、JavaScriptでは様々な関数が用意されています。

<sxh javascript;title:Example>
let str = "こんにちは。佐藤さん。";

console.log(str.length);          // 11
console.log(str.charAt(6));       // 佐
console.log(str.substring(6,8));  // 佐藤
</sxh>

上例であげたメソッド（またはプロパティ）は Stringオブジェクトのものです。先に述べたように string 型の変数に Stringオブジェクトのメソッド（プロパティ）を適用すると暗黙的な型変換が行われています。

Stringオブジェクトには文字列を操作するための基本的な多くのメソッドが含まれています。詳しくは本編の「[[js:build-in:string]]」を参照して下さい。

\\
==== 論理型 Boolean ====

論理型は論理値を表す型です。論理値は真または偽のいずれかの値となります。これは以下のリテラルで表現します。

<code javascript>
true  // 真
false // 偽
</code>

例えば次の例を見て下さい

<sxh javascript;title:Example>
a == 1;
</sxh>

この式は変数 a が 1 に等しいかどうかを調べ、そうである場合は true を、そうでない場合は false を真偽値として返します。

論理値は if文や while文などの制御構造で使うのが一般的です。

<sxh javascript;title:Example>
if (a == 1) {
    b = 1;
} else {
    b = 2;
}
</sxh>

=== Truthy と Falsy ===

JavaScriptでは C/C++ や PHP などと同様に if文などの条件部分の中で真偽値以外にもそれに準じた値を指定することができます。このような真偽値そちて扱われるものを Truthy（真として扱われる）または Falsy (偽として扱われる)と呼びます。

以下のものは Falsy として扱われます。

|Falsy||
|論理値の偽|false|
|数の0|0|
|非数（NaN）|Nan|
|空の文字列|<nowiki>''</nowiki>|
|ヌル値|null|
|未定義値|undefined|

これ以外のものは全て Truthy として扱われます。
|Truthy||
|論理値の真|true|
|数の1|1|
|文字列の1|'1'|
|文字列の0|'0'|
|空の配列|[]|
|空のオブジェクト|{}|

文字列の'0'や空の配列も Truthy な値なので注意して下さい。

\\

==== シンボル型 Symbol====

\\

==== ヌル Null ====

null値は値が無いことを表す特殊な値です。考え方としては、null値はNull型の唯一の値という解釈もできます。またオブジェクト型としてオブジェクトが存在しないという意味づけをすることも出来ます。

\\

==== 未定義 Undefined ====

JavaScriptでは、null値以外に未定義（undefined値）という特殊な値もあります。undefined値は Undefined型の唯一の値です。

値が代入されていない変数の値は undefined値になります。例えば以下のような場合です。

  * 未定義の変数またはプロパティ
  * 値が代入されていない変数
  * 値が返されていない関数から戻り値を受け取った場合

<sxh javascript;title:Example>
let undefined_value;
let a = undefined_value;  // undefined値を受け取る
</sxh>

\\


==== オブジェクト Object ====

本編の[[js:object:basic|「JavaScript オブジェクトの基本」]]を参照してください。

\\

==== 関数 Function ====

本編の[[js:function:basic|「JavaScript 関数の定義」]]を参照してください。

\\
Water Sunlight

ユーザ用ツール

サイト用ツール

ページ用ツール
