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

Other Decks in Programming

See All in Programming
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
Avatar for Yuya Matsumura yuya4
7
4.3k
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
Avatar for terry-u16 terryu16
6
1k
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
470
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
170
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
280
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
220
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osc25hi-duckdb
Avatar for Takahashi Ikki takahashiikki
0
240
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
420
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
310
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
6
3.1k
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
660
AI Agent Dojo ＃4: watsonx Orchestrate ADK体験
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
130

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.2k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
39
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
780
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
140
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
94

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