第3回 リテラルと列挙型TypeScriptで学ぶJavaScript入門(1/2 ページ)

プログラミング初心者向けのTypeScript入門連載の第3回はTypeScriptのリテラルについて解説。変数との違いについて押さえよう。また、列挙型と呼ばれる複数の変数を格納できる型についても説明する。

» 2014年07月07日 13時39分 公開
[羽山博]
TypeScriptで学ぶJavaScript入門
Insider.NET

 

「TypeScriptで学ぶJavaScript入門」のインデックス

連載目次

 前回は変数について説明した。今回はその続きとして、リテラルと列挙型について解説する。

決まった値を表すリテラル

 前回は変数にデータ型があることや、データ型をどのように指定するかという方法について見たが、変数に代入される1200や"Hello"といった値についても少し整理しておこう。これまでは、あえて「データ」とか「値」という曖昧な言葉を使っていたが、こういった、決まった値は「リテラル」と呼ばれる。真偽値を表すtrueやfalseもリテラルである。

 では、整数リテラルから見ていこう。整数リテラルには10進数、16進数、8進数がある。書き方のルールは以下の通りだ。ただし、8進数はJavaScriptの古いバージョンとの互換性のために使われるもので、Playgroundでは、0で始まる数字を書くとコンパイルエラーになる。

数値の表記方法 使われる文字
10進数 1〜9で始まる数字(0〜9)の並び
16進数 0xで始まる数字(0〜9、a〜f、A〜F)の並び
8進数 0で始まる数字(0〜7)の並び
整数リテラルの書き方
いずれも先頭に符号を表す「+」または「−」を付けられる。

 このように、数字として使える文字の並びが厳密に決められているので、これ以外の文字を使うと整数と見なされない。例えば、以下のように書いたものは整数リテラルとして使える。

1200
-3
0x1F  // (16進数の1F。10進数なら31)
012   // (8進数の12。10進数なら10。ただし、8進数の表記はTypeScriptではエラーとなる)


整数リテラルの例

 しかし、以下の例は整数リテラルとは見なされない。

1,200
1,200
0x1G  // (Gは16進数で使える文字ではない)


整数リテラルとは見なされない例

[コラム]ECMAScript 5における8進数の取り扱い

 JavaScriptの文法はECMAEuropean Computer Manufacturers AssociationInternationalと呼ばれる標準化団体で策定されているECMAScriptに準拠しています。最新のバージョンはECMAScript 5.1で、多くのブラウザーでこの標準に準拠したJavaScriptが使えます。そして、TypeScriptでは次期バージョンであるECMAScript 6の機能を先取りして導入しています(クラス、ラムダ関数など)。

 ところで、ECMAScript 5以降では0で始まる数字を8進数として取り扱うことは推奨されていません。TypeScriptでも0から始まる数字を書くとエラーになります(ただし、互換性のためJavaScriptでは使えるようにはなっています)。

 Visual Studioでは、[TypeScript を使用した HTML アプリケーション]プロジェクトを新規作成した後、メニューバーから[プロジェクト]-[<プロジェクト名>のプロパティ]を選択し(あるいはソリューションエクスプローラーでプロジェクトを右クリックして[プロパティ]を選択し)、プロパティページにある[TypeScript ビルド]タブを開けば、[ECMA バージョン]リストで対応バージョンが選択できます。既定値は[ECMAScript 5]ですが、[ECMAScript 3]を選択すると、8進数も使えるようになります)。一方、Node.jsではtscコマンドの既定値がECMAScript 3となっているので、8進数を使ってもコンパイルエラーにはなりません。ECMAScript 5対応にしたい場合は、以下のコマンドラインを入力してコンパイルを実行します。

tcs -t ES5 ファイル名


Node.jsのtscコマンドでECMAScript 5準拠でTypeScriptプログラムをコンパイルする

 なお、ECMAScriptの詳細なバージョン情報についてはMDN(Mozilla Developer Network)の「JavaScript 言語情報」を参照してください。


 浮動小数点数リテラルは、小数点や指数表記を使った数値と考えてよい。以下の文字を使って表す。

0〜9、+、-、.(小数点)、eまたはE(指数を表す)


浮動小数点数の表記に使える文字

 例えば、以下のようなものが浮動小数点数リテラルになる

3.14
0.12e+4    // (0.12×104を表す)
-2.178E-3  // (-2.178×10-3を表す)


浮動小数点リテラルの例

 文字列リテラルは引用符で囲まれた文字の並びである。例えば、以下のようなものである。

"Hello"
'こんにちは'
"100"


文字列リテラルの例

 引用符は、単一引用符(')でも二重引用符(")でも構わない。もちろん、単一引用符で文字列を始めて二重引用符で閉じるというように、開始と終了が一致していないとコンパイルエラーになる(JavaScriptでもエラーになる)。

 文字の並びの中には、タブ文字や改行文字なども含めることができる。これらの文字はキーボードから入力できないので、\(バックスラッシュ)の後に1文字を指定して以下のように表す。

特殊文字 意味
\b バックスペース
\f 改ページ
\n 改行文字
\r キャリッジリターン(復帰文字)
\t タブ文字
\v 垂直タブ
\' 単一引用符
\" 二重引用符
\\ \そのもの
「\」で始まる特殊文字

 フォントによっては「\」が「\」ではなく「¥」と表示されることもあるが働きは同じである。

 例えば、以下のコードを実行すると、図5のような結果が表示される。

alert("文字列リテラルは\n単一引用符(\')または二重引用符(\")で囲む");



「\n」の箇所で改行され、「\'」や「\"」が「'」や「"」という文字そのものとして扱われた 「\n」の箇所で改行され、「\'」や「\""」が「'」や「"」という文字そのものとして扱われた

 ここで注意しないといけないのは「\n」などは「\」と「n」の2文字ではなく「\n」で1つの文字を表すということだ。例えば、文字列の長さはlengthプロパティを使って得られるので、以下のコードを実行すると、結果は2ではなく1となる。

alert("\n".length);


「\n」は2文字ではなく1文字を表す

[コラム]プリミティブ型のデータもオブジェクトのように振る舞う

 numberやstringなどのプリミティブ型のデータはオブジェクトのように扱うこともできます。といっても、オブジェクトがどういうものであるかまだ説明していないので、これだけでは何のことかさっぱり分からないかもしれませんが、取りあえずは「オブジェクトとはデータそのものとデータを取り扱うための手続きをまとめたもの」とでも考えておくといいでしょう。例えば、以下のコードを実行すると、結果は「5」と表示されます。

alert("Hello".length);


文字列“Hello”の長さを調べる

 この「length」というのは文字列の長さを表すプロパティ(=オブジェクトごとの性質)です。また、以下のコードを実行すると、「l」と表示されます。

alert("Hello".charAt(2));


指定した位置にある文字を取り出す

 「charAt」は指定された位置の文字を取り出すメソッド(=オブジェクト自身が実行できる操作で、これを呼び出すと何らかの処理が実行される。プログラミングでは「手続き」とも表現される)なのです(2と指定したのに「e」ではなく「l」が表示されたのは、先頭の文字を0文字目と見なすからです)。

 もちろん、リテラルではなく変数を使っても同じことができます。例えば、以下のコードを実行すると、最初の例と同じように「5」が表示されます。

var greetings:string = "Hello";
alert(greetings.length);


リテラル値ではなく、変数に格納されたオブジェクトのプロパティにアクセスする

 このように「.」で区切ってプロパティやメソッドを書けば、そのデータに関する属性を取り出したり、そのデータを処理したりできます。プリミティブ型のデータも単なる値として取り扱われるだけでなく、自分自身を処理する方法を知っているモノ(オブジェクト)として扱えるというわけです。


 なお、文字列リテラルの各文字はUTF-16と呼ばれる文字コードで表されるので、その文字コードを「\u」の後に続けて書いてもよい。例えば、以下のようにすれば、「愛」という文字が表示される。

alert("\u611B");


「\」に続けてUTF-16の文字コードを続けても、特定の文字を表せる

 ブール型のリテラルはtrueまたはfalseだけなので、特に難しいことはないだろう。他にも配列リテラルやオブジェクトリテラルがあるが、配列やオブジェクトを取り扱う回で説明することとする。

       1|2 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。