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
99
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
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
480
XStateでReactに秩序を与えたい
gizm000
0
710
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
250
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
190
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
Kotlin 2.0 and Beyond
antonarhipov
2
150
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
260
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
550
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
A Tale of Four Properties
chriscoyier
155
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
The Invisible Side of Design
smashingmag
295
50k
What the flash - Photography Introduction
edds
67
11k
Web Components: a chance to create the future
zenorocha
308
42k
In The Pink: A Labor of Love
frogandcode
139
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Side Projects
sachag
451
42k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
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 のライブラリがあるよ!!!
ありがとうございました!