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
77
すぐに使える 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
69
Vue.jsで遊んでみよう
sshono1210
0
85
Other Decks in Programming
See All in Programming
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
610
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
180
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.5k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Deep Dive into Kotlin Flow
jmatsu
1
210
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.2k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
200
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.8k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
70
19k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
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]