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
190
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
210
入門 React Hooks / Introduction of React Hooks
ygkn
0
210
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
710
エンジニア向け採用ピッチ資料
inusan
0
180
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
390
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
GraphRAGの仕組みまるわかり
tosuri13
8
510
童醫院敏捷轉型的實踐經驗
cclai999
0
210
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Team operations that are not burdened by SRE
kazatohiei
1
290
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Code Review Best Practice
trishagee
69
18k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Code Reviewing Like a Champion
maltzj
524
40k
It's Worth the Effort
3n
185
28k
Statistics for Hackers
jakevdp
799
220k
Thoughts on Productivity
jonyablonski
69
4.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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 のライブラリがあるよ!!!
ありがとうございました!