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 JavaScript
Search
ygkn
June 20, 2019
Programming
0
93
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
180
入門 React Hooks / Introduction of React Hooks
ygkn
0
190
Other Decks in Programming
See All in Programming
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Temporalを取り巻く仕様を整理する
sajikix
0
110
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
CSC307 Lecture 06
javiergs
PRO
0
360
Trial
cairolibrary720
1
130
Introduction to GitOps
hwchiu
0
110
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Terraformテスト入門
msato
0
520
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Code Review Best Practice
trishagee
58
16k
Building Your Own Lightsaber
phodgson
101
5.9k
What's new in Ruby 2.0
geeforr
338
31k
Music & Morning Musume
bryan
43
5.9k
Rails Girls Zürich Keynote
gr2m
93
13k
Why Our Code Smells
bkeepers
PRO
332
56k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Practical Orchestrator
shlominoach
185
10k
It's Worth the Effort
3n
181
27k
Into the Great Unknown - MozCon
thekraken
20
1.3k
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 のライブラリがあるよ!!!
ありがとうございました!