Wikibooks

「JavaScript/制御構造」の版間の差分

履歴の双方向閲覧
← 古い編集次の差分 →
削除された内容 追加された内容
ビジュアルウィキテキスト
Ef3 (トーク | 投稿記録)
7,141 回編集
リファクタリング
Ef3 (トーク | 投稿記録)
7,141 回編集
加筆
1 行
{{Nav}}
'''[[w:制御構造|制御構造]]'''（せいぎょこうぞう、''control flow''）とは、プログラムの流れのこ「順次」「分岐」「反復」とです。プログラムは上から下へ順番にいう基本的な処理が実行されていきますが、'''制御構文'''（せいぎょのこうぶん、''control flow statement''）と呼ばれる文を用言いると、条件により処理を実行したり、同じ処理を繰り返しすことができます。
 
== 概要 ==
8 行
let n = 0;
 
if ( n < 0 ) {
alertconsole.log("負の数");
}
else if ( n > 0 ) {
alertconsole.log("正の数");
}
else {
alertconsole.log("0");
}
</source>
23 行
== if-else ==
'''[[w:if文|if文]]'''（イフぶん、''if statement''）は「もし〜ならば」を表す制御構文（条件構文）です。
if文では{{code|( )}}の中に書かれた条件が [[JavaScript/truthy|truthy]] であるとき続く文が実行されます。次のプログラムは、''n'' < 0（''n''が0より小さい）という条件が真であるときのみ「負の数」と表示します。
 
<source lang="javascript">
let n = -1;
 
if ( n < 0 ) {
alertconsole.log("負の数");
}
</source>
 
if文のあとに'''else節'''（エルスせつ、''else clause''）を置くと、else節の文はif文の条件が [[JavaScript/falsy|falsy]] であるときのみ実行されます。次のプログラムは、''n'' < 0（''n''が0より小さい）という条件が真であれば「負の数」、さもなくば（''n''が0以上ならば）「自然数」と表示します。<ref>計算機科学では一般に0を自然数に含め、曖昧さを避けたいときは非負整数とも言います</ref>。
 
<source lang="javascript">
let n = 0;
 
if ( n < 0 ) {
alertconsole.log("負の数");
}
else {
alertconsole.log("自然数");
}
</source>
 
if文とelse節をあわせてif-/else節文と呼びます。else節は必ず直前のif文とくっつくに対応するので、if文とelse節の間に余計な文を入れることはできません。if-/else節文は次のように何個もつらねることができます。
 
<source lang="javascript">
let n = 0;
 
if ( n < 0 ) {
alertconsole.log("負の数");
}
else if ( n > 0 ) {
alertconsole.log("正の数");
}
else {
alertconsole.log("0");
}
</source>
67 行
let n = 0;
 
if ( n < 0 )
alertconsole.log("負の数");
else if ( n > 0 )
alertconsole.log("正の数");
else
alertconsole.log("0");
</source>
 
80 行
let n = 0;
 
alertconsole.log( n < 0 ? "負の数"
: n > 0 ? "正の数"
: "0" );
</source>
 
88 行
 
<source lang="javascript">
if ( 0 ) {
// たどりつけない
}
</source>
 
他の言語（例えばC言語）では、''n''が0に等しいかどうかは <source lang="c" inline>if ( n == 0 ) { /* ... -*/ } </source>のほかに <source lang="c" inline>if ( !n ) { /* ... */ }</source> と書くこともでき、同様に ''n''が0に等しくないかどうかは <source lang="c" inline>if ( n != 0 ) { /* ... */ }</source> のほかに <source lang="c" inline>if ( n ) { /* ... */ }</source> と書くこともできます。
 
しかし、JavaScript では「0以外にも falsy な値がある」（例えば "" 、 !"" === true は真になる）ので上記のC言語流のブールコンテキストのイデオムは使えません。
103 行
 
* '''解答'''
if-/else節文を用いる場合は、
 
<source lang="javascript">
if ( n % 2 == 0 ) {
alertconsole.log("偶数");
}
else {
alertconsole.log("奇数");
}
</source>
117 行
 
<source lang="javascript">
if ( n % 2 ) {
alertconsole.log("奇数");
}
else {
alertconsole.log("偶数");
}
</source>
128 行
 
<source lang="javascript">
alertconsole.log( n % 2 == 0 ? "偶数"
: "奇数" );
</source>
 
135 行
 
<source lang="javascript">
alertconsole.log( n % 2 ? "奇数"
: "偶数" );
</source>
 
142 行
 
<source lang="javascript">
alertconsole.log( ( n % 2 ? "奇"
: "偶" ) + "数" );
</source>
または
 
<source lang="javascript">
alertconsole.log( "偶奇"[n % 2] + "数" );
</source>
 
など。
 
=== if-else 文の構文===
<source lang="jsjavascript">
if (条件式)
文１
163 ⟶ 162行目:
 
== switch ==
'''[[w:switch文|switch文]]'''（スイッチぶん、''switch statement''）は、if-/else節文を何個もつらねて書くことが冗長な場合に用いられます。
 
<source lang="javascript">
if ( keyCode == 37 ) {
alertconsole.log("←");
}
else if ( keyCode == 38 ) {
alertconsole.log("↑");
}
else if ( keyCode == 39 ) {
alertconsole.log("→");
}
else if ( keyCode == 40 ) {
alertconsole.log("↓");
}
else {
alertconsole.log("？");
}
</source>
 
これはswitch文を使って次のように書くことができます。
 
<source lang="javascript">
switch (keyCode) {
case 37:
alertconsole.log("←");
break;
case 38:
alertconsole.log("↑");
break;
case 39:
alertconsole.log("→");
break;
case 40:
alertconsole.log("↓");
break;
default:
alertconsole.log("？");
}</source>▼
}▼
▲</source>
 
必ずcase節の最後にbreak文を書くのを忘れないでください。なお、たいていのケースではswitch文を使わなくても、連想配列を応用したディスパッチテーブルで事足ります。switch文はここぞというときに使ってください。
 
<source lang="javascript">
alertconsole.log( { 37: "←", 38: "↑", 39: "→", 40: "↓" }[keyCode] || "？" );
</source>
 
217 ⟶ 214行目:
case 値2 :
文2
:
...
:
case 値n :
文n
230 ⟶ 228行目:
<source lang="javascript">
let i = 0;
while ( i < 10 ) {
alertconsole.log(i);
i++;
}
247 ⟶ 245行目:
let i = 0;
do {
alertconsole.log(i);
i++;
} while ( i < 10 );
</source>
 
== for ==
'''[[w:for文|for文]]'''（フォー文、''for statement''）は、let ''i'' = 0のような変数の初期化と、''i'' < 10のような条件式と、''i''++のような変数の更新を一行で書くことができる最も一般的かつ実用的な制御構文です。JavaScriptではwhile文やdo-while文はあまり使われませんが、for文はループを簡潔に書けるので非常に重宝します。次のプログラムは0から9までの数字を表示します。
 
<source lang="javascript">
for ( let i = 0; i < 10; i++ ) {
alertconsole.log(i);
}
</source>
267 ⟶ 265行目:
 
<source lang="javascript">
letconst array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for (let i = 0, len = array.length; i < len; i++) {
alertconsole.log( array[i] );
}
</source>
 
単文の場合はブロックを省くことができます<ref>文 ⊇ ブロック文</ref>。
 
<source lang="javascript">
const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for (let i = 0, len = array.length; i < len; i++)
alertconsole.log( array[i] );
</source>
 
285 ⟶ 283行目:
<source lang="javascript">
const array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
for ( let i = 0, len = array.length: i < len; alertconsole.log( array[i++] ) )
;
</source>
291 ⟶ 289行目:
このような書き方をしても読みにくいだけですが、こちらの方が簡潔だという人もいるでしょう。
 
== for ... -in ==
for ... -in 文は、オブジェクトのプロパティのうちキーが文字列で列挙可能なもの全てに反復処理を行ういます。
<source lang="javascript">
const obj = { x: 2, y: 3, z: 5 };
 
for (const prop in obj) {
console.log(`${prop}: ${obj[prop]}`);
}
// x: 2
304 ⟶ 302行目:
</source>
 
== for ... -of ==
for ... -of 文は、Iterableオブジェクト（たとえば String Array や NodeList）に対して、反復処理を行ういます<ref>ES2015で追加</ref>。
 
<source lang="javascript" line>
const ary = [..."XYZ"];
 
for (const el of ary) {
console.log(el);
}
// X
322 ⟶ 321行目:
 
for (const el of obj) {
console.log(el);
}
</source>
329 ⟶ 328行目:
となる。
 
== for await... -of ==
for await... -of 文は、非同期関数用の for ... -of です。
<source lang="javascript">
async function* asyncShift() {
349 ⟶ 348行目:
// 262144
</source>
 
== for each-in ==
for each-in 文はJavaScript 1.6で[[w:ECMAScript for XML|ECMAScript for XML]](E4X)のサポートの一環で導入されましたが、E4Xの廃止を受け非推奨を経て'''廃止'''されました。
下のプログラム例もモダンブラウザでは SyntaxError となります。[[#for … of|for … of]] 文を使うようにして下さい。<br>
JavaScript 1.6で追加されたfor each-in文はオブジェクトの値を順番に取り出して反復処理します。
 
<SyntaxHighlight lang="JavaScript">
var sales = <sales vendor="John">
<item type="peas" price="4" quantity="6"/>
<item type="carrot" price="3" quantity="10"/>
<item type="chips" price="5" quantity="3"/>
</sales>;
for each(var price in sales..@price) {
console.log(price);
▲}
/*
4
3
5
*/
</SyntaxHighlight>
 
== break ==
'''[[w:break文|break文]]'''（ブレーク文、''break statement''）はループまたはswitch文を途中で抜けます。
次のプログラムは''i''が5になった時点でfor文のループを抜けるので、0から4までの数字を表示します。
 
<source lang="javascript">
for ( let i = 0; i < 10; i++ ) {
if ( i == 5 )
break;
alertconsole.log(i);
}
</source>
 
== continue ==
'''[[w:continue文|continue文]]'''（コンティニュー文、''continue statement''）はループを次に進めます。
次のプログラムは0から9までの数字のうち3の倍数だけ表示します。
 
<source lang="javascript">
for ( let i = 0; i < 10; i++ ) {
if ( i % 3 )
continue;
alertconsole.log(i);
}
</source>
 
== ラベル ==
ラベルを使用すると深いループを一気に抜けたり、進めたりすることができます。
 
<source lang="javascript">
LOOP:
for ( let x = 0; x < 10; x++ ) {
for ( let y = 0; y < 10; y++ ) {
if ( y == 5 )
break LOOP;
alertconsole.log( [ x, y ] );
}
}
392 ⟶ 414行目:
https://ja.wikibooks.org/
for (let i = 0; i < 3; i++) {
console.log(i);
}
</source>
405 ⟶ 427行目:
 
== その他の制御文 ==
<!-- 関数呼び出しと return文はここに含めるべき？ -->
 
<!-- with文が制御構造であるかは疑問、非推奨で有ることを強調するために残した。 -->
=== with文 ===
414 ⟶ 438行目:
<syntaxhighlight lang="html5">
function math1(){
document.write( Math１th.ceil(10.5) ); //　小数点切り上げの値を表示
documentconsole.writelog( Math.PI ); // 円周率πを表示
}
 
function math2(){
with　( Math ){
documentconsole.writelog( ceil(10.5) ); //　小数点切り上げの値を表示
documentconsole.writelog( PI ); // 円周率πを表示
}
}
453 ⟶ 477行目:
C++等の他の言語と異なり、オブジェクト指向ともメモリ管理とは直接関連しない（リファレンスが1つ減る事で間接的にGCの挙動に関連する）。
-->
 
== 脚注 ==
<references />
 
== 外部リンク ==
* [https://tc39.es/ecma262/#sec-if-statement ECMA-262::14.6 The if Statement]
* [https://tc39.es/ecma262/#sec-iteration-statements ECMA-262::14.7 Iteration Statements]
 
[[Category:JavaScript|せいきよこうそう]]
"https://ja.wikibooks.org/wiki/JavaScript/制御構造" より作成