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
.NET Frameworkでも汎用ホストが使いたい！
tomokusaba
0
200
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
楽しく向き合う例外対応
okutsu
0
700
sappoRo.R #12 初心者セッション
kosugitti
0
280
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.4k
Jakarta EE meets AI
ivargrimstad
0
500
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
920
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
540
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Code Reviewing Like a Champion
maltzj
521
39k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Gamification - CAS2011
davidbonilla
80
5.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Become a Pro
speakerdeck
PRO
26
5.2k
Making Projects Easy
brettharned
116
6k
A better future with KSS
kneath
238
17k
GraphQLとの向き合い方2022年版
quramy
44
14k

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