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

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

Avatar for ygkn ygkn
June 20, 2019
Programming
0
170

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

Avatar for ygkn

ygkn

June 20, 2019
Tweet

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
Avatar for Koki Senda thousanda
0
410
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k
Lambda(Python)の リファクタリングが好きなんです
Avatar for komakichi komakichi
5
270
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
Avatar for hatsu hatsu38
2
120
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
330
開発者フレンドリーで顧客も満足？Platformの秘密
Avatar for ALGO ARTIS algoartis
0
210
ComposeでのPicture in Picture
Avatar for takathemax takathemax
0
130
LRパーサーはいいぞ
Avatar for ydah ydah
7
1.3k
Носок на сок
Avatar for Bo0oM bo0om
0
1.3k
ComposeでWebアプリを作る技術
Avatar for てべすてん tbsten
0
130
Vibe Coding の話をしよう
Avatar for schroneko schroneko
14
3.8k

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
23
2.7k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
7.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k

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