$30 off During Our Annual Pro Sale. View Details »
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
210
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
220
入門 React Hooks / Introduction of React Hooks
ygkn
0
210
Other Decks in Programming
See All in Programming
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
10
1.4k
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
790
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
karad
0
130
FluorTracer / RayTracingCamp11
kugimasa
0
240
SwiftUIで本格音ゲー実装してみた
hypebeans
0
460
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
740
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
110
マスタデータ問題、マイクロサービスでどう解くか
kts
0
110
Developing static sites with Ruby
okuramasafumi
0
310
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
160
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
150
生成AIを利用するだけでなく、投資できる組織へ
pospome
2
380
Featured
See All Featured
Design in an AI World
tapps
0
93
Into the Great Unknown - MozCon
thekraken
40
2.2k
Reality Check: Gamification 10 Years Later
codingconduct
0
1.9k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
290
Docker and Python
trallard
47
3.7k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.7k
Visualization
eitanlees
150
16k
How STYLIGHT went responsive
nonsquared
100
6k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
47k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
160
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
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 のライブラリがあるよ!!!
ありがとうございました!