クイズJavaScript王決定戦

HTML5 4th Anniversary＠GMO
秋のJavaScript祭＠富士通クラウドテクノロジーズ
Monaca UG TOKYO #7 〜忘年LT大会〜＠アシアル
で使ったスライドです。

Transcript

1. URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 1 JavaScript 決定戦 クイズ 王
2. 第１問 2 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
3. ◼ 以下の実行結果は？（A or B） 3 問題 let x = "0"; if(x) { console.log("A"); } else { console.log("B"); } 3 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
4. ◼ 条件式における値の評価 • 論理値以外の値を条件式として指定すると、以下のように判定される 条件式の論理値判定 true false 0以外の数値 1文字以上の文字列 オブジェクト（中身が空でも） 0 空文字（""） undefined null 4 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
5. ◼ データ型一覧 5 JavaScriptのデータ型は２種類に分類できる 型の分類 代表的な型 プリミティブ型 （１つの値のみを持つ） 数値、文字列、論理値 null（値が存在しない） undefined（値が定義されていない） オブジェクト型 （データの集合体） オブジェクト、関数、配列など 5 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
6. 6 オブジェクトの基本 ◼ プロパティとメソッド • オブジェクトは、複数のデータの集合体である • オブジェクト内のデータには、オブジェクトの属性値を保持する「プロ パティ」と、何らかの操作を行う「メソッド」がある オブジェクト プロパティ メソッド 6 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
7. 7 オブジェクトの種類 ◼ Objectオブジェクトはすべてのオブジェクトのベース Object String （文字列） Array （配列） Function （関数） ・toString() ・valueOf() ・hasOwnProperty() … 7 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
8. 第２問 8 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
9. ◼ 以下の実行結果は？（true or false） 9 問題 let a = "hoge"; let b = new String("hoge"); console.log(a == b); 9 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
10. 10 プリミティブ型の文字列 ◼文字列リテラルは、以下の二種類 • シングルクォート・ダブルクォートのどちらでも可 'hoge' "hoge" 10 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
11. 11 オブジェクトの生成 ◼ オブジェクトの生成方法 • Objectオブジェクトの生成は、オブジェクトリテラル{}で代用することが可能 • Arrayブジェクトの生成は、配列リテラル[]で代用することが可能 ◼オブジェクト生成の例 var 変数名 = new オブジェクトの型名(引数); var list = new Array(1,2,3); 11 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
12. 12 JavaScriptの文字列は２種類 ◼文字列にはプリミティブ型とオブジェクト型の二種類がある • 文字列リテラルはプリミティブ型となる let a = "hoge"; // プリミティブ型 let b = new String("hoge"); // オブジェクト型 12 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
13. プリミティブ型とラッパーオブジェクト プリミティブ型（文字列） "hoge" オブジェクト型（String） ・length ・replace() ・substr() "hoge" … ◼ プリミティブ型は１つの値だけ、オブジェクト型は複数のメソッド やプロパティを持つ 13 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
14. ◼ JavaScriptの等価演算子には二種類ある 14 等価演算子 演算子 説明 例 結果 == 緩やかな等価演算子 5 == '5' true === 厳密な等価演算子 5 === '5' false != 緩やかな不等価演算子 5 != '5' false !== 厳密な不等価演算子 5 !== '5' true 14 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
15. 第３問 15 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
16. ◼ 以下の実行結果は？（true or false） 16 問題 let a = new String("hoge"); let b = new String("hoge"); console.log(a === b); 16 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
17. 17 オブジェクト生成の仕組み ◼ オブジェクト生成時の流れ ① オブジェクトの生成時に、コンストラクタという関数が実行される ② コンストラクタは、新しくオブジェクトを生成し、それを戻り値として 返却する（このオブジェクトをインスタンスと呼ぶ） var list = new Array(1,2,3); list Arrayのコンストラクタ インスタンス 17 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
18. ◼ プリミティブ型は値そのものを比較する ◼ オブジェクト型は参照しているオブジェクトが同じかどうかを 比較する 18 値の比較、参照の比較 a b "hoge" "hoge" 18 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
19. 19 同じオブジェクトを参照している例 a b "hoge" "hoge" let a = new String("hoge"); let b = a; console.log(a == b); この場合は同じオブジェクトを 参照しているのでtrue 19 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
20. 第４問 20 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
21. ◼ 以下の実行結果は？ 21 問題 console.log("hoge".length); A) 4 B) null C) undefined D) エラー 21 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
22. ◼ プロパティを呼び出した場合、プリミティブ値から対応する ラッパーオブジェクトへの暗黙的な変換が行われる ラッパーオブジェクトへの暗黙的変換 "hoge".length "hoge" ・length ・replace() ・substr() "hoge" … プリミティブ型 ラッパーオブジェクト 変換 22 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
23. 第５問 23 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
24. ◼ 以下の実行結果は？ 24 問題 let array = [10, 20, 30]; array[9] = 99; console.log(array.length); A) 3 B) 4 C) 9 D) 10 24 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
25. 25 配列のインデックス 0 1 2 10 20 30 9 99 ◼ インデックスは連番でなくても割り振ることができる ◼ lengthプロパティは最大インデックス+1を返す 25 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
26. 何問正解しましたか？ 26 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
27. 温泉の素（ニューヨク剤）をプレゼント！！ 27 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
28. 温泉といえば・・・？ コミッター募集中！ 28 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. https://ja.onsen.io/
29. ありがとうございました！ 29 URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.