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
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
370
GAEログのコスト削減
mot_techtalk
0
120
時計仕掛けのCompose
mkeeda
1
290
sappoRo.R #12 初心者セッション
kosugitti
0
250
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
900
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
320
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.2k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160

Featured

See All Featured
Faster Mobile Websites
deanohume
306
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
67
4.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How GitHub (no longer) Works
holman
314
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.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. ありがとうございました！