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
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
220
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
300
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
460
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
50
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
56
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k

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