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
200

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

Other Decks in Programming

See All in Programming
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
330
AHC051解法紹介
Avatar for eijirou eijirou
0
620
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
Avatar for Kazuya Sakamoto kazuyasakamoto
0
260
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
330
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
700
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
Avatar for アカツキゲームス_Tech akatsukigames_tech
0
150
Infer入門
Avatar for r1ru riru
4
1.6k
新世界の理解
Avatar for Akihito Koriyama koriym
0
140
兎に角、コードレビュー
Avatar for mitohato14 mitohato14
0
150
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
Avatar for SEGADevTech segadevtech
3
970
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
1
2.1k
tool ディレクティブを導入してみた感想
Avatar for Sugar Sato sgash708
1
150

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
890
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.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. ありがとうございました！