Upgrade to Pro — share decks privately, control downloads, hide ads and more …

クイズJavaScript王決定戦

coboco
November 28, 2018

 クイズJavaScript王決定戦

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

coboco

November 28, 2018
Tweet

More Decks by coboco

Other Decks in Technology

Transcript

  1. URL : https://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 1
    JavaScript
    決定戦
    クイズ

    View Slide

  2. 第1問
    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のデータ型は2種類に分類できる
    型の分類 代表的な型
    プリミティブ型
    (1つの値のみを持つ)
    数値、文字列、論理値
    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. 第2問
    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の文字列は2種類
    ◼文字列にはプリミティブ型とオブジェクト型の二種類がある
    • 文字列リテラルはプリミティブ型となる
    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"

    ◼ プリミティブ型は1つの値だけ、オブジェクト型は複数のメソッド
    やプロパティを持つ
    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. 第3問
    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. 第4問
    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. 第5問
    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