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

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

ygkn
June 20, 2019
Programming
0
160

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
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
Vibe Coding の話をしよう
schroneko
10
2.5k
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.1k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
3
520
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
API for docs
soutaro
2
1.4k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1.1k
Making TCPSocket.new "Happy"!
coe401_
1
1.6k
設計の本質：コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
4
630
ComposeでWebアプリを作る技術
tbsten
0
120
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
680

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Documentation Writing (for coders)
carmenintech
69
4.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Speed Design
sergeychernyshev
29
900
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Docker and Python
trallard
44
3.3k
The Pragmatic Product Professional
lauravandoore
33
6.5k
How to train your dragon (web standard)
notwaldorf
90
6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k

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