Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptのテンプレートリテラル / Template Literal of Jav...

ygkn
June 20, 2019
Programming
0
140

JavaScriptのテンプレートリテラル / Template Literal of JavaScript

ygkn

June 20, 2019
Tweet

More Decks by ygkn

See All by ygkn
カラースキームつくったよ / How to create color-scheme
ygkn
0
200
入門 React Hooks / Introduction of React Hooks
ygkn
0
200

Other Decks in Programming

See All in Programming
オレを救った Cline を紹介する
codehex
12
11k
Lambdaの監視、できてますか？Datadogを用いてLambdaを見守ろう
nealle
2
720
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
200
Learning Kotlin with detekt
inouehi
1
190
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
400
自力でTTSモデルを作った話
zgock999
0
120
Ça bouge du côté des animations CSS !
goetter
2
160
技術を改善し続ける
gumioji
0
180
ML.NETで始める機械学習
ymd65536
0
240
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
170
Swift Testingのモチベを上げたい
stoticdev
2
190
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Side Projects
sachag
452
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Statistics for Hackers
jakevdp
797
220k
A Tale of Four Properties
chriscoyier
158
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k

Transcript

  1. JavaScript の テンプレートリテラル やぎちゃん

  2. 自己紹介

  3. 文字をくっつけよう！

  4. 文字をくっつけよう！

  5. もじぴったん

  6. None

  7. +演算子のなところ 加算？結合？

  8. +演算子のなところ 加算？結合？

  9. +演算子のなところ 加算？結合？

  10. 文字列の結合？

  11. テンプレートリテラルで書く

  12. さっきの

  13. テンプレートリテラルで書く

  14. テンプレートリテラルで書く

  15. One more thing...

  16. None
  17. None
  18. None
  19. None
  20. None

  21. とはならない！

  22. None

  23. これ is 何？

  24. None

  25. これ is 何？ タグ付きテンプレート文字列 →テンプレートリテラルで書かれた文字列（の配列）と埋め込まれた変数を受け取る関 数

  26. タグ付きテンプレート文字列の例 (from MDN)

  27. None
  28. None
  29. None

  30. タグ付きテンプレート文字列と @emotion/styled (styled-componentsも可)

  31. Styled Components?

  32. Styled Components?

  33. Styled Components? 一種のHOC

  34. Styled Components?

  35. Styled Components?

  36. まとめ！！！ • テンプレートリテラルは文字の連結だけじゃないよ！ • 文字列と埋め込む変数を別々に関数に渡すのでいろいろできるよ！！ • ↑の例として SQL や CSS

    in JS のライブラリがあるよ！！！

  37. ありがとうございました！