javascriptの基本からjavascriptを使った動的な動きについて柔軟に対応できる力をつけるjs勉強会 第二回

Transcript

1. 第⼆講義 条件式
2. 条件式とは 条件式とは、 式 と 条件⽂ で構築される ⽐較演算⼦ または 論理演算⼦ を⽤いて条件に合うかをチェ ックする構⽂です。 次のスライドから、 演算⼦ について詳しく⾒ていきま す
3. 演算⼦とは 演算⼦ (operator symbol)とは、プログラミング⾔語 で、演算をを表す記号やシンボルの事。 javascript では、次スライドのような演算⼦がありま す
4. その１ グループ化演算⼦ プロパティアクセス演算⼦ new 演算⼦ スプレッド演算⼦ インクリメント/デクリメント演算⼦ 単項演算⼦ 算術演算⼦
5. その２ 関係演算⼦ 等値演算⼦ ビットシフト演算⼦ バイナリビット演算⼦ バイナリ論理演算⼦ 条件演算⼦ 代⼊演算⼦ カンマ演算⼦
6. グループ化演算⼦ ⽤法的には数学の () と⼀緒、先に処理するを⽰す。
7. プロパティアクセス演算⼦ オブジェクトへのプロパティアクセスを提供する演算 ⼦ const object = { a: 1, } object.a // の.aとか object['a'] // の事
8. new 演算⼦ 第三講義 オブジェクトとクラスで詳しく触れていく ため⾶ばします。
9. スプレッド演算⼦ 前回も軽く触れましたが、式を演算、展開して複数の 引数(ひきすう) または複数の要素に展開して、 関数、または配列にわたすこと
10. インクリメント/デクリメント演算⼦ インクリメントとは、1 増やすこと、デクリメントと は 1 減らすことを指します。 以下の種類があります。 接尾辞インクリメント演算⼦ 接尾辞デクリメント演算⼦ 接頭辞インクリメント演算⼦ 接頭辞デクリメント演算⼦
11. 以下のように記述します const int = 0 int++ //接尾辞インクリメント演算⼦ int-- //デクリメント演算⼦ ++int //接頭辞インクリメント演算⼦ --int //接頭辞デクリメント演算⼦
12. 接尾インクリメント(デクリメント)と接頭インク リメントの違い 処理の順番が違異なる。 y = ++x // y = (x + 1) と同じ y = x++ /* y = x; x = x + 1; と同じ */
13. 単項演算⼦ 単項演算⼦は以下の種類があります delete 演算⼦ void 演算⼦ typeof 演算⼦ 単項+演算⼦ 単項-演算⼦ ビット否定演算⼦ 論理否定演算⼦
14. delete 演算⼦ delete 演算⼦は obj からプロパティを削除する時に使 ⽤します。 const obj = { a: 1, b: 2, } delete obj.b console.log(obj.b) // undefined
15. void 演算⼦ 必ず undefined を返却する演算⼦ console.log(void 0) // undefined
16. typeof 演算⼦ typeof 演算⼦は、値の型のタイプを返却する演算⼦ です。 console.log(typeof 42); // expected output: "number" console.log(typeof 'blubber'); // expected output: "string" console.log(typeof true); // expected output: "boolean" console.log(typeof declaredButUndefinedVariable); // expected output: "undefined";
17. 単項+演算⼦ 値を Number 型に変換し、Number 型の値を返却す る。 javascript はこのように、⼀度作成された値の型を変 換することができる。 ;+3 + // 3 '3' + // 3 true + // 1 false + // 0 null + // 0 function(val) { return val } // NaN
18. 動的型付けと静的型付け こういった式が評価される際に、型が⾃動的に変化す ることを 動的型付け 、同様の機能を持つプログラミング ⾔語のことを 動的型付け⾔語 と呼びます。 これとは逆に、柔軟ではない厳密な型チェックが求め られる⾔語の事を 静的型付け⾔語 と呼びます みなさんが触れる(かもしれない)⾔語の中では javascript,PHP,Perl,Python,Ruby が動的型付け⾔語 Go,Java なんかが静的型付け⾔語となります。
19. 単項-演算⼦ ほとんど単項+演算⼦と同じですが、返却される値が 正負を逆にした値となります。 また、true,false,null は変換できません。 var x = 3 y = -x // y = -3, x = 3 var x = '4' y = -x // y = -4
20. ビット否定演算⼦ ビット否定演算⼦は下記の特徴を持ちます。 基本的に無理をして使わなくても良いです。 var a = 0 var b = 1 console.log(~a) // 1 console.log(~b) // 0 // また、任意の数 xに対して以下の、出⼒を⾏います。 // -(x + 1) var c = 6 console.log(~c) // -7
21. 論理否定演算⼦ 変数を否定した値を返します。 const boolean = true console.log(!boolean) // false
22. 算術演算⼦ + は加算。⽂字列の場合は結合。 - は減産。 / は除算。 * は乗算。 % は剰余(あまりはいくつか) ** はべき乗演算⼦ console.log(1 + 2) // 3 console.log(4 - 2) // 2 console.log(4 / 2) // 2 console.log(5 * 2) // 10 console.log(5 % 2) // 1 console.log(2 ** 4) // 2^4 => 16
23. 関係演算⼦ 関係演算⼦は２つの値(もしくは演算結果や関数の返 却値)を⽐較し、 その⽐較が真かどうかに基づいて Boolean 値を返却 します。
24. 以下のような演算⼦があります。 in 演算⼦ instanceof 演算⼦ ⼩なり演算⼦ ⼤なり演算⼦ 以下演算⼦ 以上演算⼦
25. in 演算⼦ in 演算⼦は与えられたプロパティをオブジェクトが 持っているかを判別します。 // Arrays var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'] 0 in trees // true を返す 3 in trees // true を返す 6 in trees // false を返す 'bay' in trees // false を返す (インデックスの指す値ではなく、 // インデックスの数字を指定しなければならない) 'length' in trees // true を返す (length は Array のプロパティ) Symbol.iterator in trees // true を返す (配列は反復可能。ES2015 以上 // 定義済みオブジェクト 'PI' in Math // true を返す // ユーザ定義オブジェクト var mycar = { make: 'Honda', model: 'Accord', year: 1998 }
26. instanceof 演算⼦ 第四講義、第五講義で詳しく触れるためスキップしま す。
27. ⼩なり演算⼦ a < b が数学的に成⽴するかどうかを調べる演算⼦で す。
28. ⼤なり演算⼦ a > b が数学的に成⽴するかどうかを調べる演算⼦で す。
29. 以下演算⼦ a <= b が数学的に成⽴するかどうかを調べる演算⼦で す。
30. 以上演算⼦ a >= b が数学的に成⽴するかどうかを調べる演算⼦で す。
31. 等価演算⼦ 等価演算⼦は値２つが同じものであるか調べる演算⼦ です。 ==演算⼦ !=演算⼦ ===演算⼦ !==演算⼦ == と != は曖昧な⽐較。 === と !== は厳密な⽐較を⾏います。
32. バイナリ論理演算⼦ && 複数の式と組み合わせて両⽅が true の場合は true を、そうでない場合は false を返します。 || 複数の式と組み合わせてどちらか⽚⽅が true の 場合は true を、どちらも false の場合は false を返 却します。
33. ビットシフト演算⼦ 初学者を混乱の渦に叩き落とすので無視します。 興味のある⽅は MDN ビットシフト演算⼦ でググってみてく ださい。 ググッタ内容は忘れて構いません。IoT 機器のプログ ラミングをするとか、 機械学習を javascript でやりたいみたいな奇特な⽅以 外は使⽤しません。
34. バイナリビット演算⼦ 初学者を混乱の渦に叩き落とすので無視します。 興味のある⽅は MDN バイナｒフィビット演算⼦ でググってみ てください。 ググッタ内容は忘れて構いません。IoT 機器のプログ ラミングをするとか、 機械学習を javascript でやりたいみたいな奇特な⽅以 外は使⽤しません。
35. 条件(三項)演算⼦ ⽐較の際に⼀緒に触れるので⼀旦スキップします。
36. 代⼊演算⼦ 変数 算術演算⼦=値2 の値を返却します。 つまり、下記と同じ結果です。 let a = 0 a = a 算術演算⼦ 値
37. カンマ演算⼦ 存在を忘れてください。
38. 条件⽂ javascript には２つの条件分があります。 if switch
39. if ⽂ if ⽂は下記のように記述します。 // ifだけのケース if (式) { // 式が真の時に実⾏したい命令⽂。 } // if elseのケース if (式) { // 式が真の時に実⾏したい命令⽂ } else { // 式が偽の時に実⾏したい命令⽂ }
40. // 複数の式を順番に評価したいケース if (式A) { // 式Aが真のとき⼆実⾏したいケース } elseif (式B) { // 式Aが真ではなく、式Bが真の時に実⾏したいケース } elseif (式C) { // 式A，式Bが真では無く式Cが真の時に実⾏したいケース } else { // 式A,B,Cいずれも偽の時に実⾏したいケース } // ifの⼊れ⼦ if (式A) { if (式B) { // AとBが真の時に実⾏したいケース } }
41. 三項演算⼦は簡単な if~else の関係を表すので便利で す。 // 三項演算⼦ const zero = 0 const a = zero < 1 ? '太郎' : '⽥中' //これは下記のif⽂と(ほぼ)等価です。 const zero = 0 if (zero < 1) { const a = '太郎' } else { const a = '⽥中' }
42. switch ⽂ elseif を繰り返すとソースコードの⾒通しが悪くなっ てしまいます。 式の計算をひとまとめにして、⼀気に評価する⽅法が おすすめです。 そういった場合は switch ⽂を利⽤しましょう。
43. 以下のように記述します。 switch (式) { case ケースA: // 式がケースAに該当する時に実⾏される命令⽂。 break // 式の評価を中断する命令⽂ case ケースB: // 式がケースBに該当する時に実⾏される命令⽂ break // 式の評価を中断する命令⽂ default: //すべての該当するケースがなかった場合に実⾏したい命令⽂ }
44. switch ⽂の利⽤ケース // 1 ~100までのランダムな数字が返る関数 const rand = function(n) { return Math.floor(Math.random() * n) + 1 } const val = rand(10) switch (val) { case 1: break case 2: break case 3: break //省略 case 100: default: }
45. 複数の命令を実⾏したいケース switch (式) { case A: case B: case C: //例えば、case A case B case Cどれでも該当する場合は全てに⼊る。 }
46. 次回予告 次回は、関数の講義にはいります。 数学的な覚えるフェーズが続いてげんなりしてくるこ とかと思いますが、 次からはようやくプログラミングチックな楽しさが学 習できる関数になりますので 楽しみにしておいてください。