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
240
0

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

Avatar for ygkn

ygkn

June 20, 2019

More Decks by ygkn

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

Other Decks in Programming

See All in Programming
Symfony AI in Action - SymfonyLive Berlin 2026
Avatar for Christopher Hertel chr_hertel
1
150
【ディップ｜26年新卒研修資料】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
170
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
380
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
5
1.7k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
1
130
AIベース静的検査器の偽陽性率を抑える工夫3選
Avatar for Kuniwak orgachem
PRO
4
460
My daily life on Ruby
Avatar for Akira Matsuda a_matsuda
3
400
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
3
950
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.6k
エラー処理の温故知新 / history of error handling technic
Avatar for nakaryo ryotanakaya
7
1.9k
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
3
1.2k
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
360

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.9k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
300
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.8k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
230

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