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
78
すぐに使える ES2015 の基本構文3つ
JAM plus #1 - powered by tambourine.inc
ショウノシオリ
June 07, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
220
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.3k
array_merge と array_push の違いについて
sshono1210
0
530
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
230
Vue.js の methods と computed
sshono1210
0
110
肌で感じたディレクションとマネジメント
sshono1210
0
70
Vue.jsで遊んでみよう
sshono1210
0
86
Other Decks in Programming
See All in Programming
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
testingを眺める
matumoto
1
140
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
はじめてのMaterial3 Expressive
ym223
2
900
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Speed Design
sergeychernyshev
32
1.1k
Statistics for Hackers
jakevdp
799
220k
Thoughts on Productivity
jonyablonski
70
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Become a Pro
speakerdeck
PRO
29
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Navigating Team Friction
lara
189
15k
Fireside Chat
paigeccino
39
3.6k
Documentation Writing (for coders)
carmenintech
74
5k
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]