$30 off During Our Annual Pro Sale. View Details »

すぐに使える ES2015 の基本構文3つ

すぐに使える ES2015 の基本構文3つ

JAM plus #1 - powered by tambourine.inc

ショウノシオリ

June 07, 2018
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

Transcript

  1. すぐに使える
    ES2015の基本構文3つ

    View Slide

  2. ショウノシオリ
    @shosho_egg
    https://medium.com/@s.shosho1210
    株式会社 chatbox
    エンジニア

    View Slide

  3. 「ES2015のこと何回か調べてんねんけど
     いまいち頭に入ってないねんな・・・」
     を脱すること。
    ()=>{} しか積極的に使ってない...
    今日の発表の目標

    View Slide

  4. そのためにすること
    ▷ 「ES2015?ES6?ES5?...あれ?」
    という名前の混乱について解決する
    ▷ 3つの超基本構文を習得する
    ○ let と const を使うようにする
    ○ `` で書く書き方を習得する
    ○ Class 構文の書き方を覚える

    View Slide

  5. 「ES2015?ES6?ES5?あれ?」
    という名前の混乱について解決する

    View Slide

  6. 結局正解は?
    ▷ ES2015
    ○ 今まではES1、ES2、...ES5というようにeditionごとに版が出てい

    ○ ES6(にあたるversion)からはES2015という表記に変更された
    ○ ES2015からは年度をつけており、実際ES2016などがでている
    ▷ 馴染みのあるedition表記でES6と呼ば
    れることがあるだけ
    ○ ES2016以降はあんまりedition表記で呼ばれてない印象

    View Slide

  7. 3つの超基本構文を習得する

    View Slide

  8. let と const を使うようにする

    View Slide

  9. let&const
    ▷ const:一切変更できない(再宣言不可、再代入不可)
    代入し直した場合
    宣言し直した場合
    var よりも安全な変数

    View Slide

  10. let&const
    ▷ let:代入はし直せる(再宣言不可、再代入可)
    var よりも安全な変数
    OK!
    代入し直した場合
    宣言し直した場合

    View Slide

  11. var / let /const の使い分け?
    ▷ {} によるブロックスコープが効く
    let&constのみを使うのがよい
    ○ var は二重宣言が可能だったがそのメリットはほとんどない
    ▷ 基本はconst、再代入するときだけlet
    ○ letは「許す」という意味があるので「const よりはゆるいんだな」
    と覚える

    View Slide

  12. `` で書く書き方を習得する

    View Slide

  13. Template Strings
    ▷ `` で文字列がかける
    ○ 改行を \n などと書かなくてもよい
    ○ 変数を ${} で埋め込める
    変数展開のできる文字列

    View Slide

  14. JavaScriptのクォーテーション?
    ▷ “” と ‘’ に違いはない
    ○ PHPでは違いあり。”” では変数展開される
    ▷ 文字列として”” ‘’ を使う場合は書き方に工夫が必要
    ○ 前に \ を書く必要がある

    View Slide

  15. Template Strings
    ▷ `` で書くと “” ‘’ のことを考えなくてもかける
    変数展開のできる文字列

    View Slide

  16. Class 構文の書き方を覚える

    View Slide

  17. Classes
    ▷ Classにすることでスッキリ見えやすくなる
    ○ クラスの継承もできる
    ○ 糖衣構文:よりわかりやすいシンプルな構造の書き換えた構文のこと
    prototypeベース構文の糖衣構文

    View Slide

  18. さすがにこの3つはこれで覚えたぞ!

    View Slide

  19. まとめ
    ▷ ES2015が正しい名前
    ○ ES6と呼ばれることもある、だけ。惑わされるな!
    ▷ 変数は基本 const を使おう
    ○ 代入し直したいときだけ let を
    ○ let は「許す!」と覚えよう
    ▷ 文字列は `` で書いとけば問題ない
    ○ 変数埋め込みの方法は知っておくと超便利
    ▷ Class構文超便利
    ○ prototypeを使うのはやめてClassで書くべし

    View Slide

  20. さらにレベルアップをするなら...
    ▷ 公式ドキュメント
    ○ https://babeljs.io/learn-es2015/
    ▷ おすすめ記事
    ○ もうはじめよう、ES6~ECMAScript6の基本構文まとめ
    (JavaScript)~
    ○ varよりすごいletとconst。(現代的JavaScriptおれおれアドベン
    トカレンダー2017 – 02日目)
    ○ ES2015(ES6) 入門

    View Slide

  21. Thanks!
    Any questions?
    You can find me at:
    @username
    [email protected]

    View Slide