Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
すぐに使える ES2015 の基本構文3つ
Search
ショウノシオリ
June 07, 2018
Programming
0
48
すぐに使える ES2015 の基本構文3つ
JAM plus #1 - powered by tambourine.inc
ショウノシオリ
June 07, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
150
開発チームのリーダーとしてどうあるべきか?
sshono1210
2
1.1k
Nuxt.js のディレクトリ
sshono1210
0
2.7k
Nuxt.js で SSR 対応する
sshono1210
0
2.1k
array_merge と array_push の違いについて
sshono1210
0
370
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
170
Vue.js の methods と computed
sshono1210
0
81
肌で感じたディレクションとマネジメント
sshono1210
0
37
Vue.jsで遊んでみよう
sshono1210
0
50
Other Decks in Programming
See All in Programming
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
CSC307 Lecture 07
javiergs
PRO
0
220
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
生成AIをkintoneに連携してみた
hideg
0
230
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Product Management LT会_クアンド新家
shinshin
0
320
CSC307 Lecture 14
javiergs
PRO
0
220
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
How NOT to make your DSL terrible
okuramasafumi
0
110
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
Embracing the Ebb and Flow
colly
81
4.3k
It's Worth the Effort
3n
181
27k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
A Tale of Four Properties
chriscoyier
155
22k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
A better future with KSS
kneath
231
17k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Why Our Code Smells
bkeepers
PRO
332
56k
Transcript
すぐに使える ES2015の基本構文3つ
ショウノシオリ @shosho_egg https://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]