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

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

ygkn
June 20, 2019
Programming
0
130

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
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
ATDDで素早く安定した デリバリを実現しよう！
tonnsama
1
1.9k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
0
100
return文におけるstd::moveについて
onihusube
1
1.4k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
390
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
Azure AI Foundryのご紹介
qt_luigi
1
210
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
590
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
300
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k

Featured

See All Featured
Code Review Best Practice
trishagee
65
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Adopting Sorbet at Scale
ufuk
74
9.2k
How STYLIGHT went responsive
nonsquared
96
5.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Building Your Own Lightsaber
phodgson
104
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k

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