クイズ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
   決定戦
   クイズ
   王
   

   View Slide

2. 第１問
   2
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

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.
   

   View Slide

4. ◼ 条件式における値の評価
   • 論理値以外の値を条件式として指定すると、以下のように判定される
   条件式の論理値判定
   true false
   0以外の数値
   1文字以上の文字列
   オブジェクト（中身が空でも）
   0
   空文字（""）
   undefined
   null
   4
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

5. ◼ データ型一覧
   5
   JavaScriptのデータ型は２種類に分類できる
   型の分類 代表的な型
   プリミティブ型
   （１つの値のみを持つ）
   数値、文字列、論理値
   null（値が存在しない）
   undefined（値が定義されていない）
   オブジェクト型
   （データの集合体）
   オブジェクト、関数、配列など
   5
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

6. 6
   オブジェクトの基本
   ◼ プロパティとメソッド
   • オブジェクトは、複数のデータの集合体である
   • オブジェクト内のデータには、オブジェクトの属性値を保持する「プロ
   パティ」と、何らかの操作を行う「メソッド」がある
   オブジェクト
   プロパティ メソッド
   6
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

7. 7
   オブジェクトの種類
   ◼ Objectオブジェクトはすべてのオブジェクトのベース
   Object
   String
   （文字列） Array
   （配列）
   Function
   （関数）
   ・toString()
   ・valueOf()
   ・hasOwnProperty()
   …
   7
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

8. 第２問
   8
   URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
   

   View Slide

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.
   

   View Slide

10. 10
    プリミティブ型の文字列
    ◼文字列リテラルは、以下の二種類
    • シングルクォート・ダブルクォートのどちらでも可
    'hoge'
    "hoge"
    10
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

12. 12
    JavaScriptの文字列は２種類
    ◼文字列にはプリミティブ型とオブジェクト型の二種類がある
    • 文字列リテラルはプリミティブ型となる
    let a = "hoge"; // プリミティブ型
    let b = new String("hoge"); // オブジェクト型
    12
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

13. プリミティブ型とラッパーオブジェクト
    プリミティブ型（文字列）
    "hoge"
    オブジェクト型（String）
    ・length
    ・replace()
    ・substr()
    "hoge"
    …
    ◼ プリミティブ型は１つの値だけ、オブジェクト型は複数のメソッド
    やプロパティを持つ
    13
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

15. 第３問
    15
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

17. 17
    オブジェクト生成の仕組み
    ◼ オブジェクト生成時の流れ
    ① オブジェクトの生成時に、コンストラクタという関数が実行される
    ② コンストラクタは、新しくオブジェクトを生成し、それを戻り値として
    返却する（このオブジェクトをインスタンスと呼ぶ）
    var list = new Array(1,2,3);
    list Arrayのコンストラクタ
    インスタンス
    17
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

18. ◼ プリミティブ型は値そのものを比較する
    ◼ オブジェクト型は参照しているオブジェクトが同じかどうかを
    比較する
    18
    値の比較、参照の比較
    a b
    "hoge" "hoge"
    18
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

20. 第４問
    20
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

22. ◼ プロパティを呼び出した場合、プリミティブ値から対応する
    ラッパーオブジェクトへの暗黙的な変換が行われる
    ラッパーオブジェクトへの暗黙的変換
    "hoge".length
    "hoge"
    ・length
    ・replace()
    ・substr()
    "hoge"
    …
    プリミティブ型
    ラッパーオブジェクト
    変換
    22
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

23. 第５問
    23
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

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.
    

    View Slide

25. 25
    配列のインデックス
    0 1 2
    10 20 30
    9
    99
    ◼ インデックスは連番でなくても割り振ることができる
    ◼ lengthプロパティは最大インデックス+1を返す
    25
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

26. 何問正解しましたか？
    26
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

27. 温泉の素（ニューヨク剤）をプレゼント！！
    27
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide

28. 温泉といえば・・・？
    コミッター募集中！
    28
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    https://ja.onsen.io/
    

    View Slide

29. ありがとうございました！
    29
    URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
    

    View Slide