構文

[up] [prev] [next]

一覧

break, case, catch, const, continue, debugger, do, else, finally, for, for in, goto, if, let, switch, throw, try, while, var, with

複文(ブロック)

複数の文を { ... } で囲むことにより、ひとつの文として扱うことができます。これを複文またはブロックと呼びます。

JavaScript
{
    xx = 3;
    yy = 5;
    zz = xx + yy;
}

変数・定数宣言

◆ 変数宣言(var)

変数の使用開始を明示的に宣言するには、var を用います。

JavaScript
var xx = 5;
var yy = 8;
var zz = xx + yy;
◆ 変数宣言(let)

ES6(ES2015) からは、var の後継として let がサポートされました。let で定義した変数は、そのブロックの中だけで有効な局所変数となります。これにより、ブロック内で使用する変数が、ブロック外の変数の値を誤って上書きしてしまうリスクを低減することができます。Chrome 41, Firefox 44, Internet Explorer 11, Edge 12, Opera 17 から使用可能です。

JavaScript
var a = 3;
let b = 3;
{
    var a = 5;
    let b = 5;
}
console.log(a);    // 5 (ブロック内で上書きされてしまう)
console.log(b);    // 3 (ブロック内で上書きされない)

for文 で使用する変数にも let を用いることで、ループ変数をより安全に使用することができます。

JavaScript
for (let i = 0; i < 10; i++) {
    console.log(i);
}
◆ 定数宣言(const)

ES6(ES2015) ではまた、定数を定義する const がサポートされました。const を用いて定義された定数に値を代入しようとすると、TypeError が発生します。Chrome 21, Firefox 36, Internet Explorer 11, Edge 12, Opera 12, Safari 5.1 から使用可能です。

JavaScript
const a = 5;
a = 8;        // TypeError

条件分岐(if)

◆ if (expression) statements1 else statements2)

expression が真であれば statements1 を、さもなくば statements2 を実行します。例えば次の例では、変数 n の値が 10 より小さければ、Small! を、さもなくば Big! を表示します。

JavaScript
n = 5;
if (n < 10) {
    alert("Small!");
} else {
    alert("Big!");
}

else 以降は記述しない場合もあります。

JavaScript
if (n < 10) {
    alert("Small!");
}

次のような書き方もできます。

JavaScript
if (n < 10) {
    alert("Small!");       // 10より小さければ Small! を
} else if (n > 20) {
    alert("Big!");         // 20より大きければ Big! を
} else {
    alert("Normal");        // さもなくば Normal を表示
}

条件分岐(switch)

◆ switch (expression) { case value: statements; ... }

expression の値に応じて処理を振り分けます。次の例では、n の値が 1 なら One を、2 なら Tow を、3 か 4 なら Three or Four を、それ以外なら Other を表示します。

JavaScript
n = 2;
switch (n) {
case 1:
    alert("One");
    break;
case 2:
    alert("Two");
    break;
case 3:
case 4:
    alert("Three or Four");
    break;
default:
    alert("Other");
    break;
}

break は statements の終わりを意味します。書き忘れると、次の case の statements まで実行されます。下記の例では、n が 1 の時、One と Two と Other が表示されます。

JavaScript
n = 1;
switch (n) {
case 1:
    alert("One");
case 2:
    alert("Two");
default:
    alert("Other");
}

繰り返し(while)

◆ while (expression) statements

expression が真である間、statements を繰り返します。次の例では n が 10 未満の間処理を繰り返し、0123456789 と表示します。

JavaScript
n = 0;
while (n < 10) {
    document.write(n);
    n++;
}

繰り返し(do)

◆ do statements while (expression)

expression が真である間、statements を繰り返します。次の例では 0123456789 と表示されます。最初から expression が偽であっても、statements が少なくとも1回は実行される点が while (...) {...} と異なります。

JavaScript
n = 0;
do {
    document.write(n);
    n++;
} while (n < 10);

繰り返し(for)

◆ for (expression1; expression2; expression3) statements

最初に expression1 を実行し、次に、statementsexpression3expression2 が真である間繰り返します。次の例は10回繰り返す処理の典型的な例で、0123456789 と表示されます。

JavaScript
for (i = 0; i < 10; i++) {
    document.write(i);
}
◆ for (variable in array) statements

配列のすべての要素に関する処理を行います。次の例では BlueRedYellow が表示されます。

JavaScript
xx = [ "Blue", "Red", "Yellow" ];
for (i in xx) {
    document.write(xx[i]);
}

for を用いてオブジェクトが持つ属性の一覧を調べることもできます。下記の例では、navigator オブジェクトが持つ属性の一覧を表示します。ただし、これで調べられない属性(DontEnum属性を持つ属性)もあります。

JavaScript
for (i in navigator) {
    document.write(i, "<br>");
}

ループを抜ける(break)

◆ break
◆ break label

break は、最も内側の for、while、do ループや、switch 文の case 節を抜けます。次の例では、01234 と表示されます。

JavaScript
for (i = 0; i < 10; i++) {
    if (i == 5) {
        break;
    }
    document.write(i);
}

label は入れ子になったループを一度に抜けたい場合に用います。次の例では、i が 20 より大きくなったときに、外側の for ループを抜けます。

JavaScript
abc:
  for (i = 0; i < 10; i++) {
      for (j = 0; j < 10; j++) {
          xx = i * 10 + j;
          if (xx > 20) {
              break abc;
          }
          document.write(xx + "<br>");
      }
  }

ループを続ける(continue)

◆ continue
◆ continue label

ループ内の残りの処理をスキップし、もっとも内側の for, while, do ループの次のループを実行します。次の例では 5 がスキップされて 012346789 と表示されます。

JavaScript
for (i = 0; i < 10; i++) {
    if (i == 5) {
        continue;
    }
    document.write(i);
}

label を指定した場合は、ラベルで指定したループの次のループを実行します。

JavaScript
abc:
  for (i = 0; i < 10; i++) {
      for (j = 0; j < 10; j++) {
          xx = i * 10 + j;
          if (xx == 55) {
              continue abc;
          }
      }
  }

ラベル(label)

label:

スクリプト中の位置にラベルをつけます。ラベルは break 文や continue 文で参照します。JavaScript 1.2 以降で使用可能です。

JavaScript
label1:
  for (i = 0; i < 10; i++) {
      for (j = 0; j < 10; j++) {
          if (func(i, j) {
              break label1;
          }
      }
  }

オブジェクト参照(with)

◆ with (obj) statements

obj で指定したオブジェクトについて処理を行います。例えば、次の例は、

JavaScript
document.write(document.bgColor);
document.write(document.fgColor);

with を用いて、次のように書くことができます。

JavaScript
with (document) {
    write(bgColor);
    write(fgColor);
}

例外処理

◆ try { ... } catch (...) fainally { ... }

try, catch, finally は、JavaScript 1.4, ES3 で定義された構文で、例外処理を扱う際に使用されます。try { ... } の中でエラーが発生し、throw によって例外が投げられると、try { ... } の残りの処理はスキップされ、catch { ... } の処理が実行されます。finally { ... } の処理は例外の有無に関わらず実行されます。

JavaScript
try {
    error = doSomething();
    if (error) {
        throw "myException";
    }
    // エラーが発生するとこの部分の処理はスキップされます
} catch (e) {
    // 例外が発生するとこの部分の処理が実行されます
    console.log(e);    // "myException"
} finally {
    // この部分の処理は例外発生の有無に関わらず実行されます
    console.log("finally");
}

モジュール(export, import)

モジュールは、ES6 でサポートされた機能で、PHP の require や Python の import と同様に、スクリプトのから他のスクリプトファイルを読み込みます。Chrome 62, Safari 10.3 で使用可能です。

まず、読み込まれるファイル側で、公開する関数や変数を export 宣言します。

module.js
export function hello_world() {
    alert("Hello world!!");
}

上記で公開(エクスポート)された関数を、別のスクリプトファイルから import します。

test.js
import { hello_world } from "./module.js";
hello_world();

これを、HTML ファイルから呼び出します。ES6 modules を使用するスクリプトは type="module" 属性をつけて呼び出します。

HTML
<script type="module" src="test.js"></script>
◆ export

外部に公開する変数や関数などを宣言します。

JavaScript
export var a1 = 5;          // 変数 a1 をエクスポートする
export let a2 = 5;          // 変数 a2 をエクスポートする
export const a3 = 5;        // 定数 a3 をエクスポートする
export function f1() {...}  // 関数 f1 をエクスポートする
◆ import

外部ファイルから、エクスポートされた変数や関数などを読み込みます。

JavaScript
import "./module.js";                                // module.js からエクスポートされているものすべてをインポートする
import { a1, a2 } from "./module.js";                // module.js から a1 と a2 をインポートする
import { a1 as b1, a2 as b2 } from "./module.js";    // a1 を b1、a2 を b2 という名前でインポートする
import * as mod from "./module.js";                  // mod という名前でインポートする (mod.a1, mod.a2, ...)

デバッグ

◆ debugger

EC5.1 で追加された機能で、ブラウザのデバッガ機能を使用する場合のブレークポイントを設定します。[F12] キー(Mac の場合は [Command]+[Option]+i) で開発ツールを開いた状態で下記を実行すると、debugger の箇所で実行が止まり、デバッグモードになります。変数やコンソールログを確認しながら、ステップ実行することも可能です。

JavaScript
console.log("A");
console.log("B");
debugger;
console.log("C");
console.log("D");

ジャンプ(goto)

◆ goto label

JavaScript では goto 文はサポートされていません。


[up] [prev] [next]
Copyright (C) 1996-2017 杜甫々
改訂版初版:2001年5月20日
最終更新日:2017年12月10日
http://www.tohoho-web.com/js/statement.htm