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

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

Avatar for ygkn ygkn
June 20, 2019
Programming
0
220

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

Avatar for ygkn

ygkn

June 20, 2019
Tweet

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
730
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
240
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
160
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
170
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
48
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Done Done
Avatar for chrislema chrislema
186
16k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
93
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
370
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k

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