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
200

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

Other Decks in Programming

See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
400
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
170
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
Navigating Dependency Injection with Metro
Avatar for Zac Sweers zacsweers
3
2.5k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
400
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
Avatar for nokomoro3 nokomoro3
0
210
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
4
1.4k
CJK and Unicode From a PHP Committer
Avatar for てきめん tekimen youkidearitai
PRO
0
110
複雑なドメインに挑む.pdf
Avatar for Yuki Sakai yukisakai1225
5
1.2k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
Avatar for JaiChangPark itsmedreamwalker
0
150
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k

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