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
JavaScriptのテンプレートリテラル / Template Literal of Jav...
Search
ygkn
June 20, 2019
Programming
0
110
JavaScriptのテンプレートリテラル / Template Literal of JavaScript
ygkn
June 20, 2019
Tweet
Share
More Decks by ygkn
See All by ygkn
カラースキームつくったよ / How to create color-scheme
ygkn
0
190
入門 React Hooks / Introduction of React Hooks
ygkn
0
190
Other Decks in Programming
See All in Programming
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
700
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
160
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
33k
Macとオーディオ再生 2024/11/02
yusukeito
0
280
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1.3k
WEBエンジニア向けAI活用入門
sutetotanuki
0
320
Realtime API 入門
riofujimon
0
130
Tuning GraphQL on Rails
pyama86
2
1.2k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.9k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
160
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
110
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Producing Creativity
orderedlist
PRO
341
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Speed Design
sergeychernyshev
24
580
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Embracing the Ebb and Flow
colly
84
4.5k
Visualization
eitanlees
145
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A designer walks into a library…
pauljervisheath
202
24k
Transcript
JavaScript の テンプレートリテラル やぎちゃん
自己紹介
文字をくっつけよう!
文字をくっつけよう!
もじぴったん
None
+演算子のなところ 加算?結合?
+演算子のなところ 加算?結合?
+演算子のなところ 加算?結合?
文字列の結合?
テンプレートリテラルで書く
さっきの
テンプレートリテラルで書く
テンプレートリテラルで書く
One more thing...
None
None
None
None
None
とはならない!
None
これ is 何?
None
これ is 何? タグ付きテンプレート文字列 →テンプレートリテラルで書かれた文字列(の配列)と埋め込まれた変数を受け取る関 数
タグ付きテンプレート文字列の例 (from MDN)
None
None
None
タグ付きテンプレート文字列と @emotion/styled (styled-componentsも可)
Styled Components?
Styled Components?
Styled Components? 一種のHOC
Styled Components?
Styled Components?
まとめ!!! • テンプレートリテラルは文字の連結だけじゃないよ! • 文字列と埋め込む変数を別々に関数に渡すのでいろいろできるよ!! • ↑の例として SQL や CSS
in JS のライブラリがあるよ!!!
ありがとうございました!