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

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

ygkn
June 20, 2019
Programming
0
110

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

ygkn

June 20, 2019
Tweet

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
370
距離関数を極める！ / SESSIONS 2024
gam0022
0
280
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
330
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Realtime API 入門
riofujimon
0
150
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Language of Interfaces
destraynor
154
24k
What's new in Ruby 2.0
geeforr
343
31k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Producing Creativity
orderedlist
PRO
341
39k

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