1. 1
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
kaetsu.js #02
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)

2. 2
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
1から1000までの数に対してFizzBuzz問題を解け!
• 3の倍数：Fizzと出力!
• 5の倍数：Buzzと出力!
• 3の倍数かつ5の倍数：FizzBuzzと出力!
• それ以外：数字を出力!

3. 3
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
方針：細かい機能からつくっていく
1. まず1と出力するプログラムを作る!
2. 1から1000まで出力するプログラムをつくる!
3. 3の倍数のときにFizzと出力するように変える!
4. 5の倍数のときにBuzzと出力するように変える!
5. 3と5の倍数のときにFizzBuzzと出力するように変える

4. 4
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
まず1と出力するプログラムを作る
document.write(1);

5. 5
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
1から1000まで出力するプログラムをつくる
var start= 1;!
var end = 1001;!
while(start < end){!
document.write(start);!
start = start + 1;!
}

6. 6
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
3の倍数のときにFizzと出力するように変える
var start= 1;!
var end = 1001;!
while(start < end){!
// 次のページへ!
}

7. 7
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
3の倍数のときにFizzと出力するように変える
（続き）
if( start % 3 == 0){!
document.write("Fizz");!
}else{!
document.write(start);!
}!
start = start + 1;

8. 8
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
5の倍数のときにBuzzと出力する
if( start % 3 == 0){! document.write(start);!
document.write("Fizz");! }!
}else if(start % 5 == 0){! start = start + 1;
document.write("Buzz");!
}else {!

9. 9
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
3と5の倍数のときにFizzBuzzと出力する
if(start%3 == 0 &&start%5 == 0){! document.write("Buzz");!
document.write("FizzBuzz");! }else {!
}if( start % 3 == 0){! document.write(start);!
document.write("Fizz");! }!
} else if(start % 5 == 0){! start = start + 1;

10. 10
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
3と5の倍数のときにFizzBuzzと出力する
（バリエーション）
var msg = "";! }!
if(start%3 == 0 ){! if(msg == ""){!
msg += "Fizz";! msg = start;!
}! }!
if(start % 5 == 0){! document.write(msg);!
msg += "Buzz";! start = start + 1;

11. 11
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
関数：手続きをまとめて名前をつけたもの
• 関数定義：関数を定義すること!
• 呼び出し：定義された関数を使うこと

12. 12
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
関数定義のために必要なこと
• 名前!
• まとめる仕事内容!
• 引数と返り値

13. 13
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
引数と返り値
• 引数：パラメーター!
• 返り値：呼び出された関数の評価値!

14. 14
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
引き数に1を足して返す関数
function addOne(x){!
return x + 1;!
}

15. 15
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
引数を足して返す関数
function add(x, y){!
return x + y;!
}

16. 16
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
関数の呼び出し
var a = addOne(2);!
a = addOne(a);!
var b = addOne(a);!
var c = add(a, b);

17. 17
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
スコープ：名前の有効範囲
• 変数や関数の名前には有効範囲がある!
- スコープ!
- 宣言や定義された場所で自動的にきまる!
• グローバルスコープとローカルスコープ!

18. 18
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
ローカルスコープ
• その関数の中でのみ有効であること!
• 関数定義の中で宣言、定義された名前は自動的に
ローカルスコープに所属する!
• 関数のそとでは利用できない

19. 19
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
例：x , yとretはaddの中でのみ有効
function add(x, y){!
var ret = x + y;!
return ret;!
}!

20. 20
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
subの中では、sは有効ではない
addの中では、dは有効ではない
function add(x, y){! function sub(x , y){!
var s = x + y;! var d = x - y;!
return s;! return d;!
}! }
!

21. 21
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
グローバルスコープ
• プログラム全体で有効であること!
• ローカルスコープではない名前はグローバルス
コープに所属する

22. 22
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
関数のまとめ
• 関数：仕事をまとめたもの!
• スコープ：名前の有効範囲!
- グローバルスコープ!
- ローカルスコープ!

23. 23
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
練習その1：次の関数を定義して使え
• 名前：toFizzBuzz!
• 引数：一つ!
• 返り値：引数に取った値によって、FizzかBuzzか
FizzBuzzか数値を返す

24. 24
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
練習問題その2：次の関数を定義して使え
• 名前：fizzbuzz!
• 第1引数：FizzBuzz問題の最初の数!
• 第2匹数：FizzBuzz問題の終わりの数!
• 返り値：なし!
• やること：第1引数から第2引数までの間でFizzBuzz問題を解い
て、結果を出力する。

25. 25
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/04/23
回答例
• 練習問題その1：http://jsdo.it/chikoski/neon!
• 練習問題その2：http://jsdo.it/chikoski/Aqch