Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
290
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
260
入門 React Hooks / Introduction of React Hooks
Avatar for ygkn ygkn
0
220

Other Decks in Programming

See All in Programming
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
190
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
Avatar for r-kagaya rkaga
6
2.1k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
520
8年前のNode.jsを動かして分かった、npm installの裏側
Avatar for Keisuke Ikeda keisukeikeda
0
110
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
Avatar for アキキー | Akihisa Ikeda akihisaikeda
0
230
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
160
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
200
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
Avatar for Kitano Yuichi kitano_yuichi
1
270
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
1.2k
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
900
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
380

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
450
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
640
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
5
54k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
68
60k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
570
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
320
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k

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