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

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

ygkn
June 20, 2019
Programming
0
110

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
190
入門 React Hooks / Introduction of React Hooks
ygkn
0
190

Other Decks in Programming

See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
150
C#/.NETのこれまでのふりかえり
tomokusaba
1
150
Realtime API 入門
riofujimon
0
100
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
490
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
390
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.2k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.3k
Synchronizationを支える技術
s_shimotori
1
150
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.5k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k

Featured

See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Language of Interfaces
destraynor
154
24k
A Modern Web Designer's Workflow
chriscoyier
692
190k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Designing Experiences People Love
moore
138
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k

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