Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ygkn ygkn
June 20, 2019
Programming
280
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
260
入門 React Hooks / Introduction of React Hooks
Avatar for ygkn ygkn
0
220

Other Decks in Programming

See All in Programming
Workers Cache を知る
Avatar for syumai syumai
0
360
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
990
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
990
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
150
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
260
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
300
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
0
440
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
3
810
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
Long Living Tokens, Die, Die, Die! (or: The One Ring is Banned in Modern)
Avatar for sylph01 sylph01
0
270
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.4k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
280
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
730
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
560
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
460
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
220

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