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

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

JAM plus #1 - powered by tambourine.inc

C385e96e5ddd25faba59e3e14fc3e019?s=128

ショウノシオリ

June 07, 2018
Tweet

Transcript

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

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

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

  4. そのためにすること ▷ 「ES2015?ES6?ES5?...あれ?」 という名前の混乱について解決する ▷ 3つの超基本構文を習得する ◦ let と const

    を使うようにする ◦ `` で書く書き方を習得する ◦ Class 構文の書き方を覚える
  5. 「ES2015?ES6?ES5?あれ?」 という名前の混乱について解決する

  6. 結局正解は? ▷ ES2015 ◦ 今まではES1、ES2、...ES5というようにeditionごとに版が出てい た ◦ ES6(にあたるversion)からはES2015という表記に変更された ◦ ES2015からは年度をつけており、実際ES2016などがでている

    ▷ 馴染みのあるedition表記でES6と呼ば れることがあるだけ ◦ ES2016以降はあんまりedition表記で呼ばれてない印象
  7. 3つの超基本構文を習得する

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

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

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

  11. var / let /const の使い分け? ▷ {} によるブロックスコープが効く let&constのみを使うのがよい ◦

    var は二重宣言が可能だったがそのメリットはほとんどない ▷ 基本はconst、再代入するときだけlet ◦ letは「許す」という意味があるので「const よりはゆるいんだな」 と覚える
  12. `` で書く書き方を習得する

  13. Template Strings ▷ `` で文字列がかける ◦ 改行を \n などと書かなくてもよい ◦

    変数を ${} で埋め込める 変数展開のできる文字列
  14. JavaScriptのクォーテーション? ▷ “” と ‘’ に違いはない ◦ PHPでは違いあり。”” では変数展開される ▷

    文字列として”” ‘’ を使う場合は書き方に工夫が必要 ◦ 前に \ を書く必要がある
  15. Template Strings ▷ `` で書くと “” ‘’ のことを考えなくてもかける 変数展開のできる文字列

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

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

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

  19. まとめ ▷ ES2015が正しい名前 ◦ ES6と呼ばれることもある、だけ。惑わされるな! ▷ 変数は基本 const を使おう ◦

    代入し直したいときだけ let を ◦ let は「許す!」と覚えよう ▷ 文字列は `` で書いとけば問題ない ◦ 変数埋め込みの方法は知っておくと超便利 ▷ Class構文超便利 ◦ prototypeを使うのはやめてClassで書くべし
  20. さらにレベルアップをするなら... ▷ 公式ドキュメント ◦ https://babeljs.io/learn-es2015/ ▷ おすすめ記事 ◦ もうはじめよう、ES6~ECMAScript6の基本構文まとめ (JavaScript)~

    ◦ varよりすごいletとconst。(現代的JavaScriptおれおれアドベン トカレンダー2017 – 02日目) ◦ ES2015(ES6) 入門
  21. Thanks! Any questions? You can find me at: @username user@mail.me