JAM plus #1 - powered by tambourine.inc
すぐに使えるES2015の基本構文3つ
View Slide
ショウノシオリ@shosho_egghttps://medium.com/@s.shosho1210株式会社 chatboxエンジニア
「ES2015のこと何回か調べてんねんけど いまいち頭に入ってないねんな・・・」 を脱すること。()=>{} しか積極的に使ってない...今日の発表の目標
そのためにすること▷ 「ES2015?ES6?ES5?...あれ?」という名前の混乱について解決する▷ 3つの超基本構文を習得する○ let と const を使うようにする○ `` で書く書き方を習得する○ Class 構文の書き方を覚える
「ES2015?ES6?ES5?あれ?」という名前の混乱について解決する
結局正解は?▷ ES2015○ 今まではES1、ES2、...ES5というようにeditionごとに版が出ていた○ ES6(にあたるversion)からはES2015という表記に変更された○ ES2015からは年度をつけており、実際ES2016などがでている▷ 馴染みのあるedition表記でES6と呼ばれることがあるだけ○ ES2016以降はあんまりedition表記で呼ばれてない印象
3つの超基本構文を習得する
let と const を使うようにする
let&const▷ const:一切変更できない(再宣言不可、再代入不可)代入し直した場合宣言し直した場合var よりも安全な変数
let&const▷ let:代入はし直せる(再宣言不可、再代入可)var よりも安全な変数OK!代入し直した場合宣言し直した場合
var / let /const の使い分け?▷ {} によるブロックスコープが効くlet&constのみを使うのがよい○ var は二重宣言が可能だったがそのメリットはほとんどない▷ 基本はconst、再代入するときだけlet○ letは「許す」という意味があるので「const よりはゆるいんだな」と覚える
`` で書く書き方を習得する
Template Strings▷ `` で文字列がかける○ 改行を \n などと書かなくてもよい○ 変数を ${} で埋め込める変数展開のできる文字列
JavaScriptのクォーテーション?▷ “” と ‘’ に違いはない○ PHPでは違いあり。”” では変数展開される▷ 文字列として”” ‘’ を使う場合は書き方に工夫が必要○ 前に \ を書く必要がある
Template Strings▷ `` で書くと “” ‘’ のことを考えなくてもかける変数展開のできる文字列
Class 構文の書き方を覚える
Classes▷ Classにすることでスッキリ見えやすくなる○ クラスの継承もできる○ 糖衣構文:よりわかりやすいシンプルな構造の書き換えた構文のことprototypeベース構文の糖衣構文
さすがにこの3つはこれで覚えたぞ!
まとめ▷ ES2015が正しい名前○ ES6と呼ばれることもある、だけ。惑わされるな!▷ 変数は基本 const を使おう○ 代入し直したいときだけ let を○ let は「許す!」と覚えよう▷ 文字列は `` で書いとけば問題ない○ 変数埋め込みの方法は知っておくと超便利▷ Class構文超便利○ prototypeを使うのはやめてClassで書くべし
さらにレベルアップをするなら...▷ 公式ドキュメント○ https://babeljs.io/learn-es2015/▷ おすすめ記事○ もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~○ varよりすごいletとconst。(現代的JavaScriptおれおれアドベントカレンダー2017 – 02日目)○ ES2015(ES6) 入門
Thanks!Any questions?You can find me at:@username[email protected]