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

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

ygkn
June 20, 2019
Programming
0
160

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の使いどころ
kanayannet
0
100
ニックトレイン登壇資料
ryotakurokawa
0
140
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
体得しよう！RSA暗号の原理と解読
laysakura
3
540
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
750
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
990
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
240
安全に倒し切るリリースをするために：15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.4k
フロントエンドテストの育て方
quramy
9
2.6k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.8k

Featured

See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
Into the Great Unknown - MozCon
thekraken
36
1.7k
For a Future-Friendly Web
brad_frost
176
9.6k
Building Adaptive Systems
keathley
41
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Your Own Lightsaber
phodgson
104
6.3k
Automating Front-end Workflow
addyosmani
1369
200k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Gamification - CAS2011
davidbonilla
81
5.2k
Done Done
chrislema
183
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. ありがとうございました！