Embed Size (px)
Citation preview
今さら聞けない！ 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実行
実行
1つめの処理 実行
2つめの処理 実行
条件A B
プログラムとは
実行
実行
3つめの処理-B
4つめの処理-B
……
1つめの処理 実行
2つめの処理 実行
条件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の場合
妻のお願いは夫にはこう聞こえている
コードを書くこと
プログラム的な思考をするには
プログラム
アルゴリズム（仕組みや手順） を考えること
プログラム
プログラム的な思考をするには
Hands on
やってみよう
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
今日やりたいこと
ウェブブラウザ • 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()
警告ダイアログを表示
ダイアログボックス表示
confirm()
確認ダイアログを表示
ダイアログボックス表示
prompt()
文字入力可能なダイアログを表示
ダイアログボックス表示
Variable
変数
値を自由に入れ替えできる入れ物
？
100
"あいう"
true
変数
変数
変数を最初に使うときは「var」で宣言する
var 変数名
変数
変数の中に値を入れるには「=」を使う
変数名 = 値このイコールは「代入演算子」という
代入
変数
Data type
データ型
データ型
データには「型」がある
データ型
文字のこと シングルクオーテーションかダブルクオーテーションで括る
String 型
文字列
データ型
数字のこと JavaScriptでは整数も小数（浮動小数点）も区別しない
Number 型
数値
データ型
true（真）、false（偽）のどちらか 主に条件判定などで使う
boolean 型
論理値
Expressions and operators
演算子
数値の計算に使う
算術演算子
演算子
変数に値を代入するときに使う
代入演算子
演算子
複数の対象を比較するときに使う
比較演算子
演算子
条件の真偽をするときに使う
論理演算子
演算子
Array
配列
複数の変数を1セットにしたようなもの
0
値
値
配列
1 2 3 4
値値
値
変数 変数 変数 変数 変数
配列
最初に使うときは「new Array()」で作成する
変数名 = new Array()
配列
このように省略して書くこともできる
変数名 = []new Array()と同じ
配列
値を代入するときは変数名に［番号］を付ける
変数名[n] = 値この番号のことをキーと呼ぶ
代入
配列
Associative array
連想配列
番号ではなくキーワードで管理する配列
name
"山田太郎"
連想配列
age sex height weight変数 変数 変数 変数 変数
25"男"
17060
連想配列
最初に使うときは「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 : どれにも当てはまらないときの処理 }
条件分岐
Repeat
繰り返し
while
条件を満たしている間繰り返す
繰り返し
while ( 条件 ) { 繰り返す処理 }
この条件を満たしている間ずっと繰り返される
繰り返し
do … while
条件を満たしている間繰り返す（最低1回は実行する）
繰り返し
do { 繰り返す処理 } while ( 条件 )
無条件に1回だけは実行
あとはこの条件を満たしている間ずっと繰り返される
繰り返し
for
一定回数の処理を繰り返す
繰り返し
for ( var i = 0; i < n; i++ ) { 繰り返す処理 }
ここに繰り返す回数を指定する
繰り返し
for … in
配列を走査する（配列要素の個数分繰り返す）
繰り返し
for ( var 変数名 in 配列名 ) { 繰り返す処理 }
キーを格納するための変数名を指定
走査したい配列
繰り返し
Function
関数
よく使う処理に名前をつけていつでも呼び出せるようにする
「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」に続いて戻す値を指定する
function 関数名() { return 戻り値 } 実行側に戻す値
関数
「return」は関数を強制終了するため、以降の処理は実行されない
function 関数名() { 処理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);
変数のスコープ
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);
変数のスコープ
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
戻り値を使う
変数のスコープ
