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
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
Avatar for BPStudy bpstudy
0
160
リッチエディターを安全に開発・運用するために
Avatar for una unachang113
1
280
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110
構文解析器入門
Avatar for ydah ydah
7
1.9k
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
0
220
Jakarta EE Meets AI
Avatar for ivargrimstad ivargrimstad
0
420
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
2
220
リバースエンジニアリング新時代へ！
GhidraとClaude DesktopをMCPで繋ぐ/findy202507
Avatar for @tkmru tkmru
4
1.6k
LLMは麻雀を知らなすぎるから俺が教育してやる
Avatar for po3rin po3rin
2
1.4k
MySQL9でベクトルカラム登場！PHP×AWSでのAI/類似検索はこう変わる
Avatar for Suguru Ohki suguruooki
1
260
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
Avatar for Ucchiii ucchiii43
0
230
ZeroETLで始めるDynamoDBとS3の連携
Avatar for afooooil afooooil
0
130

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
510
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

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