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

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

ygkn
June 20, 2019
Programming
0
120

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
190

Other Decks in Programming

See All in Programming
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
300
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Jakarta EE meets AI
ivargrimstad
0
230
선언형 UI에서의 상태관리
l2hyunwoo
0
150
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
1
120
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
120
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
ドメインイベント増えすぎ問題
h0r15h0
1
220

Featured

See All Featured
Navigating Team Friction
lara
183
15k
Building Adaptive Systems
keathley
38
2.3k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
BBQ
matthewcrist
85
9.4k
Mobile First: as difficult as doing things right
swwweet
222
9k
Adopting Sorbet at Scale
ufuk
73
9.1k
A designer walks into a library…
pauljervisheath
204
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
The Language of Interfaces
destraynor
154
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k

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. ありがとうございました！