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
190

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
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
230
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
8
1.4k
ReadMoreTextView
Avatar for Sungyong An fornewid
1
480
Create a website using Spatial Web
Avatar for Akio Itaya akkeylab
0
300
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
160
関数型まつりレポート for JuliaTokai #22
Avatar for GOTOH Shunsuke antimon2
0
150
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
1
120
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
390
datadog dash 2025 LLM observability for reliability and stability
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
110
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
110
生成AIで日々のエラー調査を進めたい
Avatar for aboy yuyaabo
0
650
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
220

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
940
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k

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