できる つくれるJavaScript

〜　超初学者向け講座　実践編　〜

13年2月10日日曜日

アジェンダ

★ 基本のおさらい

★ キーワードは順次・反復・分岐

★ アルゴリズムを考える・形にしてみる

★ まとめ

213年2月10日日曜日

基本のおさらい@今日必要な知識

13年2月10日日曜日

変数

• なんらかの値を名前をつけて保持しておくためのもの。

• 何らかの値　については、数値・文字列・関数・オブジェクト、配列等、なんでも！

• 変数を利用することで、プログラムによるデータの格納や操作が可能となる。

413年2月10日日曜日

変数

• なんらかの値を名前をつけて保持しておくためのもの。

• 何らかの値　については、数値・文字列・関数・オブジェクト、配列等、なんでも！

• 変数を利用することで、プログラムによるデータの格納や操作が可能となる。

5

重要だよ！

13年2月10日日曜日

式

• JavaScriptインタプリタが評価して値を生成できるもの。

• 123 // 数値

• “あいう” // 文字列

• true // 論理値

• x // 変数x　

613年2月10日日曜日

式

• JavaScriptインタプリタが評価して値を生成できるもの。

• 123 // 数値

• “あいう” // 文字列

• true // 論理値

• x // 変数x　

7

直接データを記述するこのような形を

リテラル（定数）と呼びます

13年2月10日日曜日

式

• JavaScriptインタプリタが評価して値を生成できるもの。

• 123 // 数値

• “あいう” // 文字列

• true // 論理値

• x // 変数x　

8

また、式としての呼称では定数式　と呼びます

対して、変数は変数式　と呼びます

13年2月10日日曜日

演算子

• 式を組み合わせて、結果を得るためのもの

• 例えば

• var a = ２＋３;

913年2月10日日曜日

演算子

• 式を組み合わせて、結果を得るためのもの

• 例えば

• var a = ２＋３;

10

この＋が演算子（加算演算子）２と３の定数式を組み合わせて

結果を得ます。

13年2月10日日曜日

演算子

• 式を組み合わせて、結果を得るためのもの

• 例えば

• var a = ２＋３;

11

この＋が演算子（加算演算子）２と３の定数式を組み合わせて

結果を得ます。

13年2月10日日曜日

演算子

• 式を組み合わせて、結果を得るためのもの

• 例えば

• var a = ２＋３;

12

この＝も演算子（代入演算子）右辺値を左辺値に代入します。

13年2月10日日曜日

軽くおさらいと言いつつ演算子を掘り下げる

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

14

この部分について。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

15

２と３というそれぞれの定数式を組み合わせた「複雑な式」を作っている。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

16

「２＋３」が式であるので＝（代入演算子）は

変数式a と 式「２＋３」を組み合わせることが出来る。

代入演算子は、右辺を左辺に代入します。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

17

演算子によって取り扱われるものをオペランド（被演算子）・項といいます。

演算子によって取り扱われるものをオペランド（被演算子）・項といいます。

演算子によって取り扱われるものをオペランド（被演算子）・項といいます。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

18

演算子によって取り扱われるものをオペランド（被演算子）・項といいます。

演算子によって取り扱われるものをオペランド（被演算子）・項といいます。

＋（加算演算子）のように、２つのオペランドを必要とするものを二項演算子と呼びます

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

19

＝（代入演算子）も、色分けすると２つのオペランドを必要とする

二項演算子であることがわかります。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

20

ここに注目

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

21

この部分は左辺に変数式a 右辺に定数式2がある

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

22

ではこの部分が先に処理されてしまわないのはなぜか？

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

23

A. 演算子は種類ごとに優先順位（処理順序）が決まっているから

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２＋３

24

算術演算子は代入演算子より優先順位が高いので、２＋３が先に

評価されるのです。

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２+３ * 5

25

わかりやすいところでは算術演算子（加減乗除）は

乗算(*)・除算(/)・剰余算(%)のほうが加算（＋）・減算（ー）よりも

優先度が高いです

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２+３ * 5

26

①最も優先順位の高い掛け算が処理されて

①

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２+３ * 5

27

②その次に優先順位の高い足し算が処理されて

②

13年2月10日日曜日

演算子＠ちょい詳しく

var a = ２+３ * 5

28

③最後に代入演算子が右辺をaに代入する。

③

13年2月10日日曜日

とりあえず演算子ここまで

13年2月10日日曜日

ちなみに演算子の優先順位と種類については

13年2月10日日曜日

グーグル先生にきいたほうがいいよ！

（たくさんあるので）

13年2月10日日曜日

文

• JavaScriptになにかさせるためのもの

• なにが出来るかは予め言語側で定義されている

3213年2月10日日曜日

if文

• if文はJavaScriptが条件を判定したり、条件付きで文を実行したりするための基本的な制御文

• if文をつかうと条件に応じて処理を分岐させることが出来る

3313年2月10日日曜日

if文

• if文はJavaScriptが条件を判定したり、条件付きで文を実行したりするための基本的な制御文

• if文をつかうと条件に応じて処理を分岐させることが出来る

34

重要だよ！

13年2月10日日曜日

if文＠例

✴var name = “山田”;

✴if(name == “鈴木”){

✴alert(“(　^q^)＜おっす鈴木！”);

✴}

✴else if(name == “山田”){

✴alert(“(´・ω・)<山田かぁ”);

✴}

✴else {

✴alert(“:(；ﾞﾟ’ωﾟ’):＜誰だお前！！”);

✴}

3513年2月10日日曜日

if文＠例

✴var name = “山田”;

✴if(name == “鈴木”){

✴alert(“(　^q^)＜おっす鈴木！”);

✴}

✴else if(name == “山田”){

✴alert(“(´・ω・)<山田かぁ”);

✴}

✴else {

✴alert(“:(；ﾞﾟ’ωﾟ’):＜誰だお前！！”);

✴}

36

==(等値演算子)を使って右辺と左辺が等値であるか評価し、

その結果をif文に渡している

13年2月10日日曜日

if文＠例

✴var name = “山田”;

✴if(name == “鈴木”){

✴alert(“(　^q^)＜おっす鈴木！”);

✴}

✴else if(name == “山田”){

✴alert(“(´・ω・)<山田かぁ”);

✴}

✴else {

✴alert(“:(；ﾞﾟ’ωﾟ’):＜誰だお前！！”);

✴}

37

else文はif文の実行が行われなかった時に、実行される。

13年2月10日日曜日

if文＠例②

✴var sei = “山田”;var mei = “太郎”;

✴if(sei == “鈴木” || mei == “太郎”){

✴alert(“(　^q^)＜おっす鈴木！…か、太郎”);

✴}

✴else {

✴alert(“(^q^)＜鈴木でも太郎でもないやつに用はない”);

✴}

3813年2月10日日曜日

if文＠例②

✴var sei = “山田”;var mei = “太郎”;

✴if(sei == “鈴木” || mei == “太郎”){

✴alert(“(　^q^)＜おっす鈴木！…か、太郎”);

✴}

✴else {

✴alert(“(^q^)＜鈴木でも太郎でもないやつに用はない”);

✴}

39

||(論理和演算子)姓が鈴木　または　名が太郎

を表している

13年2月10日日曜日

if文＠例③

✴var sei = “山田”;var mei = “太郎”;var age = 30;

✴if(((sei == “鈴木”&& mei == “花子” ) || mei == “太郎”) && age >= 25 ){

✴alert(“:(；ﾞﾟ’ωﾟ’):＜鈴木花子か名前が太郎　かつ　２５歳以上・・・！”);

✴}

4013年2月10日日曜日

if文＠例③

✴var sei = “山田”;var mei = “太郎”;var age = 30;

✴if(((sei == “鈴木”&& mei == “花子” ) || mei == “太郎”) && age >= 25 ){

✴alert(“:(；ﾞﾟ’ωﾟ’):＜鈴木花子か名前が太郎　かつ　２５歳以上・・・！”);

✴}

41

評価させる式が複雑になればなるほどわかりづらくなります。できれば、適当なところでわけるようにしましょう。

13年2月10日日曜日

while文

• 繰り返し処理をするための基本的な制御文

• 繰り返しをするための文は実は他にも色々ある

• do/while文

• for文

• for/in文

4213年2月10日日曜日

while文＠例

✴var count = 0;

✴while(count < 10) {

✴ document.write(count + ’<br />’);

✴ count++;

✴}

✴

4313年2月10日日曜日

while文＠例

✴var count = 0;

✴while(count < 10) {

✴ document.write(count + ’<br />’);

✴ count++;

✴}

✴

44

whileに渡す値がtrueである間、繰り返し処理をする

13年2月10日日曜日

for文

• 繰り返し処理をするための基本的な制御文

• whileより少しだけ複雑

• 基本としておさえておきたい

4513年2月10日日曜日

for文＠例

✴for(var count=0; count < 10; count++){

✴ document.write(count + ‘<br />’);

✴}

✴

46

さっきのwhileの例と同じ結果を出力します

13年2月10日日曜日

for文＠例

✴for(var count=0; count < 10; count++){

✴ document.write(count + ‘<br />’);

✴}

✴

47

①初期化

13年2月10日日曜日

for文＠例

✴for(var count=0; count < 10; count++){

✴ document.write(count + ‘<br />’);

✴}

✴

48

②ループ継続条件の判定

13年2月10日日曜日

for文＠例

✴for(var count=0; count < 10; count++){

✴ document.write(count + ‘<br />’);

✴}

✴

49

③ループ都度行う処理(increment)

13年2月10日日曜日

✄----- ここまでおさらい -----✄

13年2月10日日曜日

キーワードは順次・反復・分岐

13年2月10日日曜日

「処理」というものについて

✴ だいたいの「処理」は

順次・反復・分岐　の組み合わせで解決できる。

5213年2月10日日曜日

(^q^)＜順次？

13年2月10日日曜日

順次

54

• 順接、順構造とも言われる。プログラムに記された順に、逐次処理を行なっていく。プログラムの記述とコンピュータの動作経過が一致するプログラム構造である。

13年2月10日日曜日

wikipediaコピーしてすみません

13年2月10日日曜日

順次とはどういうことか

56

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

13年2月10日日曜日

順次とはどういうことか

57

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

13年2月10日日曜日

順次とはどういうことか

58

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

②代入処理

13年2月10日日曜日

順次とはどういうことか

59

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

②代入処理

③演算処理

13年2月10日日曜日

順次とはどういうことか

60

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

②代入処理

③演算処理

④演算処理

13年2月10日日曜日

順次とはどういうことか

61

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

②代入処理

③演算処理

④演算処理

もういいよね…

13年2月10日日曜日

順次とはどういうことか

62

✴var price = 100;

✴var tax = 5;

✴var zeikomi = price + Math.floor(price * (tax / 100));

✴

①代入処理

②代入処理

③演算処理

④演算処理

しんどいのでこれ以上は省略しますがプログラムに記された順に逐次処理を

行なっていく、のが分かったと思います。

13年2月10日日曜日

(； ･`д･´)＜反復と分岐は・・・

13年2月10日日曜日

(； ･`д･´)＜forとif・・・!

13年2月10日日曜日

ガッツリおさらいをやった理由

65

• おさらいでやった内容は

• 順次を行うための変数と演算子について

• 分岐を行うためのif文について

• 反復を行うためのwhile文 for文について

13年2月10日日曜日

つまり・・・

13年2月10日日曜日

おさらいによってだいたいの処理ができるように

なったんだよ！！

13年2月10日日曜日

　(； ･`д･´) ﾅ､ﾅﾝﾀﾞｯﾃｰ !! (`･д´･ (`･д´･ ;)

13年2月10日日曜日

アルゴリズムを考える

実践編

13年2月10日日曜日

例題

70

1. 一列に並んでいる20匹の犬と猫がいます

2. 1.の犬と猫は順番に餌を受け取りに来ますただし、犬と猫の並び順はバラバラであり、受け取りに来るまでわかりません

3. 犬か猫かは名前を尋ねると答えてくれます

4. 犬にはドッグフードを、猫にはカルカンをあげてください

13年2月10日日曜日

やってみよう

★ http://jsfiddle.net/seino/2Trz9/2/★ 実装する前に、処理の流れを紙に書き起

こししてみるといいかもしれません。

7113年2月10日日曜日

例題２

72

1. 無作為に数値要素の格納されている配列 arr が存在します

2. arr に格納されている数値要素を順番に並べてください

※昇順・降順・手法は問いません。

13年2月10日日曜日

やってみよう２

★ http://jsfiddle.net/seino/y5REL/1/★ 実装する前に、処理の流れを紙に・・・

これは多分書いたほうがいいです。

7313年2月10日日曜日

まとめ

13年2月10日日曜日

応用を考える

75

• 例題でやった内容は、非常に単純な形のものでしたが、考え方それそのものは、実際にやりたい業務への応用がきく部分になると思います。

• 例えば

• 時系列の順番で並べる

• 特定の要素だけ、色変えや非表示など、何らかの制御をかける　　・・・など

13年2月10日日曜日

プログラミングとは何かを考える

76

• 私見ですが。私見ですよ！

• プログラミングは、扱う言語について深く知っているかとかどうかより「何を どういうときに　どうするか」を上手くやる　というのが肝要だとおもってます

• なので、大事なのは最適当なアルゴリズムを考えるようにすること

13年2月10日日曜日

するとなにがおこるか

77

• 宝くじはあたるわ庭から温泉が湧くわ彼女が出来るわですよ！嘘ですけど

• ライブラリやフレームワークなどを使う時の勘所がちょっとわかり良くなる・・・かもしれません（もともとのライブラリとかフレームワークが　残念な作りの場合はその限りではありませんが）

13年2月10日日曜日

ありがとうございました

13年2月10日日曜日