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

Other Decks in Programming

See All in Programming
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
730
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
180
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
140
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
280
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
290

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
78
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
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. ありがとうございました！