Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ygkn ygkn
June 20, 2019
Programming
230
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
240
入門 React Hooks / Introduction of React Hooks
Avatar for ygkn ygkn
0
220

Other Decks in Programming

See All in Programming
tRPCの概要と少しだけパフォーマンス
Avatar for Keigo Ebihara misoton665
2
230
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
170
エラー処理の温故知新 / history of error handling technic
Avatar for nakaryo ryotanakaya
0
140
2026_04_15_量子計算をパズルとして解く
Avatar for HideakiTakechi hideakitakechi
0
110
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
710
Kingdom of the Machine
Avatar for yui-knk yui_knk
2
820
VueエンジニアがReactを触って感じた_設計の違い
Avatar for kouki.miura koukimiura
0
180
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
780
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
1
170
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
200
SkillがSkillを生む：QA観点出しを自動化した
Avatar for sontixyou sontixyou
6
3.5k
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
850

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
210
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
220
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Done Done
Avatar for chrislema chrislema
186
16k

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