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
74
すぐに使える ES2015 の基本構文3つ
JAM plus #1 - powered by tambourine.inc
ショウノシオリ
June 07, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
210
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
520
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
Vue.js の methods と computed
sshono1210
0
100
肌で感じたディレクションとマネジメント
sshono1210
0
65
Vue.jsで遊んでみよう
sshono1210
0
82
Other Decks in Programming
See All in Programming
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
210
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
810
構文解析器入門
ydah
7
1.8k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.3k
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
980
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
120
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
12
7.4k
GPUを計算資源として使おう!
primenumber
1
290
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
160
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
How GitHub (no longer) Works
holman
314
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Into the Great Unknown - MozCon
thekraken
40
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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]