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
Zoneless Testing
rainerhahnekamp
0
120
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
210
たのしいparse.y
ydah
3
120
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
300
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
Security_for_introducing_eBPF
kentatada
0
110
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
170
これが俺の”自分戦略” プロセスを楽しんでいこう！ - Developers CAREER Boost 2024
niftycorp
PRO
0
190
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k

Featured

See All Featured
Thoughts on Productivity
jonyablonski
67
4.4k
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Rails Girls Zürich Keynote
gr2m
94
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Optimising Largest Contentful Paint
csswizardry
33
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. ありがとうございました！