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

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

ygkn
June 20, 2019
Programming
0
79

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

Other Decks in Programming

See All in Programming
What We Can Learn From OSS
inouehi
0
430
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
150
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
AppRouter Panel Talk
yosuke_furukawa
PRO
1
460
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
SIMD Parallel Programming with the Vector API
josepaumard
0
230
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
420

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
What's in a price? How to price your products and services
michaelherold
238
11k
Done Done
chrislema
178
15k
Designing for humans not robots
tammielis
248
25k
Building an army of robots
kneath
300
41k
A designer walks into a library…
pauljervisheath
201
23k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
How GitHub (no longer) Works
holman
305
140k

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