Aedlabo program 20150125

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

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

1つめの処理実行
2つめの処理
3つめの処理
4つめの処理
……
実行
実行
実行
あらかじめ決められた処理を上から順番に実行していく

3つめの処理-A
……
4つめの処理-A実行
実行
条件A B

実行
実行
3つめの処理-B
4つめの処理-B
……
条件A B

3つめの処理-A
……
4つめの処理-A
1つめの処理
2つめの処理
3つめの処理-B
4つめの処理-B
……条件によって処理を振り分ける
条件A B

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

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

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

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

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

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

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

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

コードを書くこと
プログラム

アルゴリズム（仕組みや手順）
を考えること
プログラム

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

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

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

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

alert()
警告ダイアログを表示

conﬁrm()
確認ダイアログを表示

prompt()
文字入力可能なダイアログを表示

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

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

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

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

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

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

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

Expressions and operators
演算子

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

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

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

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

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

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

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

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

Associative array
連想配列

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

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

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

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

Conditional branch
条件分岐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「return」に続いて戻す値を指定する
return 戻り値
} 実行側に戻す値
関数

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

Scope of variables
変数のスコープ

変数は「var」で宣言する位置で有効な範囲が異なる
var 変数名

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

var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);

var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name);
Taro

var name = "Taro"
function test() {
console.log(name);
}
test();
console.log(name); Taro

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

function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);

function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name);
Taro

function test() {
var name = "Taro"
console.log(name);
}
test();
console.log(name); Error !

function test() {
var name = "Taro"
console.log(name);
return name;
}
var user = test();
console.log(user); Taro
戻り値を使う

Aedlabo program 20150125

More Related Content

What's hot (20)

Similar to Aedlabo program 20150125 (20)

Aedlabo program 20150125