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
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
250
Bedrock AgentCore ObservabilityによるAIエージェントの運用
Avatar for matsukada licux
8
560
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
130
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
410
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
Avatar for Kuniwak orgachem
PRO
17
3.7k
Go製CLIツールをnpmで配布するには
Avatar for syumai syumai
2
1.1k
Comparing decimals in Swift Testing
Avatar for 417.72KI 417_72ki
0
160
AWS Summit Japan 2024と2025の比較／はじめてのKiro、今あなたは岐路に立つ
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
260
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
11
2.8k
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
0
120
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
Avatar for Ucchiii ucchiii43
0
270

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
750
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k

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