変数と値

ここでは、 プログラミング言語によるプログラムの組み立てそのものの理解は 他で済ませるものと仮定し、JavaScript の基本的な文法仕様に絞って説明する。 本講で想定しているプログラム動作環境はWebブラウザであるが、 厳密にはブラウザの持つ言語処理系によって仕様の異なる部分がある。 ここでは、ECMAScript 7th Edition(June 2016) の仕様に基づいて説明する。 ECMAScript は Netscape Navigator 由来の JavaScript と、Microsoft による JScript の双方に基づいて策定されたプログラミング言語定義である。 本講で用いる「JavaScript」という語は、ブラウザ全般で動くものを想定するため、 「ECMAScript」の持つ概念に近い。 EcmaScript のバージョンに応じて、 ES6あるいはES7といった表記を用いることがある。

変数の利用と宣言

多くの言語と異なり JavaScript の変数は型を持たない。 型を持たないため、文字列を入れた後に数値を再代入することもできる。 また、宣言なしでも使えるが、var で宣言すると、宣言した位置のみで通用する変数が確保される。 宣言位置が関数の外であれば全域(グローバル)、関数内であれば 関数内のみで有効な変数となる。var 宣言なしでいきなり代入した場合は、位置に依らずグローバル変数となる。 以下の例を参照せよ。

g1 = "外側のg1";			// g1, g2 ともにトップレベルなので
var g2 = "外側のg2";		// いずれもグローバル変数

function foo() {
    var g1 = "fooでg1を設定";	// foo()関数内のみ有効 → 抜けると消える
    g2 = "fooでg2を設定";		// グローバル変数の上書き → 抜けても残る
    g3 = "fooでg3を設定";		// グローバル変数となる → 抜けても残る
    var g4 = "fooでg4を設定";	// 関数内のみ
}
foo();
console.log("g1="+g1);		// => "g1=外側のg1"
console.log("g2="+g2);		// => "g2=fooでg2を設定"
console.log("g3="+g3);		// => "g3=fooでg3を設定"
console.log("g4="+g4);		// g4変数未定義エラーで実行されない

ログコンソールに出る実行は以下のとおりである。

ReferenceError: g4 is not defined
var-scope.js:14:0
 
"g1=外側のg1"
var-scope.js:11:0
 
"g2=fooでg2を設定"
var-scope.js:12:0
 
"g3=fooでg3を設定"
var-scope.js:13:0

変数 g4 を出力しようとする行(14行目)はエラーとなっている。

ECMAScript 2015 以降では変数宣言として let と const が利用できる。

let

ブロックスコープの変数を宣言する。

const

ブロックスコープの定数変数を宣言する。初期値からの変更はできない。

ブロックスコープとは、{ } で囲まれた範囲で有効となるものである。

// 関数外(グローバル)
var g1="関数外で定義した var g1";
var g2="関数外で定義した var g2";
let g3="関数外で定義した let g3";
// 関数スコープ
function foo() {
    var g1 = "foo内で定義した var g1";
    if (true) {  // ブロックスコープ
	let g2="foo/if内で定義した let g2";  //ifブロックを抜けると消滅
	var g3="foo/if内で定義した let g3";
    }
    console.log(g1);
    console.log(g2);
    console.log(g3);
}
foo();
console.log(g1);

ECMAScript 2015 以降の仕様を満たすインタプリタでは以下のような出力結果となる。

foo内で定義した var g1
関数外で定義した var g2
foo/if内で定義した let g3
関数外で定義した var g1

基本的な値の型

基本的な型について説明する。

文字列(String)

文字列を表す型が String 型である。文字列リテラルは シングルクォートまたはダブルクォートで囲って表記する。 リテラル文字列内ではいくつかの文字をバックスラッシュを用いて表す。

たとえばダブルクォートもしくはシングルクォートでくくった文字列内に それ自身を含ませたいときは以下のようにすればよい。

var str1 = "He said \"yes\"."		=> He said "yes".
var str2 = 'Let\'s begin!'		=> Let's begin!

テンプレートリテラル

ES6では、バッククォートで囲むことにより、 改行文字を含ませたり変数展開が可能な テンプレートリテラル が使用できる。

var str1 = "foo";
var str2 = `str1
is ${str1}`;

とすると、str2 の値は、${str1} の部分がその値に展開されて、

str1
is foo

となる。printfの使えないJavaScriptでは、文字列中に 変数の値を交ぜることが面倒なので、テンプレートリテラルを利用すると便利である。

console.log(`xの値 = ${x}`)

数値

JavaScriptで扱える数値は整数と浮動小数点数の2種類である。 数値は '0x' 前置による16進数表記や、10進指数表記も可能である。

x = 0x100				=> 256
y = 120 + 3e3				=> 120 + 3×102 = 3120

整数と浮動小数点数の変換は自動的に行なわれる。

1 + 2					=> 3
5/2					=> 2.5
2.5*2					=> 5

数値と文字列の変換

プログラムでは文字列と数値を相互に変換する必要がたびたび発生する。 演算によって自動的に変換する方法と専用の変換関数を利用する方法がある。

数値から文字列

数値に空文字列を「加算」することで文字列化できる。

123+""		// これは "123" に変換される。

変換後が文字列であることを確認するには、値の型を返す typeof を利用するとよい。

typeof(123+"")			=> string

toString 関数を利用すると数値単体で変換できる。

x = 123;
y = x.toString();		=> "123"
hex = x.toString(16);		=> "7b"

toString 関数に引数を渡すと変換時の基数となる。上の例は123を 16進数に変換したもので、基数は2から36まで指定できる。

文字列から数値

文字列を数値に変換するには文字列になく数値にある演算をするか、 parseInt または parseFloat 関数を利用する。

s = "1024.5"
num1 = s/1			=> 除算は文字列にないので数値化される
num2 = parseInt(s)		=> 1024(整数化)
num3 = parseFloat(s)		=> 1024.5(浮動小数点数化)

配列

空の配列は [] または、new Array() で得られる。配列の長さ(要素数)は length プロパティで得られる。

x = ['foo', 'bar', 'baz'];
x.length
=> 3

以下の例では変数xに上記の値があると仮定する。

様々な演算記号

数値を対象とする演算記号についてまとめる。

単項演算子

次の演算子は、直後に値を伴いその値に対する演算結果を返す。

二項演算子

次の演算子は2つの値の中間に位置し、 2つの値から得られる演算結果を返す。

また、上記各演算子の直後に = を付加したものは、代入演算となる。たとえば、

x += 3

は、変数 x の元の値に3を足す。 このとき、元の x が文字列か数値かによって結果が異なる点に注意が必要である。

x = 12
x += 3
  => 15
x = "12"
x += 3
  => "123"

比較演算

2つの値を比較する演算を行なう演算子を示す。

注意すべきは == と === の違いで、 前者は型が違っても型変換により等価になるものは等しいとみなす。

5 == 5		// => true
5 === 5		// => true
5 == "5"	// => true
5 === "5"	// => false

論理演算

論理値の組み合わせに対して論理演算を行なう演算子を示す。

文字列処理関数

文字列(String型)の値を操作する関数について有用なものを示す。

文字列操作練習

  // var email = " hogehoge@example.com  \n";
  var e = email.trim();
  var atpos = e.indexOf('@');
  var localpart = "", domainpart ="";
  if (atpos >= 0 && atpos == e.lastIndexOf('@')) {
    localpart  = e.substring(0, atpos);
    domainpart =  e.substr(atpos+1);
  }

正規表現

JavaScriptでは文字列内を検索するパターンに正規表現 が使える。正規表現はパターンを / / で囲んだ正規表現リテラル または、元となる文字列を RegExp 関数に渡して生成する。 また、文字列と正規表現との照合は 文字列.match 関数あるいは 正規表現.exec 関数を用いる。

利用できるパターン

先に利用できるパターンについてまとめる。

特殊文字の表現として、以下の表記が利用できる。

正規表現フラグ

正規表現のパターン指定の後ろに特定のフラグをつけて、 検索時の挙動を制御できる。主なフラグを示す。

マッチ情報の取得

正規表現で文字列照合を行ないマッチした直後には、 マッチした部分の文字列などのいくつかの情報がグローバル変数に代入されている。

括弧内に示した $ で始まる記号は、 次に示す置換文字列として参照できるものである。

replace関数

replace() 関数を用いると、 文字列に含まれるパターンを別のものに置き換えることができる。

文字列.replace(パターン, 置換後文字列)

パターン の部分には固定的な文字列あるいは正規表現を指定でき、 元の文字列のうちパターンにマッチした部分が 置換後文字列に置き換えられる。これには通常の文字列のほか、 以下の特殊文字列も利用できる。

たとえば以下のようにすると、元の文字列の前後に括りをつけることができる。

'abc'.replace(/.*/, '<$&>')		=> '<abc>'

正規表現処理練習

  // var email = " hogehoge@example.com  \n";
  var localpart = "", domainpart ="";
  if (email.match(/\s*(\S+?)@([^@]+)\s*/)) {
    localpart  = RegExp.$1;
    domainpart = RegExp.$2;
  }
  alert("email="+email+", localpart="+localpart+", domainpart="+domainpart);

数値処理関数

JavaScriptで用意されている数値演算関連のものを示す。

定数

算術関数

下記関数はいずれも定義域外で NaN を返す。

※: 小数点以下の指定桁で四捨五入したものを文字列にする場合は、 Number.toFixed(小数桁) が有用である。たとえば 3.1415.toFixed(3) とすると第4位を四捨五入して "3.142" が得られる(文字列であることに注意)。

日付けに関する関数

JavaScriptの標準関数には日付を表現できるものとして Date 型のオブジェクトがある。Date オブジェクトを介すと日付の計算などが可能となる。 生成は以下のいずれかの引数指定でコンストラクタを呼ぶ。

呼び方
生成されるDateオブジェクトの時刻
new Date()
現在時刻
new Date(EpochMS)
 
Unixエポックで EpochMS ミリ秒時点の時刻
 
new Date(String)
 
String で表現される日付時刻
 
 
new Date(year, month-1[, day[,
    hour[, min[, sec[, ms]]]]])
 

 

日付時刻文字列の指定では

YYYY-MM-DDTHH:mm:ss.sssZone

の書式が求められる。YYYY から ss.sss までの部分はそれぞれ西暦年、月(2桁)、日(2桁)、時(24時間制2桁)、 分(2桁)、秒.ミリ秒 の数値である。また、Zone の部分はタイムゾーン表記で、以下のような規則で記述する。

JavaScript では時刻を1970年1月1日午前0時(UTC)からのミリ秒 (エポックミリ秒)を基準としている。これは Date.now() 関数で得られる。

Date オブジェクトのメソッドの主なものを示す。

上記関数名の "set" を "get" に変えると該当数値を変更する関数名になる。

例として、「1週間後の日付文字列を求める」コードを示す。

now	= Date.now();				// 現在時刻(エポックミリ秒)
oneweek	= new Date(now + 1000*3600*24*7);	// 7日後の時刻で Date 生成
expire	= oneweek.toISOString();		// ISO8601文字列化する

JavaScriptではローカルタイムとUTCの相互変換を互換性高く 行なうことが容易でない。時刻の比較はUTCエポック時刻で行ない、 ローカル時刻は表示したいときの最後に getHours() 関数などで取得する流れで行なうとよい。

関数オブジェクトとコールバック処理

JavaScript では、関数定義に関数宣言 と 関数式 が利用できる。

参考: MDN Web Docs 関数

// 関数宣言
function foo(msg) {
  console.log(msg);
}
// 関数式
var foo = function(msg) {
  console.log(msg);
}
// アロー関数式
var foo = (msg) => {	// 引数1つのときは()を省略して msg => {...} でもよい
  console.log(msg);
}

関数宣言は、その関数がその名前で呼ばれることが固定的なときに、 関数式は関数の呼ばれる場所が呼出し記述場所と異なる場合に主に用いる。 たとえば、指定時間経過後に行なう処理を登録する window.setTimeout 関数は以下のように用いる

window.setTimeout(関数, ミリ秒)
= > timeoutID

例として3秒後にalertメッセージを出す簡単な例を示す。

var tID =  window.setTimeout(function() {
  alert("時間切れです!");
}, 3000);

あるいはアロー関数式を用いて以下のようにも書ける。

var tID =  window.setTimeout(()=>{alert("時間切れです!");}, 3000);

Webページと連動して動くプログラムでは、 時間のかかる通信処理などの関数呼出しが多く、それらの終了を待つと プログラム全体の処理に時間がかかる。そのため瞬時に終わらない処理を 呼ぶときは終了を待たず先に進み、呼び出した処理が終わったときにすべきことを 関数オブジェクトとして渡す形を多用する。function キーワードからなる 名前を与えられていない関数のことを無名関数という。 また、呼んだ先の関数に、さらに次の処理をする関数を呼んでもらうことを コールバック という。

このように、別の処理の終了を待たずに先に進む処理を非同期処理といい、 とくに JavaScript で HTML/XML テキストの通信を非同期で行ないながら 進めるものを Ajax と呼ぶ。

→ 目次