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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ygkn ygkn
June 20, 2019
Programming
0
220

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
230
入門 React Hooks / Introduction of React Hooks
Avatar for ygkn ygkn
0
220

Other Decks in Programming

See All in Programming
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
160
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
180
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
190
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
270
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
570

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
75
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.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. ありがとうございました！