第10回 「最適化」
前回は四則演算について簡単な表示を行いました。それが以下のものでした。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) { document.write(i * 2);document.write("<br>");}
// --></script>
</body>
</html>
前回、このプログラムはもっと短くすることができる、と書きました。上記のような書き方をしていくと、１つの演算結果や１つのタグごとにdocument.write()を書かなければいけません。これはとても面倒ですし、ミスを誘発してしまいます。
実はdocument.write()は,で区切って複数の出力文字・値を指定することができます。つまり上記のプログラムは以下のようにコンパクトなものになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write(i * 2,"<br>");
// --></script>
</body>
</html>
,でなく+を使って文字を連結して表示させることもできます。この場合は、以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write(i * 2+"<br>");
// --></script>
</body>
</html>
ただし、+記号は数値演算処理としても使われるので数字と演算して結果を表示するつもりが文字列として連結されてしまい予想外の結果になってしまう場合があります。例えば以下のプログラムは本当はiに１を加算した結果を太字で表示させたいのですが、結果は01、11、21・・・91となってしまいます。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write("<b>"+i +1+"</b><br>");
// --></script>
</body>
</html>
これは変数iの前に"<b>"という文字列があるため、iは文字列との連結になり「<b>0」「<b>1」「<b>2」・・・「<b>9」のようになります。この時点で文字列になっているため、後に続く数字の１も文字列との連結になり、その結果数字ではなく文字列になってしまいます。つまり
「文字列」+「文字列」 ＝ 「文字列」
「文字列」+「数 値」 ＝ 「文字列」
「数 値」+「文字列」 ＝ 「文字列」
「数 値」+「数 値」 ＝ 「数 値」
となります。
先ほどの、うまく動かなかったプログラムは以下のように書く必要があります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
for (i=0; i<10; i++) document.write("<b>",i +1,"</b><br>");
// --></script>
</body>
</html>
次回はランダムに文字列（挨拶文）を表示してみることにしましょう。