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

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

ygkn
June 20, 2019
Programming
0
140

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
200
入門 React Hooks / Introduction of React Hooks
ygkn
0
200

Other Decks in Programming

See All in Programming
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Grafana Cloudとソラカメ
devoc
0
170
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
470
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
CI改善もDatadogとともに
taumu
0
120
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
2
410
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
楽しく向き合う例外対応
okutsu
0
110
技術を根付かせる / How to make technology take root
kubode
1
250
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
定理証明プラットフォーム lapisla.net
abap34
1
1.8k

Featured

See All Featured
How GitHub (no longer) Works
holman
314
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
What's in a price? How to price your products and services
michaelherold
244
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k

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