1. 今さら聞けない！
Webデザイナーのための
プログラミング講座
AED LABO 2015.1.25. sun.
TOSHIYUKI TAKAHASHI (GRAPHIC ARTS UNIT )

2. “コンピュータが行うべき処理を順序立てて記述したもの”
出典：プログラムとは 〔 コンピュータプログラム 〕 【 program 】 - 意味/解説/説明/定義 ： IT用語辞典（http://e-words.jp/w/E38397E383ADE382B0E383A9E383A0.html）
プログラムとは

3. 1つめの処理 実行
2つめの処理
3つめの処理
4つめの処理
……
実行
実行
実行
あらかじめ決められた処理を上から順番に実行していく
プログラムとは

4. 3つめの処理-A
……
4つめの処理-A実行
実行
1つめの処理 実行
2つめの処理 実行
条件A B
プログラムとは

5. 実行
実行
3つめの処理-B
4つめの処理-B
……
1つめの処理 実行
2つめの処理 実行
条件A B
プログラムとは

6. 3つめの処理-A
……
4つめの処理-A
1つめの処理
2つめの処理
3つめの処理-B
4つめの処理-B
……条件によって処理を振り分ける
条件A B
プログラムとは

7. 冷蔵庫を開ける
中身を確認する
牛肉がある 豚肉がある 鶏肉がある
ビーフステーキ ポークソテー グリルチキン
買いに行く肉があるか
NO
YES
夕食のメニューを決めるときの流れ

8. 画像出典：川崎市：カモ診断テスト（http://www.city.kawasaki.jp/280/page/0000056910.html）
診断チャートや占いチャートは一種の「プログラム」と言える

9. 我々が話す言葉が国によって異なるように
プログラム言語にもいくつかの種類があります

10. Web Design (Front End) JavaScript / PHP …
Web Development Ruby / Python / Perl / Scala …
Application Development Java / C++ / Objective-C / Swift …
主なプログラム言語の種類
もちろん、この他にもたくさんのプログラム言語が存在します

11. ウェブデザイナー的に馴染みがあるのはココ
主なプログラム言語の種類
Web Design (Front End) JavaScript / PHP …
Web Development Ruby / Python / Perl / Scala
Application Development Java / C++ / Objective-C / Swift

12. 言語の仕様や文法などを覚えるのも大切だが、
処理の考え方（アルゴリズム）を覚える方が大切
プログラム的な思考をするには

13. 妻「牛乳を１パック買ってきて。卵があったら６つお願い」
しばらくして、夫が《牛乳を６パック》買って帰宅
妻「なんで牛乳を６パックも買ってきたのよ」
夫「だって卵があったから」
ある妻がプログラマーの夫に買い物を頼んだら……
お前は一体何を言っているのだ

14. 1.
2.
3.
4.
5.
6.
7.
var 牛乳の個数;
if( 卵 ) {
牛乳の個数 = 6;
} else {
牛乳の個数 = 1;
}
牛乳を買う( 牛乳の個数 );
※JavaScriptの場合
妻のお願いは夫にはこう聞こえている

15. コードを書くこと
プログラム的な思考をするには
プログラム

16. アルゴリズム（仕組みや手順）
を考えること
プログラム
プログラム的な思考をするには

17. Hands on
やってみよう

18. 1.実行環境
• console.log
2.ダイアログ表示
• alert
• confirm
• prompt
3.変数
4.データ型
5.演算子
• 算術演算子
• 代入演算子
• 比較演算子
• 論理演算子
11.関数
• function
• 引数
• 戻り値
• 即時関数
• 無名関数
12.変数のスコープ
6.配列
7.連想配列（ハッシュ）
8.条件分岐
• if
• if … else
• if … else if
• 比較演算子
• switch
9.繰り返し
• while
• do … while
• for
• for … in
今日やりたいこと

19. ウェブブラウザ • Google Chrome、Safari
エディタ • お好きなもの（UTF-8を扱えるもの）
• デモはSublime Textを使用
コードを書く場所 • HTMLの<script> 要素内
• 外部jsファイル
言語 • JavaScript
実行環境

20. console.log()
デバッガの Web コンソールにメッセージを出力
Google Chrome：表示 → 開発/管理 → JavaScriptコンソール
Safari：開発 → エラーコンソールを表示
Firefox：ツール → Web開発 → Webコンソール
IE：［F12］で開発者ツールを開き、［コンソール］タブを選択
実行環境

21. Show dialog box
ダイアログボックス表示

22. alert()
警告ダイアログを表示
ダイアログボックス表示

23. confirm()
確認ダイアログを表示
ダイアログボックス表示

24. prompt()
文字入力可能なダイアログを表示
ダイアログボックス表示

25. Variable
変数

26. 値を自由に入れ替えできる入れ物
？
100
"あいう"
true
変数
変数

27. 変数を最初に使うときは「var」で宣言する
var 変数名
変数

28. 変数の中に値を入れるには「=」を使う
変数名 = 値
このイコールは「代入演算子」という
代入
変数

29. Data type
データ型

30. データ型
データには「型」がある

31. データ型
文字のこと
シングルクオーテーションかダブルクオーテーションで括る
String 型
文字列

32. データ型
数字のこと
JavaScriptでは整数も小数（浮動小数点）も区別しない
Number 型
数値

33. データ型
true（真）、false（偽）のどちらか
主に条件判定などで使う
boolean 型
論理値

34. Expressions and operators
演算子

35. 数値の計算に使う
算術演算子
演算子

36. 変数に値を代入するときに使う
代入演算子
演算子

37. 複数の対象を比較するときに使う
比較演算子
演算子

38. 条件の真偽をするときに使う
論理演算子
演算子

39. Array
配列

40. 複数の変数を1セットにしたようなもの
0
値
値
配列
1 2 3 4
値
値
値
変数 変数 変数 変数 変数
配列

41. 最初に使うときは「new Array()」で作成する
変数名 = new Array()
配列

42. このように省略して書くこともできる
変数名 = []
new Array()と同じ
配列

43. 値を代入するときは変数名に［番号］を付ける
変数名[n] = 値
この番号のことをキーと呼ぶ
代入
配列

44. Associative array
連想配列

45. 番号ではなくキーワードで管理する配列
name
"山田太郎"
連想配列
age sex height weight
変数 変数 変数 変数 変数
25
"男"
170
60
連想配列

46. 最初に使うときは「new Object()」で作成する
変数名 = new Object()
連想配列

47. 変数名 = {}
このように省略して書くこともできる
new Object()と同じ
連想配列

48. 変数名["key"] = 値
変数名.key = 値
値を代入するときは変数名に［”キー"］を付ける
または、変数名にドット区切りでキーを指定してもOK
代入
代入
連想配列

49. Conditional branch
条件分岐

50. if
もっとも基本的な条件分岐
条件分岐

51. if ( 条件 ) {
条件が真のときの処理
}
条件分岐

52. if … else
2パターンを分岐する
条件分岐

53. if ( 条件 ) {
条件が真のときの処理
} else {
条件が偽ときの処理
}
条件分岐

54. if … else if
3つ以上のパターンを分岐する
条件分岐

55. if( 条件A ){
条件Aが真のときの処理
} else if( 条件B ) {
条件Bが真ときの処理
} else {
すべてが偽ときの処理
}
条件分岐

56. switch
変数の値によって処理を分岐
条件分岐

57. switch( 変数 ){
case A :
変数の値がAのときの処理
case B :
変数の値がBのときの処理
default :
どれにも当てはまらないときの処理
}
条件分岐

58. Repeat
繰り返し

59. while
条件を満たしている間繰り返す
繰り返し

60. while ( 条件 ) {
繰り返す処理
}
この条件を満たしている間ずっと繰り返される
繰り返し

61. do … while
条件を満たしている間繰り返す（最低1回は実行する）
繰り返し

62. do {
繰り返す処理
} while ( 条件 )
無条件に1回だけは実行
あとはこの条件を満たしている間ずっと繰り返される
繰り返し

63. for
一定回数の処理を繰り返す
繰り返し

64. for ( var i = 0; i < n; i++ ) {
繰り返す処理
}
ここに繰り返す回数を指定する
繰り返し

65. for … in
配列を走査する（配列要素の個数分繰り返す）
繰り返し

66. for ( var 変数名 in 配列名 ) {
繰り返す処理
}
キーを格納するための変数名を指定
走査したい配列
繰り返し

67. Function
関数

68. よく使う処理に名前をつけていつでも呼び出せるようにする
「Hello!」と
表示する処理
関数名「hello」hello()
Hello!
hello()
hello()
Hello!
Hello!
関数

69. function 関数名() {
処理
}
「function」に続いて関数名を指定する
関数

70. 引数
実行側から関数に渡す値
関数

71. 関数に対して任意のデータを渡す
変数
「message」
を表示する処理
関数名「talk(message)」talk("Hello")
Hello
talk("Hey")
talk("やあ！")
Hey
やあ！
関数

72. 関数名のあとの()内に引数名を指定しておく
function 関数名( 引数名 ) {
処理
}
ここに引数名を指定しておく
関数

73. 複数の引数を指定することも可能
function 関数名( 引数1, 引数2, … ) {
処理
}
カンマで区切って複数指定
関数

74. 戻り値
関数から実行側に返す値
関数

75. 実行側に対して関数から任意のデータを返す
戻り値に
「Hello」という
文字列を指定
関数名「get()」
get()
"Hello"
get()
"Hello"
get() "Hello"
関数

76. 「return」に続いて戻す値を指定する
function 関数名() {
return 戻り値
} 実行側に戻す値
関数

77. 「return」は関数を強制終了するため、以降の処理は実行されない
function 関数名() {
処理A
return
処理B
} 処理Bは実行されない
関数

78. Scope of variables
変数のスコープ

79. 変数は「var」で宣言する位置で有効な範囲が異なる
var 変数名
変数のスコープ

80. var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);
関数の外側で宣言された変数は全体で参照できる
変数のスコープ

81. var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);
変数のスコープ

82. var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);
変数のスコープ

83. var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);
Taro
変数のスコープ

84. var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name); Taro
変数のスコープ

85. function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);
関数の中で宣言された変数はその関数内でしか参照できない
変数のスコープ

86. function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);
変数のスコープ

87. function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);
変数のスコープ

88. function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);
Taro
変数のスコープ

89. function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name); Error !
変数のスコープ

90. function test() {
var name = "Taro"
console.log(name);
return name;
}
var user = test();
console.log(user); Taro
戻り値を使う
変数のスコープ