Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for ygkn ygkn
June 20, 2019
Programming
270
0

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

Avatar for ygkn

ygkn

June 20, 2019

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
160
AIは賢い。でも実行環境は？ CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
Avatar for curekoshimizu curekoshimizu
1
250
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.1k
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
1
370
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.9k
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
460
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
3k
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
1k
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
940
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
120
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
260
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
380

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
680
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Building an army of robots
Avatar for Kyle Neath kneath
307
46k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
530
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
320

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