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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ygkn ygkn
June 20, 2019
Programming
260
0

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

Avatar for ygkn

ygkn

June 20, 2019

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
9
4.4k
Loosening the Reins: Go Generics Get More Flexible
Avatar for kuro kuro_kurorrr
0
360
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
220
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
110
仕様駆動開発の消費期限
Avatar for watany watany
20
9.2k
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
290
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
640
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
4.1k
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
130
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
130
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
9.5k
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
780

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
490
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
220
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
270
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

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