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

javascriptの変数について学習します。

Transcript

1. 第⼀講義 変数と型
2. 変数とは javascript に限らず、プログラムにおいて、変数(variable)とは、デ ータに名前を与える機能のことである。 javascript では変数は、 宣⾔ 、 代⼊ 、 参照 を⾏うことができる。
3. 宣⾔とは javascript の変数は、特定の記号を必要としない。 そのかわり、この⽂字列は変数ですというキーワードを⽤いて、 宣⾔ を⾏う。 javascript において、変数の宣⾔は var or let or const を⽤いて ⾏う。 これらの違いと使い分けについては後で記述する。
4. 代⼊とは javascript において、変数を定義することを 代⼊ という。 代⼊は下記の通り、宣⾔と同時に⾏う、もしくは宣⾔と別に⾏う 事ができる。 基本的には前者(宣⾔と同時に⾏うケース)を使⽤すると覚えておい て欲しい。
5. 宣⾔と同時に⾏うケース var arg = 1 let arg2 = 1 const arg3 = 1 宣⾔と別々に⾏うケース var arg let arg2 arg = 1 arg = 2
6. javascript の⾔語的特徴として、ほぼなんでも変数に格納すること ができる。 この格納する数値や⽂字列などのことを、 値 という。 const integer = 1 // 数値 const string = '⽂字列' // ⽂字 const bool = true // 真偽値 const mu = null // 無 const func = function() {} // 関数。 ※関数ってなぁに?については後⽇やります。
7. 参照とは 変数に格納した値を使⽤することを、 参照 という。 const x = 1 const y = 2 console.log(x + y) // コンソールに3と出⼒される。
8. 型とは 型とは、コンピュータにおける値(データ)の種類の分類事を指す。 javascript では、6 つのプリミティブ型(基本データ型)と、Object 型がある。
9. プリミティブ型について プリミティブ型は(型⾃体の機能を)変更することができない値とし て定義されている。
10. Boolean 型(真偽型) 値には true もしくは false が⼊ります。 後々、講義でも改めて触れますが、javascript では何かを ⽐較 する と必ずこの型が返ります。
11. Null 型 Null 型は値が 何もない、無の状態である ことを⽰す null のみです。
12. Undefined 型 Undefined 型は 未定義の状態である 事を⽰す undefined のみです。
13. Number 型 Number 型は -(2^57-1) ~ 2^57-1 までの数値です。 多⾔語学習者が⼀番困惑する点なのですが、 整数 だけではなく、 浮動⼩数点数値 にもなりますし、 +⽅向∞(+Infinity) や -⽅向∞(-Infinity) 、NaN(not-a-number)とい う、記号も Number 型に含まれます。 ※後者３つは主にエラーとして、使われるケースが多い
14. String 型(⽂字列型) String 型は⽂字列全般を⽰します。
15. Symbol 型 ES6 で新しく定義された型、 ⼀度⽣成されると、⾃分⾃⾝以外とは⾃分 と全く同じ⼯程で作られようともマッチしない値 を作り出す型。 ライブラリ製作者でも無い限り使⽤しないので、詳細は省きま す。
16. Object 型について Object 型には⼤きく分けて２つの⽤法があります。 配列 と、 オブジェクト(連想配列) です。 ※Date型もありますが、関数での使い⽅がメインなので、後⽇や ります。
17. 配列について 配列 とはプログラミング⾔語において、データ項⽬を並べた表現 形式のことです。 以下のように記述します。 const number = [1, 2, 3, 4, 5] const string = ['apple', 'banana', 'cherry'] const mixed = [1, 'apple'] また、 配列 の中に 配列 を持つ事を他多次元配列といいます。 const array = [ [1, 2, 3, 4], [5, 6, 7, 8], ['apple', 'banana', 'cherry'] ];
18. 配列の値の参照 配列の値は直接参照することが可能です。 下記のように記述します、このときに使⽤する添字の事を スカラー型数値 と呼びます。 この概念が重要な⾔語も存在するので頭の⽚隅においておいてく ださい。 スカラー型添字は 0から順番 に振られていきます。 // 上の変数を使⽤しています。 console.log(number[0]) // 1 console.log(string[1]) // banana console.log(mixed[2]) // undefined or error
19. 多次元配列の値の参照 多次元配列の値の参照は以下のように⾏います。 // 変数名[親のキー][⼦配列のキー] console.log(array[2][0]) // apple console.log(array[0][3]) // 4
20. オブジェクト(連想配列)について オブジェクトとはデータを固める形式の⼀つです。 下記のように記述します。 const val1 = 1 /* { "プロパティ名": "値" } */ const obj = { key: 'value', key2: val1, key3: 2, }
21. また、プロパティ名と代⼊する変数名が同じ場合、プロパティ名 の省略が可能です。 const val2 = 0 const obj2 = { val2 }
22. オブジェクトの参照 下記のように参照できる。 console.log(obj.key) // value console.log(obj.key2) // 1 console.log(obj['key3']) // 2 console.log(obj.key3) // 2
23. プリミティブ型と参照型の具体的な違い プリミティブ型は、コピーを作成しても、元の変数の値は変化し ません。 let varA = 1 let varB = varA varB += 1 console.log(varB, varA) //２，1
24. 次に、参照型の挙動を⾒ていきましょう 下記のような、配列を宣⾔すると・・・ const array = [0, 1, 2] 内部的に、変数にはアドレスがセットされます 変数 アドレス array <#001> アドレス 値 <#001> [0,1,2] つまり、実質的に変数に結びついているのは アドレス です。
25. では、ここで変数のコピーを作成してみましょう。 const array2 = array この時にコピーされるのは 変数の値 のみです。 つまり、 アドレス がコピーされます。 これを内部的に⾒てみると次スライドのようになります。
26. 変数 アドレス array <#001> array2 <#001> アドレス 値 <#001> [0,1,2] これでどういう事が起きるかというと・・・
27. array.push(3) // 配列の最後尾に値を追加する関数 console.log(array2) // [0,1,2,3] 何もいじってないはずの変数Bの値が変化した︕
28. このとき内部的には、 array.push(3) // 配列の最後尾に値を追加する関数 上記の操作時にこんな状態になっています。 変数 アドレス array <#001> array2 <#001> アドレス 値 <#001> [0,1,2,3]
29. つまり、アドレスが⾒ている⼤本の値が変化するので、 array の変化に array2 の値が引きずられるわけです。 これは object(連想配列)でも同様の現象が起こることを留意してお いてください。
30. 参照型の変数で値渡しをしたい場合 ... (スプレッド演算⼦)を⽤いることで、アドレスを新しく作成し て値渡しができます。 const array = [0, 1, 2] const array2 = [...array] array.push(3) console.log(array, array2) // (4) [0, 1, 2, 3], (3) [0, 1, 2]
31. 変数の定義⽅法による動作の違い。 var 再代⼊・再定義可。 ley 再代⼊可・再定義不可。 const 再代⼊・再定義不可。
32. 再代⼊とは︖ 下記のような状態を指します。 let arg1 = 1 arg1 = 2 console.log(arg1) // 2
33. 再定義とは︖ 下記のような状態を指します var arg2 = 1 var arg2 console.log(arg2) // undefined
34. const の再代⼊のアレコレ javascript における再代⼊とは根本の変数の型が変化するような状 態にのみ適⽤されるため、 下記のような場合はエラーになりません。 const obj = { key1: 0, key2: 1, key3: 2, } obj.key3 = 0 console.log(obj) // {key1: 0, key2: 1, key3: 0} かなり便利かつ安全に使えるので、基本は const を利⽤する。 再代⼊が必要なケースでは let を使⽤する。と覚えておいてくだ さい。
35. varがヤベー理由。 なんでや︕var便利やろ︕ワイはvarを使うで︕ やめてください、お願いします。死んでしまいます。 理由は、主に次スライドからのような事故が起こる可能性がある からです。
36. Aさん︓純粋に⾜し算をする関数を作ったぞ︕ var sum = function (x, y) { return x + y } console.log(sum(1, 2)) // 3
38. Bさん︓２つの商品の価格を⾜した後、⾃動で消費税を計算する関 数が作りたいなぁ・・・せや、sumって関数作ろ。 var sum = function (x, y, z = 1.08) { return (x + y) * z }
40. Cさん︓えーと、ここは商品の数を⾜せばいいのか、お、Aさんが sumという関数を作ってるし使わせてもらおう。。。 const item1Num = 20 const item2Num = 30 console.log(sum(itemiNum, item2Num)) // 54 Cさん︓ファッ︕︕︕︕︕︕︖
41. Cさんの頭は︖でいっぱいになること請け合いです。 Aさんがconstで関数を作成していれば、Bさんはエラーが起こるの で気づけた⼿間になります。 こういう事を起こさないためにも、constとletの使い分けを覚えて おいてください。
42. 番外︓親の仇IE11 よーし、今⽇勉強したことを⽣かして業務ではconstとletでつかい わけするぞー まって。 IE11ではconstとletが使⽤できますが、挙動に⼤きな違いがありま す。
43. const arr = [] for (let i=0; i < 2; i++) { arr.push(function(){return i}) } console.log(arr.map(function(e){return e()}))// [2, 2] for (const v in [1, 2]) { } // エラー︕ こういう環境差異が起きないように、babelというツールを使⽤し てビルドするのが最近のjsの主流となっています。 ビルドについては、第13講座で実施予定です。 次回は条件式について詳しく学んでいきます。