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
210

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
Flutterアプリ運用の現場で役立った監視Tips 5選
Avatar for Takuma Osada ostk0069
1
490
Chart.jsで長い項目を表示するときのハマりどころ
Avatar for yumechi(Motoki Hirao) yumechi
0
140
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
5
5.8k
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
Verilator + Rust + gRPC と Efinix の RISC-V でAIアクセラレータをAIで作ってる話 RTLを語る会(18) 2025/11/08
Avatar for Ryuji Fuchikami ryuz88
0
360
2025 컴포즈 마법사
Avatar for Ji Sungbin jisungbin
0
140
flutter_kaigi_2025.pdf
Avatar for Kyohei Ito kyoheig3
1
350
TypeScript 5.9で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
250
「10分以内に機能を消せる状態」 の実現のためにやっていること
Avatar for おぎ togishima
1
520
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.6k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
240
Feature Flags Suck! - KubeCon Atlanta 2025
Avatar for Pete Hodgson phodgson
0
150

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
330

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